Mobile Card Builder user interface

  • Release version: Zurich
  • Updated July 31, 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 Mobile Card Builder user interface

    The Mobile Card Builder user interface enables ServiceNow customers to create and modify mobile cards effectively. It provides a structured layout with panels that help design the card’s layout, organize components, and configure properties, facilitating a streamlined card-building experience that reflects how the card will appear on mobile devices.

    Show full answer Show less

    Top Panel

    • Menu: Access options such as opening different cards, editing card properties (name and description), changing templates (for cards created in Quebec or later releases), and resetting the card layout.
    • Height and Width: Displays the card dimensions in pixels, updating dynamically as components are added or removed.
    • Undo/Redo: Undo or redo recent changes using buttons or keyboard shortcuts (Ctrl+Z/⌘+Z for undo, Ctrl+Shift+Z/⌘+Shift+Z for redo).
    • Save: Save your current work to preserve card changes.

    Left Panel

    • Card Section: Displays the current card’s name.
    • Component Tree: Shows all components in a hierarchical tree format. Selecting a component highlights it in the center panel and reveals its configuration options in the right panel.

    Center Panel

    • This is the main design area where the card layout is visualized.
    • Select components to highlight them, view their tabs, or remove them using the trash can icon.
    • Use the plus icon to add new components to the card.
    • Preview the card as it will appear on mobile devices by selecting the Preview button, with the option to update previews after configuration changes.

    Right Panel

    • Displays configuration options for the selected component, which vary by component type.
    • Allows immediate visual feedback of changes in the center panel and updating the preview panel.
    • Includes formatting controls such as size, margins, corner radius, and text alignment.
    • Supports mapping data field values to card components for customization.

    Practical Benefits

    ServiceNow customers can efficiently build and customize mobile cards with a clear interface that supports quick component selection, layout arrangement, and detailed configuration. The interface ensures cards appear as intended on mobile devices through live previews, making it easier to deliver tailored, user-friendly mobile experiences.

    Learn about the Mobile Card Builder user interface to get started building and modifying your mobile cards.

    Mobile Card Builder.

    Top panel

    Mobile Card Builder UI top section panel.

    The top panel of the Mobile Card Builder contains the following information and options.

    Menu
    Use the menu to access additional options.
    • Use Open to close the current card and open another card.
    • Use Edit card properties to update the name and short description of your card.
    • Use Change template to replace the current card layout with one in a card template.
      Note:
      Card templates can only be applied to cards created in the Quebec and later releases.
    • Use Reset stage to remove all elements from the current mobile card.
    Height and width
    This section displays the height and width of your card in pixels. This information automatically updates as you add and remove components from your card.
    Undo
    Select to undo the last update you made to your card. You can also enter Ctrl+Z or ⌘+Z on your keyboard to perform this action.
    Redo
    Select to redo the last update removed by the Undo command. You can also enter Ctrl+Shift+Z or ⌘+Shift+Z on your keyboard to perform this action.
    Save
    Select save to save your work.

    Left Panel

    Mobile Card Builder panel.

    The left panel of the card builder contains the following information and options.

    Card section
    The topmost section of the left panel shows the name of the current card.
    Component tree
    Below the card section you can see the components of your card organized in a tree structure. Select a component to highlight that component in the center panel. When you select a component, that component's configuration options appear in the right panel.

    Center Panel

    Use the center panel to design the layout of your card. The panel displays the components of your card. To view the card as it appears in a mobile app, Select the Preview button.

    Figure 1. Components in the center panel
    Mobile Card Builder center panel.

    Select a component of your card to highlight it. You can see a tab with the name of your component, and a trash can icon. Select that icon to remove the component from your card. More configuration options for the selected component appear in the right panel.

    Figure 2. Adding a component
    Adding a component in Mobile Card Builder.

    Select a plus icon (plus icon) to select a new component to add to your mobile card. For information about adding a button, see Card actions in Mobile Card Builder.

    Remove components by selecting them and then select the delete icon (plus icon).

    Right Panel

    The right panel of the card builder contains the configuration options for the selected component. The available configuration options depend on the type of component selected.

    When you change a components configuration, can see the changes immediately in the center panel. If you are using the preview option, select Update preview to update the preview of your component.

    Configuration options include formatting options such as:

    • Size
    • Margins
    • Corner radius
    • Text alignment

    You can also use this panel to map field values to components in your card. For details see Customize a screen using Mobile Card Builder

    .    		 Mobile Card Builder panel