Configure the details for the appearance of cards for a mobile campaign
Summarize
Summary of Configure the Details for the Appearance of Cards for a Mobile Campaign
This guide details how to configure the appearance of cards within a mobile campaign on ServiceNow, enabling enhanced display options to improve campaign effectiveness. It includes instructions for creating item views using JSON code, which must be entered in the Item view JSON field of the Item view form.
Show less
Key Features
- Text Cards:
Use the provided JSON sample to define a text card's layout, including parameters for type, alignment, margins, and font settings. Adjust these values as needed, with default settings applied if left empty.
- Video Cards:
For video cards, implement a specific JSON structure to set parameters like CellId, TitleCellId, and SubtitleCellId, referencing the Employee Center table for accuracy.
- Image Cards:
The JSON template for image cards allows for customization of parameters such as Parallax, DisplayType, DisplayTheme, and FocusOnFaces. These settings dictate the visual presentation and text overlay behavior.
Key Outcomes
By configuring card appearances, ServiceNow customers can create visually appealing and effective mobile campaign presentations. Each card type's specific JSON configuration enhances usability and ensures a consistent and engaging user experience across mobile platforms.
Configure item views to provide the details that define the appearance of cards within a mobile campaign to enhance display options and make your campaign more effective.
When creating item views for cards for a mobile campaign, you need to construct required JSON code to define the appearance of the cards. You then provide this code in the Item view JSON field of the Item view form, as described in Create appearance templates for cards for a mobile campaign
Item view JSON for text cards
{
"Type": "ViewGroup",
"Distribution": "Equal",
"Orientation": "Vertical",
"Alignment": "Center",
"Margin": {
"Left": 0,
"Right": 0,
"Top": 0,
"Bottom": 0
},
"Children": [
{
"Type": "Text",
"CellId": "title",
"TextAlignment": "center",
"Margin": {
"Left": 16,
"Right": 16
},
"MaxLines": 3,
"Font": {
"Weight": "bold",
"Size": 36,
"MinSize": 24
},
}
],
}The parameters in the sample JSON code are as follows:
- The Type parameter value is not configurable.
- The CellId parameter value in the sample code is based on the value in the default base system version of the Employee Center table [sn_cd_content_mobile]. If the value in that table has changed, add the changed value in the sample JSON code.Note:To access the table to check the values, enter sn_cd_content_mobile.list in the navigation filter of your application navigator.
- The other parameter values in this sample code for text cards are standard setup values that provide a balanced appearance for the cards. You can customize these values.
Item view JSON for video cards
{
"Type": "Media-Video",
"CellId": "video_link.url",
"TitleCellId": "title",
"SubtitleCellId": "text"
}The parameters in the sample JSON code are as follows:
- The Type parameter value is not configurable.
- The CellId, TitleCellId, and SubtitleCellID parameter values in the sample code are based on the values from the default base system version of the Employee Center table [sn_cd_content_mobile]. If any of the values in that table have changed, add the changed value in the sample JSON code.Note:To access the table to check the values, enter sn_cd_content_mobile.list in the navigation filter of your application navigator.
Item view JSON code for image cards
{
"Type": "Media-Image",
"CellId": "image",
"TitleCellId": "title",
"SubtitleCellId": "text",
"Parallax": <true|false>,
"DisplayType": "<over|under>",
"DisplayTheme": "<light|dark>",
"FocusOnFaces": <true|false>
}The standard parameters in the sample JSON code are as follows:
- The Type parameter value is not configurable.
- The CellId, TitleCellId, and SubtitleCellID parameter values in the sample code are based on the values from the default base system version of the Employee Center table [sn_cd_content_mobile]. If any of the values in that table have changed, add the changed value in the sample JSON code.Note:To access the table to check the values, enter sn_cd_content_mobile.list in the navigation filter of your application navigator.
- Parallax
- Determines whether to create an illusion of depth and perspective on the image.
- true (the default): The text at the bottom of the card moves a slower speed than the background image, making the two objects appear as though they are on a different three-dimensional plane.
- false: The text at the bottom of the card and the image move at the same speed.
- DisplayType
- Determines whether text is displayed under the image (under)
or as an overlay on the image (over). The text includes the
title and the subtitle. For a smooth visual experience, use the same format for all
the card types. The default value is over.
Text displayed under image Text displayed as overlay - DisplayTheme
- Determines the color of the text overlay. This option is available only if the
display type is over. Use light for text
that is to be displayed over a dark background. The default value is
light.
DisplayTheme set to light DisplayTheme set to dark - FocusOnFaces
- When set to true (the default), images on an image card are cropped to where the faces are captured in the frame.