Mobile Card Builder components

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 13분

    • Learn about the components that make up mobile cards

    Adding and removing components

    Buttons

    Button components allow users to perform an action when the button is selected. Use buttons to add actions to your cards.

    표 1. Button configuration properties
    Property Description
    Element ID The button's unique JSON ID attribute.
    Display
    Height Height of your button in pixels
    Width Width of your button in pixels. If this property is left blank, the button fills the available space.
    Corner radius The corner radius of your button. Increase this value to create rounded corners for your button.
    Margin top The top margin of your button in pixels
    Margin bottom The bottom margin of your button in pixels
    Margin left The left margin of your button in pixels
    Margin right The right margin of your button in pixels
    Border width Width of your button’s border in pixels.
    Button properties
    Format

    Determine whether your button will appear with a text label, icon, or both.

    Select from the following options:
    • Label
    • Icon
    • Label and icon
    Label The button's text label.
    주:
    This option will only appear if either the Label or Label and icon format is selected.
    Icon The icon that will display on your button. Choose an icon from the provided drop-down list.
    주:
    This option will only appear if either the Icon or Label and icon format is selected.
    Accessible name The alternative text that will be read aloud to people using assistive devices so that they know the purpose of the button.
    주:
    This option will only appear if the Icon format is selected.
    Actions
    Multiple Create a menu of multiple different actions that users can choose from when they select the button.
    Function

    Choose either a Predefined or Configurable function. Configurable functions are taken from the sys_sg_button table.

    Available predefined functions:
    • Cancel
    • Continue
    • Log out
    Button appearance
    Text and icon style The formatting style of your text, icon, or both.
    Background color variable The button background’s color variable.
    Background color The button background’s color. The value for this property is an HTML color code, for example #A0522D for sienna.
    Text and icon color variable The button's text and icon’s color variable.
    Text and icon color The button's text and variable color. The value for this property is an HTML color code, for example #A0522D for sienna.
    Border color variable The button border’s color variable.
    Border color The button border's color. The value for this property is an HTML color code, for example #A0522D for sienna.

    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.

    표 2. Container configuration properties
    Property Description
    Properties
    Element ID The container's unique JSON ID attribute.
    Display
    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.
    Appearance
    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
    Background type The type of background the container will have. Select from these values:
    • None
    • Color
    • Image

    Icons

    Icon components are used to display an icon on your card. You can choose an icon from the Icon dropdown menu in the Config screen.

    표 3. Icon configuration properties
    Property Description
    Properties
    Element ID The icon's unique JSON ID attribute.
    Display
    Icon The icon to be displayed.
    Margin top The top margin of your icon in pixels.
    Margin right The right margin of your icon in pixels.
    Margin bottom The bottom margin of your icon in pixels.
    Margin left The left margin of your icon in pixels.
    Appearance
    Color variable The color variable of your icon.
    Color The color of your icon. The value for this property is an HTML color code, for example #A0522D for sienna.

    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.

    표 4. Image configuration properties
    Property Description
    Properties
    Element ID The image's unique JSON ID attribute.
    Display
    Height Height of your image in pixels.
    Width Width of your image in pixels.
    Margin top The top margin of your image in pixels.
    Margin right The right margin of your image in pixels.
    Margin bottom The bottom margin of your image in pixels.
    Margin left The left margin of your image in pixels.
    Corner radius The corner radius of your image. Increase this value to create rounded corners for your image.
    Image
    Use mapped field Choose whether the image will use a mapped field.
    Field value The value of the mapped field for your image. This property is only visible if Use mapped field is selected.
    Attachment The attached image to use. This property is only visible if Use mapped field is not selected.
    Image 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.

    표 5. Text configuration properties
    Property Description
    Properties
    Element ID The text's unique JSON ID attribute.
    Display
    Field type The type of text field. Select from these values:
    • Field value
    • Field label
    • Static text
    Text value The text that appears in the text component. This value is only used when you have selected Static text in the Field type property.
    Height Height of your text component in pixels.
    Width Width of your text component in pixels.
    Margin top The top margin of your text component in pixels.
    Margin right The right margin of your text component in pixels.
    Margin bottom The bottom margin of your text component in pixels.
    Margin left The left margin of your text component in pixels.
    Appearance
    Text style The formatting style of your text.
    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.
    Text color variable The color variable for your text.
    Text color The color of your text. The value for this property is an HTML color code, for example #A0522D for sienna.
    주:
    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.

    Videos

    Video components display an embedded video in your card. Both Youtube and Viemo video URLs are supported.

    표 6. Video configuration properties
    Property Description
    Properties
    Element ID The video's unique JSON ID attribute.
    Display
    Use mapped field Choose whether the video will use a mapped field.
    Field value The value of the mapped field for your video. This property is only visible if Use mapped field is selected.
    URL The URL of the video to be embedded. This property is only visible if Use mapped field is not selected.
    Playback mode How the video will display on a mobile device. Select from these values:
    • Fullscreen
    • Inline
    Width Width of your video component in pixels.
    Height Height of your video component in pixels.
    Margin top The top margin of your video component in pixels.
    Margin right The right margin of your video component in pixels.
    Margin bottom The bottom margin of your video component in pixels.
    Margin left The left margin of your video component in pixels.