FlexCard

How to Call Apex Class In FlexCard

FlexCards are a powerful UI component used to display data dynamically in Salesforce OmniStudio. While FlexCards work efficiently with declarative data sources like DataRaptors and Integration Procedures, there are scenarios where custom business logic is required. In such cases, calling an Apex class from a FlexCard becomes essential. This article explains how to call an Apex class in a FlexCard, when it is needed, and how the data flows from Apex to the FlexCard UI. Why Call an Apex Class from a FlexCard? Although OmniStudio provides strong declarative tools, Apex is required in situations such as: Complex business logic that cannot be handled declaratively Data processing across multiple objects Advanced validations or calculations External integrations that require custom handling Performance optimization for large datasets Calling an Apex class allows FlexCards to display processed, real-time data while keeping the UI responsive. High-Level Architecture The typical flow looks like this: FlexCard calls an Integration Procedure Integration Procedure invokes an Apex class Apex processes the logic and returns data Integration Procedure passes the response back FlexCard renders the data on the UI FlexCards cannot call Apex directly, so Integration Procedures act as the bridge. Step 1: Create an Apex Class Start by creating an Apex class that contains the required logic. The class must: Be declared as global Have a @AuraEnabled method Return data in a format supported by OmniStudio (Map or List) Sample Apex Class global class AccountDataService {          @AuraEnabled     global static List<Account> getAccounts() {         return [             SELECT Id, Name, Industry             FROM Account             LIMIT 5         ];     } }   This example fetches basic Account data that will be displayed in the FlexCard. Step 2: Create an Integration Procedure Next, create an Integration Procedure to call the Apex class. Navigate to Integration Procedures Create a new Integration Procedure Add a Remote Action element Select Apex as the action type Enter the Apex class name and method name Example Configuration: Type: Apex Class Name: AccountDataService Method Name: getAccounts This step enables OmniStudio to execute the Apex logic. Step 3: Configure the Response Mapping Once the Apex method executes, it returns data to the Integration Procedure. Ensure the response is correctly mapped Use the Response Node to capture returned data Validate the response using Preview mode This ensures that the data structure is accessible to the FlexCard. On Preview Tab Step 4: Create or Update the FlexCard Now create or update a FlexCard to consume the Integration Procedure. Open the FlexCard designer Set the Data Source Type to Integration Procedure Select the Integration Procedure created earlier Map the response fields to the FlexCard elements At this stage, the FlexCard is connected to Apex indirectly via the Integration Procedure. Step 5: Display Data on the FlexCard Add UI elements such as: Text fields Data tables Icons or conditional styling Bind these elements to the response nodes returned by the Integration Procedure. For example: {{Account.Name}} {{Account.Industry}}   This displays the data retrieved from the Apex class. Step 6: Preview and Test Preview the FlexCard to verify: Apex class is executed successfully Integration Procedure returns data correctly FlexCard displays the expected output No runtime errors occur Testing ensures smooth data flow from Apex to UI. Best Practices for Calling Apex in FlexCards To ensure performance and maintainability, follow these best practices: Keep Apex logic lightweight and efficient Avoid unnecessary SOQL queries Always handle exceptions in Apex Return only required fields Use Integration Procedures for orchestration Test with large datasets to avoid performance issues These practices help maintain scalable and reliable FlexCard implementations. Common Use Cases Calling Apex from FlexCards is commonly used for: Aggregated or calculated data Conditional record processing External API data handling Custom eligibility checks Complex data transformations This approach extends FlexCard capabilities without compromising flexibility. Conclusion Calling an Apex class in a FlexCard is a powerful technique that enables advanced data handling in OmniStudio applications. While FlexCards do not directly invoke Apex, using an Integration Procedure as a bridge ensures a clean and scalable architecture. By combining declarative tools with Apex logic, developers can build dynamic, high-performing FlexCards that meet complex business requirements while maintaining a responsive user experience.

How to Call Apex Class In FlexCard Read More »

