Skip to content

Instantly share code, notes, and snippets.

@wave-inguane
Last active Oct 24, 2021
Embed
What would you like to do?
GuidedsnMobileApp

Configure mobile app token lifespan

https://docs.servicenow.com/bundle/rome-mobile/page/administer/tablet-mobile-ui/task/configure-mobile-app-timeout.html

******VIDEOS

Mobile App Academy

https://www.youtube.com/playlist?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D

STARTER KIT

Build My First Mobile Application

https://developer.servicenow.com/print_page.do?release=quebec&category=course-module&identifier=app_store_learnv2_mobileapps_quebec_build_my_first_mobile_application,app_store_learnv2_mobileapps_quebec_build_my_first_mobile_app_objectives&module=course

Developing Mobile Applications

https://developer.servicenow.com/print_page.do?release=quebec&category=course-module&identifier=app_store_learnv2_mobileapps_quebec_developing_mobile_applications,app_store_learnv2_mobileapps_quebec_developing_mobile_applications_objectives&module=course

**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*

https://docs.servicenow.com/bundle/quebec-mobile/page/administer/tablet-mobile-ui/reference/mobile-campaign-card-config.html

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

  1. BANNER UI SECTION

********ADD LINK IMAGE HEADER TO MOBILE APP

Source: https://community.servicenow.com/community?id=community_article&sys_id=ff575fe4db0d5c1013b5fb243996195e

Assumptions:

  1. The Mobile App is istalled :

  2. The Scoped Mobile App Exist :

  3. 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
  1. 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

https://community.servicenow.com/community?id=community_article&sys_id=38574762db778058f7fca851ca9619dc

MOBILE APP TOP BOTTOM

https://gist.github.com/wave-inguane/05248fea976207a9c9e98e8a3a1942c1

Quick Action https://developer.servicenow.com/connect.do#!/event/devdays19/NY_MOBILE_LAB_DEMODAYS/lab_NY_MOBILE_LAB_DEMODAYS_quick_action

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

https://developer.servicenow.com/print_page.do?release=quebec&category=course-module&identifier=app_store_learnv2_mobileapps_quebec_build_my_first_mobile_application,app_store_learnv2_mobileapps_quebec_build_my_first_mobile_app_objectives&module=course

Developing Mobile Applications

https://developer.servicenow.com/print_page.do?release=quebec&category=course-module&identifier=app_store_learnv2_mobileapps_quebec_developing_mobile_applications,app_store_learnv2_mobileapps_quebec_developing_mobile_applications_objectives&module=course

EXTRAS

LINKS

Developing Mobile Applications

https://developer.servicenow.com/print_page.do?release=quebec&category=course-module&identifier=app_store_learnv2_mobileapps_quebec_developing_mobile_applications,app_store_learnv2_mobileapps_quebec_developing_mobile_applications_objectives&module=course

HANDS ON

Mobile Applications

https://developer.servicenow.com/dev.do#!/learn/courses/quebec/app_store_learnv2_mobileapps_quebec_mobile_applications

Mobile Development - Completed

https://nowlearning.service-now.com/lxp?id=overview&sys_id=a96cc748db8764507aa13df339961964&type=course

https://nowlearning.service-now.com/lxp?id=overview&sys_id=a96cc748db8764507aa13df339961964&type=course

https://nowlearning.service-now.com/lxp?id=overview&sys_id=a96cc748db8764507aa13df339961964&type=course

https://nowlearning.service-now.com/lxp?id=overview&sys_id=19f27d32dbdcd8103e73166e1396199a&type=course

https://youtu.be/bFJeJkBFpts

MOBILE APPS

Create Mobile Push Notifications

https://nowlearning.service-now.com/lxp?id=overview&sys_id=12e8a27e1bb71850dad363d07e4bcb88&type=course

Mobile Apps Success Playbook

https://www.servicenow.com/success/playbook/mobile-apps-get-started.html#resources?cid=youtube:smkc:mobile

Mobile Apps & Platform ServiceNow Community

https://community.servicenow.com/community?id=community_forum&sys_id=b7aab358db54e3c42be0a851ca961917

Best Practices Guide: Building Mobile Apps with ServiceNow

https://community.servicenow.com/community?id=community_article&sys_id=fde2e637db5f9c9066f1d9d968961999

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

CUSTOM PUSH NOTIFICATION

 ====================================================================================================================
 Send notification when a priority or state changes
 ====================================================================================================================
 STEP 0: How to configure push
      OOB Configured Pushes
      Push Notification are configured in the Now Platform




 STEP 1: Where do you want the notification to show [App]
      Requires: sys_id of the form screen
 https://youtu.be/wrdVvXmMQBA?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=674

 sys_sg_screen.list
 sys_sg_form_screen.list

 SysID: ebb94d9c0f2033001befa68ca8767e4e


 STEP 2: Set up the push messages

  Push App
  Now Mobile use: ServiceNow Request Application
  Now Agent Use: ServiceNow Mobile Application

 -Create Message Content Record : NeedIt Mobile Push Notification
 sys_push_notif_msg_content.list

 -Create push Message : NeedIt Priority Updated
 sys_push_notif_msg.list



 STEP 3: How the notification is triggered and who is the receiver
 sysevent_email_action.list
 Type: push notifications
 Priority Changes

 STEP 4: Register the notification to a push up
 goto: push app
 Make sure you are in global scope
 Select: ServiceNow Mobile Application - for Agent App
 goto Related list
 move over Push Default Registration->Push Application

 I am here

 https://youtu.be/wrdVvXmMQBA?list=PLkGSnjw5y2U5bf79MQ1BPDk6hwOjXY54D&t=1549


 MORE: Setting
 https://docs.servicenow.com/bundle/rome-mobile/page/administer/tablet-mobile-ui/concept/manager-user-settings.html


 https://docs.servicenow.com/bundle/rome-mobile/page/administer/tablet-mobile-ui/concept/mobile-config-navigation.html


 https://docs.servicenow.com/bundle/paris-mobile/page/administer/tablet-mobile-ui/task/sg-mobile-set-up-push-notifications.html

 Select an applet for your notification link
 Select the applet your users are directed to when tapping a notification.

 Create message content for your push notification
 Create a message content record to define what information your users see when viewing a notification.

 Create a push notification message
 Push notification messages using the message content record you have created in previous steps.

 Create a push notification
 Create a push notification record to define what triggers a notification, and who receives it.

 Register a push notification
 Register a push notification in a push application to being using it in your mobile apps.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment