Customizing Mobile Card Views with Mobile UI Rules in ServiceNow
Mobile UI Rules in ServiceNow are not limited to controlling the visibility of fields based on conditions. They can also be used to dynamically style card fields, such as changing background colors depending on field values. This allows administrators to provide better visual cues to mobile users.
In this article, we’ll walk through the process of adding a new field to a mobile card view and then applying Mobile UI Rules to style that field based on conditions.
Adding a New Field to a Mobile Card
- Navigate to Mobile Card Builder.
- Select the card you want to update (for example,Open Initiated From As Case On Work Order Task).
- In the card template, add the new field you want to display (e.g., the State field).
- Map the added field in the card layout by selecting the appropriate field in the Mapped Field dropdown.
Refer to the official documentation: Assign fields in a card view.
Creating Mobile UI Rules
Once the field is added to the card, you can configure rules to apply conditional styling.
- Navigate to All > System Mobile > Mobile UI Rules.
- Click New to create a new rule.
- Name: Provide a descriptive name.
- Condition: Define the condition using backend field values (for example, state = Open).
- When adding a field to the card, note the variable name shown in the left content tree. Use this in the condition.
Adding Rule Actions
Each Mobile UI Rule requires an action that determines how the UI will respond when the condition is met.
- In the related list Mobile UI Rule Actions, click New.
- Configure the action:
- Operation: Select Set UI Style.
- Target: Select the card field to style (e.g., State).
- Value: Enter a color code (e.g., #ffcc00 for yellow).
- Repeat the process for each state value or condition you want to style differently.
Refer to the official documentation: Mobile UI rules.
Example: Case State Field on a Work Order Task Card
- Added the State field to the Case card.
- Created Mobile UI Rules to highlight the state:
- Open → Lavender Blue background
- On Hold → Pastel background
- Closed → Lime Green background
Result
When viewing the Case card in the mobile app, the State field is displayed with dynamic colors based on its value, providing quick visual feedback to the user.
#NowMobile