How to use SOSL in FlexCard (Vlocity)

FlexCards in OmniStudio provide a powerful way to display Salesforce data dynamically on the UI. While FlexCards commonly use DataRaptors and Integration Procedures as data sources, there are scenarios where SOSL (Salesforce Object Search Language) is more effective. SOSL is particularly useful when you need to search across multiple records or perform text-based searches efficiently. In this article, we will walk through how to use SOSL in a FlexCard to retrieve Account data and display it on the screen. Why Use SOSL in FlexCard? SOSL is designed for searching text across multiple objects or fields quickly. Using SOSL in a FlexCard is beneficial when: You need fast text-based searching You want to retrieve records based on search terms You need to fetch data without complex filters Performance is a priority SOSL works well when searching by names, keywords, or other text fields. Use Case Overview In this example, we will create a FlexCard that uses SOSL as its data source to retrieve Account records. The fetched data will then be displayed on the FlexCard canvas using standard UI elements. Step 1: Create a FlexCard and Select SOSL as Data Source Start by creating a new FlexCard. Open FlexCard Designer Create a new FlexCard Navigate to the Data Source section Set Data Source Type to SOSL After selecting SOSL, configure the SOSL query based on your requirement to retrieve Account data. Once configured: Click on Save & Fetch Verify that the data is successfully returned This step confirms that the SOSL query is working correctly. Step 2: Build the FlexCard UI After fetching the data, move to the Build section of the FlexCard. Navigate to Build > Fields Drag required fields onto the FlexCard canvas Bind the fields to the SOSL response data For example, you can display: Account Name Industry Phone Number The dragged fields automatically map to the returned SOSL data nodes. Step 3: Configure Field Mapping Ensure the fields are correctly mapped to the SOSL response. Verify the data path for each field Use the data tree to confirm field availability Adjust field labels and formatting as required Proper mapping ensures that the FlexCard displays accurate and consistent data. Step 4: Preview the FlexCard Once the UI configuration is complete: Click Preview Validate that Account data appears correctly Confirm that the SOSL query returns expected results Check for performance and formatting issues Previewing helps catch mapping or query errors early. Best Practices for Using SOSL in FlexCard When using SOSL in FlexCards, follow these best practices: Keep SOSL queries efficient and focused Avoid retrieving unnecessary fields Use SOSL for search-based use cases only Test performance with large datasets Ensure proper field-level security access These practices help maintain optimal performance and user experience. Common Use Cases SOSL in FlexCards is commonly used for: Global search functionality Keyword-based record lookup Quick customer or account searches Lightweight data retrieval for dashboards Fast UI response scenarios Conclusion Using SOSL as a data source in FlexCards is a simple yet powerful way to retrieve Salesforce data efficiently. By selecting SOSL in the data source configuration and binding fields to the UI, you can quickly build responsive FlexCards for search-based use cases. This approach reduces complexity while delivering fast and accurate results, making it an excellent option for scenarios where text-based searching is required.

How to use SOSL in FlexCard (Vlocity) Read More »

How to use Blank Card State In Flexcard.

