Build a Custom Detail Page

Goal

For this tutorial, you’ll build a custom detail page for a single Account record in your Salesforce org using a Form component. To do this, you’ll create a condition to limit your model to a single record—which lets you display many fields for that one record.

Download XML

Example

This is an example page. Its data resets each time the page is loaded.

Concepts covered

This tutorial uses Skuid features to create a custom detail page. For more information about these features, see the following:

Create a page

  1. From Pages, click Create. A modal appears.
  2. Give your page an appropriate name like AccountDetail.
  3. Click Create. The Composer opens.

Create a model

Models allow you to pull data into your page from your data source’s existing objects.

  1. Click the models Models tab.
  2. Click add Add Model.
  3. Enter the following model properties:
    • Model ID: Account
    • Data source type: Salesforce
    • Data source: Current Salesforce Org
    • Salesforce object name: Account

Choose fields

  1. Click on Fields under your new model.

  2. Check which fields you want to use for this page. For the Account detail page, choose fields like:

    • Account ID

      Note

      This field must be checked to properly configure the condition later on.

    • Account Description

    • Account Name

    • Account Phone

    • Whatever else your users would expect to see on a detail page

Create a condition so that only a single record displays

Conditions determine what data will be queried based on predetermined properties. For the Account detail page, we need to tell the page to only load data from a single Account record.

  1. Click on Conditions under the model.
  2. Click add Add.
  3. Define your condition:
    • Field: Account ID
    • Operator: =
    • Value:
      • Content: Page/URL parameter value
      • Parameter: Id

This condition means that your page will load data for the account associated with the Id that you pass in as a URL parameter. You’ll select which Id to preview at a later step.

Add components

Components are the building blocks that give your page its functionality.

To get started with components, click the components Component tab.

Add a Header component

  1. Under Data, click Header.

  2. Drag and drop the Header component onto the canvas.

  3. Set your Header component’s properties:

    • Model: Account

    • Title: Fields > Account name

      Note

      Selecting the field will input merge syntax, which dynamically populates the title based on the selected account record.

    • Subtitle: Account

Add a Form component

  1. Drag and drop the Form component under the Header component.
  2. Set your Form component’s properties:
    • Model: Account
    • Default mode: Read with Inline-Edit
    • Show save and cancel buttons: Selected

Configure the first column

  1. Click the column in your Form component.
  2. Type “General information” as your section heading.
  3. Click chevron-small-down Add fields.
  4. Click Model fields.
  5. Check the boxes next to the Account ID, Account Name, and Account Description fields.

Add and configure the second column

  1. Click add Add Section.
  2. Click the newly-added column.
  3. Type “Contact information” as your section heading.
  4. Click chevron-small-down Add fields.
  5. Click Model fields.
  6. Check the box next to the Account Phone field.

Preview the page for a single record

Save and choose the Account record you want to preview

  1. Click Save.
  2. Click Preview.
  3. Select an Account from the list. The selected account’s Id field will be used to populate the condition we created that limits your page to a single account.
  4. Click Go.

Deploy the page

After you’ve previewed your page and ensured it’s working properly, it’s time to deploy it to your end users. See our deployment docs for more information or check out our other page tutorials.