Associate a function with a location in the app

  • Release version: Xanadu
  • Updated August 1, 2024
  • 5 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 Associate a function with a location in the app

    In ServiceNow's mobile app development, each function you create must be associated with a specific location within the app interface. This association determines how and where users can access the function, enhancing navigation and interaction within the app. Locations include top menu, swipe gestures, fields, footers, and others, each suited for different user actions and screen types.

    Show full answer Show less

    Function Locations and Their Uses

    • Launcher Screen Header Functions: Enable navigation to parameterized record screens, such as user profiles or carts, accessible from the app’s launcher header.
    • Chart Header Functions: Allow users viewing a chart to click on a header icon to see all records represented in that chart, facilitating deeper data exploration.
    • Field Functions: Let end users modify field values directly on details screens. Each screen field can have a unique field function configured in the Mobile App Builder.
    • Footer Functions: Add actionable buttons at the bottom of various screen types (record details, embedded sections, map, list screens) to streamline common tasks.
    • On Tap Functions: Triggered when users tap a record in a list, typically navigating to another screen, configured within list item config records.
    • Top Menu Functions: Ideal for less frequently used actions or when many actions exist on record screens; accessible from the top menu area.
    • Quick Action Functions: Provide shortcuts accessible via icons on launcher screens (plus icon on Android, ellipsis on iOS) for fast access to key actions or items.
    • Swipe Functions: Added to list or map screens, allowing users to swipe right (leading) or left (trailing) to reveal up to three functions per direction, enhancing gesture-based navigation.
    • Top Icon Functions: A single shortcut button on the top app bar of a record screen, offering quick access to important actions.
    • Custom Map Bottom Drawer Functions: Specific to custom map screens used in Indoor Wayfinding, allowing one or more actions accessible via a button or a “more” menu.

    Practical Application for ServiceNow Customers

    When building mobile apps with ServiceNow Mobile App Builder, associating functions to appropriate locations is crucial to optimize usability and user experience. Each location type supports different interaction models—from taps and swipes to menu selections—allowing you to tailor app navigation and actions to business needs. Understanding these associations lets you configure screens that are intuitive and efficient, ensuring users can quickly perform tasks or access information relevant to their roles.

    ServiceNow customers can expect these function locations to:

    • Enhance navigation by placing functions where users naturally look or interact.
    • Support diverse user actions across multiple screen types (lists, charts, records, maps).
    • Provide flexibility to add shortcuts and actions without cluttering the interface.
    • Improve user productivity by enabling direct actions like field updates or quick navigation.

    By following the configuration guidelines, including creating unique function instances per location and leveraging built-in UI elements, you can build a mobile app experience that aligns with user workflows and business processes.

    For each function you create for an app, you must associate it with a specific location. You can associate most functions with a top menu, a swipe, or a specific field.

    Launcher screen header functions

    Launcher screen header functions allow your users to navigate to a specific parametrized record screen. Some common examples include navigating to a users profile, or navigating to a cart.

    For details on creating parametrized record screens, see Configure a parameterized record screen.

    For details on how to use these record screens in a launcher screen header, see Configure a launcher screen header.
    Figure 1. Launcher screen header function
    Launcher screen.

    Chart header functions

    Chart header functions enable your users to navigate to a specific set of records from a chart screen. When a user is viewing a chart, they can click on the chart header function (chart function icon) on the top-right corner of the screen, to view a list of all the records that are within the chart. .
    Figure 2. Chart header function
    Chart screen with header functions.

    Field functions

    Field functions enable your end users to change the value of a field. Field functions only apply to items on the details screen in a displayed area.

    1. In Mobile App Builder, open a details screen that you want to add a field function to. Make sure that there are screen fields in your details screen that you can add field functions to, and a Table selected.
    2. For each screen field on your details screen, you can add a field function under Field function instances field. You can't reuse previous function instance records.
    3. In the Display label field of the new Function instance record, add the name of the function to display.
    4. Select Save.

    For more information on how to create field functions, see Configure a details screen for a record screen.
    Figure 3. Field function
    Incident with the caller field highlighted.

    Footer functions

    Footer functions enable your end users to add an action on the bottom of a record screen.

    Supported screens for the footer function are: record details screen, record embedded section screen, dynamic segments in a record screen, map screen, and list screens.

    1. In Mobile App Builder open a screen that you want to add a footer function to.
    2. In the Footer function instance section, select New to create a function instance. You cannot reuse previous function instance records.
    3. In the Display label field of the new Function instance record, add the name of the function to display.
    4. Complete all the other required inputs for the record, then select Save.

    For more details on how to create a footer function, see Use your navigation function as a footer function.

    		 Screen with three footer functions.

    On tap functions

    Use the on tap function instance to trigger a function when a user taps on a record in a list. This function location can, for example, navigate a user to another screen when they tap a record. On tap functions are configured on list item config records, which are used in any screen that needs to display a list of records.
    1. In Mobile App Builder open a list screen that you want to add an on tap function.
    2. Select the List item config record field. For example, this field is found in a stream record within a screen segment record.
    3. In the list item config record, locate the On tap field and select Use a function instance.
    4. Populate the list item config record with the navigation function that you want to use.
    5. Select Save.
    		 Navigation function used to direct users from one list to another.

    Top menu functions

    Use top menu function location for less frequently used actions, and on record screens where you have more actions than fit conveniently in the footer.

    1. In Mobile App Builder open a screen that you want to add a top menu function to.
    2. In the Top menu function instances section, select New to create a new function instance. You can't reuse previous function instance records.
    3. In the new Function instance record, populate the Display label with the words you want displayed on your function. In the Function placement section, the fields are auto-populated based on your screen record’s details.
    4. Select Save after filling in all other required inputs on each record.

    For more details on how to create a top menu function, see Use your navigation function as a top menu selection.
    Figure 4. Top menu functions
    Top menu for an incident which includes the following functions: Reassign, Resolve, Add comments, and Edit.

    Quick action functions

    Use the quick action item location to provide your users with a shortcut to an item or action in your launcher screens. Users access quick actions by tapping the quick action icon.
    • For Android users quick actions appear under a plus icon (Android quick action icon) at the bottom-right corner of the launcher screen.
    • For iOS quick actions appear under the ellipsis icon (iOS quick action icon).

    For details on configuring quick actions, see Quick actions.

    		 Quick actions.

    Swipe functions

    The swipe function location applies to screens that display a list, including a map screen. Swipe functions can be initiated from two directions, swiping to the right initiates leading swipe function and swiping to the left initiates trailing swipe functions. You can display three functions per direction.
    1. Navigate to a screen that you want to add a swipe function to. Navigate to that list screen’s List item config record. For example, this field is found in a stream record within a screen segment record.
    2. Select which direct to initiate the swipe functionality:
      • Select Leading swipe function instances for users to initiate swipe functions dragging to the right from the edge of a card.
      • Select Trailing swipe function instances for users to initiate swipe functions dragging to the right from the edge of a card.
    3. In the new function instance record, populate the Display label with the words to display on your function. In the Function placement section, the fields are auto-populated based on your screen record’s details.
    4. In the Function section, select the function record you would like to use, or select New. This function determines the behavior that the system performs when a user taps the footer function.
    5. Select Save after filling in all other required inputs on each record.

    For more details on how to create a standard function, see Configure a navigation to a screen.
    Figure 5. Swipe functions
    Swipe function from the list view with options to Resolve or Reassign an incident.

    Top icon functions

    The top icon function is a button location on the record screen top app bar. Use the top icon action to provide your users with an additional shortcut to an item or to actions in your record screen.

    Only one top icon function can be added to each record screen.
    Figure 6. Top icon function
    Image of top icon function screen in mobile app

    Custom map bottom drawer functions

    The custom map bottom drawer functions apply to the custom map screen for Indoor Wayfinding experiences. Use the custom map bottom drawer functions to provide your users with a shortcut to actions from Indoor Wayfinding experiences. One or more custom map bottom drawer functions can be added to a custom map screen.

    If only one custom map bottom drawer function is configured, users see the action button for the function with the configured icon and labels. If more than one function is configured, all the functions appear under the more menu icon (more menu icon).
    Figure 7. Custom map bottom drawer function
    Custom map bottom drawer function button.