FlexCards in OmniStudio provide a dynamic way to display data fetched from different sources such as DataRaptors and Integration Procedures. However, there are situations where a data source returns zero records. In such cases, showing a blank screen or broken UI can confuse users. To handle this gracefully, FlexCards provide a feature called Blank Card State. In this article, we will learn how to use the Blank Card State of a State element in FlexCard and understand how it helps manage scenarios where no data is returned. What Is Blank Card State? The Blank Card State is used when a FlexCard’s data source returns no records. Instead of showing empty fields or no UI at all, the Blank Card State allows you to display a custom message or layout, informing the user that no data is available. This improves user experience by clearly indicating that: No records were found The search returned no results Input parameters may be missing or incorrect Use Case Overview In this example, we will: Use a FlexCard State element Configure a DataRaptor Extract as the data source Display data when records are available Show a custom message when zero records are returned using the Blank Card State Step 1: Create a FlexCard and Configure DataRaptor Start by creating a new FlexCard. Open FlexCard Designer Create a new FlexCard In the Setup section, select DataRaptor as the data source Next, create a DataRaptor Extract that will fetch Account data. Map all the required fields such as Name, Phone, or other relevant fields Ensure the DataRaptor is correctly configured and tested This DataRaptor will act as the main data source for the FlexCard. Step 2: Configure Interface Name and Input Mapping Move to the Setup section of the FlexCard. In the Interface Name field, search for and select the DataRaptor name Navigate to the Input Map section Add a new input mapping with the following values: Key: AccName Value: Rec This configuration allows the FlexCard to pass a test parameter dynamically. The value entered in the test parameter will be used to search records in the DataRaptor. After completing the mapping: Click Save & Fetch Verify whether records are returned correctly Step 3: Build the FlexCard UI and Configure Blank Card State Now move to the Build section of the FlexCard. Drag the required fields from the Fields panel onto the canvas Add a State element (or clone an existing one) Enable the Blank Card State option in the State element Next, map the same DataRaptor name and input configuration used earlier to this State element. To display a message when no records are found: Drag a Text element inside the Blank Card State Enter a custom message in the Text property, such as: “No records found. Please provide valid input to search.” This message will be displayed whenever the DataRaptor returns zero records. Step 4: Preview and Test the FlexCard Preview the FlexCard to validate the functionality. Test Case 1: With Input Parameter Click Add Test Params Enter an Account name (for example, “Acme”) in the value field If a matching record exists, the FlexCard will display the record details Test Case 2: Without Input Parameter Leave the test parameter blank The DataRaptor query executes with an empty value, similar to: SELECT Id, Name, Phone WHERE Name = ”   This query returns null data The Blank Card State is triggered The custom message is displayed on the screen If we leave it without filling the parametere it will  get the query like “Select id ,Name ,phone where name = ” ”.  with this it return null data. Why Use Blank Card State? Using Blank Card State offers several benefits: Improves user experience Avoids empty or broken UI Clearly communicates no-data scenarios Supports dynamic search-based use cases Reduces confusion during testing and runtime It is especially useful when working with search parameters, filters, or optional inputs. Best Practices Always provide a meaningful message in the Blank Card State Keep the UI simple and informative Test both data and no-data scenarios Ensure input mappings are consistent across states Avoid complex logic inside the Blank Card State Conclusion The Blank Card State in FlexCard is a simple yet powerful feature that helps handle zero-record scenarios effectively. By configuring a State element with a Blank Card State, you can display custom messages and maintain a clean, user-friendly interface even when no data is returned. This approach ensures that FlexCards behave predictably and provide clear feedback to users, making your OmniStudio implementations more robust and professional.

How to use Blank Card State In Flexcard. Read More »

How to Pass Data Parent FlexCard to Child FlexCard

