Welcome to part 5 of the Builder series. In this video, we’ll show how to configure forms and lists in the classic UI without using HTML, JavaScript, or CSS. This video builds on the use case from the
previous videos in this series... ... and can also be used as a standalone reference. Let’s begin by taking a look at the form
and list layout for the Safety app we built earlier. Here, we’re logged in to our ServiceNow
instance with the administrator credentials. You can also perform the form design tasks
shown here if you have the personalize_form role... ... OR the delegated_developer role with
File Type Access to Tables & Forms for this app. And you can also modify the default list layout
with the personalize_list role. We navigate to System Applications > Studio... ... and select the Safety app. ServiceNow Studio is our built-in integrated
development environment, or IDE. This means it’s the place to create and modify all the components that make up your application. On the left is the application explorer. This list represents all the artifacts created for our Safety app by Guided Application Creator and by other means. To modify the form layout of our safety issue app... ... we use the application explorer to navigate to Data Model > Tables > Issue. This brings up the Issue table definition
with all the details. We scroll down to the related links and click
Design Form. This opens our form in Form Designer. There are other ways to design forms, for
example, through form layout... ... but the form designer suits our needs best, so we’ll use that. Here’s a visualization of the form layout. Guided App Creator did a pretty good job,
but we need to make some minor adjustments. First, we drag and drop fields to the order
that best suits our process. We should include only those fields that actually
contribute value to the process. And we also want to make it easy for users
to fill in the fields in a logical sequence. Consistency is important, too. For example, we notice that other forms in the system with a Number field place that field in the upper left ... so we’ll do the same. Additionally, shorter fields like dates and
reference fields can go side-by-side in a 2-column section... ... while longer fields like the short description are full-width and should be in a 1-column section. Let’s also add the Activities formatter
to the form... ... so that we can see changes in field values and other historical data... ... that will make it easier to follow the lifecycle of the record. Oops! When we were in Guided App creator, we forgot
to add a field for an inspector... ... the person who inspects the fix to make sure the safety issue was resolved. No problem. To add the new field, we click Field Types... ... select Reference, and bring it out on the form. And then set the properties to point to our user table. When we click the gear icon for the State field... ... we see all the properties for that field, including the choices, which are somewhat out of order. Here, we can add, remove, and reorder the choices. We can also change other settings on this
field, such as the default value. When we’re done, we close the properties box. We can make similar changes to other field
properties as needed. Those are enough form changes to get us started. Now we just click Save. Before we view our masterpiece, let’s quickly
configure the default list layout for safety issues. Back on the Studio browser tab, just below
Design Form, we click Layout list. The columns on the left are available for us to put on the list... ... and the ones on the right are already there. The trick with lists is to avoid overdoing
it. Too many fields can cause horizontal scrolling,
and nobody likes that. Don’t assume everyone has an ultra-wide
monitor, or you’ll find yourself answering support calls. We can add or remove fields from the list layout by selecting them and clicking the Add or Remove buttons. Or re-order selected items with the Move up
and Move down buttons. When we’re done, we save the changes. Back in Studio, we can review our work by
clicking Show List on the Issue table definition. And there’s the list layout, exactly as we want it. Clicking the number on the record displays
the form layout we created using form designer. If we need to make any changes to the form
or list layout later... ... it’s a simple matter of a few clicks. For more information, see our product documentation,
knowledge base, or podcast. Or ask a question in the ServiceNow Community.