This video provides a quick overview of the Mobile Card Builder, and demonstrates how
to customize card views.
You can skip to these topics from the YouTube description for this video.
ServiceNow mobile apps display individual records in blocks, called cards.
These cards display within applets.
An applet may have one or more card views.
For example, tapping a card in a list opens a form card view.
The Mobile Card Builder allows you to customize these card views and create your own cards
from templates, without ever having to edit JSON code.
To use Mobile Card Builder, you need to install the Mobile Card Builder plugin.
You can install the plugin from the All Applications page or directly within Studio, as we’ll
see shortly.
Let’s look at the first card we want to customize.
We want to display the incident number on the top right, and the priority under the
description.
We can access Mobile Card Builder directly from Mobile Studio.
We select the app, open the Applets list and click the applet we want to customize.
Under Field Configuration, we click Customize in Mobile Card Builder.
Since we haven’t already installed the plugin, we’re prompted to install it now.
After the plugin is installed, we refresh the page.
When we select the customize option this time, the card view opens on the Mobile Card Builder
stage, and we can select a field to edit.
The Component configuration panel displays the options for the selected component.
The template used to create the card limits the available options.
For this field, we can only edit the field type, and the field it’s mapped to in the
table.
Let’s change it to display the incident number.
Now let’s remap the assigned to fields to priority for both the label and the value.
We preview the changes here.
To see how it looks with different records, we click Update Preview.
It looks good, so we save the changes.
Finally, we verify the changes in the mobile app when we refresh the applet.
For our next example, let’s customize a card that allows us to add components.
This time we access Mobile Card Builder directly from the navigation filter.
You can search for the card if you know part of its name.
For our example let’s search by application, which filters the list of applets.
And here’s the one we want.
For this example, let’s display the preview so we can see our changes in real time.
We want to add some components to display the user’s manager.
The add icons show us where we can add components.
Let’s start by adding a container, centering it, and giving it a background color so the
new fields will stand out.
For the first component, we add text for the label, …
…select Field Label for the type, …
…and select user manager for the variable.
We also add some padding on the left.
Next, we add an image to display the manager’s avatar.
We expand the manager fields to select the avatar, …
… then set the height and width, and make a few other adjustments.
Now let’s add the last component, the manager’s name.
And finally, we set some padding on both sides.
The changes look good, so let’s save them.
And here’s our customized card displayed in the mobile app.
For more information, see our product documentation, knowledge base, or podcast.
Or ask a question in the ServiceNow Community.