There are many tools to help create apps faster, but none that solve the experience problem—because it isn't just about technology, it's about humans.
Creating experiences that people love is hard. Doing it fast is even harder. Skuid offers the agility you need to do both. You can quickly build and iterate on apps that work for your users, not the other way around.
This step-by-step guide addresses some of the top-requested features from the Salesforce IdeaExchange and will help you build an intuitive Salesforce app using Skuid, all without code and all in one page.
These instructions are designed to guide you through the build process, step-by-step.
As you build, please don’t hesitate to reach out if you have any questions.
What kind of app are we building?
We'll be updating the Lighting account detail page to include more information about related opportunities and cases. To do this, we'll create a Skuid page that gathers this related list data and delivers highly requested related list functionality.
We'll visualize our opportunities by lead source, and we'll also allow for filtering and inline editing of those opportunities. As for related cases, we'll display both the open and closed cases for the account.
While it's possible to have some of these related lists in out-of-the-box Salesforce, we'll build a Skuid page that also incorporates some of the following highly rated IdeaExchange ideas—all without code:
- See more than 10 columns on a related list
- See related fields (parent/child fields) from related objects
- Edit these related lists inline
- Activate actions on these related lists
- Sort these related lists by more than one field
- See information for more than one related list per object, as well as filter on those lists
Note that most of what we'll be doing is adding related information to our account detail page, instead of adding information about the account itself. That's because we'll be deploying this Skuid page within a Lightning detail page.
Our users will have powerful Lightning components sitting beside a customized Skuid page full of valuable information—all in one seamless experience.
Before we begin
We need to check off a few prerequisites:
Provision a dev org or sandbox org: If you'll be working from a new dev org or sandbox, be sure to provision one before the workshop so we have an environment to work within. It goes without saying, but to say it anyway: we don't recommend developing in a production org.
- Activate Lightning Experience: This Experience Workshop assumes you'll be working in Salesforce Lightning as opposed to Salesforce Classic. If you're provisioning a new org, Lightning should already be enabled, but if you need more information see this Trailhead unit.
- Activate My Domain: While recently provisioned production orgs have My Domain enabled by default, older orgs may not. You must have this feature enabled to deploy Skuid in Lightning, so if you are unsure, verify that My Domain is enabled in your org.
Install Skuid: We'll be starting our workshop assuming you've already installed the free version of Skuid from the AppExchange.
If you have any issues, check out Installing Skuid into a Sandbox Org or a Developer Org video or see our documentation.
The Composer, Models, and Components
We'll be building our Skuid page within the Composer. The Composer is the drag-and-drop page editor that uses models to access and update data and components to display that data.
Don't worry about the conceptual details for now: we'll walk you through how to build the page step-by-step. And at the end of this curriculum you'll find links to learn more about all of the concepts we cover here.
To create a new page in the Composer:
- Open the Skuid app from the App Launcher.
If needed, click Launch Skuid
- If you don't land on the pages list, click Pages in the Skuid navbar.
- Click Create.
- Set the following fields:
Page name: Enter an easily referenced, specific name with no spaces.
For example, ExperienceWorkshop_AccountRelatedLists
Page API version: v2
You won't need to worry about the other fields for this workshop.
- Click Create.