Configure the details for the appearance of cards for a mobile campaign

  • Release version: Yokohama
  • Updated January 30, 2025
  • 3 minutes to read
  • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Configure the details for the appearance of cards for a mobile campaign

    This guide explains how ServiceNow customers can customize the appearance of cards in mobile campaigns by configuring JSON code in the Item view JSON field of the Item view form. Proper configuration enhances the visual presentation and effectiveness of mobile campaigns by defining how text, video, and image cards display content.

    Show full answer Show less

    Configuring Item Views for Cards

    To customize card appearances, you must create or modify JSON code specifying card layout and content parameters. This JSON code is entered into the Item view JSON field within the corresponding item view form. If any JSON parameters are left empty or removed, default values are applied automatically.

    Card Types and Sample JSON Templates

    • Text Cards: Use a JSON structure defining layout properties like orientation, alignment, margin, and font details for the title text. The CellId should match the value from the Employee Center table sncdcontentmobile or be updated if the table values have changed.
    • Video Cards: Use JSON specifying media type as video with references to URL and text fields via CellId, TitleCellId, and SubtitleCellId. These IDs should align with the current sncdcontentmobile table values.
    • Image Cards: Use JSON defining image media type with parameters for image source and text fields, plus optional visual effects:

    Customizable Parameters for Image Cards

    • Parallax: Enables a depth illusion by moving text slower than the background image when set to true (default). Set false for synchronized movement.
    • DisplayType: Controls whether text appears over the image ("over", default) or beneath it ("under"). Consistency across card types is recommended for visual smoothness.
    • DisplayTheme: Applies only if DisplayType is "over". It sets text color for contrast, either "light" (default) for dark backgrounds or "dark" for light backgrounds.
    • FocusOnFaces: When true (default), crops images to highlight faces in the frame, improving visual relevance.

    Important Notes

    • The Type parameter in JSON code is fixed and cannot be changed.
    • Always verify CellId values against the current Employee Center table sncdcontentmobile by navigating to sncdcontentmobile.list in the application navigator.
    • If you want to use default values for any parameter in the image card JSON, you may delete that line from the JSON code.

    Practical Benefits

    By configuring these JSON templates accurately, ServiceNow customers can create visually appealing and consistent card layouts tailored to their mobile campaigns. This flexibility improves user engagement by controlling the presentation of text, video, and images according to campaign needs and branding guidelines.

    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

    Note:
    If any of the configurable values are empty or the line of code is removed, the default value is used.

    Item view JSON for text cards

    For a text card, copy this sample JSON code and paste it in the Item view JSON field within an item view form.
    {
      "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

    For a video card, copy this sample JSON code and paste it in the Item view JSON field within the item view form.
    {
      "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

    For an image card, copy this sample JSON code and set any values that differ from the default values. If you want to use the default values, you can delete that line of code. Once you have set your desired values, paste the JSON code in the Item view JSON field within the item view form.
    {
      "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.
    The custom parameters for the item view for image cards are as follows:
    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
    Text displayed under the image for display type configuration. Text displayed as overlay within image for display type configuration.
    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
    Text displayed in a light color for a display theme configuration. Text displayed in a dark color for display theme configuration.
    FocusOnFaces
    When set to true (the default), images on an image card are cropped to where the faces are captured in the frame.