Chapter 2

Building the page

You're now in the Composer. This workspace is where you edit Skuid pages, so you'll spend a lot of time here.

There are three main areas of the Composer:

There are also some important buttons in the top right of the workspace, like Save and Preview. Throughout this process we will be saving and previewing to see our changes as we go. You can preview your changes as soon as you save them in Skuid, so preview often. 

Saving can be done by clicking Save or by using the CMD + S (Mac) or Ctrl + S (Windows) hotkeys. Likewise, you can preview a page by clicking Preview or by using the CMD + P (Mac) or Ctrl + P (Windows) hotkeys.


Setting the page's design system

When you first create a page, it'll be empty—but you'll see the page's properties within the Properties pane. Since we'll be placing this page inside a Salesforce Lightning page, let's make sure it matches by selecting the Lightning design system that ships with Skuid.

Now the visual elements of the page match the design aesthetic of Salesforce's own Lightning design system.


Create some space around the page

Since we'll be putting this page within another Lightning page, let's put some breathing room around our UI using a Wrapper component. 

With the component now in the canvas, its properties appear in the Properties pane. (Whenever you click or create an element in Skuid, its properties appear in the Properties pane.)

With the Wrapper selected, set its properties:

Whenever these instructions tell you to drag a component into the canvas, make sure you are dragging the components into this Wrapper. The entire page will be nested within it.


Create an Opportunities list

Which IdeaExchange ideas are we covering in this section?

With our workspace ready, let's start by creating a related list for the account's opportunities. We'll do this using a model and Skuid's Table component. This table will have over 10 columns and allow users to edit and sort data as they need.

First, let's create a model to pull in data from the Opportunity object. Return to the Elements pane to create a model:

This model will now query for records in the Opportunity object and also sort them primarily by close date descending—meaning the most recently closed records appear at the top of the table—and secondarily by their amount.

Now that there's a Skuid model connected to the object, add fields to the model—Skuid won't display fields not specified in the model.

Keep adding fields until you have over 10 selected.

With the model created we can now access data, so, let's add a component to view that data. 

While it's possible to drag and drop a Table component into the canvas (like we did with the Wrapper component), you can also quickly add a component connected to the Opportunity model by double clicking the model:


Adding list actions and sorting features

Which IdeaExchange ideas are we covering in this section?

Next we'll set up some actions to allow end users to alter the data. First, we'll configure an action that appears on individual rows to edit the record:

Within the Table component in the canvas:

We can now click Save and preview the page. Each row has a button to toggle the table into edit mode, allowing users to edit these records inline.

But what about updating fields on multiple records at once? Let's add a mass action to allow that.

Return to the Composer. Within the Table component in the canvas:

Now when the user selects multiple rows, they can update the field values for all of them at once.

Finally, to provide users sorting functionality, click the Table component within the canvas and then click the Sort tab in the Properties pane. Enable the Show Sort Builder property, then save and preview the page. 

Notice that the sorting rule we set on the model appears here, but now users can create their own sorting rules to best suit their needs.


Gather data for only one account using conditions

So far we've just been retrieving opportunity records for all accounts. Since we want these related lists to gather data for only a single account within a detail page,  we'll need to filter that data down. To do that, we'll set a model condition, which limits the data returned to a Skuid model based on a specified criteria.

In this instance, we'll set up a condition on the account ID field, which means the model will only return records related to a specific account ID.

illustration of man holding ipad, with content floating above him.

Once you add an always-on condition, Skuid will ask for condition values when you preview. Without a value for these conditions, Skuid models won't know which data to query for. To illustrate this, let's preview the page for a specific account.

Your page now previews with information for the account you selected. Since this will be added as a single portion of an account detail page, users will see this related list of opportunities in the context of a specific account.

We'll be adding more useful information to this page, but before we do, let's add a section header above this Table component so users know what they're looking at.

Let's make the text a bit bigger so it's easier to see. We'll do this by selecting a style variant.

With the opportunities area labeled, let's add two new related lists for cases.


Create two related lists for cases

Which IdeaExchange ideas are we covering in this section?

Having one related list is helpful, but by using models, we can have as many related objects as we want on this page. For this example let's show both the open and closed cases for the account beneath the opportunities section.

Let's create a tabbed UI for these two lists. First we'll create the tab and model for open cases.

With the tab prepared, let's create a new model to retrieve the open cases data.

Now we'll set two conditions: one to only retrieve records associated with the account and another to retrieve only open cases.

With all of the heavy lifting done on the model, we can quickly create a Table component for our cases data and place it in the proper tab.

Again, notice that the Table component appears at the very bottom of the canvas. We'll need to reposition it:

Now, let's create a second tab for closed cases.

Next we'll need to create a closed cases model, but let's take a shortcut and clone the open cases model, changing only what we need from there.

That's it! Let's repeat the process to create a Table and drag it to the tab.

  • Double click the RelatedCases_Closed model's name within the model list.
  • Select Table in the Create component modal.
  • Click Create component.
  • Click and hold the Table's header in the canvas.
  • Click the Closed tab within the Tab Set to select it.
  • Drag the Table component into the Tab Set's Closed tab.
  • Within the Properties pane, click the Display tab.
  • Click the Other section within that tab.
  • Uncheck the Show footer property.


Filtering data and saving data in multiple components

Your users will now have plenty of information on the page with both related opportunities and cases. But let's make it even more intuitive by adding a few more features:

  • Three opportunity data filters—allowing users refine the data on their screen
  • A "global" save/cancel button, which saves all changes made in the opportunities, open cases, and closed cases lists

We'll place these components beside each other using a Responsive Grid.

Now we'll populate these two divisions with components.

Creating filters

In the first division, let's add several filters for the opportunity data with a Filter Set component.

Now to create the first filter, which enables users to filter by stage:

Next, let's add a filter for the lead source field:

And finally, a simple toggle filter that only shows closed opportunities.

To do this we'll need to create a new condition on the opportunities model first, and then we'll add a filter that activates that condition. Filters and conditions are closely related, so this is a common build pattern in Skuid.

Now we'll add one more filter to our Filter Set that toggles this condition:

With all of your filters created, preview the page to test how they update the opportunity data within the page.

Global save/cancel

Finally, let's add a global save/cancel button. This is another common build pattern in Skuid; with multiple components all attached to different objects, it can be a pain to save data in each component. That is, until you add a button that does it all!

We should now have two buttons within two button groups. Let's configure the cancel button first.

And now do the same for save:

Also, to differentiate between these save and cancel buttons, let's give the Save button a unique style:

With the global save/cancel added, all that's left is to remove the save/cancel buttons that appear beside each Table component by default.

For all three Table components (related opportunities, open cases, closed cases):

Bonus: Adding a Chart component

Depending on the time remaining in your workshop, you may also add a Chart component, which can help better visualize opportunity performance.