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.
