In this post, we'll hands-on do the demo on FlexCards that was presented at TrailblazerDX 2023, and resources to learn more.
If you missed the session? Check out the slides below:
Demo
If you'd like to do the demo that was shown in the Unlock the Power of Drag-and-Drop User Interfaces session at TrailblazerDX 2023, follow the steps below:
Download the following data packs:
Create a developer org with OmniStudio installed, or if you're a partner, on Partner Learning Camp, create a Comms IDO (Partner Community > Learn tab > Start Learning under "Partner Learning Camp" > Demo Org tab > Choose IDO-Comms for the Demo Type)
Wait for an hour or two, and you'll get your credentials and a log in link via email, then log into the org
Go to the App Launcher and open OmniStudio FlexCards
Click on Import and import the file "Import First - Pay Bill.json"
Import the next file "Import Second - OmniStudio FlexCard Multipack.json"
Go to the App Launcher, open OmniScripts, open "Pay/Bill", and deactivate it, then activate it
Go to the App Launcher, open OmniStudio FlexCards, open the "RecentPayments" FlexCard, and deactivate it, then activate it
Open the "BillsAndPayments" FlexCard, and deactivate it, then activate it
Open an account record, go to the Setup Icon, and go to Edit Page
If you're on an org with Standard OmniStudio Run-Time enabled (the OmniStudio developer org), drag-and-drop the FlexCard component, and select "BillsAndPayments" for the FlexCard Name
If you're on an org with Standard OmniStudio Run-Time disabled (the Comms IDO), drag-and-drop the "BillsAndPayments" custom component - note the first time you open the Lightning App Builder, it can take 5-10 mins to load all the custom components.
Go back to the App Launcher, open OmniStudio FlexCards, and open the "BillsAndPayments" FlexCard, and click "New Version"
Add a Text element on the right side and enter the following text: Total Amount Due as of {TotalDueBy} {Currency} {TotalDueAmount}{TotalDueAmountCents}
Add an Action element on the right side and select the "Pay/Bill/English" OmniScript. In the Style tab, enter the text, make the text color white, and add the following to the Inline CSS Styles: background-image: linear-gradient(45deg, rgb(117, 59, 189) 6%, rgb(199, 36, 177) 53%); padding: 7px;
Add a FlexCard element on the bottom, and select the "RecentPayments" FlexCard, and for the Data Node: {record.RecentPayments}
Activate the FlexCard and go to Preview to test it out - note the OmniScript action will not work in the Preview
Go back to your account record and refresh the page to test it out
If you want to skip ahead and play around with the final result, import the following instead of step 5:
Missed the session? Check out the slides below:
Resources
Below is a list of resources to help you build your OmniStudio knowledge and get certified.
Get to Know OmniStudio
Build Guided Experiences with OmniStudio
OmniStudio Consultant Certification
OmniStudio Consultant Trailmix
OmniStudio Developer Certification
OmniStudio Developer Trailmix
Apex Hours OmniStudio Series: a great series that supplements the materials available on Trailhead ▪ Introduction to OmniStudio ▪ FlexCards Basics ▪ FlexCards Advanced ▪ OmniScripts Basics ▪ OmniScripts Advanced ▪ DataRaptors ▪ Integration Procedures Basics ▪ Integrations Procedures Advanced ▪ Industry DX Workbench and CLI ▪ OmniOut ▪ OmniStudio Best Practices
Partner Community and Partner Learning Camp *Partners Only* - check this for additional modules related to OmniStudio.
Closing Thoughts
Good luck on your OmniStudio learning journey and certification!
Comments