Build a Custom List Page

Goal

For this tutorial, you’ll build a custom list page that will allow you to view, search, and edit a list of records. To do this, you’ll use a Salesforce Account object to populate a Table component in Skuid.

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 list 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 AccountsList.
  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, including related objects and fields. For the Account list page, choose fields like:

    • Account Name

    • Account Description

    • OwnerID fa-arrow-circle-o-right Full Name

      Note

      Clicking fa-arrow-circle-o-right allows you to access fields and records of related objects, like the account owner’s name for any given account. See Adding related objects/entities to learn more.

    • Whatever else your users would expect to see in a list of accounts

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: {{Model.labelPlural}}

      Note

      This template ensures that the correct object name is displayed even if you change it in Salesforce later or translate the interface to other languages (in this case, Accounts will display).

    • Subtitle: List

Add a Table component

  1. Under Data, click Table.

  2. Drag and drop the Table component below the Header component.

  3. Set your Table component’s properties:

    • Model: Account
    • Default mode: Read with inline-editing
    • Show save and cancel buttons: Selected

Add fields to the Table

  1. Click the Table component in the canvas.
  2. Click Add fields. A dropdown appears.
  3. Click Model fields.
  4. Select the fields you want to add to the table. For this tutorial, add Account Name, Account Description, OwnerID fa-arrow-circle-o-right Email.
  5. Click Apply.

Add search and sort to the Table

  1. Click the Table component in the canvas.
  2. In the Properties pane, select the Search tab.
  3. Check the box for Show search box.
  4. In the Properties pane, select the Sort tab.
  5. Check the box for Show Sort Builder.

Preview the page

  1. Click Save.
  2. Click Preview. The Accounts list page opens in a new tab.

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.

Keep building

After you’ve created your custom list page, you can explore more advanced Table customization—like dynamically filtering data, adding actions, creating detail drawers, and more. Also, see Build a Custom Detail Page for more about creating pages for individual records.