Vlocity Cards “Hello World”

I’ve recently completed a Vlocity Administrator and Developer Essentials course, and am preparing for the final exam.

There is a lot to say about the Vlocity industry accelerators. The official documentation and training certainly throws you in at the deep end. Here are some blog posts that will break each technical component up into ‘Hello world’ components.

What are Vlocity Cards?

Vlocity Cards are visual components that work in the larger Vlocity framework. They can display data and actions. The interface can be customized with HTML, CSS and Javascript (AngularJS).

Prerequisites:

  • Salesforce org
  • Vlocity app installed (not freely available unfortunately)
  • Knowledge of Salesforce Administration

 

Scenario:

Display ‘Hello World’ on a Vlocity card to a Contact record page.

Steps:

Step 1: Create Vlocity Layout & Card

We will create a layout, card and state with a really simple structure (In real life you would likely want lots of cards and lots of states to represent your data).

Screen Shot 2018-11-11 at 3.00.08 pm.png

We will create a simple layout that will query basic details from the Contact record and display them on a simple card. It will look like this:

Vlocity-Layout.png

Note about Data source: I used SOQL to make this as simple as possible. We will have a ‘Hello World’ DataRaptor blog post soon to go into the best way to acquire data into your cards.

Activate the Card and click the ‘Preview’ tab, and you should see a (badly) formatted card with a single ‘Call’ action:

Screen Shot 2018-11-11 at 2.49.47 pm.png

 

Step 2: Create a new Lightning Page for Contact

We want to see this card in action, so we create a new Lightning Page, and choose the ‘Vlocity Three Columns’ Template:

Screen Shot 2018-11-11 at 1.53.07 pm.png

Screen Shot 2018-11-11 at 3.03.43 pm.png

Activate the card (set as org default if you are just playing around in a sandbox) and then view a random Contact:

Screen Shot 2018-11-11 at 3.31.27 pm

Obviously the formatting is not right yet, so for the next blog post we will get into how to present this correctly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s