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.
- Using the source-code editor, in the .src folder’s index.html file, locate function JSForceConnectionExample().
- In the const connection object, enter the Salesforce Connected App's access token and the org’s instance URL.
- For
this.namespace = 'NAMESPACE'replace NAMESPACE with the namespace of the package. - Save the file.
- In the terminal console, run the command
npm run watchto restart the server and view the project locally. - 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.
These steps give you an example procedure for compiling and deploying an app to a CMS.
Use a Standard CMS (Not AEM)
Compile the dist folder.
- In the source-code editor, run the command
npm run build. The command compiles OmniOut into a dist folder.
- 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. - From the index.html file, select and copy the script tags that reference app.js files into your app’s index.html file.
- 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.
For guidance on AEM beyond the scope of these steps, refer to Integrating with Salesforce in the AEM help files.
Create the connection.
- Create the Salesforce connection in AEM.
- Confirm the connection between Salesforce and AEM.
Set the resource paths in your project.
- In the source-code editor, locate and open the ./src/index.js file of the OmniOut project.
- Uncomment this line:
import { setSldsResourcesUrl, setNewportResourcesUrl } from 'c/salesforceUtils'. - Locate and uncomment the setSldsResourcesUrl and the setNewportResourcesUrl functions.
- Save the file.
Add credentials to and deploy the app.
- In the source-code editor, open the ./aem.ui.apps/pom.xml file.
- 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 - 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.
- 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. - 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.
