Configure mobile app token lifespan
******VIDEOS
Mobile App Academy
https://www.youtube.com/playlist?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D
STARTER KIT
Build My First Mobile Application
Developing Mobile Applications
**Advanced mobile features
https://developer.servicenow.com/connect.do#!/event/knowledge19/CCW1564
*****INSTALLATION
Mobile Agent: Plugin
Modile Studio: com.glide.sg.studio
Geolocation: com.snc.geolocation
Service Management Geolocation: com.snc.service_management.geolocation
Service Management Geolocation Mobile: com.snc.service_management_m
SG Offline support : com.glide.sg.offline
Now Mobile: Plugin
ServiceNow NowMobile App Screens and Applet
Launcher: com.glide.mobile-employee
- Human Resources Scoped App: Lifecycle Events
com.sn_hr_lifecycle_events
Install: Mobile Card Builder
--- plug in Id:sn_mobile_card_bui
Once this plugin is installed, mobile development can begin. Install: Mobile Card Builder --- plug in
Once this plugin is installed, mobile development can begin.
QR Generator
https://www.qr-code-generator.com/
DEPLOYMENT
STEP 0: Use Add to Update Set
Use Related Links: Add to Update set
to capture all out of scope changes
STEP 1: Publish
Publish the application to update set
STEP 2 : If other scope update sets were used
Create Batch Base in global and batch all
*HEADER
Welcome message:
STEP 1 : Create Welcome Message
goto: sys_sg_applet_launcher_header.list
STEP 2 : Use the Welcome Message
goto: Applet Launcher : sys_sg_applet_launcher.list
Find the (Navigation TAB) Applet Launcher
Populate the Header Titles List Fiels
FIRST TIME CREATING HEADER HELLO,**
STEP 1: Create Form Screen
goto: sys_sg_form_screen.list
Name: Screen for Homepage greeting ... It will display : Hello, first and last name
Icon: User Icon
Use View config: True
Fetch Type: Prefetch
STEP 2: Create UI parameter
Name: user_name_in_header_greeting
Parameter type : Screen
Screen: Use the record from STEP 1
STEP 3: Create Header Title
goto: sys_sg_applet_launcher_header.list
Variables: UI Parameter from STEP 2
Text: Hello, {{ ui parameter sys_id}}
STEP 4: Cosume the Header Title
goto: Applet Launcher : sys_sg_applet_launcher.list
Find the (Navigation TAB) Applet Launcher
Populate the Header Titles List Fiels
ENABLE GLOBAL SEARCH***
STEP 1: Navigate to System Mobile > Applet Launcher.
goto: sys_sg_applet_launcher.list
1. Open the record for the applet launcher where you want to add search functionality.
2. In the Header tab, select record from Configuration field.
3. Click Save.
STEP 2 If Search configuration does not exist
Create Global Search Configuration
goto: sys_sg_global_search.list
if Search Application Configuration does not exixt
Create one : goto : sys_search_context_config.list
Application Search Source : select the table to be searched
Note: The Related List : Global Search M2M Item Configuration
These values are created for you by the system
ONE CLICK PORTAL LAUNCHER****
STEP 1
Create : Browser Screen : sys_sg_browser_screen.list
Incluse URL: /inguane_avelino?sysparm_domain_restore=false&sysparm_stack=no
Create Navigation Tab : sys_sg_applet_tab.list
Screen = to screen in STEP 1
Create Navigation Tab Maps: sys_sg_navigation_tab_map.list
THEMING - BRANDING*
STEP 1: Change lookAndFeel
1. Navigate to System Mobile > Mobile Branding > Client Themes within the Now Platform.
sys_sg_client_theme.list
2. Click New in the header.
3. Name Mobile Theme.
4. Enter the following values in the Palette.
• Brand: #0F4570
• Secondary: #7790B1
• Primary: #267FC6
• Destructive: #BB1C1C
5. Click Submit.
6. Navigate to System Mobile > Mobile Branding > Native Clients.
sys_sg_native_client.list
7. Click Mobile Agent in the list.
8. Select Cloud record created in STEP 1.3 – Mobile Agent for Client Theme.
9. Click Update.
10. Test the configuration in the Mobile Agent app using either admin or Beth Angline.
STEP 2: Update the (TAB) Applet Launcher to match the Header Theme
https://youtu.be/rBT9pzPvPuw?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=1788
https://docs.servicenow.com/bundle/quebec-mobile/page/administer/tablet-mobile-ui/concept/sg-themes.html
goto: sys_sg_client_theme.list
Brand and Primary should have same hex color
ex: #0F4570
STEP 3: Change name and icom of the Nab Bar
https://youtu.be/rBT9pzPvPuw?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=1149
https://docs.servicenow.com/bundle/rome-mobile/page/administer/tablet-mobile-ui/reference/sg-mobile-icon.html
goto: sys_sg_navigation.list [Global]
existing nav icons: sys_sg_icon.list
Type = image
*BODY
UI SECTIONS
- BANNER UI SECTION
********ADD LINK IMAGE HEADER TO MOBILE APP
Assumptions:
-
The Mobile App is istalled :
-
The Scoped Mobile App Exist :
-
The Applet and Applet Launcher (footer Navigation TAB in Mobil App) Exist : Critical Incident STEP 0 : Image specs
Width : 375px Height: 212px
STEP 1 : Go to Applet Luncher
goto: Applet Launcher : sys_sg_applet_launcher.list
Find the (TAB) Applet Launcher
STEP 2 : UI Section Name: CI Homepage UI Section
Navigate to "System Mobile > Applet Launcher". The Applet Launcher Section is under the "Body" section.
Just double click the Insert new row..., add an order (for example 100), and create a new UI Section.
Table: sys_sg_applet_launcher.list
sys_sg_section_list.list
When creating a new Mobile Section, a pop-up concerning the Section Type appears.
"Media Section" would be our choice.
On the Media Section, most import is the banner image which you would add as an attachment
to the new Media Section.
After adding the attachment and selecting Type "Image", you would be able to select this in the Image field.
STEP 2.1 The static banner should now be available on mobile app
CHECK POINT: TDD: Refresh the Mobile App to test.
NEXT ADD THE URL TO THE IMAGE
STEP 3 Create a Function
To add a Function, navigate to "System Mobile > Functions". Create a new function with Type is
"URL" and Context is "Global".
goto: sys_sg_button.list
Name: CI Homepage Function other example : NeedIt My Portal Link
Link URL: /portal_name
Link Lable: CI Homepage Label
STEP 4 Create Function Instance
NOTE: Follow the instructions word for word
Navigation:
Function Instance: sys_sg_button_instance.list
Name: CI Homepage Function Instance Example see: NeedIt HomePage
Location: Media section
Label: CI Homepage Function Instance Label Customer Visible sample test: Welcome to XYZ mobile!
Parent table: sys_sg_applet_launcher
Parent:
Click magnifing glass
Document: Type Applet Laucher (TAB) name from the assumptions above. Example NeedIt
Applet Launcher (footer TAB in Mobil App) Exist : Critical Incident
STEP 5 Add the Function Instance to the UI Section from STEP 2 Find Laucher -> Find UI Section
Table: sys_sg_applet_launcher.list
sys_sg_section_list.list
- SCROLLING LIST UI SECTION
STEP 1: Using studio
goto Applet Launcher Create new UI Section
Section name : Test
Orientation : Horizaontal
Section Type : Item
List applet: Select from a dropdown with existing applets
STEP 2 : Update Default showing
goto : sys_sg_item_section.list
Search by Title
Max Items Display Count = 5
Hide section if empty = true
****GROUPED LISTS UI SECTIONS
STEP 1: In studio
goto Applet Launcher
goto UI Section
move to right needed applets
STEP 2: If UI Section does not exist
Click (+) to create new UI Section
Section name: xyz
Section Icon
Orientation: Vertical
Display Count : True
then do STEP 1
****LIST UI SECTION
****FOOTER
TABS (ak) Applet Launchers
FUCTIONS --- > Action
Development Process for Creating Action Functions
The process for creating Action Functions is:
1 Create Action Items
Define Action Item Parameters
2 Create Actions using Action Items
Define UI Parameters
Map UI Parameters to Action Item Parameters
3 Add Actions to Applets
CREATE NEW RECORD***********
STEP 1 : Create an Action Item called Create NeedIt.
Make all Item Paremeters dot walkable : short_description
1. Set the Type and Table field values to the appropriate values for creating NeedIt records.
2. Add Action Item Parameters to the Create NeedIt Action Item for every field on the NeedIt record that needs a value.
Set the Type field in the Action Item Parameters based on the NeedIt table field data types.
HINT: To determine what Action Item Parameters to create, create a NeedIt record on the desktop NeedIt application.
Make a note of which fields are mandatory. Some fields on the NeedIt desktop application are automatically
populated by client-side logic. Desktop client-side logic does NOT apply to mobile applications.
3. After creating Action Item Parameters, configure the Set field values field in the Action Item to set the NeedIt
field values on the new record using the Action Item Parameters.
STEP 2 : Create an Action called Create New.
1. Configure the Action to use the Create NeedIt Action Item.
HINT: Be sure to set the correct value for the Context field or the Action will not be available from the List screen.
***Scripted Action Item:
https://youtu.be/yEG-ylak_pE?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=2206
2. Create Action UI Parameters for every field on the NeedIt record users can configure when creating records.
Choose the Input type value based on the NeedIt field data types. Use the Order field to order the fields in the screen
users see when creating NeedIt records.
Make all UI Paremeters dot walkable : short_description
3. Map the Action UI Parameters to Action Item Parameters.
STEP 3 : Create a Top menu Function called Create New for the List screen of the NeedIt Next Quarter applet.
HINT: To make testing easier, change the sort order for the NeedIt - Next Quarter Data Item. Configure the sort
order to display the newest records at the top of the list.
CREATE NEW RECORD -- Using Parameter Screen Scripted**************
https://youtu.be/1oKvM2acsso?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=229
UPDATE RECORD*****
VIDEO: https://youtu.be/yEG-ylak_pE?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=2142
FOR Scripted Update Use: input.sys_id on the script
STEP 1 Create Action Items
Type start with Update
Define dot_walkable Action Item Parameters
TIP: Open the record to be updated and use the field_name to build the data pills
Use the Item Parameters (data pills) to populate the field
NOTE : Add Item Parameter for Sys ID Ex: needit_sys_id
STEP 2 Create Actions using Action Items
Define UI Parameters
Map UI Parameters to Action Item Parameters
NOTE: Sys ID sys_id Auto fill Source field false Button
UI Paramenter
Name: Sys ID
Input source: Auto fill
Input Type: Source field
Button parent table : The table to be updated
Source field Sys ID
STEP 3 Add Actions to Applets
Can be added to multiple applets
DELETE RECORD****************
STYLING****************
STYLING THE CARD
Item Configurations : sys_sg_master_item.list
https://youtu.be/jdLlFMBtTns?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=1192
******CREATING MOBILE UI ROLES ****************************
STEP 1: Navigate to the platform not studion
Type: mobile ui rule
Vreate mobile rule: sys_sg_ui_rule.list
Condition: to find or verifying the element position
goto: sys_sg_master_item.list
Card Builder Take: View Config : sys_sg_view_config.list
STEP 2: Create Mobile UI Rule Action Sample VALU: { "BackgroundColor" : "#FFA4A3", "FontColor" : "#64201A" }
step 4: Open card builder if needed and verifty the layer position
AMAZONE********
VIRTUAL AGENT
MOBILE APP TOP BOTTOM
https://gist.github.com/wave-inguane/05248fea976207a9c9e98e8a3a1942c1
TABLES
Navigation Tab Map : sys_sg_navigation_tab_map.list
Applet Launcher: sys_sg_applet_launcher.list
Navigations : sys_sg_navigation.list
Functions: sys_sg_button.list
Function Instance: sys_sg_button_instance.list
VIDEOS
Mobile App Academy
https://www.youtube.com/playlist?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D
Mobile App Academy: Mobile UI Rules for UI Policies and Parameter Screens in Quebec
BRANDING
Header Titles
sys_sg_applet_launcher_header.list
Header Banner : follow the link https://community.servicenow.com/community?id=community_article&sys_id=ff575fe4db0d5c1013b5fb243996195e
Static Media Sections: sn_me_static_media_section.list
Item Configurations : sys_sg_master_item.list
Item views : sys_sg_item_view.list
Icon: sys_sg_icon.list for navigation tad type = image
TO Change the TAB ICON
Applet Launcher Tab : sys_sg_applet_launcher_tab.list
Update Icon Section Icon Sections : sys_sg_icon_section.list
ICON Work around:
https://youtu.be/rBT9pzPvPuw?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D
CHANGE TABS COLORS Client Themes: sys_sg_client_theme.list
And AttachBrading to the Client:
sys_sg_native_client.list
Replace client Theme
go directly to: sys_sg_native_client.list
HANDS ON LABS
Build My First Mobile Application
Developing Mobile Applications
EXTRAS
LINKS
Developing Mobile Applications
HANDS ON
Mobile Applications
Mobile Development - Completed
MOBILE APPS
Create Mobile Push Notifications
Mobile Apps Success Playbook
Mobile Apps & Platform ServiceNow Community
Best Practices Guide: Building Mobile Apps with ServiceNow
TROUBLESHOT*****************
STEP 1: Log out and back In
STEP 2: Find the record using the platform
STEP 3: Custom google Search
FOOTNOTES
HIDE HEADER ON TOP OF THE UI SECTION**
STEP 1: UI Sections
sys_sg_icon_section.list
make Hide header = True
Save the record