logo

NJP

Mobile App Academy: Configuring Action Functions, Smart Buttons, and Navigations Pt. 1

Import · Sep 17, 2020 · video

hello everyone and good morning good afternoon and good evening whether you're joining us live or on demand welcome back to mobile app academy um this is the show where we show you how to build and configure mobile apps live on the now platform and today we i think we really have a great one for you my name is charlie steiner welcome back product marketing manager here at servicenow with the mobile team and today we'll be walking you through configuring action functions on the servicenow or with the servicenow mobile apps excuse me and wow looking at the chat it's really great to see quite a lot of you who have been with us from from the beginning and once again we appreciate you coming back week after week and and really being with us through this series and quite a lot of new names as well it's always really exciting to see and welcome aboard we hope you enjoy if you're brand new to the mobile app academy or watching this on youtube on demand we host these sessions every two weeks here on zoom at 10am pacific and you can find that in our mobile community we will be posting the recording and two weeks from now's topic and if you're brand new to the servicenow mobile apps or the mobile family definitely let us know the chat you know we love getting insight from you what you're learning what you're interested in what you'd like to learn next from us because that's definitely how we get our ideas and our inspiration for future app academies so with all that said i'd like to introduce david haas senior product marketing manager on the outbound sorry senior product manager in the outbound product management team on the mobile team so david take it away thanks for the intro charlie good morning everyone welcome back to our mobile app academy my name is david haw and i'm an outbound product manager here at servicenow also have fulo here with me who is the solution architect of the mobile team here at servicenow as well and we want to give a warm welcome to everyone joining us live today um let me share my screen real quick just so i can show you the agenda for today okay so i think you should be able to see my screen now and so uh so based on some of the common themes of questions that we are seeing on mobile community this week we will be walking you through service um actions action locations as well as extending now mobile out of the box workflows and we're gonna build a couple of custom workflows today um including announcements as well as employee directory landing page um and you know for today's topic we'll be uh doing a live building session and we will be leveraging the now mobile app um and extending additional custom workloads on it and within this custom workflow we'll actually be doing the following so starting with the now mobile app we'll start with the out of the box experience that's readily available to use upon plug installation and then we're going to focus on the general employee or the recruit the requester use case for today and then to improve this out of the box experience we're going to build out a couple new landing pages so first we're going to use um we're going to build out an employee directory workflow so i can quickly look up information on my manager and my co-workers and how i can quickly email or make phone calls to them and then second we'll actually use a bunch of media sections to create an announcement page so you know if you want to consolidate all your news posts and have them link out to urls let's say that you want them to open up announcements from your from your organization so this is especially useful um if you want to communicate those workplace articles any type of news or announcements and so that's a couple of custom things that we'll be configuring today uh and then we'll also talk about all the different ways you can associate actions uh through these two custom workflows as well as the best practices when creating these custom experiences for employees okay and if you are new to mobile we do recommend that you check out our resources on mobile community so if i switch my screen real quick so here on mobile community you can actually find quick links to our mobile implementation guide all of our past mobile app academy recordings and all these things go over mobile hierarchy as well as other now mobile implementations there's also a mobile hierarchy deck as well and you know really understanding the hierarchy of our mobile apps is essential in learning how you can customize and deploy your own custom workflows so highly recommend checking those out if you are new to mobile and also a reminder our mobile app academies will take place on an orlando instance although some of the features that we configure are also supported on new york instances however the configurations might look different or be different and uh with that said today's session will last about an hour please feel free to ask us questions at any point in time we'll take breaks to answer questions and then we'll also use the remaining time at the end to go over any uh open-ended questions um and yeah if you have any questions feel free to send them over on the qa section soon so without further ado let's go ahead and dive straight into it so uh one second i need to display my mobile app real quick so i can show you my out of the box my mobile app okay sorry you should not be able to see my phone okay so to get started today we're actually gonna enable some of the following first you're gonna wanna make sure that you already have installed the now mobile block from your devices app store so in our previous app academies you know we showed you how to do things like configure some of the pre-built mobile experiences like my requests my services uh kb articles on information tab we also did things like how to add uh requests add fields to applets or even adding new catalog items and also walk through some of the flows and use cases of what's available immediately upon enablement and we've uploaded these past academies on the servicenow community channel on youtube so if you haven't already um if you look up youtube and just look up mobile app academy we do have this i think 14 or 15 video playlists and it should be one of the first links up here so you know definitely recommend if you're new to mobile check out these videos and some of the first three videos are us going through common use cases on how to configure the now mobile app okay um and then going back on our instance uh to get your environment set up you're gonna you're gonna want to make sure your instance is upgraded to orlando uh my instance is already on the latest orlando patch four and uh once you're upgraded you are gonna want to manually install the now mobile plugin so it's a single plugin which you can find on product docs or you know refer to refer to your earlier mobile app academies if you take a look at my instance i'll show you the plugin name real quick this is just a quick refresher in case you aren't familiar with now mobile but once we give this a second to load um if i do look up uh mobile dash employee it'll be the second plugin here service down now app screens and app launchers and you can see that this is already installed so um now that i have this plugin installed i'm pretty much ready to go um and ready to use the download okay so jumping into your now blah no you should see the out of the box experiences that you get with it uh which contains before me tab services tab information notifications and so forth um and you know if you'd like to review some of those old tabs and common things you can do to customize again check out those few app academies we have on youtube as well as the mobile community site but for today we're going to focus on two new apple launchers first we're going to build out an employee directory landing page that shows me my team my profile as well as my groups and then the second landing page we're going to build is an announcements landing page and to do these um you know we're going to start with the employee directory directory workflow and this employee directory will show me my managers my co-workers i'll give you a quick demo and preview of it real quick uh you know you should be able to see my manager my group members if i tap into my manager you know i can see additional information on her um and you know i'll even add smart buttons so that i can uh make make quick taps so i can either call her or send an email all through a push of a tab so uh and then at the top right of this apple launcher you can see that i can see my own profile and within this profile you know there's some common things that you want to do you know like uh possibly change your password or being able to update your phone so if i wanted to update my phone and i'd be able to do that really quickly and submit and instantly you're able to change information off the assist user table um i do have a service catalog item that allows me to do a password reset so if i look up password reset on my services you know i'm able to request a password reset here and this is available out of the box however if you want um your users to also be able to access it on this custom landing page i'll show you how to build that from scratch so when i go to my profile and go to the top menu actions i'll also be able to do password reset here and it's going to say that this is reset for my login user i can say what application i want to reset the password for and how i want them to contact me okay so let's go ahead and start building that now um starting with this employee directory workflow so let's make sure my laptop's getting charged so that it doesn't die and then let's get started so uh if you are familiar and you've been following our academy series you know um we've mostly been using platform ui and the reason for using platform ui is because now platform was built i mean the now mobile app was built on multiple plugins across various videos right item itsm hr csm so forth um and you know mobile studio it's typically it's a tool that allows you to easily modify existing workflows that we provide out of the box however when we uh released the now mobile app uh you know you weren't able to configure your now mobile app using mobile studio just because it's built on so many different plugins when you're using the servicenow agent app you know each bu workflow whether it's itsm agent incidents or a field service mobile each one of those was built on a single plugin and so it was much more manageable and you were able to customize existing workflows using mobile studio so that was a limitation uh for now mobile not being able to use mobile studio uh going into new york orlando and paris however we are working on it you know our product teams working on it and improving that experience and we you know sometime in the future uh you know on an incoming release you will be able to customize existing out of the watch workflows uh using mobile studio but another thing that you should know is that anytime you create new landing pages or new apple launchers you can actually start using mobile studio it'll actually save you a lot of time so i'm actually going to use small studio today and you're going to see how i'm going to be able to do that so we're going to launch studio real quick and i'm going to i'm going to create a newspaper um and this new scope will allow me to create net new components onto my now mobile right so let's give this name real quick we'll call this live webinar uh september i'll give it a roll we'll select the mobile experience and then i'll just fill in the instant table okay so we're just going through the typical guided app creator steps and it'll quickly launch me a new landing page or a new scoped application with all these different components right and all these components that get created um these get applied only to service nomination so that's currently a limitation for a guided app creator you know all these things that have been created for me on the servicenow agent is not you know it's not applicable to today's session i'm actually going to ignore these and i can even delete these if i want because really i'm creating a new component for the now mobile app not the servicenow agent um so to get started i'm going to create a new landing page a new apple launcher and i'm going to name this at the launcher um we'll call this my team or we'll even just call it we'll give this uh a title for the home page so we'll call it my team and then we'll save okay and then i'm gonna associate this at the launcher this team i need to point it to the now mobile app otherwise it won't show up as a tab on my client so i'm going to open up the now mobile client on studio and we're going to create a new tab and on this navigation tab right navigation tabs are these right here i'm going to select the apple launcher that i just created which is team or i actually need to create a new record for navigation tab um and here you want to specify whether you want an apple launcher an applet and these aren't relevant we're going to create an app launcher the label for this will just be team uh team is my apple launcher uh i think it's pulling the title i believe yes it's pulling the title so that's something that's good to know and then icon i can just keep it home uh when you are selecting icons you know i'm using out of the box icons that were used from other plugins you know you're going to want to make sure that the type is not an image because image type icons are not supported and i did go through a past academy where i explain the different types of icons that are supported but um i'm gonna need to choose a different icon uh we'll just use the for me oh let's use this one okay and then we'll go and save all right to get this apple launcher to show up i'll have to log out and log back in but currently this apple launcher doesn't have anything yet um so the first thing i'm actually going to build out is um i want to be able to build out this first applet that shows me my manager okay so with any applet that you create we're going to launch this new record under for applets um and then i'm going to name this name this my manager i can give it an icon and color and then we'll select the employee directory applet template and then we'll click create new and then with every every applet you know requires a data item so we'll create a new data item and we'll call this my manager data item this is going to pull from the assist user table we'll save and then in my query conditions i want to say that my manager is dynamically so my logged in user it's going to pull the manager from the logged in user okay so now we'll go and save going back to my applet i'll select the data that just created and now i'll just fill in some fields so i want to bring over avatar as well as name we can bring over title and um what am i missing your name title we'll just put department okay and then on the profile screen which is basically like the foreign screen on the list will replicate if i want any additional fields in the body which i do because i also want to be able to make phone calls or send emails so let's bring over location um mobile phone and then we'll save okay so now i have an applet for my manager now i just have to associate it to the landing page or the apple launcher that i just created um so we're going to open up this app launcher for my team again and we're going to create a new ui section right now this is completely blank remember ui sections are used to associate your applets and you can use icons or items i want to be able to quickly see the avatar as well as the details of the record so we'll select item and then for the section name we'll call it my manager we'll select the um employee directory output that we just created and we're going to have this panel vertically so that it goes down and we'll save but i'm only going to have one manager just doesn't really matter so we'll go and see this now if i log out and log back into my app i should see my manager okay i'll log in with my credentials and then on the more tab uh i should be able to see uh my landing page but as you can see you don't currently see my app launcher so um let's troubleshoot this why is my apple launcher not showing up so let's open up the now mobile app again the now mobile client and then we're going to look for um my team app launcher and it looks like i didn't associate a uh a tab yet for um my team app launcher or i would i guess i didn't so let's go and create a new tab although i thought i did but let's go ahead and do that again real fast so navigation tab we're going to create a new record oh i have it here maybe i just didn't submit we'll go and submit and then i should be able to see team yep and it's going to be right here yes okay so now um if i log back in and log out i should be able to see that launcher uh which i don't save so i've created an apple launcher for my team i have a ui section for my manager and i've associated to the now mobile client which should show up here let's double check to make sure it's active uh which i can't tell from here so we're going to check platform ui real fast and see what's going on so i'm just walking through the steps on how i would troubleshoot this so if i open up launchers or actually want to open up navigation tab navigation bar clicking into the now mobile client i see that my team is associated and here it is so if i open up my team i can see that active is set to false so i'm going to want to actually turn this to active um and it looks like this isn't actually the right screen uh so we're gonna do this one more time to make sure i don't skip uh skipping steps so we're gonna create a new navigation tab on now mobile no more shortcuts so we're going to create a new tab we're going to create a new navigation tab we're going to call it's gonna be an apple launcher we'll call this my team uh the app launcher is team my team we'll make sure this is the right one from live webinar yep we'll give an icon and then we'll submit and here you can now see there's two records i don't want both records so let's just delete one of these and then just to confirm that this is active we're going to check the platform ui again and see set to false by default so if i look at this record oops open record my team so it is set to active okay so now if i do log out and log back in i should be able to see this so if i log in with my credentials and here we go i can now see my app launcher for my team uh if i click into nicole i can see additional information on it alrighty uh the second part that i want to create is i want to create a new applet for my group members so i can also see additional information and also be able to work and communicate them really quickly if i just log in through my mobile app so to do this i need to create a second applet we're gonna create another employee directory applet uh and we'll call this my group members we'll give it an icon in color um we'll select we'll create a new data item for this it's going to pull from the assist user table uh these are sis caesar here it is oops cis user sys user there it is okay we'll call this my group members data item and then we'll save and then uh i'm just going to do a really uh simple query there are definitely definitely different ways you can query your team members or group members i'm just going to simply hard code this and say that i want to see my group members that are in san francisco and then we'll go ahead and click save uh of course there's different ways that you can make this dynamic um and various ways that you can script this uh feel free to ask is also a mobile community and that's possibly another session that we can cover as well um so we're just going to show micro members that are located in sf and then we'll select the data item that we just created which is my group member's date item we'll bring over the same fields which is avatar name title and department on the profile screen we'll replicate from primary on the body we'll also bring over um location phone as well as email and then we'll save okay so now i've finished creating my group members applet now i just have to associate it to this landing page right so i have a landing page for my team we'll create a new ui section i also want this to be an item section and we'll call this my group members in san francisco and now select my group members and then we'll pan this vertically as well and save so now if i refresh my team's app launcher i should see my group members okay so this is a really quick way i just want to show um you know how i can create a custom app launcher and for this use case i'm able to show my team um and you know if i want to be able to quickly email or make a phone call to different team members i'd be able to do that using smart buttons so smart buttons uh is one of the functions that we that's available on the platform right you have action functions which allows you to update records or create new records on table or delete um you have smart buttons which allows you to which are native buttons that allows you to um it takes advantage of the native capabilities of your device um you know you can navigate to a location taking the gps coordinates uh of that record you can quickly email someone make a phone call or even navigate to another url all with the top of the button just to show you one example we're going to create a smart button for let's do phone um and this will allow me to make a phone call to employees okay the context is going to be a record because you do want the uh the record from the phone number uh from uh each user uh the table is going to be from sysuser um and then the field from this table um that it's pointing to is the mobile phone so we'll look up mobile phone and then if you want like a default um text message you can set that we'll say [Music] uh let's give it a default message of okay and then we'll click save uh so now that i've created this smart button now i just have to associate it to this field on my group members applet right so this is uh my group members employee directory applet uh and this is the form screen so let's open that up now we'll open up my group members this is the list screen and this is the form screen and it lives on the body um and once you click on body you'll see this function for fields so this is where you can put it [Music] the field is going to be these fields here uh the ones that show up are going to be the fields that you pull into your body so we want to put the smart button on the mobile phone and we're going to select we make a phone call to employees function and we'll save so now if i save on mobile studio and i refresh my mobile app i should now be able to make a phone call to beth and i can either call or send a text message okay so that's a quick example of smart buttons again these are also this is very common use case and there's a lot of labs available um on the mobile community site um okay so the next thing i want to show is i actually want to create a profile function at the very top here and this is going to be uh this is going to show my profile and i'm going to be able to do things like make a password change or update the phone number for my user so to do this um this is actually isn't you you're not able to do this inside of mobile studio so we're actually going to have to do this on platform ui and the reason why you can't do this in studio is uh if you open up the app launcher you know you would expect that there is some sort of function that says header or top but all you see is quick actions and ui sections and header but i can't associate a function here um but if i navigate to platform ui and i look up um apple launcher and i open up the app launcher 14 for my team and then i click into the header you're going to see this the field that doesn't exist in this video which is header function so let's switch into the scope and um first to get this to work we're gonna have to first create a profile applet that takes me to my profile and then i have to create a navigation uh that allows me to not be there so we're actually gonna do that inside of studio real fast just because it's much quicker right um so let's create a profile applet real fast um so employee directory we'll call this my profile uh actually so if you create an employee directory applet you know it shows you a list screen before it takes you to details so that's one additional step that i don't want to do and i actually just want to show this form screen so that when i tap on that to navigate to profile it takes me directly here so how would i be able to do that i can actually use a prioritized form screen so that's a new screen template that came with new york um and let me show you how to configure that now so we're going to create uh my profile but this is going to be a form screen i can give an icon in color if i want and we'll click see so we're going to create a new data item for this form screen it's also going to pull from this this user table okay we'll call this my profile and um we'll save so a form screen always requires a parameter because it doesn't really know where to navigate to it needs context to a record of some sort so that's why we're actually going to create a we're going to make this parameters and we're going to use a parameter for autofill that autofills the assist id of the current logged in user and that way it always knows that you know i'm logged in as david and so it will always pass the assist id david to this form screen and that's how it's going to know how to navigate here so we're going to create a new parameter for cis id it's going to be string and then we'll save this data going back to my form screen we'll select the data item that we just created um we're going to change this pattern so that it mimics the employee directory if i scroll down actually there's a template for employees and then we'll also bring over avatar name um title and department okay and then we'll save once i save um you should be able to see the parameter settings so here i'm actually going to want to create an autofill ui parameter so let's create an autofocus ui parameter that way you know you're not manually typing in the sys id of the user it's going to autofill that sys id for you so you look at input input types there are different autofill parameters that you use you can use gps location date user um so let's select user and we're going to call this the user's id and then we're going to map the item parameter from my data to this autofill parameter that i just created so that's gonna be cis id mapping to the parameter that i just created user society okay so now if i save this applet should work um i just have to associate it back to my now mobile client but there's no way to navigate to it yet so i have to create a navigation function to be able to get there right um if i want to be able to put it at this top right here i have to create a navigation so let's create a navigation um and we're going to call this navigate to my profile this is going to be a global navigation and the reason for that is because it's sitting on an applet launcher right it's very similar to quick actions um that's why it requires global context and the destination type is maplet and applet is my profile i'll click save um and now i just have to associate this navigation to this apple launcher at the top right to do that um this is the part where i have to leave studio to go back back to the platform you want for the header function so i'm going to open up my team app launcher on platform ui click into the header and there is a header function here we're going to create a new record and we're going to call this navigate to my profile the parent table is uh it's going to be at the launcher that's where this function sits and the parent is it's going to be the name of your app launcher so we're going to look up my team again uh the name is actually the title uh right it's gonna be the title of your app launcher and then we'll click ok the function is the navigation function that i just created so now you need my profile the label doesn't matter because you won't be able to see it but we'll also copy and paste that here the location is going to be top top applies to the top of the apple launcher and then we'll submit now if i save and i go back to my team if i refresh so you're probably wondering why the function didn't show up okay so i actually missed a detrimental step so i go back to bold studio and i look at my navigation this is the first thing that i would want to troubleshoot did i map my parameters correctly so first i would double check on my applet that you know all my primers look good i have my auto fill parameter and it's mapped uh the the item primer and the ui primers match here so the only other place to check is my navigation if i open up my navigation you know it's global contacts it's navigating to my profile [Music] um so it's possible that i selected the wrong uh applet so let's double check this real fast the header function and open this record okay so um the applet launcher my team is this the correct apple launcher live webinar september yep that looks good uh the function navigates to my profile this is the one that i created this also looks good um location is top which is correct oops oh i didn't give an an icon um [Music] so this is a font which should work and then if i click save let's see if the icon is required now okay uh let's see function navigation global looks right parent table going back to studio let's double check my parameters again uh let's close all this just to clear up my space so if i look at my form screen which i called my profile uh let's double check the data um as well profile data item ah and here we go so it looks like i created a item primer for cis id but never mapped it back to the table right um using this reference value icon so we're going to select sys id and map it to this item parameter now if i click save and i refresh um okay so item parameters mapped will double check my applet i have my autofill parameter which is user and it is mapped just saved um and then if i check platform ui open up apple launchers for my team double check the header function that looks right navigation function global that looks right top huh let's see [Music] let me double check if i change that location real fast this shouldn't work and then change back to top okay um through any ideas where i could possibly miss the step uh data society yeah i think we have a uh i think someone from the audience said that you keep going to the wrong apple launcher oh did i that's possible too okay so if i double check my apple launcher so let's reset this so app launcher uh there was to my team so maybe i selected the wrong one is it this one let's double check now this is from itself mobile agent so it has to be this one so that's the correct app launcher uh the function is simple is just a global function and it should navigate to my profile did i take it to the right applet my profile that looks right uh actually destination screen is that what i called it on studio my profile i did adam yeah um so the problem is that you're not able to see the icon at all in the header yeah um let's double check the one that i created a little earlier so i called it open profile so let's see if there's any differences if i switch into the scope that i created earlier let's just double check for any differences so i created an open profile employee directory i map the parameters autofill that looks right i created a navigation global navigation which takes you to open profile and is also global and then if you check platform ui for app launcher oh you know what looks strange on your studio um you have to pass in a privatize if you look at your navigation function the one you created go down to navigation function yeah switch back to your original one you notice how this one right here you have no it's global right and it's already it doesn't actually for any variables because you have a prioritized output as an autofill so i i thought i saw something where you had a navigation where you had to provide a sys id so let's double check your so the parameters so anytime it's global you don't need to pass parameters right right right i thought i thought your navigation you had something wrong i had did it let's double check double check so i open up my navigations oh okay nevermind yeah so you're going to an applet yeah it is top launcher okay uh just to save time um this should work i'm not sure why but i'm going to reuse uh the function that i created earlier now that should probably fix the issue so launcher going into um my team huh wait so the audience said that i opened the wrong apple launcher i just clicked open my app launcher and there's a missing header function so i think it i was open yeah i think they might have been right so it looks like uh i was applying this to the wrong app watcher um so the title my team that's this one that we're configuring uh and it's blank so that's part of the reason why it's not showing up so let's create a new record and double check so we're going to create a new header function again um and this is going to navigate to my profile there again the parent table is going to be apple launcher and the parent is going to be the name of your app launcher or the title which is my team okay the function is navigate to my profile uh the labels doesn't matter but i'll copy paste location is gonna be top and then we'll click submit now if i save this hopefully it shows up uh the only thing i'm missing is an icon so i think an icon is required if you leave it blank there's really nothing to click on they should have made this required field but let's put user icon here and refresh so there it is so now that i have an icon it takes me to my profile okay it says no items available right now because i didn't bring over any fields uh for that forum outlet so let's actually bring over some fields right now real quick um so we'll open up my profile form screen go into the body and we're gonna bring over uh location as well as email and phone number okay so we'll save now if i refresh and navigate back to my profile i'll now see some additional fields uh not sh i'm not sure why it doesn't show location oh so this user doesn't have uh the location uh field filled in so that's the reason why it's showing blank um so the next thing i actually want to do is you know i already have a service catalog item that allows me to change my password right so if i go to the out of the box for me tab and i global i use the global server try and look up password reset you know there's already a catalog item that's created on the mobile employee service center right so i want to reuse this url um and when you tap into it right it takes you to the mesp um so how would i go about doing that so the first thing i would do is i would go to platform ui and on my left hand nav i'm going to look up um service portal and i'm going to launch the service portal home okay and then i'm going to look up password set so this is the same password reset that you'll see here when you open up this record um it's going to contain a sys id so i'm going to use this url format so that it takes me back into the mesp on now mobile um so let's first save this this id here and then we're going to use this mesp link all right so we're just going to do this um and it's going to open up the service catalog inside of mesp but you know what's the sys id of that url so we're going to copy and paste this this id here and this is going to be my new url um that i want to point to this will take you to a mobile view of uh this catalog item so you might be wondering you know why why can't i just take the service catalog view and the reason for that is uh you know out of the box the now mobile team built uh a new table called the mobile employee service portal right and you can access it here when you look up now mobile right uh if you looked at our earlier mobile app academies when we create catalogs it's as simple as just you know creating new catalogs on this table that they provided you or if you wanted to add a new request you would just open up this custom table um create a new record here and it will automatically populate inside of this mesp table so to get the same similar experience uh so that it looks good inside of mobile you're going to want to use this url uh template mesp and so forth had i just taken the full url it'll just open up a webview and you know it's giving me a lot of pinching and zooming and it just doesn't look good so this is the relative url that we're gonna use and um to be able to so what we're trying to do is just to give you a quick demo when i go into my profile in the top right i'm able to launch password reset in the top menu it'll take you to that uh now mobile view of the password so to get to configure this you just have to create a smart button that takes you to that url and then we just have to associate it to this form screen okay so let's go ahead and do that now um we're going to create a new smart one the type is going to be url this is going to this is going to be for password reset uh this will be global just because it's a fixed url the url link is here and then your label is going to be password reset okay and then we'll click save um so it automatically knows that it's a relative so i don't actually have to fill in the entire url i just took the appended url here uh so now that i've created the smart button now i just have to associate to my form screen um so let's open up my profile form screen and in the um on the functions underneath overall settings there is a top menu function here and this works just like a top menu of a form screen ring let's select the smart phone that we just created which is password reset and then we'll label this password we'll click save save now if i refresh my form screen or actually refresh this entire app launcher i should be able to open up the password reset catalog item okay um the last thing i want to show uh just because we're running out of time uh i'm gonna create an action function that allows me to update my profiles phone number so when i go to my profile you know how do i give users the ability to update their mobile phone so to do that we're gonna have to create an action function um so with every action function we're gonna first start off by creating an action item click create new we'll call this update mobile phone the table is going to be sysuser and then we're going to make sure that use context current record as condition is check mark because this allows you to update the current record that you're in right for this one record if you leave this unchecked this will update all records across the table so definitely make sure this is check marked anytime you're doing an update function okay so now i just want to create a parameter for the mobile phone so i can update it so let's create an item parameter for mobile phone type is going to be string click submit and now i have my item parameter for mac shadow once you have your action item created you can now create your action function create new action function this update mobile phone uh the context is record the action item is the one that we just created which is update mobile phone uh and the table is going to be sysuser and then we'll submit okay um and with every action item you're gonna need ui parameters so let's create a new ui parameter here uh and you know ui primers are basically how those fields will show up and how those how the end user will fill in that field right so um i want the end user to be able to update their mobile phone number and i'm going to make it a mandatory uh type field so you have to fill it in anytime they execute this action um this will be user input as opposed to an auto autofill um the input type is text you also have different input types like list list allows you to uh if you have a choice list um it allows you to select as opposed to free form uh the text you also have search lists so in case you do have tables that are really large you can um the end user can type in fields and it'll populate the list accordingly you also have qr barcode as well and we do have app academies on each one of these input types so you know definitely check those out if you're unfamiliar um you can actually use this placeholder as instructions on how to fill in the field too so you know if you wanted them to follow a certain format you know you can do an example uh and probably a ten digit code right or tangent number so zero zero zero zero uh dash zero zero zero so that's how you want them to fill it in that's how you can use your placeholder the default value type if they already have a phone number filled in i can pull from the source field so the button parent table is going to be from assist user the source field is going to be mobile phone so now um when the user tries to update this field their current phone number will already be populated for them okay so we'll go and submit this and uh now my action uh function uh is working right so now i just have to associate it back to this form screen so let's open up my profile top many functions we'll call this update mobile phone and then select the update mobile phone if i refresh my apple launcher i should be able to see that function now so now the end user can update the mobile phone uh oh uh of course i missed stepped i didn't map my item parameter back to my ui parameter so in the action parameter mappings let's create a new field here and map our mobile phone item parameter to remove from our parameter now if i refresh and update mobile phone see how the my current phone number already populates because i filled in the default value type if i want to change it to three four one two i mean we'll do that it looks like i put in too many digits um but yeah so that's uh a really quick way on how you can give your end users read and write capabilities using action functions okay so uh that pretty much wraps up everything that i want to show today um we didn't have enough time to build out the announcements uh landing page but you know that could be it for another time um but this is a great example on how you can extend your workflows in addition to what we already provide out of the box you know this is just a great uh example of how you can use different tables and build out different landing pages depending on what your different use cases are so let's go and open up to questions now um if anyone has any questions foo is there any questions that we want to highlight from the audience um i think i think we were able to answer all of them um through the q a but there was one one question from sashi uh regarding um her um [Music] uh she's getting she's getting an error um we're logging into the now mo app so i want to get more understanding of what kind of error she's getting uh we're gonna allow you to talk uh see she's still around oh there she is hi sasha are you able to speak can you unmute yourself uh you're still you're still muted by the way um well we'll get that squared out uh we have another question on let's see would would would you want to see how the link to out of the box ui pages not sp to change i think the the confusion is like what's the difference between msep mesp versus the service portal uh change password change um you want to talk about that david or do you want me to sure so you know the if you use now mobile's you know um table conventions you know they built out an entire custom table called uh mesp mobile employee service portal and they built it so that it best fits your mobile screen [Music] if you simply link it just to service portal it might the views depending on how you created those ui pages it might not fit your screens uh perfectly i guess it's it's kind of a hybrid approach where it it uses native buttons but you're also able to see it in a web view but if you're just linking random ui pages it might just be a a webview and you know webviews they're pinchable there's they're scrollable it just it doesn't look great if you don't customize it on a native mobile screen so just i guess the simple answer is there is guardrails uh on how the now mobile team built their mesp table and allows you to easily view any information any tables and also execute actions uh much better than just linking out to a ui page but we're not saying that you shouldn't just link out to ui page right that is also something you can do but that's just our recommendation to stick to the mesp table when you can great so we have two additional questions that are pretty easy um so robert asks are you using a emulator or how are you mirroring your phone screen on the left oh yes so i'm not using an emulator i'm just using quicktime and i'm displaying my uh my phone through it so we don't officially support any emulators uh but we've heard of other customers use emulators from third parties uh um if you wanna share you know what that emulator is yeah so so basically uh quicktime is a default feature from mac from apple so if you're on a windows um you could probably use some sort of other emulator so there's one that we've we've heard from customers called peak uh i think i think there's a cost to socially but i'm sure there's like um i'm sure if you're if you're on a windows you can probably use like an android emulator i've seen those for free maybe um but yeah we're using quicktime uh so another question is from troy uh which is specific to mac is there going to be a way to test mobile experience using a web browser um currently so our application is all natively built so it's better to use if you're using like i don't know if you this is a mac feature but if you're using like um xcode you can you can probably launch the simulator but from a web browser you won't be able to to get that unfortunately you have to use some sort of emulator the other question is should we should we move to catalog item password change pages be out of the box i think that's a that's a good [Music] practice is if you're gonna if you're gonna mimic any mobile experiences you should start using the ms mesp version of it um like david said it's it's it's not just it's it's customized it's optimized for a mobile experience um the other one is miracal thank you colleen miracast seems to be the default for windows that's another emulator try that out um any document for design principle on mobile for servicenow apps um so dave you want to talk about the best practices or design principles yes so if you go to mobile community and you look at our featured content uh we actually have a best practices uh doc here uh at the very bottom so if you open that up there's a pdf uh definitely check this out um again this is just our first iteration you know feel free to share feedback if there's anything else that you'd like to know or learn more about use the comment section and let us know mobile community is a great place to share feedback with us um and you know all of our product teams are constantly on this um and this is how we kind of come up with topics for mobile academy as well so definitely let us know on the mobile community and with that all the questions we had alrighty uh looks like that's pretty much all the questions so uh you know thank you everyone for joining us today uh you know i kind of did speed through this session just because there is a lot to cover um you know but i still hope that this session you found informative and helpful but if you have any further questions feel free to keep posting on mobile community uh so that we can explore other different configurations in future mobile academies we're gonna have another session in two weeks and we're gonna show um the safe workplace uh contact tracing mobile app that's the new mobile app we released a few weeks ago so make sure you follow our mobile community site for latest dates and information thank you everyone for joining today's session and i hope you hope to see at the next move laptop cheers everyone thank you

View original source

https://www.youtube.com/watch?v=o8bprd-ZEJM