Introducing Mobile Card Builder, part of the Quebec release
Since the release of Mobile Studio in 2019, the mobile team has been hard at work investigating how we can improve the overall mobile developer experience.
We’ve looked at expanding our developer tools to address feedback that designing a mobile card from scratch was overly complex – leading to the launch of Mobile Card Builder in Quebec. Now anyone can create card patterns from scratch through a simple point-and-click interface, opening the format to admins, developers, and anyone in between.
Check out this overview course of Mobile Card Builder in action!
What is Mobile Card Builder?
The ServiceNow mobile apps (ServiceNow Agent, Now Mobile, and Mobile Onboarding) use mobile cards to display record information from your instance onto your mobile screen.
But when building these new screens inside of Mobile Studio, the admin was limited to a small selection of basic card patterns that came with little variation. Unless you knew how to read, write, and parse JSON, your options for customization were limited.
With the introduction of Mobile Card Builder, that can be launched in Mobile Studio, admins are able to design cards and templates to visualize their ServiceNow data using a point-and-click graphical interface. The admin is presented with a visual canvas where they can arrange four basic card elements (containers, images, texts, and buttons) in any layout desired. Individual elements can be moved around, customized with fonts and colors, and presented in a way best suited for their use case. A built-in mobile preview gives the admin a view of what they are building as they are building it. Mobile Card Builder in short is a ‘what you see is what you get tool’ that enables citizen developers to be able to build custom cards without writing a single line of code.
What is changing and how will this impact you?
- When configuring new applets or customizing existing ones prior to Quebec – admins can change the patterns of their cards and assign fields to those patterns in the field configurations tab of their applet.
But in Quebec, this has changed. Admins will be prompted to click on ‘Customize in Mobile Card Builder’ to customize the template or fields for their cards.
And to launch this new designer tool -- admins will be required to install and activate the mobile card builder plugin. (Admins are required to install this plugin to configure new or existing applets inside of Mobile Studio)
If Mobile Card Builder is not activated on your instance, you will see a warning message when you attempt to access the card builder in Mobile Studio. - When configuring new applets inside of Mobile Studio – Mobile Card Builder will automatically use the new ‘view config’ record structure to map screens to their JSON layout, table fields, and conditional UI styles.
Prior to Quebec, these mappings were being applied to ‘item view’ records but it was a very manual process and created a burden on admins to manage those records on the backend
If you did not want to use our limited selection of card patterns you would have had to go into the backend and manually change the JSON of the item view record.
To address these concerns in Quebec, ServiceNow introduced ‘view config’ records which will replace the old ‘item view’ table structure. (You can think of ‘view config’ records as another name for card patterns) ‘View Configs’ are an improvement to the legacy ‘item view’ cards and Mobile Card Builder will allow admins to design their mobile cards without diving into the JSON.Depending on how you design your cards inside of Mobile Card Builder, the JSON of your ‘view config’ record on the backend will automatically update
The new JSON layout and base field mappings are now created in ‘view template’ records. These view templates can be reused for multiple screens with similar card layouts, greatly simplifying the record management for admins. If a modification to the layout or common set of fields is desired, an admin only has to change a single ‘view template’ record as opposed to a handful of different legacy ‘item view’ records. - Mobile Studio and Mobile Card Builder will continue supporting pre-existing applets and screens using the legacy ‘item view’ structure. These legacy cards can be opened and edited in Mobile Card Builder in the same manner as view configs. To learn more about view configurations, item card views, and limitations of legacy 'item view' here.
- Mobile Card Builder will introduce mobile card actions in Quebec which allows admins to add actionable buttons to the cards that they create in Mobile Card Builder. End users can now simply tap a button on their card to immediately execute the action such as accepting or rejecting an approval.
Prior to card actions, end users only had the ability to execute actions on list screens via a swipe or in the top menu, but these are not as easily discoverable
How to get started?
Checkout these hands-on labs and training videos below for a deep dive on tips and guidance to get started with Mobile Card Builder:
- Product Documentation: Check out the release notes on Mobile Card Builder
- Knowledge 2021 Lab – Sign up to the Create cards and templates with Mobile Card Builder to watch how you can get started
NowLearning on-demand - Register to the Mobile Card Builder on-demand course to get hands-on experience - Creator Toolbox Dev Program – Watch an overview on Getting started with Mobile Card Builder
- Creator Toolbox Dev Program – Take advantage of mobile card actions with our Getting started with Mobile Card Actions overview
