Customizing detail pages

Learn the basics of how to customize a details page.

Overivew

Record detail pages allow your users to see a single record, such as an Account, Contact, or Resource.

Page builder generates a default detail page for any object in the platform, standard or custom.

What can be customized on a detail page?

The basic elements of a detail page are the same as a list page, the page header, and the tabs. You can learn more about these elements in the Customizing list pages documentation.

The most common requests for customizations on a record detail page are:

  • Adding a tab that shows a list of related objects
  • Adding, removing or changing the order of fields in the details tab
  • Customizing the header to show more information

Objects can sometimes have relationships to other objects, such as the relationship between an Account that can have many Contacts. For these one-to-many, or parent/child style relationships, it’s common for users to want to be able to see the child records without leaving the parent.

To acheive this, we created the Related list component, that simplifies the task of configuring a list view to show the children of a parent/child relationship.

Let’s try adding a new tab to the Accounts detail page, that includes a list of all child contact records.

  1. Navigate the accounts list, https://<your-team>.my.skedulo.com/p/accounts
  2. Click on an account to open the detail view
  3. Open the page builder by clicking on the gear icon in the lower right of the screen
  4. In the page builder’s properties panel (on the right of the screen), find the Configure tabs section, and click the +Add new tab link
  5. Set the Tab label to “Contacts”
  6. In the Component drop down, select “Related List”
  7. In the properties section, in the Related list drop down, select “Contact”, leave the other properties their default values
  8. Click the Save button at the bottom of the section, to save your changes to the component
  9. The page preview will update to reflect the change, a banner informing you that you have unsaved changes will display, and you should see the new “Contacts” tab as the last tab on the page
  10. Click Publish in the top right, if you want to make this change available to all users
  11. Click on the Contacts tab in the page preview to look at the list

Your page should look something like the image below.

A preview of the account detail page with a new “Contacts” tab with a list of related contacts, note the banner informing you the page is in preview mode, and must be published before other users will see this change.

Adding, removing or changing the order of fields

It’s very common for customers to add their own custom fields to standard objects, or want to hide fields that are not relevant to their users. Alternatively, it could be that the default ordering of fields is not efficient. To address these sorts of requests, we created the Field Layout component, which is responsible for showing/editing fields from an object, within the context of record detail page.

Let’s try changing the order of some fields on the account record detail page.

  1. Navigate the accounts list, https://<your-team>.my.skedulo.com/p/accounts
  2. Click on an account to open the detail view
  3. Open the page builder by clicking on the gear icon in the lower right of the screen
  4. In the page builder’s properties panel (on the right of the screen), find the Configure tabs section, and click the pencil icon on the Details tab
  5. In the Properties section, you should see an option to Organise fields manually, check that radio button
  6. Click the + Add fields link
  7. A popup will appear, showing a list of fields to add to your view, find the check box labelled Standard Fields (13)"** and select it, then click Import selected
  8. The popup will close, and a list of all those fields should now be visible in the properties panel, it should look something like this A preview of the account detail page, with the sections/fields available to be edited highlighted
  9. By default, all the fields are added alphabetically, let’s change that, and move the Name field to the top, by clicking and dragging the field using the handle on the right of the field. Drop the field on the Details section to have it appear as the first field in that section.
  10. Click the Save button at the bottom of the section, to save your changes to the component
  11. The page preview will update to reflect the change, a banner informing you that you have unsaved changes will display, and you should see the Name field as the first within a Details section on “Details” tab.
  12. Click Publish in the top right, if you want to make this change available to all users

Your page should look something like the image below.

A preview of the account detail page with a the Name field displayed as the first field on the page.

You can experiment with Sections and re-ordering the fields, try creating a “Shipping address” section, and a “Billing address” section, and moving the related address fields into those. You can also experiment with changing the properties of fields by clicking the pencil icon on a field. Try removing the now redundant “Shipping” or “Billing” text from the address fields, since you’ve moved them into sections.

More about field properties

If you’re interested in some of the other properties of fields, check out the following sections in the Customizing create pages documentation:

See also