How to Pass Data from Parent FlexCard to Child FlexCard in OmniStudio In this post, we will learn how to pass data from a Parent FlexCard to a Child FlexCard in OmniStudio (Vlocity). We will create two FlexCards—one parent and one child—where the child FlexCard queries Account records and displays the data inside the parent FlexCard. This approach is commonly used to build modular, reusable, and dynamic UI components in Salesforce OmniStudio. Ways to Pass Data to a Child FlexCard in Vlocity There are two primary ways to pass data from a parent FlexCard to a child FlexCard: 1. Using Data Nodes Data Nodes are used to query Salesforce data and pass the results to a child FlexCard. Data Nodes fetch records using SOQL, DataRaptors, or Integration Procedures The queried data is automatically available to the child FlexCard Best suited when the child FlexCard needs record-based or structured data 2. Using Attributes Attributes act as input parameters passed from the parent FlexCard to the child FlexCard. Attributes enable dynamic customization Specific values can be passed directly to the child FlexCard Useful when the child FlexCard needs filtered or contextual data from the parent Using attributes allows us to pass specific values from the parent FlexCard to the child FlexCard efficiently. Step 1: Create the Child FlexCard to Query Account Data In this step, we create the child FlexCard that will query Account records. Create a new FlexCard with a proper Name and Description Configure a Data Source (SOQL, DataRaptor, or Integration Procedure) Query the required Account fields such as Name, Phone, or Industry Save and Fetch the data Drag the required fields from the Build section to the canvas This child FlexCard will be responsible for displaying Account-related information. In Child FlexCard Step 2: Enable Child Card Settings in the Child FlexCard To establish a parent-child relationship: Open the child FlexCard settings Set “Is Child Card” = true Save and Activate the FlexCard This step is mandatory; without enabling the child card option, the FlexCard cannot be embedded inside a parent FlexCard. In Parent Card On Parent Setup Panel On parent flexcard preview tab  On preview tab Step 3: Configure Parent FlexCard Now, create the parent FlexCard: Create a new FlexCard with a proper name and description If required, define Attributes that will be passed to the child FlexCard These attributes can include Account Name, Record Id, or other parameters Step 4: Access Parent Data in Child FlexCard To access data from the parent FlexCard inside the child FlexCard, use the following syntax: {Parent.attributeName}   Replace attributeName with the actual attribute or data node name defined in the parent FlexCard. This allows the child FlexCard to dynamically use values coming from the parent. Step 5: Add Child Card Component to Parent FlexCard In the parent FlexCard: Go to the Build section Drag and drop the CHILD CARD component onto the canvas Select the child FlexCard name Map attributes or data nodes as required Once configured, the child FlexCard will render inside the parent FlexCard and display Account data accordingly. Conclusion Passing data from a parent FlexCard to a child FlexCard is a powerful feature in OmniStudio that helps build scalable and reusable UI components. By using Data Nodes or Attributes, you can control how data flows between FlexCards and create flexible user experiences. This pattern is especially useful when working with Account details, related records, or contextual views within Salesforce.

How to Pass Data Parent FlexCard to Child FlexCard Read More »

How To Use Flexcard Context Variables(salesforce)

