Build a Custom Detail Page

This tutorial shows how to create a Detail Page from scratch in Skuid. In this example, we’ll be making an Account Detail page, but you can use any object, standard or custom. Once you understand how models, conditions, and components work, you can use Page Templates to build pages more quickly.

Goal: Create a custom detail/view page with inline editing

image0

Step 1: Click Compose > New Page

image1

A. Enter Page Properties, then click Create Page

image2

  1. Enter a Page Name.
  2. Click Create Page.

B. Choose which tab to override

image3

Choose the tab you want this page to override. Enter the name of the standard or custom object, e.g. Account, Project__c, etc.

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 2: 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 models, visit this topic for an overview of Skuid models.

Step 3: Choose fields to include on this page

image5

  1. Click on Fields under the model.
  2. Check which Account fields you want to use for this page. The less fields you select, the faster your page will be able to render itself. For the Detail Page, choose fields like Account Description, Account Name, Account Phone and any other information you wish to display in an account’s detail page.

Step 4: Create a Condition so that only a single Account record will be displayed

image6

Because we want this page to be used as an override for the standard Account Detail (View) page, we need to tell our page to only show data from the Account that a user requests to see. By convention, this data will be handed to us in a URL Parameter called “id”, for instance, our browser URL might end with something like “/apex/UI?page=Account&id=0010000000fr243.” In this case, we’re being handed a parameter called id whose value is 0010000000fr243. So we need to create a Condition that takes value and does something with it.

  1. Click on Conditions
  2. Click to Add.

Edit Condition Information

image7

  1. Choose Account Id as the field.
  2. Click “Value” and choose URL Parameter as the Value Type.
  3. Under Parameter, type Id.

What we’re doing here is saying “get the value of URL Parameter called ‘Id’, and find the Account whose Id field equals that parameter’s value.” By doing this, our Account page will only display information from a single Account.

Step 5: Click on Components

image8

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

Drag and drop the Page Title Component into the Page Composer

image9

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.

Step 6: Double click to add the Field Editor Component below the Page Title

image10

The slightly orange strip lets you know where you can add components.

The Field Editor allows you to view and edit fields on a page. For more information, see the Field Editor topic.

A. Edit your Field Editor Properties

image11

  1. Make sure Accounts is selected as the Model. (When you have multiple models, it will be very important to make sure you connect your components to the appropriate model.)
  2. Select Read with Inline-Edit mode. When you choose Read with Inline-Edit mode, it means the information in your field will be in Read-Only mode only until you click to edit it; you will still be able to edit the information. If you choose Edit Mode, it locks all the the fields in Edit Mode permanently (which is useful if you want to create an Edit page).
  3. Click to Add a Column to your field editor.

With Skuid tables and field editors, you can display as many columns on a page as you want.

B. Edit section names

image12

  1. Click on a Section.
  2. Type in the new Section Title under Section Properties.
  3. You can choose to make your Field Editor sections collapsible if you want.
  4. Or, you can click to Remove Section.

C. Click on the top of a section to edit other Column properties

image13

  1. Click on the dotted line labeled Column.
  2. Buttons will appear to Add a Section to this Column or remove this column.
  3. You can also set the Column Width under Column Properties.

Step 7: Add Fields into the Field Editor

image14

  1. Click on the Section name.
  2. Click Add Field.
  3. Click Model Field(s).

Choose which fields you want to add

image15

  1. Select the fields you want to display in each section of the Field Editor. Fields will be added in the order they’re checked.
  2. Click All Fields to include more fields from this object that you hadn’t previously included in the model.
  3. Click Apply.

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

image16

Choose the Account whose Detail Page you want to preview

image17

  1. Enter all or part of the name of the Account.
  2. Select the desired Account from the list. This Account’s Id field will be used to populate the Id URL Parameter when previewing our Account page.
  3. Click Go.

Result: The new Account Detail Page will be displayed.

image18

  1. This page will now be displayed in the Pages tab.
  2. Double click on a field to edit it.
  3. Click to Save or Cancel your changes.

Once you’ve deployed this page, you can always click on the adjust icon at the far right to open the page editor in a new tab and keep editing it.