Deploy OmniOut Projects

Learning Objectives

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

• Run a project in development mode.
• Compile the dist folder and deploy to a CMS, including AEM.
• Build the connection back to Salesforce.

Run a Project in Development Mode

Robert is nearing the finish line with his OmniOut projects. As a consummate professional, he sticks to best practice and runs each project in development mode to check for any glitches. 

Run a project in development mode.

1. Using the source-code editor, in the .src folder’s index.html file, locate function JSForceConnectionExample().
2. In the const connection object, enter the Salesforce Connected App's access token and the org’s instance URL.
   
3. For this.namespace = 'NAMESPACE' replace NAMESPACE with the namespace of the package.
4. Save the file.
5. In the terminal console, run the command npm run watch to restart the server and view the project locally.
6. Check for errors, resolve, and test again as needed.

Robert runs all four projects in development mode, and everything looks good. Let’s move on to the next steps.

Deploy an App to a CMS

Robert needs to compile and deploy the apps to their respective platforms. Each customer has a standard CMS. Healthy Benefits uses the AEM CMS specifically, which requires additional steps.

Use a Standard CMS (Not AEM)

Compile the dist folder.

1. In the source-code editor, run the command npm run build. The command compiles OmniOut into a dist folder.
   
2. In the dist folder, confirm the following files and folders are present as appropriate.
   

   File/Folder	Required?	Description
   app.js files, including numbered files, such as 0.app.js	Yes	The JavaScript files required for your FlexCard or OmniScript.
   vlocityresources	Yes	The static resources required for your FlexCard or OmniScript.
   index.html	Optional	A sample index.html file that shows how to run the OmniOut project.
   newport	Optional	This file is required if you’re using the default Newport theme.
   slds	Optional	This file is required if you’re using the Lightning theme, if your OmniScript contains an Image or File element, or if your FlexCard contains an Image element.
   OmniScriptDocuSignReturnPage.html	Optional	This file is required if the OmniScript contains a DocuSign Action.
   OmniScriptLwcDocuSignViewPdf.html	Optional	This file is required if the OmniScript contains a DocuSign Action.

3. From the index.html file, select and copy the script tags that reference app.js files into your app’s index.html file.
4. From the index.html file, select and copy the OmniScript or FlexCard component tag into your app’s index.html file. Here’s an example of a FlexCard component tag: <flexcards-energyPlan run-mode="localScriptDef"> </flexcards-energyPlan>.

You’re finished compiling and deploying the app to a CMS. To deploy to AEM, you need to complete additional steps. 

Use the AEM CMS

Deploying an app to the AEM CMS, as Healthy Benefits is doing, requires setting the resource paths in the OmniOut project to load Lightning and Newport styles into AEM.

Create the connection.

1. Create the Salesforce connection in AEM.
2. Confirm the connection between Salesforce and AEM.

Set the resource paths in your project.

1. In the source-code editor, locate and open the ./src/index.js file of the OmniOut project.
2. Uncomment this line: import { setSldsResourcesUrl, setNewportResourcesUrl } from 'c/salesforceUtils'.
3. Locate and uncomment the setSldsResourcesUrl and the setNewportResourcesUrl functions.
4. Save the file.

Add credentials to and deploy the app.

1. In the source-code editor, open the ./aem.ui.apps/pom.xml file.
2. Edit the tags as follows.
   

   In this tag	Replace this value	With this value
   <crx.host>YOURHOST</crx.host>	YOURHOST	The AEM server hostname
   <crx.port>PORT</crx.port>	PORT	The AEM server port
   <crx.username>USERNAME</crx.username>	USERNAME	The AEM server username
   <crx.password>PASSWORD</crx.password>	PASSWORD	The AEM server password
   <publish.crx.host>HOST</publish.crx.host>	HOST	The AEM server hostname
   <publsh.crx.port>PORT</publish.crx.port>	PORT	The AEM server port
   <publish.crx.username>USERNAME</publish.crx.username>	USERNAME	The AEM server username
   <publish.crx.password>PASSWORD</publish.crx.password>	PASSWORD	The AEM server password

3. Run this command to deploy the application: npm run deploy:aem:clean:full.
   
   The OmniOut component is added to AEM.

Add the OmniScript to an AEM page. 

1. Enter the name of the OmniScript using the component tag name without brackets. For example, enter the tag for an OmniScript with Type = doc, Subtype = test, and Language = English, as follows: vlocityomniscript-doc-test-english.
2. Test the updated AEM site.

Robert can now view FlexCards and launch OmniScripts on the AEM page, so he’s nearly finished. The last task is to connect the app back to Salesforce.

Connect Back to Salesforce

Robert knows he needs to configure a connection object to connect his OmniOut projects to the Salesforce connected app he created earlier. A connection object exposes the instance URL, the namespace, and the request function. He knows each connection must be configured as required by each app. Luckily enough, Robert has a useful template to help him.  

Connection Objects for OmniOut with OmniScripts

If your OmniOut project contains OmniScripts, you must create an event handler to pass the connection object after receiving OmniOut's omnioutcomponentready event. 

Robert copies the correct format from his template to the ./src/index.js file. First, he creates an event handler and the connection object. He then configures additional connection options outside of OmniOut for each app.

Connection Objects for OmniOut with FlexCards and No OmniScripts

If your OmniOut project has FlexCards and no OmniScripts, use the initializeDatasourceSdk method to connect your app. 

Robert copies the correct format from his template to the ./src/index.js file (an event handler is not required if there are no OmniScripts). He then configures additional connection options outside of OmniOut for each app.

Presto! Robert has successfully brought four different OmniOut projects to a close. Each client is pleased to offer OmniStudio off-platform. 

He’s ready to write his blog report and excited to explore more of the advanced OmniStudio capabilities.

Resources

• Adobe Experience Manager Documentation: Integrating with Salesforce
• PDF: OmniOut Connection Object Templates