FlexCards are one of the most powerful UI components in Salesforce OmniStudio. They allow developers to build dynamic, data-driven user interfaces with minimal code. One of the key concepts that makes FlexCards flexible and reusable is the use of context variables. In this article, we will take a deep dive into FlexCard context variables, understand what they are, why they are important, and how to use them effectively in real-world Salesforce implementations. Understanding Context Variables in Salesforce In Salesforce, context variables are variables that store information related to the current execution context. These variables help determine how a component behaves, what data it retrieves, and how that data is displayed. Context variables are widely used across Salesforce features such as: OmniStudio FlexCards OmniScripts DataRaptors Integration Procedures Flows and Apex Within FlexCards, context variables act as connectors between: Data sources and UI components Parent and child FlexCards Runtime parameters and backend logic All context variables in FlexCards are case-sensitive, and incorrect casing can result in blank data or unexpected behavior. Why Context Variables Are Important in FlexCards Context variables allow FlexCards to: Dynamically adapt based on the current record Reuse the same FlexCard across multiple objects Pass data between parent and child components Control data queries without hardcoding values Improve maintainability and scalability Without context variables, FlexCards would be static and tightly coupled to specific records or objects. Types of Context Variables Available in FlexCards FlexCards support several global context variables that can be accessed anywhere within the card, including data sources, actions, and UI elements. Let’s explore each one in detail. 1. Label Context Variable What Is the Label Variable? The Label context variable is used to reference Salesforce Custom Labels inside a FlexCard. Custom labels help avoid hard-coded text and support localization. Syntax {Label.LabelName}   How It Works When a FlexCard is rendered, Salesforce retrieves the value of the custom label and displays it wherever the variable is used. When to Use Display static instructional text Support multi-language UI Maintain consistency across multiple FlexCards Using labels ensures that content changes do not require FlexCard edits. 2. Params Context Variable What Is Params? The Params variable stores parameters passed to the FlexCard at runtime. These values may come from: Test parameters in the FlexCard preview Parent components Navigation actions Embedded contexts Syntax {Params.parameterName}   Example {Params.Id}   Although {Params.Id} can return a record identifier, Salesforce recommends using {recordId} for accessing the current record context. Use Cases Passing search parameters Dynamic filtering Controlling behavior during preview 3. Parent Context Variable What Is Parent? The Parent context variable is used only inside child FlexCards. It allows the child card to reference attributes defined on the parent FlexCard. Syntax {Parent.attributeName}   Example {Parent.AccountId}   This retrieves the AccountId attribute defined on the parent FlexCard. Important Rules The child FlexCard must have Is Child Card = true Attributes must be explicitly defined on the parent The Parent variable cannot access undeclared attributes This mechanism enables strong parent-child communication without duplicating data queries. 4. recordId Context Variable What Is recordId? The recordId variable represents the current Salesforce record context in which the FlexCard is being used. Syntax {recordId}   Why recordId Is Recommended Salesforce strongly recommends using {recordId} instead of {Params.Id} because: It is always available in record-based contexts It improves clarity and consistency It reduces dependency on manually passed parameters Common Use Case When using a DataRaptor to fetch related records: Key: AccountId Value: {recordId} For previewing: Add a test parameter with Key: recordId Value: a valid Salesforce record Id 5. records Context Variable What Is records? The records variable holds all records returned by a data source, such as: SOQL queries DataRaptors Integration Procedures Syntax Examples Get all records: {records}   Get the first record: {records[0]}   Get a field from the first record: {records[0].Name}   Why records Is Important The records variable enables: Iteration through data lists Conditional rendering Display of dynamic datasets Access to individual records without extra queries Understanding records is essential for building data-rich FlexCards. Best Practices for Using Context Variables Always verify case sensitivity Prefer {recordId} for record context Define parent attributes explicitly Use labels instead of hard-coded text Test with real data using test parameters Avoid overloading child FlexCards with multiple queries Conclusion Context variables are the backbone of dynamic behavior in FlexCards. They allow developers to build reusable, scalable, and intelligent UI components that respond to real-time data and user context. By mastering variables like Label, Params, Parent, recordId, and records, you gain full control over how data flows through your FlexCards and how users experience your OmniStudio applications. A solid understanding of context variables is essential for anyone working with Salesforce OmniStudio, FlexCards, DataRaptors, and Integration Procedures.

How To Use Flexcard Context Variables(salesforce) Read More »

How To Enable Flex Card in OmniStudio(Vlocity) Salesforce

