good morning good evening good afternoon everyone we want to welcome you back to mobile app academy where we show you how to build and configure mobile apps live on the now platform my name is charlie steiner product marketer here at servicenow and today we'll be showing you how to create top level categories for your browsing experiences on now mobile if you're joining us for the first time welcome mobile app academy is a live building series that focuses on managing and building out mobile apps in real time our product experts are here to provide guidances best practices and answer any of your questions in the q a window we do host these sessions every two weeks here on zoom at 10am pacific and our recordings are posted to youtube thursday morning specific time and if you are watching on youtube do check the description to register for the next one before we get started today i just wanted to point out a few resources that we do have available on our very active mobile community um if you're new to mobile we recommend you check out some of our self-enabled resources such as such as the guidebooks white papers and other articles that we do have as you can see in the bottom right here we also have a plethora of other resources like labs and mobile training on now learning including our playlist of all our previous app academies so do be subscribed to that on youtube as well down here and you can find everything and more that i'm referring to uh on our community page and this is what our menu bar looks like at the top panel so do feel free to check that out after the stream and one more thing to note if you like these sessions are our sister our partner teams of servicenow also hosts academies for virtual agent hr and performance analytics and you can find those academy sessions in their respective community forums and that'll be at the top menu bar under the forums tab so with all that said i'd love to introduce our special guest today who's a senior technical product manager with the mobile team of servicenow is quran shah koran love for you to dive right in hey thanks a lot charlie for introducing uh hello everyone good morning good afternoon good good evening my name is karin shah i'm a senior technical product manager at servicenow working on the now platform now mobile platform so today we will dive into the top-level categories for browsing experience and specifically for knowledge base and knowledge articles so let's just would you love it uh we can see your screen perfect all right so you know the idea or you know by default uh out of box experience for now mobile enables users to access knowledge base and view knowledge articles but as of today what happens what is happening is we see a lot of ask and from our customers that they want to categorize their knowledge base based on the different departments that they have and this could be it hr or any other department they've set it up the current behavior of mobile app today is uh they get a list of all the knowledge categories and they do not they're not able to categorize that based on the department the second ask that we have from customers is also to customize the knowledge category table uh for any customizations that they want to do this would include adding new columns or showing a specific information on the applet as well so what we'll do today is we'll take a deep dive into kind of an exercise where we will implement a knowledge browsing experience by enabling the top level knowledge base where you can categorize your knowledge articles so you know if you take a look at the images on uh on the left you'd see the current experience out of box where the browse will give you a list of all the knowledge categories uh which is application devices email but for the user it's difficult to kind of know um if the knowledge is actually an i.t knowledge it comes from an i.t knowledge base or it comes from knowledge uh hr knowledge base so the goal today is to categorize knowledge into different knowledge bases which would kind of allow users to see hr knowledge it knowledge and any other knowledge base that they have set up that's the first use case that we'll do today the second use case is around customization and for folks who've kind of looked into the the applet and the data item that we use the entire app knowledge category is based on a remote table which is read only so if if you see on the left side the left image is essentially what the table is it's a read-only table and one of the biggest ask from our customers is that they want to customize that in today's exercise what i'll do is i'll add an image field on the remote table as well and this is just a one-off example of you know what we're doing you can add any other feel that you want you can change the layout as well so on the right side if you see the image i've added and i've added a image icon as well for all the knowledge category as well that's a custom field in the remote table so you know without you know getting into further you know discussion i kind of like to jump into the exercise where i'll kind of deep dive into you know how do we how do we set up knowledge base and knowledge articles before i jump into you know the session on you know how to configure the applets what i'd like to show is the current state of uh you know the out of box feature so what we have today is the information output launcher within which we have the browse categories so if you see it's not categorized by knowledge base and it doesn't have any custom field in it you can definitely click on it and go further into the different categories that are there but it's difficult to for the user to figure out if it's an id knowledge base or an hr knowledge base so what we'll do is we'll configure this uh it will first first tackle the first use case of having an applet that shows a top level knowledge base so to do that first thing we'll do is go into our instance and open up mobile studio in the mobile studio you can go to the right the scope that you're creating uh you want your app to be in for this exercise i'm going to just go with the knowledge management scope that we have i'll go into data items and i'll create a new data item i'll call it uh yeah college page i'll select the table called knowledge kb knowledge base and i'll save this just to give you an idea of what the kb knowledge base looks like it has all your kb knowledge bases which is id hr knowledge any other knowledge base that you might have so if you created a data item the next step is to create a new applet that would allow us to you know list the different knowledge base that we have and before we do that we also need a view json for you know how how the applet would look so what we'll do is we'll go into uh the item view and create a new item you json so we'll go into cis sg item view and we'll say create new we'll give this knowledge page item and we'll select the table which is [Music] knowledge base and in the item view json uh we will paste a pre-refined template that we already have what this would do is it would essentially uh kind of just show the uh the knowledge based label so let me go ahead and save this so which is the title essentially right so now the next step once we created the template view for the app for the app that will actually go ahead and create the the app link so we'll go back into the studio we'll go into applets click on create new applet and we'll select list view uh we'll uncheck the form view because we just need the list and eventually we'll have a navigation uh function that would kind of navigate to the right knowledge categories so we'll call this kb base and we'll click on create view in the data item field what we'll do is we'll select the data item that we created before which is this one and we'll save this for now so so far what we've done is created the list applet for our knowledge base uh we definitely need to go and change uh the master view item uh for this particular update so what we'll do is we'll go back into our platform and go into the sys master item this is sg master item dot list and what we'll do is uh we'll kind of find uh the master item that we created for knowledge base so if we just search for bayes we'll have uh kb bay's main item uh we'll uncheck view config instead we'll use the item view that we created before so it is knowledge base item view all right so we have the knowledge base over here so the next step is that we've already created the applet for knowledge base what we'll do is we'll go ahead and add this to our applet launcher before we do that we do need to modify the knowledge category that's already existing so that when we click on the knowledge base it should allow us to navigate to the knowledge categories so what we'll do is uh we'll go into the platform and we'll search for applets and we'll search for browse because this the name of the applet over here is browse and we'll have a few of those records that show up uh what we need to do is we need to find the browse which has this description called knowledge category list so we'll go into this record uh what we need to do is we need to go into the ui parameters and modify the ui parameter so we'll let's let's open the ui parameter in the ui parameter what we'll do is we'll go ahead and change uh the input source from user input to autofill and the user input type to a source field this will open up the parent table and the source to select so in the parent table uh we'll we'll kind of find our remote table which is we under bar st kb category and uh the source field would need to be selected as the society and we'll go ahead and save this the next step is to kind of create a link between the knowledge base and the category and we do that by creating a new navigation function so in the platform we'll type functions and we'll go ahead and create a new function select the type of the function to be navigation and uh the table will select as the remote table which is we underbar sd by kb underground category and when the action is completed the screen that we want the user to navigate is the browse screen that we edited so we'll select go ahead and select the browse uh screen just want to make one thing that you know uh one thing that we would like to kind of just confirm that this is the same browse applet that we modified which is the knowledge category list so we can you know kind of verify that by just making sure that the ui parameter that we selected is from the remote table as well so that's good and we we're going to go ahead and save this record so the next step is uh to kind of attach this function to the new applet that we created so to do that what we'll do is we'll go into the master item again and we'll search for our knowledge base that we created earlier and what we'll do is we'll go ahead and create a new function uh instance for item configuration we'll give this knowledge base to um over here we'll find the function that we just we created earlier the navigation function we'll give this as a label and in the location we'll select list type so that when you click on it it will uh navigate to the right uh you know category all right so the next step is uh you know at this point we are done with kind of configuring our uh knowledge base applet and adding a navigation function so that it would help us navigate to the right knowledge articles so what we need to do is we need to go into the navigation bar and add it to our applet launcher uh for right now i am gonna add it as a item section and my destination is going to be screen is going to be the knowledge base that i created earlier i'm going to call it the orientation is going to be vertical and i'm going to save this i'm just going to give it a item and i'm going to go ahead and save this quickly i'll go back to my mobile screen and refresh to see the changes that have taken place uh so we can see that we've successfully added knowledge base so you can see all the different bases that you have hr id and knowledge and when you click on it it will kind of help take you to the different uh article categories sorry knowledge categories within that knowledge base so for hr you have applications and suppliers for it you have device email id and operating systems so this is the first use case that you know as a customer what we wanted to do was uh categorize our knowledge categories into different knowledge base essentially uh you know be able to enable our users to select or you know view different knowledge base and then browse into different knowledge categories i'm going to take a quick pause over here uh so that you know this entire configuration can just sink in before i kind of jump into the next use case and if there's any question you know i'll be happy to answer that as well at this point for the first use case hey hey corey this is uh foo um this is a great presentation by the way um just wanna uh go back a little bit so remember when you first created the itemview json yeah and uh you pasted something there like what is what is um did you write that by hand or did you copy from somewhere and what's the best practice on um uh adding that json there how did you get around that explain that yeah so i essentially copied this from the same uh you know the browse applet uh all i had to do was uh change the the let me find the variable over here which is the cell id to title so i know this can get a little confusing uh what i would like to point out is that uh you know creating json view is done much better in the studio uh but also in cubic servicenow has you know introduced something called as a mobile card builder which you can use to create your templates screen templates as well which is much user friendly but in there are some cases where you know if you do not have the mobile card builder plug-in you would need to fall back to the item you json and the best practice for this is actually to kind of configure this via the mobile studio um yeah sorry so the best practice is to actually configure this via the mobile platform uh mobile studio platform where you have the option of either customizing this in a mobile cart builder if you have the plugin or to customize it in in the platform as well we know we can definitely share some documentations around this uh but for this exercise what i've done is i've copied it from the browse app that we already had so you can do the same there are a lot of examples uh you know for items you json uh which you can pretty much use and you know it's more of a trial and error to kind of get the right structure that you want for the template perfect thanks thanks for explaining that and i think that answers the question that we got from dirk in the chat as well asking about which database view that we're using and if it's available out of the box um so yeah we just used the out of the box applet from browse and we just copy the json and then he just changed the cell id to title and that's how you got it uh we have another question from faisal um is the control axis at knowledge base through user criteria is still honored um so this is honored only if the csm team included in their queries when they built the out of the box experience um so i don't know the answer off the top of my head but if you can post that on the mobile community site um i can definitely forward it over to that team that uh that worked on that um any other questions from the chat doesn't look like we have any so far um do you have any other questions before we move on uh no all right so now kind of going coming to the second use case where the user wants to uh customize the browse categories or the knowledge categories uh one thing i would like to point out over here before we get into configuring configuring the browse categories to add customization or custom columns is that this configuration is not provided out of the box this is a heavy configuration a custom configuration that the customer has to do uh so before even you know kind of jumping into getting your customization it's always a good idea to kind of take a step back and to discuss if this is an approach that you want to go ahead with because in this configuration what we'll do is we'll create our own remote table and we'll write some scripts to populate that uh and i'll let you i'll tell you why we need to do that uh but it's just just uh just a heads up that this is a heavy custom customization that we're gonna do right so kind of now jumping into that the the reason i say that is because the the the browse applet or the browse knowledge categories actually are based on the vst kb category table and this table is a remote table and this is driven by a script you it's a read-only table you cannot change anything in this table uh it doesn't doesn't uh persist in the database it's a real-time uh driven database or in a table and if you're going to if you type remote what you'll find is you'll have all the remote tables that are out there and if you're going to definitions you'll see vst kb category table over here let's go into that so you cannot change anything in this table this comes out of the box and it's a fully scripted table which means that the values for or the records that get generated in that table are essentially coming from this script which is why to add any customization on the browse uh category table we would need to create our own remote table and we would need to create our own script so that's just a heads up that uh you know you should know so let's uh kind of jump into you know doing that uh so first thing what i i would like to point out is that we'll take a look at this specific table right now and just look at all the columns that are there in this table so we have something called as has child labor order parent and society and this table comes from the kb category table the values are actually derived from this table so the first step that we'll do is actually create our own remote table so we're going to remove tables and say let's create a new remote table you can give it a new label call this right let me actually change the scope real quick let me i like to create you can create this in any scope but for this exercise i'm going to create this in the global scope just to keep it simple i'm going to go ahead and submit this i marked it as a remote table so let's go back into this table and let's start adding uh those columns so the first thing that you want to do is uh kind of make sure that you add all the columns that are there in this specific table and it's not necessary but for just the purpose of this exercise i'm going to replicate the same table and i'm going to add one more extra column into this but based on your use case you can modify the columns you can remove certain columns you can add new columns but one thing to kind of you know be sure of is that any columns that you add or remove your entire applet should be designed in in so that it behaves in the certain way that you want so what i'll do is i'll go ahead and create all the new tables that i columns that i need which is ask child add label there's a column called parent is going back on order so so far i've replicated the same columns what i'll do is uh in my exercise i want to add an image to the browse category so that the behavior or the experience is same for the browse catalog services where there's an image but in browse knowledge applet we do not have an image so the experience i that i want for my users is that i want an image for the knowledge category as well so what i'll do is i'll go ahead and create an image field as well and i'll start giving it the type string so apparent it's a reference to knowledge category so we're going to select knowledge category order is a string and image is of type image all right just wanna make sure that we selected the right table yeah and i'm gonna go ahead and save this so i was able to create the remote table so let's go to the newly created remote table and let's see what it what it looks like so right now you can see that it's it's totally in invalid it doesn't have anything in it so what we need to do is we need to go ahead and create a uh scripted definition for that remote so we'll go into remote uh we'll go to definitions um what we will do is uh we will essentially copy the same script that we have for the kb article so what we'll do is we'll for now we'll just copy the same script from the original or out of box vstkb category table and we'll just paste it in here we will select the new table that we created which was underbar as you know category remote test and just call it test all right and let's go ahead and save this all right so you know we have created the definition but it will it will still not work and the reason for that is because uh some of the column names over here are wrong so to give you an example you know if you go back into the same table although we were able to populate the table you can see that the values are all empty and the reason for that is some of the column names in here are still referring to the old column name from the the out of box table so we need to update that based on the new column name that we have so if we go into this table uh you know we need to change some of the column names so it has basically for parent it's underbar parent so we need to change all of these and one thing i would like to kind of just mention this is an out of box script for your use case you need to modify the script based on the column that you're adding or the information that you want to display in the category or remote table all right so basically i've changed all the labels to under by label you under bar order you has child you wonder by parent in all the all the locations that i feel it's relevant so you underbar uh label you end about and i'm gonna go ahead and save this and i'm gonna go and refresh i'm gonna go and see the table now you can see that we were successfully able to create uh and populate the the newly created remote table with all the right information uh the image is still missing because uh image for images we need to go into the the actual category table and add an image so that it could you know look at look up for the image from the actual table this table did not have an image field before i added a new image field so that i could read from this table as well yeah i'm going to go ahead and select some images for the out of box uh i have devices over here so devices should have an image suppliers operating systems will have an image let's add image to id as well all right so so far we were able to successfully uh you know add uh populate the newly created remote table with all the information so it will add an image to email as well i think that's physical all right okay so we're not done yet uh this is just the first step of you know creating our remote table uh the next thing that we need to do is essentially replace the old remote table with the new remote table that we created and this means that we need to change all references of the v underbar st kb table kb category table with the new remote table that you created so let me close some of these and let's go back into our instance all right so the first place that we would need to replace this is essentially in the knowledge base uh applet so let's go into applets and let's search for knowledge base we'll go into knowledge base uh we'll go into the item stream segment we'll go into the item stream m2m segments go into the knowledge base main item so this is the first place that we we need to start configuring for the newly created remote table so we'll go into the function instance from here we'll go into the actual function and then we'll go into the the newly created uh sorry the old browse services browse catalog so that we can change uh the applet over here so in the ui parameter we need to replace this table let me quickly change the scope as well so that all right so in this i'll select the new table that i had created which was joined about sdk remote test and i'll select society as the source field that's the first place where you need to change so just testing you know my update as well so far everything's working uh the next place that we need to go ahead and change is the actual uh browse applet uh so that it we can add the image as well so i'm going to go back into this one i'm going to go into the item stream i'm going to go into item mdm streams this is the second place where we need to change uh our table uh there are a lot of references a lot of places where this references need to change uh so the first essentially this area is where when we click on the knowledge base it still goes into this app it but it's still looking up from the old remote table so we'll open this data item and we need to change the table over here as well and just make sure that you know you kind of also keep track of the query condition as well so that we do not lose them so we'll select the new table we'll select parent so it's not is bad and we'll order this by label and save this it's going to refresh my mobile app mobile screen to make sure that it was so you can see that the first applet stopped working because uh it's now no more pointing to the uh the out-of-box remote table but if you're going to know your knowledge base you would still see that it's kind of missing so we'll kind of see what else we need to change as well so let's our own item view and what i'll do is i'll just pretty much copy uh hold on not copy but uh i'll select the table that i need i'm going to give it a new name which is and for the item you json uh you can copy the same item view but we need to add uh the image as well over here so what i've done is i already have a i already have a json with me which is handy it's pretty much the same but what i've done is just added a new uh field over here which is basically the image field and you can get this from your browse catalog services you can use pretty much the same json that you use here and just replace it with the the table that your that you just created i'm going to go ahead and save this so once this is saved what i'll do is i'll go back into my item configuration for browse categories and i'll change the item view with the newly created item view json and i'm going to refresh my mobile screen applet and you can see that uh ignore the the applet above because we need to get rid of it but if you go into hr or if you're going to it knowledge base you can see that what we've done is successfully added uh you know the image and we were able to uh also kind of have the new remote table reflect as well right so now what what happens is you can see that uh some of the navigation functions are not working uh when you click on application it doesn't go into you know the further categories that are there and for the reason for that is uh we still need to change the reference for the old uh remote table into the uh you know uh with the new one and the re and what we'll do is we'll essentially go into the we are in the same item configuration and if you go down into the function instance we need to add the same function instance to the the applet and change the remote table as well over there so we'll go ahead let's close this so we'll go into uh the knowledge category category this is the function instance that's responsible to kind of go into the child level categories you can see this is a navigation and it goes into a destination screen called browse uh we'll go in here we'll go into the item stream uh going over here and you can see that the data item still reflects let me change this one let's go right yeah so one of the things is in the sorry in the navigation in the function instance we go into the knowledge category category and the navigation uh needs to kind of be updated with the new table that we created which is we under our hd kb category we'll open this and we'll go ahead and yeah this is the sorry the table needs to change over here as well okay oh it's working actually my bad yeah so sorry i think uh uh i i might have it's working as expected um so you know if you actually click on the browse applets you can you know drill down into the different applets that you have you would see that uh you know there's a space before the label that's because we've not added the image for all the categories that we have but you know you eventually the idea is that based on what the use case is uh you can add your categories uh but that's that's pretty much it in terms of uh you know what configuration needs to be done uh to kind of get this both the use cases solved yeah i'll take a pause over here uh you know if anyone has any questions i think this is a really great walkthrough prom i think this is helping a lot of our customers figure out how to configure the stuff on the back end um food i think you had a couple questions uh yeah yeah well this is really great quran um i think this is probably one of the most custom uh solution that we've we've done so you've touched on a lot of good points um one thing is the remote tables right right and the first thing you did was you took a copy of it and you kind of referenced the original because to avoid the um parishion issue uh what are some of the cons of doing that so so correct me if i'm wrong so i think one of the cons is that if the original parent table uh changes for some reason uh that means the remote table that you've made a copy will also has to change or it will just break uh is that is that a fair statement right that that is true because the out of box table uh if anything changes in that uh you wouldn't get the new really or new features that uh the team would ship which is why it's kind of important to kind of make that decision that if you're creating a new custom remote table you need to maintain it and that result in you know any new changes that come in the out of box table will not be reflected in the new table awesome and and one more thing is um i think um ann had the same question as me is that you made a modification on the function instance instead of making a copy of it now since you made a says you made a uh you said you edited the original out of the box functions instance um when you upgrade to a new family release does that out-of-the-box function instance get reset uh because you made custom customization to the uh you know the the out of box it will not get reset uh but what is recommended is that you actually create copies of your uh of the out of box uh function instrument as well in this exercise i might have used the same function instance uh i'm i kind of apologize for that but the idea is to create your own copy so that any changes in the out of box records or functions will not will get updated when you upgrade as well perfect thanks for confirming that and i think we have one last question uh a little earlier uh we had a question that actually two questions one anonymous um can you use the user criteria table on applets and apple launchers to restrict access um so if if you're trying to restrict access to users we you can actually apply role-based access inside of mobile studio and that can apply to your applets apple launchers and functions i don't know if there's anything else you want to add to that uh no that's i think that's preferred way of enforcing uh world-based stuff yep um and then one question from ou earlier you scroll up uh our hr it and knowledge base knowledge kbs or categories in 1kb i'm not sure what that question is asking but oh you i can definitely unmute you to help clarify so i'm going to click on allow to talk and then oh you if you want to unmute your mic feel free to ask us that question can you hear me yep we can hear you yeah thanks um yeah at the bottom right there kb base and then there's hr it and is it knowledge yeah i'm just wondering the hr i.t are those like categories or are those individual knowledge knowledge bases those are individual knowledge bases right as you can see and if you go into knowledge categories each category falls into a knowledge base so news falls into it application falls into hr and so forth that's how it's categorized i see so their individual knowledge base and so basically the the objective here is to expose individual knowledge basis which is out of the box not available right so what what you did and they don't know which knowledge falls or sorry which cat knowledge category falls into knowledge base they don't know if it's coming from hr or id so what they want to do is categorize that based on i.t and hr so if you go into hr you have all the hr articles or hr categories if you go into it you have all the i t categories right so i think uh kron's enabling uh you know there's some organizations where you know hr teams and iot teams work together and so they don't define parent level categories they don't have a specific knowledge for hr and one for it but there's other organizations who do break down um you know between hr and i t and so this is kind of where enabling that use case um if if your users expect to see kb specifically in hr you can create that current level category with with this workaround does that make sense yeah okay thank you and then i think we got one comment from jacob um he mentioned sometimes it's better to modify the out of box records because it shows up in the upgrade and it will be an indicator if something breaks outside of testing creating copies of everything uh you want to modify can obviously keep the things that you may need to update during an upgrade just this couple cents um so definitely a great pointer um and i think there's no other questions at this point um kron i think this was a really great uh demonstration or i mean um uh walkthrough um and we will have this video recording uh up in the next couple days uh we did go by uh through this configuration a bit quick but we recommend checking this out if this is something that's relevant um and we'll go and wrap up for today since there's no other questions coming in