Download FlexCards and OmniScripts

Learning Objectives

After completing this unit, you’ll be able to:

• Download FlexCards to use off-platform.
• Download OmniScripts to use off-platform.
• Enable multilanguage support for OmniScripts in your OmniOut projects.

Download a FlexCard Off-Platform

Robert is excited. This is where he can see the results of his hard work in getting the systems ready. All four of his OmniOut projects are at the stage where he can download the FlexCards and OmniScripts, create the OmniOut projects, and then build the connection back into Salesforce. 

First up, Robert works on Simply Solar’s deployment to its Heroku app. He needs to download the energyPlan FlexCard to use off-platform. He breaks down the process into two stages. The first stage is to download the energyPlan FlexCard from the org. The second stage is to move the FlexCard into the Simply Solar OmniOut app.

Download the energyPlan FlexCard.

1. From the Salesforce org | OmniStudio FlexCards tab | open the active FlexCard you want to download.
2. Click the dropdown menu next to Deactivate, and select Download Off-Platform LWC.
3. From the Download window, click Done.
   
   The FlexCard downloads in a zipped folder.

Move the FlexCard to the OmniOut app.

1. From the downloads folder, unzip and open the FlexCard folder.
   
2. Copy the component in the c folder of the downloaded file into the ./src/modules directory or the ./src/modules/flexcards subdirectory of your OmniOut app. For example, copy the folder named energyPlan or FlexCard into the directory.
3. In the source-code editor, open the ./src/index.html file, and add the FlexCard component tag. For example, if the name of your component folder is energyPlan, and you placed it inside the ./src/modules/flexcards subdirectory, your component tag may look like this: <flexcards-energyPlan></flexcards-energyPlan>.
4. In the source-code editor, open the ./src/index.js file, and import and define your component:
   1. Import your component from the component's file path.
   2. Configure the FlexCard for HTML by defining a custom element and connecting it to your component.
5. If you’re using OmniStudio’s Newport styling, open Index.html, and uncomment the Newport style sheets. Otherwise, skip to the next step.
6. If your FlexCard has an image, in Index.html, include the SLDS styles with the following style sheet.
   

   <!-- 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">

   Complete this step whether or not you’re using Newport styling.
   Note: OmniOut supports image uploads of up to 30 MB.
   
   
7. Save your project.
8. In the terminal console, run the command npm run watch to restart the server and view your FlexCard locally.

Robert follows the same steps to download the FlexCards for the Healthy Benefits and Bull Market Investments projects. 

Download an OmniScript Off-Platform

Robert downloads the trackEnergyUseEnglish OmniScript to use off-platform in the same way as he did for the FlexCards. First, he downloads the active OmniScript from the org. However, with OmniScripts, in addition to downloading the metadata, Robert needs to copy the OmniScript’s component tags. 

Download an OmniScript from an org.

1. From the open OmniScript, click the dropdown menu next to Deactivate Version, and select Download Off-Platform LWC.
2. From the Downloading window, click Done.
   The OmniScript downloads in a zipped folder.
3. Click the dropdown menu next to Deactivate Version, select How To Launch, and copy and save one of the component tags at the top of the window to use later.
   

The second stage is to move the OmniScript into the OmniOut app. It’s similar to moving a FlexCard, with a few differences.

1. From the downloads folder, unzip and open the metadata folder.
2. Copy the component in the vlocityomniscript folder of the downloaded file into the ./src/modules directory or the ./src/modules/vlocityomniscript subdirectory of your OmniOut app. For example, copy the folder named trackEnergyUseEnglish into the directory.
3. In the source-code editor, open the ./src/index.html file, and replace the component tag with the OmniScript component tag copied from the How To Launch window.
4. Edit the component tag to replace c-- with vlocityomniscript-.
5. Save the file.
6. In the source-code editor, open the ./src/index.js file, and take these steps to import and define your component:
   1. Replace the sample component import with your component’s file path, for example: 'vlocityomniscript/trackEnergyPlanUseEnglish'.
   2. Replace the sample component tag with your modified component tag, and remove the closing tag and angle brackets. For example: 'vlocityomniscript-type-track-subtype-energyplanuse-english'.
7. If you’re using Newport styling, open Index.html, and uncomment the Newport style sheets. Otherwise, skip to the next step.
8. If you’re using a PDF Action or Type Ahead Block with Google maps, in Index.html, uncomment the appropriate script file.
   1. PDF Action: <script src="/vlocityresources/javascript/VlocityPdf.js"></script>.
   2. Type Ahead Block: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY_HERE}&libraries=places"></script>.
      
      Note: Replace YOUR_API_KEY_HERE with the API key for each customer.
      
      
9. If your OmniScript has an image or a file, in Index.html, include the SLDS styles. The image SLDS styles are the same for both FlexCards and OmniScript, but an OmniScript that holds files requires the following additional style sheet.
   
   

   <!-- 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">

   Complete this step whether or not you’re using Newport styling.
   
   
10. Save the project.
11. In the terminal console, run the command npm run watch to restart the server and view your OmniScript locally.

Configure Multilanguage Support

Europa Communications has customers across Europe and has set up its OmniStudio solution to provide agents with multilanguage support. Europa Comm wants to extend this support to all of its customers, wherever they may be. This means Robert needs to configure multilanguage support for the OmniOut app. 

First, when he downloads the OmniScript, he adjusts the component tag to add the run-mode="localScriptDef '' attribute. This forces a multilanguage OmniScript to use locally defined custom labels, which he wants. Without the attribute, a connection is made with Salesforce to retrieve the custom labels. Keeping the data local means faster performance at runtime. 

Configure multilanguage support in the project.

1. In the source-code editor command line, enter npm run customlabels LANGCODE replacing LANGCODE with a Salesforce language code, for example: npm run customlabels es.
   The command generates two files:
   1. LANGCODE.translations.js: Contains all of the user-defined custom and out-of-the-box labels for a single language.
   2. translations.js: Contains the exported translations for all of the custom labels.
2. In the source-code editor, open translations.js, and uncomment export lines to include the languages needed when the OmniScript is running.
3. Pass the language code using either a component tag property or URL parameter.
   1. Component Tag Property: Passes the language code in the OmniScript's component tag as a prefill property, for example: <my-omniscript prefill='\{"LanguageCode":"es"}'> </my-omniscript>.
   2. URL Parameter: Append the LanguageCode parameter to your URL endpoint and enter a Salesforce language code, for example: localhost:4002/myOmniScript?LanguageCode=es.
4. When using run-mode="localScriptDef" in the OmniScript component tag, select a LANGCODE.translations.js file and locate the key-value pairs to manually define custom translations for each language.
5. In the value field, enter the translation for that custom label, for example, “New”: ”Nuevo”.
6. Repeat steps 4 and 5 for each language and each label in each language.
   
   When you’re finished, it’s time to test the multilanguage OmniScript.
   
   
7. In the command line, enter and run the command npm run watch, and then click the localhost link that appears in the command line.
8. In your browser, edit the URL to include a language code, for example, localhost:4002/myOmniScript?LanguageCode=es.

The OmniScript should load in the correct language. 

The FlexCards and OmniScripts are added to the OmniOut app, and multilanguage support is configured for Europa Communications. 

Robert is ready to run OmniOut in development mode, and then move the app onto the CMS. Follow him to the next unit to learn how.

Resources

• Salesforce Metadata API Developer Guide: Translations
• Salesforce Help: Overview of Packages