FlexCards are a core UI component of Salesforce OmniStudio (Vlocity). They allow you to display data in a responsive, reusable, and dynamic card-based layout without writing code. Before you can create or use FlexCards, you must ensure that OmniStudio and FlexCards are properly enabled in your Salesforce org. This article explains how to enable FlexCard in OmniStudio, including required permissions, settings, and verification steps. What Is a FlexCard in OmniStudio? A FlexCard is a lightweight UI component used to: Display Salesforce or external data Work with OmniScripts and Integration Procedures Show summary views, KPIs, or record details Reuse UI logic across apps and pages FlexCards are part of the OmniStudio Designer and rely on proper feature enablement and user access. Prerequisites to Enable FlexCard Before enabling FlexCards, make sure: OmniStudio (Vlocity) is installed in your org You have System Administrator access Required OmniStudio licenses are assigned Your org is Lightning Experience–enabled Step 1: Verify OmniStudio Is Installed FlexCards are available only if OmniStudio is installed. Steps: Go to Setup Search for Installed Packages Verify that OmniStudio, Vlocity, or Salesforce Industries package is installed If OmniStudio is not installed, FlexCards will not appear. you do not do the setting then this is the error Step 2: Enable OmniStudio Designer FlexCards are created inside OmniStudio Designer, so this must be enabled. Steps: Go to Setup Search for OmniStudio Settings Enable: OmniStudio Designer OmniStudio Runtime Save the settings This allows access to FlexCards, OmniScripts, DataRaptors, and Integration Procedures. Warning Tab Click Than Show This Link Remote Site Setting Step 3: Assign Required Permission Sets Even if OmniStudio is enabled, FlexCards will not be visible without proper permissions. Required Permission Sets: OmniStudio Admin OmniStudio Designer OmniStudio Runtime Steps: Go to Setup Open Users Select your user Click Permission Set Assignments Assign the required OmniStudio permission sets Log out and log in again after assignment. Fill the Tab Step 4: Enable FlexCard Feature Access FlexCards are controlled through OmniStudio capabilities. Steps: Go to Setup Search for Custom Permissions Ensure permissions related to: FlexCard OmniStudio UI Vlocity Cards are enabled via permission sets This ensures the FlexCard option appears in the Designer. Step 5: Access FlexCard from OmniStudio Designer Once enabled, you can access FlexCards. Steps: Click the App Launcher Search for OmniStudio Designer Open OmniStudio Designer Select FlexCards from the left panel Click New to create a FlexCard If FlexCard appears in the menu, it is successfully enabled. Step 6: Verify FlexCard Availability in Lightning App Builder FlexCards can be embedded into Lightning pages. Steps: Go to Lightning App Builder Edit a Record Page or App Page Search for FlexCard in Components Drag and drop it onto the page Configure required properties This confirms FlexCards are available at runtime. Common Issues and Troubleshooting FlexCard Not Visible in OmniStudio Designer Check OmniStudio permission sets Verify OmniStudio Designer is enabled Confirm package installation FlexCard Not Rendering on Page Ensure OmniStudio Runtime permission is assigned Activate the FlexCard Check Data Source configuration No Data Displayed Validate DataRaptor or Integration Procedure Confirm context variables like {recordId} Best Practices for Using FlexCards Always activate FlexCards before use Use reusable FlexCards for performance Prefer Integration Procedures for complex logic Test FlexCards using Preview mode Use context variables for dynamic data Conclusion Enabling FlexCards in OmniStudio is a foundational step for building modern, scalable Salesforce UI solutions. By ensuring OmniStudio is installed, permissions are assigned, and Designer access is enabled, you can start creating powerful FlexCards that integrate seamlessly with OmniScripts and Integration Procedures. Once enabled, FlexCards help you deliver faster, more interactive user experiences without writing Apex or Lightning Web Components.

How To Enable Flex Card in OmniStudio(Vlocity) Salesforce Read More »

How to Use Exposed Attributes in FlexCard (OmniStudio)

