Card template element attributes

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 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 Card template element attributes

    This reference guide details the required attributes for various card template elements used in ServiceNow’s Mobile Card Builder, specifically for the Yokohama release. These attributes define how each element behaves and displays content within card templates. When using the Mobile Card Builder tool, these attributes are created automatically, but understanding them is essential for customization or manual configuration.

    Show full answer Show less

    Attributes for Card Template Elements

    Each card template element type requires specific attributes to function correctly:

    • Text type: Includes attributes like TextValue for static text, FieldLabel to display field labels, FieldValue for field values in records, and FieldFunction to show record counts or grouping values.
    • Image type: Uses ImageURL to display static images via attachment SysIDs, and FieldValue to show images from record fields (e.g., avatar).
    • Button and MenuButton types: Attributes include Button to specify the function executed on tap (referencing function SysIDs), TextValue and FieldValue for displaying text or field data, and Icon to show icons via icon SysIDs.
    • Menu type: Supports TextValue for static text display and Icon for icon display using SysIDs.
    • HtmlText type: Supports attributes related to HTML content handling such as SearchExternalSource, HtmlReplaceMap, HtmlSanitizationAllowList, HtmlRemoveList, StringReplaceMap, and RenderType.

    Property Attributes

    These define additional visual properties for card template elements, enhancing customization:

    • BackgroundColor: Sets the background color using hex code or color theme names (e.g., Primary or #8a8a8a).
    • BorderColor: Defines the border color with the same color value formats.
    • TextColor: Specifies the text color similarly by hex code or theme name.

    Practical Considerations for ServiceNow Customers

    Understanding these attributes enables you to tailor card templates effectively for your mobile experience. Using the Mobile Card Builder simplifies attribute management by automating their creation. However, manual configuration may be necessary for advanced customizations or integrations, requiring familiarity with these attribute definitions and their configurations.

    By correctly applying these attributes, you can ensure that your card templates display the intended content, visuals, and interactive functions accurately, improving user engagement and functionality in mobile scenarios.

    Use this reference to determine which attributes to use for your card template elements.

    Each card template element has one or more required attributes that you must create. The sections below show the required attributes for each card template element type.

    Note:
    When using the Mobile Card Builder, the listed attributes do not need to be manually created, as the tool automatically creates the attributes in the background.

    Attributes for the Text type

    Table 1. Attributes for the Text type
    Name Description Configuration
    TextValue Used to display static text. Use the Translatable value field to enter the text to display.
    FieldLabel Used to display the label of a table field. Use the Value field to enter the name of a field. For example, short_description.
    FieldValue Used to display the value of a field in a record. Use the Value field to enter the name of a field. For example, short_description.
    FieldFunction Used to display either a count of records, or the value by which records are grouped.

    Attributes for the Image type

    Table 2. Attributes for the Image type
    Name Description Configuration
    ImageURL Used to display a static image from the attachment[sys_attachment] table on your instance. Use the Value field to enter a SysID for a record in the attachment[sys_attachment] table.
    FieldValue Used to display an image from a field in a record. Use the Value field to enter the name of a field. For example, avatar.

    Attributes for the Button and MenuButton types

    Table 3. Attributes for the Button and MenuButton types
    Name Description Configuration
    Button Used to select the function that runs when users tap a button. Use the Value field to enter the SysID of a function from the Functions[sys_sg_button] table. For details on creating functions, see Mobile functions.
    TextValue Used to display static text. Use the Value field to enter the name of a field. For example, short_description.
    FieldValue Used to display the value of a field in a record. Use the Value field to enter the name of a field. For example, avatar.
    Icon Used to display an icon. Use the Value field to enter the SysID of an icon record from the Icon[sys_sg_icon] table.

    Attributes for the Menu type

    Table 4. Attributes for the Menu type
    Name Description Configuration
    TextValue Used to display static text. Use the Value field to enter the name of a field. For example, short_description.
    Icon Used to display an icon. Use the Value field to enter the SysID of an icon record from the Icon[sys_sg_icon] table.

    Attributes for the HtmlText type

    Table 5. Attributes for the HtmlText type
    Name Description Configuration
    SearchExternalSource
    HtmlReplaceMap
    HtmlSanitizationAllowList
    HtmlRemoveList
    StringReplaceMap
    RenderType

    Property Attributes

    Use property attributes to define additional properties for your card template slot. These properties are not associated with a specific attribute type.

    Table 6. Attributes for the Menu type
    Name Description Configuration
    BackgroundColor Color of the background for the card template element. Use the Value field to define the color. Colors must be in color hex code format, or the name of a color theme. For example Primary or #8a8a8a.
    BorderColor Color of the border for the card template element. Use the Value field to define the color. Colors must be in color hex code format, or the name of a color theme. For example Primary or #8a8a8a.
    TextColor Color of the text or the card template element. Use the Value field to define the color. Colors must be in color hex code format, or the name of a color theme. For example Primary or #8a8a8a.