[Music] hello in this episode of ui builder bytes we're going to take a look at creating experiences from app engine studio now if you haven't heard of app engine studio yet it is a low code visual app development environment where developers of all skill levels can come in and create an app either from scratch or from a template what we're looking at here is a really simple app that i've created for managing work or managing work tasks it's got a couple of tables it's got a work task table that's extended from our task table and then a work type table where we're going to manage some different types of work you can see in app engine studio i have this experience section where i can add experiences and this is where we're going to be today and then i have an automation section where i can add different flows and and do some automation in my app and then we've got the security section at the bottom where i've created a couple of roles for fulfiller and requester who are going to be able to access our different portal and workspace experiences so i will go ahead and add an interface when i hit that it's going to ask me what kind of interface i want to add so three of these are going to give me ui builder i believe and mobile will give me the mobile studio or or help me build a mobile app so we're going to start with a portal because i want my app my work management app to have a portal where people can come in and request that i i do work or my team does work for them so let's hit begin i can give it a name so i'm just going to call it work because the name directly affects the url and i like short urls i've got two roles both of these roles look good so we're gonna assign both of these roles to be able to to use this experience how about work portal all right so it's creating the portal for us all right my experience has been created it's listed here under my experiences and if i want to edit it i can just come in here and click into edit and i will get ui builder opened up inside of app engine studio all right so uh the page that opened first is this article page there is not any currently any ordering uh if you open up an experience which page opens when you open the experience in ui builder um but uh wow you can see that i think is that 10 we got maybe 11 pages created for us which is a pretty nice uh thing to happen so we've got all sorts of pages here we're going to click into a couple of them i'm not going to go into a lot of detail in this in this demo but if you you know are curious on what gets created and want to click around a little bit it is very easy to get a pdi get into app engine studio create an app and then create an experience based on your app so let's look at the landing page so our landing page has a search box here it's got some styling in it already it's got some different spots here so for requests track your requests and some updated articles uh so this is knowledge uh and if i come in and take a look at like let's take a look at the hero banner uh or maybe i'm looking for maine uh we can see that uh there are some styles applied to this and if we take a look at what this looks like rendered right so we we can see that this is a pretty nice looking uh landing page it's a lot nicer looking than if i had just created an experience through the back end and started creating my portal you know i have a nice header here i've got a menu bar that has some options i've got the search box and the hero banner and some some styling on the background so it's giving me this page that looks pretty good i wonder if it works so it does work right so we've we've already got this page hooked up there are data resources on the pages i've got this task record page here so this is going to give you a really good starting spot to to work with your portal if we just click on a few things here right so we've got a number of data resources already we have a number of client scripts we've got some client state parameters right so this is a fully functional portal it's probably not going to do exactly what you need it to do for your custom app but it's a fully functioning portal that gets you started and it's also a treasure trove of information and examples if you want to build something totally custom so you know we've got lots of different examples of client scripts in here and there's just a lot of information for you to pull from here so that's the portal experience let's see if there's anything else so we got that record page i think i had clicked on a task and we got a record page there for task and request search page login all those things all right so that's our portal experience and now i want to spin up a workspace experience so from aes we have you know my end users need some sort of portal requesting experience but then the people actually using my app needs some sort of experience so they're going to get a workspace experience so we've got something similar here work management and we'll just call this how about work space space that feels clever so for this one we don't want the requester to be able to access this workspace so let's get rid of that and hit continue so this is a little bit more going on here so work task is my primary table this is going to be what's being worked and work type is really a supporting table for this app so i'm going to leave it in the secondary tables i don't know if it orders this by the order in which you created the tables which i did create this one first or if it just knows hey you extended the task table that's probably your primary table for this app it has been created so let's hit done and let's take a look at our workspace i think with the workspace we're also going to get a few pages so we have this landing page that's really you know a standard workspace landing page let's look at list here all right so we've got the the my list page and what's cool about this is i extended that table from task so for my primary uh my primary table in here it it gave me some different lists already whereas if i had not extended work tasks from task it would just show me all because it knows if if it's extended from task it has a state field and the state field has some default values so let's take a look at this all right so we do know that open so it got that right active is true we've got some other things here uh so anyway i get uh you know i've got these the tab sets up top i've got the tabs that work over here by default so that's a that's a nice uh so that's a nice set of records that get created from app engine studio so this has been creating experiences from app engine studio you can create both portal and workspace experiences i would highly encourage you to get a pdi open up aes create an app we've got some great training on the developer site on how to really quickly get started creating an app aes but spin up some experiences spend some time poking through them there is a lot in these default experiences so i know being over the past couple of months people have asked me is there going to be you know default portals and workspaces that people can work from and my answer was always just wait a little bit so app engine studio is out now and there there are these default experiences you can both work from and just use as a reference as you're building your own and thanks for joining today