In OmniStudio (Vlocity), Exposed Attributes in a FlexCard allow you to pass data dynamically from a parent component—such as an OmniScript, another FlexCard, or a Lightning App Page—into a FlexCard. This makes FlexCards reusable, dynamic, and context-aware instead of hard-coded. In this article, we’ll understand what Exposed Attributes are, why they are used, and how to configure and use them step by step. What Are Exposed Attributes in FlexCard? Exposed Attributes are input parameters of a FlexCard. They act like variables that receive values from an external source. Instead of fetching data internally every time, the FlexCard can accept values such as: Record Id (AccountId, ContactId, etc.) Any custom field value Context data from OmniScript or another FlexCard Once exposed, these attributes can be used inside: Data Sources Conditional Visibility Text Fields Actions This makes the FlexCard highly reusable across different pages and contexts. Why Use Exposed Attributes? Using Exposed Attributes provides several benefits: Makes FlexCards reusable across multiple records Avoids hardcoding record IDs Enables communication between OmniScript and FlexCard Improves performance by passing context instead of refetching data Helps in dynamic UI rendering based on input values Steps to Use Exposed Attributes in FlexCard Step 1: Open or Create a FlexCard Go to OmniStudio → FlexCards Open an existing FlexCard or create a new one Switch to Edit Mode In Setup Exposed Attributes Step 2: Add an Exposed Attribute Click on the Setup tab (right panel) Scroll to Exposed Attributes Click Add New Now define the attribute: Name: Example – recordId Type: String (most commonly used) Default Value (optional): Can be left blank or set for testing Save the FlexCard after adding the attribute. Exposed Attributes Step 3: Use Exposed Attribute in Data Source Exposed Attributes are commonly used in Data Sources to fetch record-specific data. Go to the Data Source section In the Input Map, reference the exposed attribute using: {{recordId}}   Map it to the required parameter (e.g., Id in DataRaptor or Integration Procedure) This ensures data is fetched dynamically based on the value passed from outside. In Text Field Paas {Session.AttributeName} Step 4: Use Exposed Attributes in FlexCard Fields You can also use exposed attributes directly in UI elements. Examples: Text Field value: {{recordId}} Conditional Visibility: Show component only if recordId != null Actions: Pass the attribute to another OmniScript or FlexCard This allows UI behavior to change dynamically. Step 5: Pass Exposed Attribute from OmniScript When using a FlexCard inside an OmniScript: Drag the FlexCard element into the OmniScript canvas Go to Element Properties Under Input Parameters, map: Key: recordId Value: %ContextId% or any OmniScript variable Now the FlexCard receives the record Id from the OmniScript context. Step 6: Pass Exposed Attribute from Another FlexCard If calling a FlexCard from another FlexCard: Add the child FlexCard as an element In the Input Parameters, pass a value like: {{Id}}   Map it to the exposed attribute name This allows parent-child FlexCard communication. Common Use Cases of Exposed Attributes Showing Account details based on selected Account Reusing the same FlexCard on different record pages Passing ContextId from OmniScript to FlexCard Controlling UI visibility based on input values Calling Integration Procedures dynamically Best Practices Always use meaningful attribute names (e.g., accountId, caseId) Keep attribute type consistent with expected value Avoid unnecessary default values in production Use exposed attributes instead of hardcoded values Test using Preview and different record contexts Conclusion Exposed Attributes are a powerful feature in FlexCards that enable dynamic data passing and reusability. By defining exposed attributes and passing values from OmniScripts or parent FlexCards, you can build flexible, scalable, and performance-optimized OmniStudio solutions. Mastering exposed attributes is essential for real-world OmniStudio implementations.

How to Use Exposed Attributes in FlexCard (OmniStudio) Read More »

How To Maken Navigate Action in FlexCard

