This video shows how to edit portal and
Workspace Experiences Created an app Engine studio. You can skip to these topics from the Youtube description for this video. In our previous video we built an app in app
Engine studio for loaning artwork between offices. In the app we created a portal for users to request artwork. Now we're ready to edit the portal. It opens in UI builder with the landing page selected. When you create a portal experience in app engine studio, it's fully functional... ... and you can customize it so you don't have to start from scratch. Let's click the open link here in the U. R. L. Field to open a runtime version of the landing page for a closer look. We can see that the track requests section displays links to requests made by the logged in user here. Here the user can report an issue by creating an incident. You can also use the menus and direct action link in the header. Let's take a quick tour of the UI builder interface. In the page panel we can access the default portal pages that are already created for us or build our own pages. The content panel shows the structure and relationships of the containers and components on the selected page. The components panel lets you drag and drop your choice of more than 100 components into your pages. The data resource instances panel lets you view and add data resources. Inherited data resources are read only brought in through the parent page. You can create and edit local data resources. Here's the data resource that pulls in the user's requests on the portal landing page as we saw earlier. The client state parameters panel shows the
parameters defined in the page. Client states let you add custom values to your
components,... ... which you can then update automatically through a client script. The page scripts panel shows the client scripts defined in the page. Client scripts let the system run java script on the web browser when client based events occur... ... like when a form loads or a field changes value. From the help menu you can access UI builder resources including the UI builder Quick Start,... ... a detailed reference for using now experienced components. UI builder release notes and instructions for
building your own custom components. This menu includes options to create edit or
open a page or page variant as well as edit experience settings. The stage shows the layout and components
available on the selected page... ... and it's where you drag and drop components. And finally the configuration panel shows the
properties of the selected page or component. Now let's edit this landing page. Because the default portal pages are read only, let's create a new variant of this page by duplicating it. Besides duplicating pages you can create page variants to display different versions of a page for different audiences or circumstances. Each variant of a page shares the same U. R. L.,... ... but you can vary the layout, contents and behavior of the page. To control when a specific variant is shown... ... you can configure the audience using groups, roles and so on,... ... as well as past conditions into the U. R. L. We renamed the page variant and save it. You can also create a variant using the create link. This option lets you choose from page templates
which are predefined pages that can be customized. You also need to choose how to use the template. When you use the original template, you can make limited customizations,... ... but the page will receive any updates and enhancements when you upgrade to a new release. Copying the template contents gives you full
flexibility to customize but no updates or enhancements. Now let's look at how to edit CSS in a page. We want to edit the background color of the
banner at the top of the page. So we select it either on the stage or in the content panel. The CSS styles appear in the configuration panel so we can edit the properties. Pointing to the background color property opens the color picker where you can select a color and see it change on the component in real time. Or you can edit the value manually. You can also change the background image here. To add your own image to the system so that you can change it here,... ... navigate to system UI, select images and click new. In an earlier video, we created a catalog item in app engine studio. Now let's see how to add the catalog item to our portal. The portal already includes a catalog item page.
So let's create a variant of this page. The page includes one catalog item,... a breadcrumb link to the homepage... ... and sidebars on either side to add other components. The related content block shows related articles. Notice in the U. R. L. field that the catalog items sys ID is appended to the U.R.L. Without this parameter we can't see a page preview with the catalog item. Clicking the U.R. L. opens the test values dialog, which lets us enter the required parameters to test the page. So let's get the sys ID of our catalog item. To get the sys ID of any record, you first
locate the record in the platform. We navigate to our catalog items list and open the item. Now we copy sys ID of the catalog item... ... and return to the page in app Engine Studio. We paste the sys ID here... ... and the catalog item loads on the stage. Now we can click open to preview the page. Note that the sys ID field in the configuration panel is already set up to dynamically display a catalog item when its sys ID is passed to the page. Your catalog items will likely vary over time,... ... so you could set up a list page with the items linked to the catalog item page. When the user clicks an item, it would open in the page. After you've configured your portal for your users to make requests,... ... you may need to create a workspace
experience where managers can go to fulfill requests. Let's add one to our app. We edit the name to include workspace, which also changes the U.R.L. The only role we've defined for this app so far is for requesters,... ... so we'll delete it and add a new role for fulfillers after we create the workspace And after a few moments our workspace is ready. Just like portals created in App Engine Studio, workspaces are also fully functional with default pages you can customize. Let's take a look at the default workspace. Here's the homepage showing the logged in users tasks. We don't have any tasks in our request table yet,... ... so the list is pulling data from the inventory table. We'll fix that in a moment. And here's the list page where fulfillers can
see lists of all requests and create their own custom lists. Now, let's see how we can edit the table source for the My Work list. First we'll create a variant of the page. When we click the list in the my work panel, we
can access its configuration and see that the table is artwork inventory. We need this to display artwork requests, so we select that table. The list reloads and we can see that this is the
correct table. Fulfillers can now see the open requests. So by creating and editing portals and
workspaces in App Engine Studio,... ... you get a head start on customizing these experiences for your application. For more information, see our product documentation or knowledge base or ask a question in the service now community.