Mobile Card Builder components

  • Release version: Washingtondc
  • Updated February 1, 2024
  • 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 Mobile Card Builder components

    The Mobile Card Builder enables users to create custom mobile cards by integrating various components. Understanding the available components and their configuration options is essential for effectively organizing and displaying information within these cards.

    Show full answer Show less

    Key Features

    • Containers: These are used to group other components, allowing for organized layouts and controlled alignment and distribution of the nested components. Key configuration properties include height, width, margins, corner radius, direction, alignment, and distribution.
    • Images: Image components display visuals by linking to specific fields in records. Configuration options include mapped field, height, width, corner radius, margins, and scaling options (Fill or Fit).
    • Text: Text components present information, either as static text or dynamic content from fields. Configuration properties encompass field type, the text that appears, height, width, corner radius, margins, text alignment, maximum lines, font weight, font size, and text color.

    Key Outcomes

    By utilizing these components, ServiceNow customers can create visually appealing and informative mobile cards that enhance user experience. Proper configuration ensures that important information is displayed prominently and is accessible, leading to improved mobile interactions and user satisfaction.

    Learn about the components that make up mobile cards

    Adding and removing components

    Containers

    Containers components contain other components. A container can contain any card component, including another container. Use containers to organize your card components, and determine how the components within the container are aligned and distributed.

    Table 1. Container configuration properties
    Property Description
    Height Height of your container in pixels
    Width Width of your container in pixels. If this property is left blank, the container fills the available space.
    Margin top The top margin of your container in pixels
    Margin bottom The bottom margin of your container in pixels
    Margin left The left margin of your container in pixels
    Margin right The right margin of your container in pixels
    Corner radius The corner radius of your container. Increase this value to create rounded corners for your container.
    Container direction Determines orientation direction of the components within the container. Select from these values:
    • Horizontal
    • Vertical
    Alignment Determines the alignment of the components within the container. Select from these values:
    • Stretch
    • Center
    • Left
    • Right
    • Top
    • Bottom
    Distribution Determines the distribution of the components within the container. Select from these values:
    • Equal
    • Auto

    Images

    Image components are used to display an image. You define an image to display by selecting a field on your record that contains an image, for example, the Avatar field on a User record.

    Table 2. Image configuration properties
    Property Description
    Mapped field The field on your record containing the image.
    Note:
    When creating a card template, you will not be able to select a field. This selection is done when your card is associated with a specific screen.
    Height Height of your image in pixels
    Width Width of your image in pixels
    Corner radius The corner radius of your image. Increase this value to create rounded corners for your image.
    Top margin The top margin of your image in pixels
    Right margin The right margin of your image in pixels
    Bottom margin The bottom margin of your image in pixels
    Left margin The left margin of your image in pixels
    Scaling The scaling for your image. Select from these values:
    • Fill
    • Fit

    Text

    Text components display text on your card. This can be static text, or text from the label of value of a field. Use text components to the information your users need to see first when viewing lists of records.

    Table 3. Text configuration properties
    Property Description
    Field type The type of text field. Select from these values:
    • Field value
    • Field label
    • Static text
    Field type text The text that appears in the text component. This value is only used when you have selected Static text in the Field type property.
    Mapped field The field containing the text to be used. The text component will display either the label of the field or the value of the field, depending on what you select in the Field type property.
    Note:
    When creating a card template, you will not be able to select a field. This selection is done when your card is associated with a specific screen.
    Height Height of your text component in pixels
    Width Width of your text component in pixels
    Corner radius The corner radius of your text component. Increase this value to create rounded corners for your text component.
    Top margin The top margin of your text component in pixels
    Right margin The right margin of your text component in pixels
    Bottom margin The bottom margin of your text component in pixels
    Left margin The left margin of your text component in pixels
    Text alignment Alignment for the text in your component. Select from these values:
    • Left
    • Center
    • Right
    Max number of lines The maximum number of lines for the text in your element.
    Font weight The font weight for your text. Select from these values:
    • Regular
    • Bold
    Font size The font size for your text. Enter a numerical value.
    Text color The color of your text. The value for this property is an HTML color code, for example #A0522D for sienna.
    Note:
    You cannot change the background color of a text component, but you can place your text component within a container component, and change the container background color.