Salesforce Docs Portal

Add a Flexcard LWC to OmniOut (Managed Package)

For the managed package runtime, download and configure a Flexcard to use it off-platform in your OmniOut project. Download your Flexcard LWC from the Flexcard Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Note
Note

If your Flexcard has a datasource, you must initialize a datasource when building a connection in your app as outlined in Step 11 in the workflow to run Flexcards off-platform. The step directs you to Create a Connection Object in OmniOut for Flexcards (Managed Package) to connect your app using the initializeDatasourceSdk and setConnection methods.

Required Versions

Available beginning Summer '21.

Before You Begin

  1. Open a Flexcard from Omnistudio Flexcards home tab in your Salesforce org, and click Activate from the submenu.
  2. Click the down arrow next to Activate, and click Download Off-Platform LWC.
  3. Click Done.
  4. Copy the component in the c folder of your downloaded file into the ./src/modules folder of your OmniOut project, or subdirectory such as ./src/modules/flexcards.
  5. In Visual Studio Code, open the ./src/index.html file add the Flexcard component tag. For example, if the name of your component folder is flexaccountproducts and is placed inside the ./src/modules/flexcards directory, your component tag can look like <flexcards-accountproducts run-mode="localScriptDef"></flexcards-accountproducts>.
  6. To import and define your component, open the ./src/index.js file and take these steps:

    1. Import your component from your component's file path.

      import FlexCardProducts from 'flexcards/accountproducts';

    2. Configure the Flexcard for HTML by defining a custom element and connecting it to your component.

      customElements.define('flexcards-accountproducts', buildCustomElementConstructor(FlexCardProducts));
  7. (Optional) In the Flexcard component tag, remove the run-mode="localScriptDef" attribute to check if the Flexcard is active in Salesforce.
    Note
    Note

    If run-mode isn’t present, a connection is made to retrieve the custom labels.

  8. (Optional) In Index.html, uncomment the Newport style sheets to apply Newport styling. 
    <link rel="stylesheet" type="text/css" href="/newport/assets/styles/vlocity-newport-design-system.min.css">
  9. In Index.html, include the SLDS styles even when using Newport styles, if the Image element exists in your Flexcard.

    Element

    Style Sheets

    Note

    Image 

    <!-- SLDS styles -->
<link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css">
<link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css">

    OmniOut supports image uploads up to 30 MB.
  10. Save your file.
  11. To restart the server and view your Flexcard locally, run the command npm run watch in your terminal console.