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.
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.
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:
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.
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:
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.
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.
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.
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.
We'll place these components beside each other using a Responsive Grid.
Now we'll populate these two divisions with components.
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.
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):
Depending on the time remaining in your workshop, you may also add a Chart component, which can help better visualize opportunity performance.
