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.