Build a Custom List Page

This tutorial shows how to create a list page from scratch in Skuid. In this example, we’ll be building a Salesforce Accounts Tab page, but you can use any object, from any data source (standard or custom). Once you understand how models, conditions, and components work, you can use page templates to build pages more quickly.

Goal: Build a custom list page with a searchable, inline editable list of records

image0

We’ll be displaying the Account List using the Skuid table component. Skuid tables are inline editable and searchable by default. You can also create custom filters to search a list of records with ease.

Step 1: Click Compose > New Page

image1

Name your Page and click Create Page

image2

Step 2: In Page Properties, enter the appropriate object as “Tab to Override”

image3

This should be the name of the main object on this page. We’ll type Account because we’re building this page on the Account object. If you’re using a custom object, say “Projects,” then you would enter Project__c in this field.

Note

You’ll have a checkbox option for Scale for Mobile Devices. Check this if you want to visually scale the page’s content and components to display more effectively on mobile devices.

Step 3: Create a Model to select which data to use for this page

image4

Models allow you to pull data into your page from existing objects inside and outside of Salesforce.

  1. Click Models.
  2. Click Add Model.
  3. Create a unique Model Id (this can only contain letters, numbers, and underscores, no spaces or special characters).
  4. For SObject Type (the Salesforce Object which will provide the data for this model), start typing the name of a standard or custom object, e.g. Account or Project__c.
  5. Choose the appropriate object from the list. In this example, we’ll choose “Account.”

For more information about Skuid models, visit the Models overview.

Step 4: Choose Fields to include on this page

image5

  1. Click on Fields.
  2. Check which Account fields you want to use for this page. For this example, we’re just going to grab is the Account Name field, but you can add as many as you like.

Note

One of the reasons that Skuid page loads fast is that you are only pulling in the records and fields that you specify. So, the fewer fields you pick, the faster your page will load.

Step 5: Click on Components

image6

Components are the building blocks of your page. They are what give your pages their functionality. For more detailed information, see Components.

Step 6: Drag and drop the Page Title Component into the Page Composer

image7

The orange strip lets you know where you can add components. You also add components to your page just by double-clicking on the component name.

Enter the Page Title and Subtitle

image8

  1. Under Page Title Properties, make sure the Title is associated with the right model. (This isn’t an issue now, but when you have multiple models on your page, it becomes very important.)
  2. A default title and subtitle template will be displayed. You can delete them and add in your own. The template{{Model.labelPlural}} will display the plural name of our object, in this case Accounts.

For more information on this component including how to use templates to pull in fields from your model, see the Page Title Component topic.

Step 7: Double click to add the Table component under the Page Title

image9

This table will display a list of all Accounts in your org.

A. If desired, remove Edit and Delete actions

image10

By default, users will be able to edit and delete records in this table (if they have these permissions). To remove one or both of these actions, click on an Action and then click on the red delete icon to remove it.

B. Edit your Skuid Table Properties

image11

  1. Click on the title bar of your table.
  2. Make sure the appropriate model is selected.
  3. Edit other Table Properties. You can choose how many rows will be visible in your table, and uncheck boxes to take away capabilities. For example, if you’re not going to be creating, editing or deleting records on this page, then you can deselect “Show Save/Cancel.”

For more information about the table component, check out the Table Component topic.

Step 8: Click on Models and then click and drag the Name field into the Table

image12

  1. Click on Models.
  2. Click and drag the Name field into the table. (You can drag from the left or the right.) The orange strip lets you know where you can add fields into your table.

You can select as many fields as you want and drag them into your table - there is no limit.

You can also add fields by clicking on the table and then on Add Field(s) > Model Field(s)

image13

  1. Click on the title bar of the table.
  2. Click Add Field(s).
  3. Click Model Field(s).

image14

This way you can add fields as you go, without returning to the Models tab.

  1. Click All Fields to add fields that weren’t originally included in your model.
  2. Click on the plus sign next to a field to include in the model.
  3. Check the box to add a field to your table. (Fields will be added in the order you check them).
  4. Click Apply to add these fields to your model and your table.

Step 9: Click Save, then click Preview to open your new page in a new tab

image15

Result: Your new Account list page will be displayed.

image16

Congratulations! You have created your first Skuid page!

  1. This page will now be displayed in the Pages tab.
  2. You can narrow the results displayed in the table by using the search bar.
  3. Click on an Account’s Name to view its Account Detail page. Double click on a row to edit it inline.
  4. Use these icons to add, edit, or delete records. You can also use the checkboxes to mass update/delete the records you select.
  5. Remember, even after you deploy this page, you can click on the gear icon at the far right to modify it at any time. For now, you can return to the Page Composer in the previous browser tab.