Customizing page headers

Learn the basics of how to customize a page header.

Overview

The page header sets the context for the page, helping the user understand quickly what record they’re looking at.

The are several properites of the page header that can be modified to provide more context:

  1. Title: The title renders in a large font, and is meant to provide a clear identifier of the record. You can embedd templates to reference multiple fields
  2. Subtitle: The subtitle renders in a smaller font below the title, it’s often used to highlight important fields on the record. Also supports templates
  3. Avatar: The Avatar can display a two letter summary of any text supplied, or an image url. Also supports temaplates
  4. Actions: The actions property allows you to embedd other components within the header, typically action buttons that can link to other pages, or invoke modals

Let’s try customizing the page header for an account record, first we’ll experiment with by showing some data from the record in the Subtitle.

Showing data in the subtitle

  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 page header section, and click the pencil icon on the Page Header component
  5. Locate the + Optional properties link, underneath the Title property, click it
  6. Select Subtitle from the popup list
  7. Enter the following into the Subtitle property: “{{ ShippingCity }}, {{ ShippingState }}”
  8. Click the Save button at the bottom of the section, to save your changes to the component
  9. Your changes should be visibile in the page preview

Your page should look like the image below, if you have some data in the ShippingCity & ShippingState fields.

A preview of the account detail page with the shipping city and state in the subtitle of the header.

Adding an avatar

The avatar can show the initials of the first two words passed to the Label property, optionally you can include a link to an image. In this example, we’re going to create a new URL field called “LogoURL” and that points to a image representing the logo for the account.

Create a LogoURL custom field

  1. Navigate to Settings > Objects and fields, select the Accounts object
  2. Click the Add custom field button in the top left
  3. Chose the field type of URL, click Next
  4. Set the label to “Logo URL” and the field name to “LogoURL”, check “Show on Desktop” in the Display settings section, then click Create
  5. Navigate to an account record and edit it, setting the Logo URL field to “https://placehold.co/128x128/orange/white?text=APEX+Logistics"

The URL links to an app that generates placeholder images, handy for writing tutorials!

Configuring the avatar

  1. Make sure you’re looking at the account record you just set the LogoURL on, and open the page builder
  2. In the page builder’s properties panel (on the right of the screen), find the Configure page header section, and click the pencil icon on the Page Header component
  3. Locate the + Optional properties link, underneath the Title property, click it
  4. Select Avatar from the popup list
  5. Enter the following into the Label property: “{{ Name }}”
  6. Enter the following into the Image source property: “{{ LogoURL }}”
  7. Click the Save button at the bottom of the section, to save your changes to the component
  8. Your changes should be visibile in the page preview

A preview of the account detail page with an avatar configured in the header.

Adding an action

The Page Header component is a little bit special, in that it can actually host other components inside it. This is primarily so you can add custom “Actions” to the header. In the example below we will create another custom field to store the website of the Account, and add a Link Button to navigate to it.

Create a Website custom field

  1. Navigate to Settings > Objects and fields, select the Accounts object
  2. Click the Add custom field button in the top left
  3. Chose the field type of URL, click Next
  4. Set the label to “Website” and the field name to “Website”, check “Show on Desktop” in the Display settings section, then click Create
  5. Navigate to an account record and edit it, setting the Website field to “https://www.skedulo.com” or any URL that you prefer
  1. Make sure you’re looking at the account record you just set the Website on, and open the page builder
  2. In the page builder’s properties panel (on the right of the screen), find the Configure page header section, and click the pencil icon on the Page Header component
  3. Locate the section Components, and the property Actions, click the + Component link
  4. Notice how the context of the page header component changes to become the new child component
  5. Set the Component label property to “Website Link”
  6. Set the Component property to “Link Button”
  7. Notice how the properties of the Link button component are now visible
  8. Locate the + Optional properties link, click it
  9. Add Label, Type and Path properties from the popup list
  10. Enter the following into the Label property: “Open website”
  11. In the Type property select: “Primary”
  12. Enter the following into the Image source property: “{{ Website }}”
  13. Click the Save button at the bottom of the section, to save your changes to the component
  14. Your changes should be visibile in the page preview
  15. Click Publish in the top right, if you want to make this change available to all users.

Your page should now look something like this: The account detail page with an &ldquo;Open website&rdquo; button nested in the page header.

Try clicking on the button, it should navigate you to the URL you entered into the Website field on the account record.

See also