This module focuses on guiding users through the process of creating and applying list screens in the Now Mobile app on the ServiceNow platform. Here is a summary of the key topics covered in the module:
Course Prerequisites
To ensure success in these courses, completion of the following recommended prerequisites is essential.
Mobile Introduction:
To grasp the concepts of mobile apps, terminologies used in the course, and an overview of Mobile App Builder, it is crucial to complete the "Mobile: Introduction" course. This assumes a general knowledge of mobile terms.
Mobile: Create an Application:
This course uses applications created in "Mobile: Create an Application." The provided instance includes configurations for these applications. In case of a different instance, use the provided update sets to add them.
Open My Instance:
Use the provided instance in the course to complete activities. Keep track of the expiration date.
Configuration Testing:
Utilize "Beth Anglin" or "Tyree Courrege" to test configurations. Log into the mobile app as an admin and impersonate Beth or Tyree.
Download Mobile Apps:
Download the mobile apps on the testing device using the app store or your organization's mobile device management. For guidance and barcode help, refer to "Mobile: Configure Mobile Apps and Instances" in the "Mobile: Additional Resources" course.
Use Update Sets:
Employ update sets to save configurations made during training. If the instance is reclaimed before completing all modules, use update sets to rebuild applets and configure settings.
Review Mobile Icons:
Bookmark the Mobile Icons ServiceNow docs page to ensure that icons used are available for mobile apps. If an unsupported icon is selected, a question mark will appear.
If the provided instance lacks referenced applications, use the following update sets:
End-Users-Mobile-Application.xml (539.3 KB)
Work-Orders-Mobile-Application.xml (414.9 KB)
Please note that during the course, screenshots or videos may slightly differ due to variations in mobile device operating systems or app versions. Once prerequisites are met, proceed to "Lesson 2 - Why This Course."
Lesson 2 - Why This Course
Understanding screen development is crucial in mobile development. All base system and new mobile applications rely on screens. The most common is the List screen, often accompanied by a Record screen for detailed information. This course focuses on creating List and Launcher screens using Mobile App Builder.
By the end of the course, you will:
Create a new List screen with a data item and Record screen.
Develop a new Launcher screen.
Add List screens to the Launcher screen.
Integrate the new Launcher screen into the Now Mobile app.
To start, open Mobile App Builder and access the "End Users Apps Mobile" application created in "Mobile: Create an Application."
Lesson 3 - Data Item
To simplify List screen development, begin by creating the data item that instructs what data will be displayed on the screen. Follow these steps:
Open the Data section in the Menu.
Name the data item and provide an optional description.
Configure Table, Group by, and Condition type.
Define conditions for filtering records.
Set offline conditions for records in offline mode.
Optionally, add parameters for variable data.
After creating data items, proceed to screen creation and modification.
Note on Parameters:
Parameters create placeholders for user or database input. They enhance data item functionality, allowing dynamic interactions. For more details, refer to the ServiceNow docs page on configuring parameterized data items.
Now, test your understanding by configuring a new data item and editing an existing one. For a step-by-step guide, refer to the provided PDF.
Lesson 4 - List Screen
With data items configured, focus on List screen creation. The List screen, a common starting point, displays records using cards. Configure the initial List screen within the "End User Apps Mobile" application:
Type: List
Name: My Critical/High Incidents
Icon: MS icon-Alert-Solid
Empty State: Default Empty State
For detailed steps, refer to the provided PDF. Subsequent lessons will build on this List screen.
Lesson 5 - Screen Segment
The Screen Segment creates tabs for list information. Configure the Screen Segment within the "End User Apps Mobile" application:
Name: My Critical/High Incidents
Follow the steps outlined in the provided PDF for configuration.
Lesson 6 - Screen Streams
As you progress in mobile development, configuring Screen Streams becomes essential for defining how records are displayed within List screens. Each Screen Stream is associated with a List stream, and it helps design the appearance of records on the List screen. Follow the steps below to configure Screen Streams:
Access Screen Streams:
Open the "End User Apps Mobile" application in Mobile App Builder.
Navigate to the Menu and click on Screens.
Select List Screen:
Choose the List screen you created earlier, such as "My Critical/High Incidents."
Configure Screen Segment:
If not already configured, set up the Screen Segment for the chosen List screen. Ensure it aligns with the overall design goals.
Navigate to Screen Streams:
Within the List screen settings, find and click on the "Screen Streams" section.
Add New Screen Stream:
Click on "New" to add a new Screen Stream for the List screen.
Configure Screen Stream Details:
Provide a clear Name for the Screen Stream (e.g., "Critical Incidents Stream").
Link the Screen Stream to the appropriate List stream created earlier (e.g., "My Critical/High Incidents").
Define Stream Layout:
Determine the layout for the Stream, specifying how records should be displayed. Options may include card size, details visibility, and other layout settings.
Set Stream Actions:
Define any actions associated with the Stream, such as clicking on a record to view details or perform specific actions.
Configure Stream Filters:
If needed, set up filters to refine the records displayed within the Stream based on specific conditions.
Review and Save:
Double-check the configured settings to ensure they align with the intended design.
Save the Screen Stream configuration.
Repeat for Additional Streams:
If your List screen requires multiple Streams, repeat the process for each one, linking them to the corresponding List streams.
Testing:
After configuring Screen Streams, it's advisable to test the List screen to ensure that records are displayed as expected.
By completing these steps, you enhance the customization of List screens, providing a more tailored user experience. Screen Streams play a crucial role in defining how data is presented on the List screen, contributing to the overall usability of your mobile application.
Lesson 7 - List Item Config
In mobile development, configuring List Item Configurations is crucial for customizing how records are presented within List screens. Multiple List Item Configurations can be associated with a List Stream, using the same data item but allowing additional filters for different record sets. This differentiation can be useful for applying distinct UI configurations to each filtered set.
Tab through the configuration elements:
Settings:
Provide a Name for the List Item Configuration.
Assign a numerical value to set the order of results if multiple configurations are defined.
Select the appropriate Table, ensuring it matches the table used in the data item.
Configure Conditions for further filtering results from the data item.
Note: Conditions here differ from user filtering within the app and utilize the selected table.
List Item Config Settings
Activity:
Configure the List Item Configuration.
Name: My Critical/High Incidents
Table: Incidents [incident]
View: Card
Card: Template 01
Refer to the provided PDF (Lab-ListItemConfig-Step4.pdf) for detailed steps.
Lesson 8 - Card Configuration
Card Configuration
Card Initial Settings:
After selecting "New" in the Card section, a new configuration section opens.
Give the card a Name and optionally, a Description.
Leave the card set to Active.
In the Data section, select the same Table as used in the data item.
Important Note: Customization in Mobile Card Builder requires saving the current configuration first.
If creating a new card template, define settings for it.
For this training, use an existing template with custom field selections.
Save the configuration before moving on.
Card Template Selection:
Click "Choose" in the Card template section.
Select the desired template and click "Apply."
Save the entire configuration.
Warning Regarding Mobile Card Builder:
After saving, click "Open in Mobile Card Builder" to configure card fields.
Mobile Card Builder is launched in a new tab.
Understand the layout of Mobile Card Builder.
Configure Card in Mobile Card Builder:
Change the template if the default layout is not desired.
Edit the card by clicking on a field and using options in the Config section.
Configure labels if desired.
Save periodically during the build.
After configuring, save and close Mobile Card Builder.
Activity:
Configure card fields in Mobile Card Builder using an existing template. Refer to the provided PDF (Lab-ConfigureCard-Step5.pdf) for detailed steps.
After configuring the card, save, and close Mobile Card Builder. The Mobile Card Builder tab can be closed.
To configure a Record screen embedded as part of the screen configuration, navigate back to the List item config where the Embedded screen section is located.
Lesson 9 - Record Screen
The final step in the basic List screen configuration involves embedding a Record screen to display detailed information about a selected record. Follow these steps:
Navigate to the List item config configuration screen using the tree on the left.
Click "New" in the Embedded screen section.
In the Embedded Screen Selection Modal, choose the "Record" option.
Configure the Record screen settings:
Give the screen a Name (optional Description).
Choose the Fetch type:
Prefetch: Pre-loads Record data for faster load time.
On-demand: Loads the app only when users navigate to it.
Background: Makes a background network request to load screens instantly.
Dynamic prefetch: Loads screens as Prefetch for the first rows, then On-demand.
Adjust the Dynamic prefetch count if needed.
Hide screen name if desired.
Configure the Card and Icon selection similarly to the List screen.
Choose the Card from the List screen to maintain consistency.
Select an Icon for the Record screen.
Configure additional options:
Alert: Display a modal pop-up with a message and navigation function.
Data (if Record screen is configured independently).
Record Screen Segments:
These provide detailed data for the record.
Two types: Record screen segment (basic) and Dynamic record screen segment (varies per record).
Configure each Record screen segment:
Order: Numerical value defining the segment's appearance order.
Sticky: Keeps a segment-specific Header card sticky at the top when scrolled.
Header card: Allows definition of a segment-specific card.
Embedded screen: Defines the type of segment to be embedded.
Choose Embedded screen templates for segments:
Activity Stream: Displays activity, allows work notes, comments, and attachments.
Details: A form-style screen displaying data about the record.
List: Similar to the List screen.
Mobile web: Displays a web page.
Related Lists: Shows a list of related screens.
Sections: Creates a preview of Record screen details with navigation to different destinations per section.
For Details Screen:
Configure settings: Name, Description, Fetch type, Available offline, Icon.
Select a Table for field configurations.
Configure Details Screen - Configuration:
Set Table, Field function instances, Footer function instances, and UI parameters.
Configure Screen fields for each field to be displayed.
For Activity Stream:
Configure settings: Name, Description, Fetch type, Dynamic prefetch count, Toggle fields.
Define Data, Icon, and Fetch type.
For Related Lists:
Configure settings: Name, Description, Fetch type, Show count, Hide screen name, Available offline.
Set Table and Icon.
Configure Related Lists Screen - Configuration:
Set Table, Icon, and map screens using Related lists mapping.
After configuring at least one Embedded screen, the Record screen is ready for use.
Activity:
Create an Embedded screen for a new Record screen with Details and Activity Stream segments. Follow the provided instructions in the PDF (Lab-RecordScreen-Step6.pdf) for detailed steps.
After completing the Record screen, the List screen configuration is considered
Lesson 10 - Build a List Screen with a Record Screen
Now that you have the knowledge of building a List screen, it's time to build a List screen with an associated Record screen. The step-by-step instructions are provided in the PDF file "Lab-ListScreen-Complete.pdf" with a size of 169.6 KB. Follow the guidelines in the PDF to build a new List screen for "My Critical/High Incidents" and a Record screen with two segments - Details and Activity Stream.
After completing this activity, move on to the next lesson.
Lesson 11 - Launcher Screen
Launcher screens are used to group similar screens together, making them easily accessible. They can include a customized header, global search, and quick actions. Follow these steps to create a Launcher screen:
From the Screens menu in the application home, click New and select Launcher.
Configure Launcher Screen Settings:
Name, Title, Active, Available offline, Header title, Existing configurations, New configurations.
Add a Header function instance for redirection.
Add a Search configuration for search functionality in the header.
Configure Launcher Sections:
Create new sections - Record section and Icon section.
Configure settings for each section (Title, Active, etc.).
Set Display Type, Orientation, and other relevant options.
Define Custom size if needed.
Set the Destination screen for each section.
Assign roles for access.
Order the sections within the Launcher screen.
Additional Launcher Screen Configuration:
Add a Quick action function instance.
Set Role access for the Launcher screen.
For detailed steps, refer to the provided PDF "Lab-LauncherScreen.pdf" with a size of 116.7 KB.
After completing this activity, proceed to the next lesson.
Lesson 12 - Navigation Bar Assignment
To test and use the screens and Launcher screens, assignments must be completed for the appropriate navigation bars. Follow these steps:
Determine the mobile app(s) to which the screen or Launcher screen will be assigned.
Change the scope to the relevant mobile app (e.g., Now Mobile application scope).
In the Mobile app configs, select the app to be edited.
Configure Navigation Bar Assignment:
Navigate to Navigation bar section.
Create a new tab for the Launcher screen.
Choose the tab type (e.g., Launcher).
Set Label, Launcher screen, Icon, and Order.
Save and test the new tab within the mobile app.
For detailed steps, refer to the provided PDF "Lab-NavigationBarAssignment.pdf" with a size of 113.6 KB.
After completing this activity, move on to the next lesson.
Lesson 13 - Final Configuration
The final configuration involves viewing the expected final setup in the Now Mobile app. Follow these steps:
Review and confirm the configured elements: Data item, List screen, Record screen, Launcher screen, Now Mobile navigation bar tab.
Impersonate different users (admin, Beth Anglin, Tyree Courrege) to observe any changes based on role permissions and item assignments.
View the final configuration on your mobile device.
Watch the provided video titled "Final Configuration of New List Screen and Launcher Screen in Now Mobile" for a quick example.
After completing this lesson, proceed to the final lesson.
Lesson 14 - Success!
Congratulations! You have successfully completed the course on creating new list screens. You are now ready to explore more about mobile development by:
Continuing with other trainings in the Mobile Development Essentials on-demand series.
Reviewing the ServiceNow Product Documentation site.
Feel free to exit the course module. If you have any further questions or need assistance, you can refer to the provided resources or explore additional trainings. Great job!