[Music] hi everyone welcome to glide fast and fair code on air i'm lauren jankowski the marketing manager here at glidefast and fair code and i'll be moderating today's webinar as sister companies glidecast consulting and ferracode both offer cutting-edge technology services glidefast is the largest exclusively dedicated consulting firm in the servicenow industry and ferrocode provides technology services to federal state and local government organizations both companies are proud to be elite servicenow partners before we get started i'd like to share about glidecast's goal of raising 50 000 for the joe andruzzi foundation this foundation provides financial assistance to families battling cancer and the unexpected costs that come with treatment as a cancer survivor himself glidefast's very own ceo michael lombardo has committed to matching up to twenty five thousand dollars and glidefast consulting as a company will also match up to twenty five thousand dollars for a total donation of a hundred thousand dollars to help pediatric and adult cancer patients if you or your company would like to contribute to helping us reach this goal we will send a link with more information following this webinar now i'm excited to hand things over to our presenter for today ashley snyder a senior technical consultant at glidecast consulting i'll be monitoring the q a throughout today's session so please send in any questions as they arise and we'll do our best to answer them ashley you could take it from here thank you lauren um hello everyone i'm ashley snyder like lauren said i'm a senior technical consultant here at glidefast i've been working on the servicenow platform for a little over five years now my main focuses are i.t service management customer service management and application development so today i'm going to present on how to create apps and experiences with app engine studio i'll focus on two features that were included on the quebec release first i'll discuss app development methods within servicenow in app engine studio then i'll discuss creating an experience and customizing it in ui builder finally i'll wrap up with some developer tips when working with aes so there are three main ways to create an app in service now i'm going to start with studio so studio wasn't the first method of creating an application within servicenow but the release did coincide with the rise of scoped applications and delegated development studio can be considered more of a high code experience compared to guided app creator and aes but it's still very much in use and partners well with app engine studio as you can create an app within aes and develop functionalities such as business rules and script includes and things like that in studio later next there is guided app creator and it is the first low code kind of interface found in studio it allows for the streamlined creation of applications and their user interfaces through a guided setup experience and allows users to easily create tables restrict apps with roles and create user interfaces app engine studio is the latest low code interface used to create apps and service now it was launched with equip back release but specifically quebec patch one um just like a guided app creator it easily allows users to create tables flows secure apps and create experiences one thing to note is that up until the quebec release you could use guided app creator to create workspaces but now workspaces are created within app engine studio and i'll touch more on that shortly so just like guided app creator provided that streamline experience in application creation aes takes it to the next level by putting mostly everything to develop components of an application all in one place from the aes interface you can launch an app add tables and data create experiences automate using flows and secure your application with roles without leaving aes so let's go ahead and jump into aes and start creating our application um so here i am in my pdi um and what you'll notice is like the first landing page that i see when i log in now is all about app engine studio they've really given you a lot of information to go ahead and research about app engine studio and jump in and start creating but the first thing i'm going to go ahead and do is just click this create app button and just like i mentioned there are two different methods now to create apps and you can see we have two pathways we can take we can use the low code no code pathway with app engine studio or we can actually go ahead and build it with studio and start adding code to our application but for this webinar we're going to go ahead and use app engine studio awesome so this is the app engine studio kind of you know interface or landing page whatever you want to call it when we jump into app engine studio and there's a few things i want to kind of like show you guys before we create our first app um so the first thing is you can if you have an app that you've already created you can go ahead and start adding things to it like tables experiences and flows the next section are apps that you've created in app engine studio they'll all show up here so you guys can see i've kind of been a little busy here getting ready for this webinar and the next thing i want to point out that's really neat and what i really like are is this template section um templates are things that are released from servicenow right now they're basically like kind of their applications that they've put in and you can actually create an application from a template and kind of see everything that service servicenow has done for things like documented approval or time off and what i really like about templates is they've create they've added different like experiences such as portal experiences or workspace experiences into these templates and they've changed things like themes around and you can look at them for things such as data resources and events that i'll touch on later but they are just a really good reference to look at when you're learning app engine studio and experiences so definitely check those out in your pdi or sandbox environment so i'm going to go ahead and create our first app and this app is just going to be like an it training request app i'll go ahead and name the app here and give it a description and it's going to take just a it's really a few seconds actually to create the app it's super fast and now we're going to go to our app dashboard awesome so here's really the walkthrough of everything we need to create our app and the first thing that i'm going to do is actually add some tables to the application so we have some data to work with within our experience i'm just going to click this plus symbol right here and i can upload from a spreadsheet extend an existing table or create from scratch i'm going to go ahead and upload my first table from a spreadsheet because i have some training data that i want to go ahead and put in and i do want to go ahead and import the data from the spreadsheet and it takes just this is a pretty small table so it just took a few seconds and before i go any further i'm going to go ahead and just change some of the field types of the fields that i put in awesome and we'll go ahead and continue and i'm just going to name this like i teach reignings it's just a list of trainings it'll go ahead and put a table name in for me and i'm not going to make it extensible or autonumber it for now all right this would take just a second to create this table awesome so our table is ready um and i do want to actually make a few changes to it so i'll just go into edit table and as you can see it goes ahead and puts a new tab in app engine studio for me i don't get redirected anywhere which is really nice and i'm just going to make training name a display field because i do have a reference field i'm going to create later that i want to use it for so let's go ahead and save that off awesome so i'm done with that table let's go ahead and create the second table that we're going to use and i'm going to extend this table from task because i may want to put some approvals and some other things in there later that task is just going to be really helpful for awesome so we'll go ahead and give this a label of it training request and i'll go ahead and auto number the table so it puts a prefix in there for me i'm just going to keep everything everything the same for now but you do have options to configure this awesome so our table is ready um so i do want to go ahead and add a reference field into this table to reference that training table that i just created i'm going to click add new field and we'll just name it training put in reference and we're going to reference it trainings table and save that off great so i've added that field to the table i do want to configure like the form view because i'm going to throw a few records in like i said for our experience so i'm just going to pop into the advanced view of the table here this is probably something you guys are more used to seeing when working with tables and service now but like i said it's really nice it just throws it into a new tab for us so we don't have to click back and forth between things i'm going to go ahead and lay out my form and i'm going to just do the default view for now for this webinar and just put a few fields in that are kind of more important to me so first i'll do open buy and then i'll do training and i'm going to go ahead and do training costs because i do want to see that as well awesome i'll go ahead and save that off great so we've configured the form um of this it training request table i'm going to go ahead and just click out of here i'm done with that kind of configuration and i want to start putting some records into the table so i'm going to click preview and as you can see now i'm taken to kind of that list view of my table within this new tab i'm going to go ahead and click click create new and we're going to create a new record so i'm going to throw three different records in to work within our experience and we'll just call that html [Music] and save that off yeah i'm gonna go ahead and close this one just to kind of give us some different record states to work with and finally we'll do javascript and this one actually has a cost associated with it um when we imported the data from our spreadsheet so i did want to kind of point out that difference here all right so i went ahead and set up the tables that we need for our application and have some test data in there um the next thing to do is create an experience for it but before we um start that i did want to kind of touch base on experiences within aes all right so in app engine studio there are four main experience types that can be created um so you have workspace portal which is different from the service portal mobile and catalog one thing to note is that an experience can be added to an existing application or a new application can be created for the experience itself i'm a good example of this is the csm configurable workspace application it's actually been decoupled from the csm application but can reference the underlying data in the csm app this is just something interesting to think about if you you know want to send your front-end stuff on different releases or different schedules than necessarily the back end you know tables and foundational data that you need so i did want to mention that for this webinar i will focus on workspace experiences to provide some contacts there are two different workspace types that exist in servicenow the orlando paris release launched the agent workspace and it allowed for the creation of custom workspaces in guided app creator these workspaces are configurable but they're not very customizable agent workspace is still available in quebec and may be a good candidate for launching a quick workspace with some configuration options if you're just getting off the ground with workspaces or don't need a lot of customization yet quebec released workspace experiences or what i refer to as configurable workspaces which allows for more customization and configuration and launches with a basic workspace shell servicenow has released a lot of the out of the box components with now experiences and i think one of the big draws to this workspace type is going to be the ability to customize the experience further as well as adding in dashboards to a workspace landing page so let's take a look at how to create a workspace experience all right so we're back in app engine studio here and i'm going to go ahead and just click this little plus button and as you can see um now i'm presented with an option of which kind of workspace or what kind of experience i'd like to create and you can add more than one experience type to an app you're not limited to one i'm going to go ahead and create a workspace experience and let's go ahead and just give it some information i'll go ahead and just copy this and this is a pretty long url i'm just going to shorten it i don't know who would want to type in that long of the url but all right awesome and the last thing i'm going to do is just add the snc internal role to it um because it's a training request so i'd like all internal employees at my company to be able to access it great um and the next thing i need to do is add the data that's going to go into the workspace so um it's kind of picked up on the tables that i created and i actually do want the it training request table to be my primary table um i could add different tables here if i wanted to and they'll show up in the list view as you can see right here but i'm going to go ahead and just click out of this for now we're just going to leave it at it training request and this will take just a few seconds for it to launch and we're done and i'll show you guys before we jump in kind of what that looks like out of the box so you guys can see as far as you know what servicenow gives you out of the box when you go through that process you do get this workspace shell here you have that header menu you have the sidebar right here they do give you a landing page out of the box with a few components and containers configured already and they do configure a few lists for you as well based on that your primary and secondary option that you set so this is what you get with just a few clicks out of the box so we're going to go into ui builder next and actually start configuring and customizing our workspace but before that i did want to touch base on ui builder so like there are two different versions of workspace in servicenow at the moment there's actually two different versions of ui builder so if you're working in an agent workspace you're going to get a scaled-down version of ui builder that only allows you to add a few components on a landing page the now experience ui builder is what's used for aes experiences and what we'll be working with and it contains all the great customization and component options this is just something to keep in mind if you hear or read about ui builder as there is a difference between the two so now i'm going to jump into the experience i created with aes in ui builder and provide a quick tour of the interface and then place some components on that workspace landing page all right so we're back here in aes i'm going to go ahead and just click right here and click edit and this actually loads ui builder right within the aes interface itself just in a new tab which is great i don't have to go anywhere else i'm still here and while this is loading um i will tell you what we're going to do is just do a quick quick walk through of ui builder um this is definitely something to look at the documentation and the training resources as there is a lot of different things that you can do with ui builder and i'll really just be touching on some very high level definitions of some of the things that we're going to be looking at so the first thing i'll discuss is our page so our a page is anything that's housed within that app shell so when i say app shell you know the sidebar and the header of the workspace so everything within that is actually going to go in a page so we have our home page here that servicenow gave for us but they also gave us the list page so you know that list tab thing i showed you that's actually a page itself um as well as if you were to click into a record these are all different pages so just to kind of define what that is and what you can expect when working with ui builder and when you're working with pages you can create different variants or versions of a page and that's really helpful because let's say that you wanted like supervisors to see something different versus agents or fulfillers you can actually set up a variant of a page so i could have a whole different homepage or landing page for a supervisor as a variant versus an agent or fulfiller as a variant i don't have to set up different workspaces for these two different roles now i can use the same workspace and kind of direct them with some conditions that so that's just a really helpful thing to have the nexus is content section so as you can see we have a few different layers to our page we have components and we have containers and we have you know components within containers so this is just a really helpful thing if you just want to click on something real quick and find it especially if you have a really you know layered page here or been working in a while you can just click on something really easily to find that looking over here on the sidebar here's just a list of all your components that servicenow provides out of the box and if you do make custom components they will show up here as well some of my favorites at the moment are the dashboard viewport and there is a tab set so you can load different pages within tabs you can combine the two together and get that really great tabbed dashboard experience that you are used to when working with platform dashboards and put that in your workspace so that's a really cool thing to take a look at the next thing is this data icon so data resources are how data gets to your components components aren't hard-coded with scripts they're not hard-coded with cis ids you actually bind data to a component using data resources and that's really what makes your components reusable across the board because you don't have to change any scripts and do anything to make sure that they're getting data so this is one of the things that's definitely worth reading the docs about to understand more the next is client state so client say again it binds data to components you can do it on load on page load or with events and then the last thing is client scripts so client scripts allow for client-side manipulation of data and they're mainly used in conjunction with link events so you could use client script you know based upon an event to set your client state parameter and your component gets that data based on that client state parameter um to just kind of give you guys an idea of how that works so let's go back to our page click out of here um the next thing i'll discuss is this configuration panel over here on the right side so each like container in each component are going to have its own configuration options so right now i'm in a container and i have different options for this particular container type i can set a layout on a container and drop different components into different columns you know i can set events if i click into a component itself now i have different configuration options for that component type i can set css and i can set events so like i said each of these varies depending on what kind of component that it is so now that we've kind of taken a tour of ui builder i'll go ahead and just change a few things around and then we'll launch our workspace and see how it looks so the first thing i'm going to do is just kind of you know replace some of this out of the box stuff to things that make a little bit more sense we'll do like all requests up here or like all requests at a glance and um this is a collapsible container i'll show you guys what that looks like there's two different clasp container types but this one's pretty neat because you can kind of collapse it up and down and we'll go ahead and save that off and let's go ahead and just change this container as well from like my work to do all requests great um so now we have a simple list component and i'm just going to name this actually open request and we're going to add another component called like close request in just a moment as you can see it's already filtering to my it training request table but i do just want to change that filter around a little bit for this demo and remove this assigned to as me all right and now i can set the columns that show for this i'm going to go ahead and click out of a few of these that don't make sense i can rearrange them which is really nice i'm going to add a few more that make a little bit more sense you do have to do these one one by one i kind of wish it was like a slush bucket it'd make it a little bit faster but for right now it's a one by one thing all right and i'll just go ahead and kind of rearrange those the way i want right the next thing i'm going to do is just go ahead and show the title and save that off great so i'm going to do now is just add another simple list component underneath that i could create like a different container for it and do different layout but just to make it easy i'm going to go ahead and throw it in the same container and we're going to name it close request and filter it to our table and add our filter of active is false and i'm going to go ahead and add those same columns to it all right that's great and this one is ready to save off actually um i can see these they're kind of close together um i could do some different things like containers and layouts and stuff um but for now we're just gonna go ahead and throw some simple css in there so you guys can see what it looks like i'm just gonna give it a margin top of like 25 pixels and save that off all right so it's going to go ahead and kind of configure that and load up in just a second so now i can see the new simple list that i just put in um i do i do want to point out so servicenow went ahead and set up some events for us out of the box so like when i click on a row in this request widget it's going to open the record but when i put the component on the page myself i don't get that event so i do have to set that up that is something to keep in mind when you're working with components is that more than likely you're going to have to configure the events so let's go ahead and just configure one i'm going to do the same thing when i want to click on a row i want that record to open so i'm going to click link to destination select destination and we want it to open on the record and this is where i said kind of looking at what service now is done is really helpful because this isn't really anything that i would know off the top of my head as far as setting up the payloads and how to configure that perfect so we're just going to set those two up and now we've configured our event pretty easy and i'll show you guys that when we do the final run through of our workspace last thing i'll do is just change some of these data visualization components so data visualization that name kind of came about in agent workspace i just think of it as like a report um it's kind of the same thing to me but just so you guys know if you're looking for report widgets in a workspace it's called data visualization so it went ahead and it's filtering to um my itunes training request table i do want to go ahead and edit the filters just to kind of show everything because right now it's assigned to me so we're just going to do active is true and since active is true i'll name that open request and i do have like a little presentation tab here i can actually change the color of this single score report i forgot to mention so these are all single score reports you can go in and add like pie charts and bar charts there are different charts that you can add in just like reports we're going to go ahead and save that off and then for the next one we'll do like close requests you can see that what that css training that i set to close is showing up here and we can just give this a color we'll give it like blue or something there's a lot of different colors you can choose from great and then the last one i'll do like training with the cost definitely want to see that in this uh this workspace at a glance and we'll do greater than and zero and let's name that training with cost and we'll give that one like a really like bright red or whatever red this is so we'll just save that off um so we went ahead and configured our different data visualizations um before i actually show you guys this workspace the next thing i'm going to do is actually add a theme to the workspace so like i showed you it kind of gives you that green kind of layout that servicenow provides out of the box let me go up here into menu edit experience settings and here's where you can use some of the general configuration of a workspace so i can change name and the path um here's my branding and theming so it launches with the starter workspace theme i have already configured a theme for this demo that i'm going to put in you can reuse themes across workspaces and across different scoped applications so if you have one for your company that you like using you can use it on different workspaces the next thing side navigation so you can put different links on the sidebar let's say that you wanted to link out like a specific knowledge base or something you could put that here and the final thing is notifi utilities so we have notifications and you can configure global search for the workspace here so i'm going to save all my changes and now we're just going to take a look at our finished product great so you guys can see my theme took effect i added some different blues i had a little icon up here i changed the font we have a lot of different things that you can change with the theme really quickly to kind of give that really customized feel to your workspace you know align with your branding and just like look a little bit more professional than what you get out of the box i'm walking through our landing page here's that collapsible container i was talking about um so you can expand it and collapse it if you want we have our different data visualizations that are here we have our lists that are here and if i click into this number right here it will open up the record for me based on that event that i created so all of that um you know this webinar is we're about 30 minutes now we've already to kind of summarize we've already created an app we put some tables in our app we gave the tables data we created a workspace experience we've already modified our landing page that makes a little bit more sense to us and we gave our workspace a theme and got to this point in a relatively quick amount of time um but what i want to go ahead and discuss next is just a few developer tips when working with aes and experiences here's some of my top tips um you know working with experiences especially workspace and even that new portal experience try to stick out of the box for your first iterations of your experience um this is going to be new for a lot of users and there's a lot of power behind it and a lot of customization that you can do and while custom components are an option they will require development overhead and will need to be supported by developer and won't receive any updates from servicenow so try and see if an out of the box component will work for your needs before making things a little too complex and then add your you know experience matures and your process around development through your experience matures then go ahead and work in those custom components my next one is to spin up a pdi or a sandbox and go ahead and start playing around i recommend installing the csm configurable workspace and some of the template applications i mentioned just to see how servicenow implemented their experiences and to get ideas and understand how things such as events and data resources work and the last thing is as you work through your pages there's going to be multiple layers of components like i showed you um get in the habit of just naming them so you can look at your layers right away and detect what you need rather than having like data visualization one data visualization two you'll know exactly what report that is or whatever you need it just really helps when your pages get a little bit more complex and finally um you saw me saving my pages early and often this just comes from my personal experience working with pages um there have been times where i've clicked out of something or just something happened with my browser and i kind of lost my work and we're still in the early release of ui builders so things can happen so just go ahead and get in the habit of saving things early and often um so i hope i provided a good overview of what aes is what it looks like how to decide when to use it versus other methods i'm going to now open up the webinar for any questions awesome ashley thanks for that um it looks like we do have one question that's in here um is are these features only available in quebec so the features i showed you are only available in quebec as of quebec patch one awesome thanks um a couple more are coming in can i migrate existing workspaces from orlando and paris to a configurable workspace not that i've seen it this time i'm not sure if servicenow will release this in the future i know that i've heard them working on things such as porting previous applications over to aes i haven't heard anything about workspaces yet so this would be something to take into consideration if you are on quebec or planning to move to quebec shortly and you're wanting to develop a workspace i know we've had some customers at glide fast that kind of presented this scenario and they went ahead and went with the agent workspace with the understanding that they'll know they'll have to rebuild in the future so if you do choose to go that route just you know document what you've done on the agent workspace any configurations that you've made so you can easily create stories from them when you're moving over to your configurable workspace awesome um and then talking about aes someone just asked is there anything you have found that you cannot do in aes that's a good question um so kind of going through um aes myself i have found a few things um that i just can't do in aes i think for a lot of you know use cases and definitely for a lot of out-of-the-box use cases it's going to meet most needs but i have seen if you're working with like more advanced catalog items or if you're customizing you know more complex workspaces and portal experiences you may need to jump out of aes and even ui builders sometimes to kind of do more traditional development such as like looking at the back end code or there are some variable types that just aren't available for catalog items with an aes that are still available within the platform view so there are going to be a few things that you will come across but i think for most scenarios it will meet most customers needs awesome and then coming off that someone just asked is it a better version of existing developer studio or separate from that um so my experience with guided app creator i think it's a better version of guided app creator um i'd say for studio i don't think it's better it's just different you know studio is more of that high code experience where i jump in and start creating all my um different layers of my application right away personally for me um i think i'm going to start out creating my apps in aes unless there's some need to create them in studio and then when i need to add business rules and more complex scripts then i'll hop over into studio and do that great and then someone said are these considered custom applications when built on core product functionality are additional licenses required to use the apps built in aes that's also a good question so these are scope apps just like when you create scoped apps in studio or guided app creator they are their own script applications always check with your rap about any kind of licensing questions awesome lots of questions coming in now um can i create a workspace in ui builder for incident process because of limitations in existing itsm agent workspace yeah you could do that you could definitely like you know create let's say you create your own workspace experience on the app its own you can reference those incident tables i can't speak to any licensing on that but technically you can reference those incident tables and set up your own workspace to do that i've done a lot of stuff with like case management where i just look at the case tables and don't touch case management so you could definitely do that great okay we'll do two more questions are we able to use custom workspaces on out of box delivered functionality like project management so right now what i've seen is you can only use custom workspaces on apps within aes i'd like i've heard some rumors about servicenow allowing you to you know port things over or convert them over into aes so that i don't know right now that would be definitely something to kind of look be on the lookout for with the roam release or even you know checking with your account rep awesome and then last question we have here are there materials or training that you recommend definitely um so servicenow has embedded a lot of great content right within aes and that interface there's a lot of good stuff on the developer site i know that the servicenow developer program has been doing blogs and live coding happy hours where they're diving into this stuff um so there's a lot of stuff out there i definitely recommend checking them out it's the things that i checked out when i was learning this myself all right well i think that's all the time we have for questions today thanks so much ashley for answering all of those and i'd just like to thank everyone for joining today's webinar we hope you enjoyed the session if you have any more questions feel free to reach out to ashley ashley.snyder glidefast.com also you can check out her personal blog that she has at ashleysn.com thanks everyone and we hope that you enjoy the rest of your day [Music]