top of page

TrailblazerDX 2023 - Unlock the Power of Drag-and-Drop User Interfaces

Updated: Aug 31, 2023



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:

TDX_2023_Unlock_the_Power_of_Drag-and-Drop_User_Interfaces
.pdf
Download PDF • 4.69MB

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:

Import First - Pay Bill
.json
Download JSON • 53KB
Import Second - OmniStudio FlexCard Multipack
.json
Download JSON • 43KB
  1. 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)

  2. Wait for an hour or two, and you'll get your credentials and a log in link via email, then log into the org

  3. Go to the App Launcher and open OmniStudio FlexCards

  4. Click on Import and import the file "Import First - Pay Bill.json"

  5. Import the next file "Import Second - OmniStudio FlexCard Multipack.json"

  6. Go to the App Launcher, open OmniScripts, open "Pay/Bill", and deactivate it, then activate it

  7. Go to the App Launcher, open OmniStudio FlexCards, open the "RecentPayments" FlexCard, and deactivate it, then activate it

  8. Open the "BillsAndPayments" FlexCard, and deactivate it, then activate it

  9. Open an account record, go to the Setup Icon, and go to Edit Page

  10. 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

  11. 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.

  12. Go back to the App Launcher, open OmniStudio FlexCards, and open the "BillsAndPayments" FlexCard, and click "New Version"

  13. Add a Text element on the right side and enter the following text: Total Amount Due as of {TotalDueBy} {Currency} {TotalDueAmount}{TotalDueAmountCents}

  14. 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;

  15. Add a FlexCard element on the bottom, and select the "RecentPayments" FlexCard, and for the Data Node: {record.RecentPayments}

  16. Activate the FlexCard and go to Preview to test it out - note the OmniScript action will not work in the Preview

  17. 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:

Completed TDX23 DataPack
.json
Download JSON • 49KB

Missed the session? Check out the slides below:

TDX_2023_Unlock_the_Power_of_Drag-and-Drop_User_Interfaces
.pdf
Download PDF • 4.69MB

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!

78 views0 comments

Recent Posts

See All

Comments


bottom of page