all right good morning everyone and welcome to mobile app academy this is our live building series where we show you how to build and configure mobile apps on the now platform my name is david ha and i'm an outbound product manager here at servicenow and i'll be your host for today's session i also have ian kinnear here today as our main presenter for today and we want to give a warm welcome to everyone joining us live here today um if you are joining us for the first time welcome to the session our product experts are here to provide guidance best practices and answer any questions that you have along the way and we do host these mobile app academies every two weeks at 10 a.m pacific and our recordings will be posted on youtube on the servicenow now community channel just pointing out a few resources that we do have available if you are new to mobile um we do recommend that you check out some of our self enumate resources such as our mobile guide books and white papers that you can find on the community site but we do also have a plethora of other resources such as the labs and trainings on now learning uh our playlist to previous app academies where you can find sessions like uh mobile agent quick start guides getting started with now mobile and we have almost over 40 other videos that you can check out as well and if you do like sessions like these um our servicenow teams also do host other academies such as hr service delivery platform foundation platform analytics virtual agent and many others um you can you can find those series in their respective communities by navigating to those forum tabs um but with all that said let's get started with today's topic um today we're going to show you how you can redirect mobile agent users to the now mobile client and this is primarily for customers who are currently using both apps today but want to make sure that users are logging into the correct apps from the public app stores you know for the users who are incorrectly logging into the asian app you know how do you redirect those users to the now mobile app okay and just to quickly review for today's schedule this will be a quick 40 minute session we'll start off with a quick five minute overview with um what you can do and uh what are all the important concepts and ideas here and then we'll jump into the exercise and wrap up some q a okay but with that being said i'm now going to pass it over again to take us through today's exercise excellent so as david mentioned what we're going to look at today is how to redirect our employees that may have downloaded and accessed the agent app and basically are going to get confused and not have a good experience so how can we give them a good experience instead so again the scenario is you've deployed both agent and now mobile you're leveraging the public apps and what we're going to want to do is create something like looking what you can see here on the screen a content section that appears an agent but only when users have no specific rules assigned i.e our employees and as a special bonus what we can also do is give them a way to tap excuse me to easily access the now mobile app instead or if they haven't downloaded it yet then we can provide them a way to get to the correct app store and download that so that being said we're going to jump into the exercise here and take a look all right are you seeing my browser and phone okay david looks good excellent so the first thing i want to show you is the experience that agents should be using i'm using the customer service application for for the agent app and just for the sake of this example it doesn't really matter what you're using for your agents could be field service could be itsm could be anything but in this case we're using customer service and the reason why i'm showing you how it looks as an agent first is because the first thing that we're going to want to do is we're going to take a look at our navigation bar here and we can see that the very first launcher screen that we're going to be able to access is our cases and so what we can do now with that in mind we'll take a look at what would happen if we were to log in as an employee try that one more time all right so here we are we're logged in as an employee we've downloaded the wrong app we don't know but so we're expecting to see a good experience but instead we see something like this where um we see a navigation screen maybe something else maybe your saved items and settings but we don't really have any content that we can access so what we're going to want to do instead is we're going to expose that cases screen launcher screen that we were looking at earlier to our employee but lock down the sections on it so that they're not visible to employees and display another section which is going to be a content section that's going to show the user our message basically so the first thing that we're going to want to do here is expose that sorry just at the end of my slideshow there so we're going to expose that um cases launcher screen so in order to do that we'll tap into our mobile app builder here and what i've done here is just for the sake of time i've logged in and accessed the mobile app config for our agent app and i did that so that we can see through our navigation bar what are all the screens that we have here and we're going to look for our cases screen that we know that agents would see by default so let's let's take a look at that and we're going to open it up take a look at the launcher screen and we can see that this particular launcher screen is limited to be accessed by our customer service agent role so we're going to go ahead and remove that and save to expose it and then we can also look underneath there and we can make sure that those these sections here for approvals for cases for needs attention cases that are going to display to our agents let's make sure that they all are already in this case limited but you can just check to make sure that those are not going to display to users that don't have the correct role so the effect should now be if we log out and log back in as our employee again we can now see our cases tab so step one is complete and what we can do now is figure out how to access our content we're going to add some content that we're going to use to display for that and so an easy way to do that is to leverage the static media section table that comes out of the box so this is what's going to display if i was to show you real quick this type of image this is my my now mobile app where we're seeing content here um at this image at the top so we're going to leverage that table that comes out of the box and use it for this purpose so switch back over to our other app and tap back and then we're going to go to our static media section table that i've favorited which by the way is snme static media section and here we can see that we have one static media section record that comes out of the box so we'll go ahead and add a new one and before we actually do that we're going to take a look at this content viewers drop down that's here this is important because we already have out of the box uh functionality to display that content for users that leverages this field so what would happen if we were to go ahead and add something that we wanted to display only for employees accessing the agent app without making any changes here well our content could display in now mobile and obviously that's not intended so what we're going to do is we're going to configure our choices here for this table and it's going to tell us so that in this case this table is in the now mobile application and i plan to use the customer service mobile so i'm going to go ahead and click there to act edit the record anyway obviously if you're tracking your update sets you're going to have an update set in now mobile now as well as our customer service mobile application update set so what we'll do is we'll add a new item here which is going to allow us to differentiate it between the out-of-the-box contents media section that's going to display this and filter out only these items so what we'll do is we'll name it i'm going to be really specific about what i call it because it's going to matter for a data item that we'll create later so we'll call it employees accessing agent and save this and now we have this drop down value we don't have to worry about this content we're going to add displaying anywhere else and we'll go ahead and create two of these static media sections one for um telling the user first of all that they're in the wrong app and the other is going to be for helping them download the correct app so we'll call this first one we'll give it a title of you open the servicenow agent only mobile application and for a text we'll give a little longer description so that the user knows exactly what the issue is i won't make you wait for me to type it all out so paste it here and take a look just saying tap here to open the now mobile app to access our employee focus experience and so on so we'll give this an order 50. we're going to go ahead and check this visibility checkbox so that we can filter based on that as well in case we need to turn any of these off we can just uncheck this and let's save this first one we can add an image as well and i do believe i have one somewhere it should be good ah it's not the right file type so that means that it's probably a jpeg so let me quickly rename that file okay let's try that again there we go okay so there's our first one and with that done we can go ahead and create another one and i'm missing a y there probably okay this next one i'm just going to call it need the app and we'll just say tap here to open the app store to download the app and this one i believe actually should be a png okay so let's just take a quick peek at our two records just to make sure we've got two static media section records we're filled we're going to filter them to be only for employees accessing the agent app let's go ahead and remove this stash and that should be good so next what we're going to do is we'll create a template using mobile card builder along with a card in order to display that content so let's go ahead and go back to our mobile app builder and we're going to go here under cards and icons and click new we're going to first create a template to display this content and we can call it employees accessing agent card template go ahead and save that and open it in mobile card builder all right so we'll just create something quickly here and hopefully it looks okay once it's all set up obviously we can spend more time and tweak the template to pretty it up nicely but we'll just work on getting something basic here to start so we'll add a container and inside of there we'll add a text block for our title so this will be a field value we'll go ahead and make it a larger font size and weight all right so let me get bold and will allow it to be a couple lines here and then change this container to be vertical make a new one here and below we'll make another container because inside we'll place an image and just to um sorry for the image we'll give it a height and a width of 125 to prevent it from getting too large and select this container again and we'll add some more text here for our longer text that's going to display and in this case we'll go for five lines and we'll see what it looks like with our regular font weight and size of 13. um and i can make this text block 80 let's see what this looks like so now that we have a template we can head back and build the actual card this time that's going to leverage the template we'll call it employees accessing agent card for the data we'll select our static media section table and we'll choose our template that we just created should be good and then save that then we'll go ahead and open up that card real quick and mobile card builder and we'll assign our fields from the table to our template so that's going to be our for our title up at the top our image and our text again this may not look perfect when we first look at it but it should be enough for a start okay so now that we have our template and our card let's go ahead and create a section in order to display the content so for that we'll go back to our mobile app builder again and we'll select our mobile app configs and mobile agent just so we can get back into the navigation bar and create our ui section in the correct place and so we'll again find that cases launch your tab and launch your screen which is right here and we can see that this particular launcher screen has three sections that we saw earlier that are going to appear for agents approvals cases and needs attention cases so we'll go ahead and create a new one and here we're not going to select a record just because we want to give this we want to give this a little content a little more space to display so i'm going to select content up here for this section and we can give it a name content section just save it we're going to need to give it a container so we'll make a new one here and a new list stream we'll select our table here again static media section table and next we're going to need to create a data item for this and this actually is going to be where most of the magic is going to happen because what we're going to do is we're going to create a data item that will return no rows if the user is an agent and we're going to set this ui section to hide if no rows are returned that way agents will never see it but if the user doesn't have a role we'll actually return those media section records that we set up and they'll display so at first just to make sure that we have things okay we'll just create a data item that will display the records regardless and then we can go and tweak it further and script it out so let's create a new data item we'll call it employees accessing agent data item we'll select our table for this data item which is going to be the static media section table again again to start we'll just make it declarative so we can do our use our visibility field as well as our content viewers is going to be our new employees accessing agent and we can sort it by the order all right so we're going to take a look at how it looks but first i just want to go back to my content section and make sure that we're set up properly here open up this record app and platform just take a look at it okay if need be we can create a different kind of section here because we're going to want to make sure that it hides for the user if there's no records returned so let me just make sure that we have that part correct what's odd was what i'm um i'm getting hung up on here sorry is that the um i want to see these settings to um hide the section if empty and hide the header and i want to make sure that that's going to work okay but we didn't we aren't displaying them on this content section here so maybe we can just update this sorry david go ahead yeah i was going to suggest just the same um possibly expose it on platform so we'll edit this section in global and we'll expose hide section if empty and these as well and we'll hide the header and hide section of empty and if need be we can always go back and make that a record section okay so and now if we're lucky we should be able to oh we probably need to save don't we i'll need to get rid of this and i'll just log out to make sure that we're refreshed here something not right here so let's take a look and figure out what's going on oh so we're going to need to create our list item config as well i missed that so let's call it our employees accessing agent this item config we'll select our table and we're going to need to specify the card that we were going to use for this so since we already created it we'll select the card we're going to add some functions to that but we'll do that later on once we see this actually display okay so that looks a little better um it looks alright actually we've got our title we've got all of our lines of text and we've got our could have a little border um spacing between these but that's okay should work for now okay so next thing we want to do so as it is now as a regular agent i'm going to see this too which we don't want so let's go back and take a look at that data item and we're going to go ahead and make this a scripted data item and in order just for the sake of time i'm going to paste in a script here and then we'll review it together and david is also going to paste it into a chat so you have it as well so let's take a look at what this script does what we're going to do um it's pretty straightforward this is just written in a very simple way and you know no hopes that it you know it just makes it easier for us to quickly get a good understanding of it we're just querying the cis user has role table and we're going to look for the essentially the any rules at all that come back for the user this cis id that you see here i'm just filtering out the snc internal role and then i'm also going to tie it to the specific user and make sure it's active in order to build that kind of query you can do that pretty easily by navigating to the table and just using your regular list query functionality to build out your your query and then grab it so for example you know the user is dynamic me and then we can grab copy that query and paste it in obviously we also adding in the active and filtering out snc internal so that's that's how this line that you see over here has been built try to make that a little bigger and then once the query is there we'll obviously execute the query and then what we're doing here is if there are rows we're going to add to our query string that's going to get returned back for this data item sys id is -1 this really could be anything it's just a way to make sure that this query never returns anything because obviously there's going to be no record in that table with a cis id of -1 it could be society is you'll never find this whatever as long as it doesn't return anything we're going to be fine and then our but if it does return rows then we're going to i'm sorry rather if it doesn't return any rose we're going to add this condition that we had earlier so we're going to display the records from the static media section table that have content viewers employees accessing agent and have the visibility turn to true and we're going to order it by the order so hopefully that all makes sense and we can go ahead and save that and then refresh this and we should still see it because we're logged in as an employee but if we logged out and logged back in again as the agent this wouldn't display so at this point i'll just pause for a second david let me know if there's any questions about what we've done so far before we go into the function piece i think we've answered most of the questions uh up until now but let me see if i can highlight one uh we did get a question from paul he asked how do you create roles and conditions in polish screen policy screens before the launcher screen if any new user joins so this might be unrelated to the exercise but paul we did do a um app academy uh specifically just for mobile ui roles it's a great um getting started video on how you can apply your own policies or maybe even migrate old ui policies over to uh ui rules so we i'll post a link in the chat and definitely recommend checking that out um besides i'm not seeing any other questions yet okay perfect so what we'll do next is we'll take a look at um adding the functions in order to allow the user to open now mobile from here so a little trick that i'll show you to do that is we can create a function and with this type of function that will create will be a url and it will um we'll what we'll do is we'll actually use the app name in order to open it directly um so let's give this i'll show you what i mean we'll give it a name and call it open now mobile and give it the context of our table just again the static media section table and this will be a url we won't take the um the source from the field but what what we'll do is we'll use this string i'll paste in here for you and we'll make the url sn request and so this is the name of our now mobile app that's in the public app store so it's going to attempt to open that app once the user taps so we'll call it open now mobile we'll go ahead and save this and we'll also go ahead and we'll add a function instance for this in a second so before our function appears anywhere we'll need to create an instance of that function so that only it only applies for this particular media section record but just in the interest of time we'll go back and create our second function which is going to display for uh the need the app and for this one it's a little bit tricky just because we could um enter the url for either the apple app store link for the now mobile app but if the user is running an android phone that won't help and vice versa so we're going to need to put something in the middle in order to detect what type of device it is and send them to the right url so an easy way to do that is to create a portal page with a widget on it and a little bit of of client side scripting in order to send the user to the correct page so i'll just take a look at how we won't build all of that from scratch but um we'll i'll take a look at the um we'll take the widget together and see how it's built and we can paste in the script that we built to do that so if we took a look at service portal widgets and take a look at this widget here that i've built we can see that so it's very straightforward all of this is just left default out of the box except for this client controller section here um and that one will have our script that's simply going to take a look at the user agent of the device so we'll take we'll grab that agent and put it in a variable and then we'll use a simple regular expression to test if we see android in that string or if we see ipad iphone or ipod in that string and these urls that are here are the urls to the specific app stores in this case the public app store apps that we publish for now mobile and the agent app these urls could be the for example the intune wrapped app if that applies to you so this particular widget once you've created it simply needs to be in a portal page and and added to that page so again very straightforward just a simple page um that we'll call store navigate just to make it easy and that that particular portal page has an instance of this widget that we are just looking at so with that said if we head back to mobile app builder and create a new function for this particular media section record we can call it open app store and it's also going to be a url we'll give it our statin static media section table and in this case the url is going to just be the url of that service portal page which is going to be should just be mesp who use our mobile employee service portal and then id equals and the name of the id of that specific portal page and we'll give it a label and save that okay so we've got our functions so we'll create an instance now of those functions so to do that we'll head back to our screen that we created which we can find through our navigation bar and so we'll don't want to close that finder cases launcher tab and this is our section and over here we can so this is our list item config again and on it you might have noticed earlier we have this on tap functionality where we can either navigate to a screen when you tap or we can use a function instance so that's what we're going to want to do in this case and we're actually going to want to create a couple of these and they're going to be on tap function instances so the user can tap anywhere in here and it's going to invoke that function so we'll give it a new function instance and first we'll create our open now mobile function instance and we'll display um we'll give it a label which won't display but we'll just uh give it one and give it an order and then we're going to need to just select the bottom here the specific function which is going to be i believe we call it open now mobile and we'll create another one for our app store and what did i call it open app store okay so we'll save that and then we're just going to take a look at those functions real quick just to make sure conditions are built correctly because it seems we missed to do that earlier so for example for the open the app store function we're going to want that only this display for this particular this particular record with the title of need the app so an easy way to do that would just be to leverage the title we'll save that and then we also have our open now mobile one where we need to do a similar exercise and in this case i'll just copy it the title is this so now we can refresh and see how that looks so for our you open the servicenow agent only application um have an issue with that one which we'll take a look at but the opening the store we can see that for a second there it opened our portal page and then redirected the user to the correct app store and we'll just take a look at this other function oh because i have the dash in there sorry about that there we go tap that and open up now mobile so um hopefully that was uh this can be a useful tool for you to use this kind of trick with the data item you can and the option on the section ui section or in order to hide when there's no records you could use for other similar use cases you just need to find a query that is going to either return no records or return records and you can you know leverage this type of functionality for example to help our employees find the correct application here so that's that's pretty much the um exercise we wanted to walk through david are there any other questions yeah we have we can address tony tony asks would it be possible to open or review a ticket in the mobile app from a link in an email um so i think uh tony's asking about our deep linking capability um and do you wanna take that sure yeah so if um from a push notification we want to go to a specific link is the is the question uh i think he just wants to be able to open up tickets from his email um so let me unmute tony just to so you can clarify his request um i just allowed you to talk tony just don't meet yourself and feel free to ask us correctly hi and it's it's totally nice um talking to you uh uh again um so we have um people who does not um that that versatile with the mobile app um but they do get email email notifications on like the google client or on the mobile mobile phone sure some directors just want to click that link and um so since they already have the app we're going to deploy the app they would be able to view the incident ticket um that was one of the requests that came came through after after i come back from from the conference sure yeah so um as david mentioned uh earlier we do have a function called universal linking and what you can do with that is because in this case you're receiving an email from the email you can provide a link to a page for example on our service portal and from there once we have this configured user is going to see they're viewing it on their phone they're going to see an option at the top of the screen to saying you know hey you we have an app for this and allow the user to tap to jump to the app so that's probably your best bet for this type of request and david if you don't mind i don't know if you have a like a link handy for the docs or um other resources that we could pass to tony for that yep tell me i just uh sent a link to the docs that you can uh explore a bit further and if this is possibly a topic that you want us to dive deeper in the future please let us know in our post-assessment survey we are looking for more topics um so there's a huge demand for it would love to explore further sure thank thank you i'll send an email a follow-up if our questions thank you ann thank you david perfect thanks for the question all right um it looks like that's i'm not seeing any other questions uh i did see a couple but that person dropped so we'll just um wrap up here uh but again thank you everyone for joining us today um if you found this session helpful please let us know in our post session survey this there there's going to be a couple questions that just ask what topics you'd like for us to explore in the future um and we love getting feedback from all of you so just let us know um and if you're interested in any of our past mobile app academies we do record these and then upload them to youtube this session will be up by tomorrow and you can also find these on our mobile community site of course so make sure to subscribe to our forums register to our app academy series and you'll get the latest notifications for them with all that said though thank you all for joining us and we hope to see you again in tv