Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.

Mobile UI styles

Log in to subscribe to topics and get notified when content changes.

Mobile UI styles

UI styles allow you to change the color of fields in the mobile app.

Use UI styles to make certain fields stand out. For example, configure the Priority field to be different colors in the mobile app depending on the status. Use brighter colors to make higher priority items stand out.

Make sure you select colors that are high contrast so that users can still easily read the text.

Create mobile UI styles

Create UI styles to apple to fields in the mobile app.

Before you begin

Create an app and applets before configuring UI styles.

Role required: admin

Procedure

  1. Navigate to System Applications > Studio.
  2. From the Select Application window, select the application containing your app.
  3. In the Application explorer on the left edge of the screen, click UI Styles, and then click the pop-out icon (Pop out icon) that appears to the right of the text.
  4. Click New.
  5. Complete the following fields as needed.
    Table 1. UI Style fields
    Field Description
    Name A name for the UI style. Choose a name that is easily identifiable. You use this name to apply the style to a specific field in an applet.
    Table The name of the table containing the field you want to add a style to. Select the table matching the table for the applet where you intend to apply this style.
    Condition The conditions in which you want the field style to appear. For example, you can configure the State field to appear blue, but only when State is Assigned.
    Use item view elements
    Item view Select This field appears when the Use item view elements option is selected.
    Item view element This field appears when the Use item view elements option is selected. The field contains a list of the elements from the item view selected in the Item view field. These elements represent the JSON elements found in the selected Item view record.
    Field name The name of the field you want to add style to. Only fields available on the table you selected appear in this list.
    Style The style field supports multiple entries. Each entry has a Name and Value elements. Click the Add (Add icon) icon to add a new entry to the style field or the remove icon (Remove icon) to remove existing elements. See the following table for a list of the available UI style names.
    Note: For styles with color values, make sure to include the # symbol. For example, use #FFFFFF for black rather than FFFFFF.
    Active Whether the UI style is active.
    Table 2. Available UI styles
    Name Description
    font_color Use this style to change the text color for a field. The value for this style is a color in hexadecimal format.
    background_color Use this style to change the background color for a field. The value for this style is a color in hexadecimal format.
    is_hidden Use this style to hide or reveal a field. The value of this style must be true or false.
    text_decorator_icon Use this style to add an icon to the left edge of your field. The value of this style must be the Sys ID of a record on the Icon [sys_sg_icon] table.
  6. Click Submit.
  7. Repeat this process for each condition you want the UI style to appear for. For example, if you want the State field to have a different color for each value, create a UI style for each state value.

Example: Suggested UI styles

Listed here are suggested UI styles for your instance. These styles are WCAG compliant, and are created with high contrast backgrounds to make the labels easily readable for all users.

Table 3. High contrast label styles
Label Background color Text color
Sample label Sweet Pink #FFA4A3 Cherrywood #64201A
Sample label Apricot #FBD0B3 Jacko Bean #2F1F0A
Sample label Periwinkle #C9C9ED Gulf Blue #38385B
Sample label Breeze #B5DDE5 Tiber #1A424B
Sample label Zumthor #D1D6D8 Gable Green #293E40
Sample label Drover #FBF2B4 Jacko Bean #2F1F0A
Sample label Cruise #B5EBD4 Sherwood Green #1E4335
Sample label Iceberg #CFDFD7 Sherwood Green #1E4335
Sample label Marble #D0E6E6 Gable Green #293E40
Sample label Seashell #F1F1F1 Gable Green #293E40
Table 4. Conditional formatting styles
Label Background color Text color
Sample conditional style Transparent #FFFFFF00 Mahogany #C83C36
Sample conditional style Transparent #FFFFFF00 Tree Poppy #DC7C40
Sample conditional style Transparent #FFFFFF00 Chetwode Blue #7070B3
Sample conditional style Transparent #FFFFFF00 Fountain Blue #5297C4
Sample conditional style Transparent #FFFFFF00 Oslo Gray #7D8A8C
Sample conditional style Transparent #FFFFFF00 Earls Green #B09F2C
Sample conditional style Transparent #FFFFFF00 Sea Green #54AC98

What to do next

Add the field style to the field in an applet.

Add a UI style to an applet

After you create a UI style for a field, you need to add it to an applet.

  1. In Studio, navigate to Mobile Studio > Applets, then click the expand arrow to see the list of applets for your application.
  2. Create an applet or open an existing applet that you want to add UI styles.
    The data item for the applet should match the table you selected for the UI style.
  3. From the configuration page for the applet, add the field you want to add styles to, to the primary screen or details screen header.
    Only certain field locations in the header support UI styles. Make sure you add the field to a position that allows UI styles. If the field is not in a position that allows UI styles, the UI Style Configuration section does not display any options.

    For example, in the following header preview, only the field positioned at E1 allows UI styles. In the UI Style Configuration section, only the E1 field is available, and selection is disabled.

    Header configuration option that appears when you click Change Pattern in Studio UI styles configuration section with styles for Priority = Critical and Priority = High selected
  4. In the UI Style Configuration section, move styles from the All Styles list to the Selected Styleslist to apply these styles.
  5. Click Save.

Configure a placeholder image for missing images in mobile apps

You can specify an image on your instance as a placeholder for missing images. This image appears in your mobile apps when a record has an image field with an empty value, such as a user avatar or catalog item. You can select a different image to use for each table on your instance.

Before you begin

Role required: admin

About this task

You configure placeholder images by creating properties on the System Properties [sys_properties] table. The property is table-specific. If you want to define placeholder images for many tables, you must create multiple properties. Multiple tables can use the same image as a placeholder.

Procedure

  1. Upload an image to your instance to use as a placeholder. For details on uploading images, see Storing images in the database
  2. To open the system properties list, type sys_properties.list in the Application Navigator.
    Some tables already have a placeholder image defined. You can search the system properties table for properties that start with glide.sg.image.default to see any existing properties. Creating multiple properties for the same table can cause inconsistent results.
  3. Click New.
  4. Use the following information to complete the fields on the system property form.
    FieldValue
    Name Enter glide.sg.image.default.[tablename]. Replace [tablename] with the name of the table you want this property to apply to. For example to use the Catalog Item table, enter glide.sg.image.default.sc_cat_item.
    Type Select String
    Value Enter the name of your image. This value is the same as the Name field on the image [db_image] record.
  5. Click Update.
Feedback