–: “In this post, we will create a Navigate Action to navigate to the 9to9clouds page. Step 1: Create a FlexCard: Set the data source to ‘None.’ Navigate to the ‘Build’ section. Under ‘DISPLAY,’ select ‘Action.’ Drag and drop the Action component onto your workspace.” /*! elementor – v3.18.0 – 20-12-2023 */ .elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=”.svg”]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block} Drage a Action Configure the Action: Inside the Action component, configure the properties. Set the target or action type to “Navigate.” Navigate Action Step :– 2  “Activate” the FlexCard click on “Preview”  And Click on Action  In Preview Tab Result /*! elementor-pro – v3.18.0 – 20-12-2023 */ .elementor-slides .swiper-slide-bg{background-size:cover;background-position:50%;background-repeat:no-repeat;min-width:100%;min-height:100%}.elementor-slides .swiper-slide-inner{background-repeat:no-repeat;background-position:50%;position:absolute;top:0;left:0;bottom:0;right:0;padding:50px;margin:auto}.elementor-slides .swiper-slide-inner,.elementor-slides .swiper-slide-inner:hover{color:#fff;display:flex}.elementor-slides .swiper-slide-inner .elementor-background-overlay{position:absolute;z-index:0;top:0;bottom:0;left:0;right:0}.elementor-slides .swiper-slide-inner .elementor-slide-content{position:relative;z-index:1;width:100%}.elementor-slides .swiper-slide-inner .elementor-slide-heading{font-size:35px;font-weight:700;line-height:1}.elementor-slides .swiper-slide-inner .elementor-slide-description{font-size:17px;line-height:1.4}.elementor-slides .swiper-slide-inner .elementor-slide-description:not(:last-child),.elementor-slides .swiper-slide-inner .elementor-slide-heading:not(:last-child){margin-bottom:30px}.elementor-slides .swiper-slide-inner .elementor-slide-button{border:2px solid #fff;color:#fff;background:transparent;display:inline-block}.elementor-slides .swiper-slide-inner .elementor-slide-button,.elementor-slides .swiper-slide-inner .elementor-slide-button:hover{background:transparent;color:inherit;text-decoration:none}.elementor–v-position-top .swiper-slide-inner{align-items:flex-start}.elementor–v-position-bottom .swiper-slide-inner{align-items:flex-end}.elementor–v-position-middle .swiper-slide-inner{align-items:center}.elementor–h-position-left .swiper-slide-inner{justify-content:flex-start}.elementor–h-position-right .swiper-slide-inner{justify-content:flex-end}.elementor–h-position-center .swiper-slide-inner{justify-content:center}body.rtl .elementor-widget-slides .elementor-swiper-button-next{left:10px;right:auto}body.rtl .elementor-widget-slides .elementor-swiper-button-prev{right:10px;left:auto}.elementor-slides-wrapper div:not(.swiper-slide)>.swiper-slide-inner{display:none}@media (max-width:767px){.elementor-slides .swiper-slide-inner{padding:30px}.elementor-slides .swiper-slide-inner .elementor-slide-heading{font-size:23px;line-height:1;margin-bottom:15px}.elementor-slides .swiper-slide-inner .elementor-slide-description{font-size:13px;line-height:1.4;margin-bottom:15px}} Thank You use Navigate Action in FlexCard we are creating vlocity suctions9to9cloudsWelcome in our website 9to9clouds.com HomeThanks for Viste! we are 9to9clouds for salesforce development Click for more content Previous slide Next slide Salesforce Guide =https://help.salesforce.com/s/articleView?id=sf.os_navigate_from_a_flexcard_with_the_navigate_action_27228.htm&type=5

How To Maken Navigate Action in FlexCard Read More »

How to make custom Edit block using Flexcard.

Step :- 1 Here we will create a flexcard. Create FlexCard After Creating FlexCard  ,Go to setup and Selcet Data Source as  Soql , – write this  Select id, Name , phone from Account  and click on save &fetch – Drag all the  field into canvas. Selecting fields   Drag an Action element on Canvas to perform  an action ,    In the property of action  Click on action , Select Flyout in action type . Select   Omniscript in Flyout Type . Create a omniscript  and fill  the Omniscript’s  Name  in the  Flyout Field. Send  the attributes to the Omniscript that we have created in key and value form :-         Fill all the above data according to this pic.in flexcard. Sending data through flyout Step 2 :-            Open the previously created omniscript. and drag a set value to recieve the Attribute  in the key value form. –  take a step  two fields in it and  a  integeration procedure in it. Create an ip   1:- Give same name to Name and Phone field as given in set value .   pass variable to field 2:- Take an  integeration procedure as above. Click on ip. — Click on  Remote property  and  in Extra payload  send all field. — Check  the  send only extra payload button . Sending data to ip Step 3  :– Open the  previously created Integeration procedure/IP.   — Take a DataRaptor post  Action in Integeration procedure . click on dataraptor and  go on additional input  map the data like below image. receive data from os Step 4 :-   Open the dataraptor and  map the data in dataraptor. — select the  account  from object section  and map fields from below pic .  Step :-5  Testing of Edit Functionality.  — Activate The  IP ,, Os ,, FlexCard. that we have created in  This Blog . — Preview the  FlexCard and we see in below image Before Edit.   Name =  Testimg Account.   Preview image Flex Card After edit Account Name. Refresh the page to see the change. Name is Change Manually In FlexCard . Change

How to make custom Edit block using Flexcard. Read More »

Scroll to Top