Sometimes you need to call attention to specific sections on a page. Is a field missing a value? Is a close date past due? To highlight these areas would normally require custom code, but it doesn’t have to be that way.
In this webinar, we share how you can use Skuid to format fields to improve UX optimization , without writing code. Conditional formatting of field values lets you:
- add interactions from a template field button
- use modals for editing related records
- and use custom reference fields to create new records
For those new to Skuid, the form and table are the two primary components for data entry. Boston takes forms and tables to the next level. You can now trigger field actions directly from templates to build interactions that help users. In this post, we’ll share how to do just that.
Three new ways to optimize your Salesforce experience.
Much of the Boston release expands field and display capabilities in forms and tables, which makes life easier for your users. To demonstrate this, we shared a simple opportunities list page built with Skuid in Salesforce.
The page included a list of open opportunities along with account information like website, account site, and billing address. We built the page using the Skuid declarative framework—no code required—in less than two hours including ideation, iteration, and testing.
Here are three template field actions we shared on this page that can make users’ lives easier:
- Display a message.
There are many reasons you may want to notify a user as they move through a page. Here’s one: when clicking a link means they’ll be leaving Salesforce and going to an external website, your users will want to know before they go. In the Skuid Boston release, you can use a template field action to alert the user: a modal with a message that says they’re leaving Salesforce if they proceed.
Keeping users one step ahead is key to creating a smooth experience and increasing Salesforce adoption.
- Edit a related record from the field.
As mentioned, our demo page included a list of opportunities with related account information. Instead of forcing the user to the account detail page to make updates, why not allow them to edit account information where they’re working? In our example, when you click an account-related field (like billing address) we pop up a modal where the user can edit and save that address.
And this is the beauty of the Skuid data model: you can pull in data from cross objects and connect them together. Your user can be working in an opportunities page and edit an account record without having to navigate away.
- Build a reference field experience.
What if, instead of displaying a list of accounts for the user (which can be overwhelming), you’d rather serve a more streamlined experience? In our example, we showed a way to do this when creating new opportunities. Once the user clicks the account field to add an account to the opportunity, a modal pops up with a deck experience. Instead a lengthy list display, each account has its own card with relevant, recognizable information, helping the user quickly narrow their selection.
By helping the user create records where they’re working, you’re simplifying the experience for them. And making tasks simple helps people accomplish them faster.
Bonus: Highlight important fields for even better UX optimization.
Before the last release, app builders could apply some style variants to fields using custom field renderers. But doing so meant more time and writing custom code. Skuid Boston makes adding style variants easy, no coding required.
Before we dive into how, it’s key to understand that Skuid has two build environments: the App Composer and Design System Studio (DSS). DSS lets you define what each app component will look like. And the App Composer is where you build app components. The two build environments work in tandem to create a seamless user experience.
Sometimes in Salesforce you want to call attention to fields that require user action. What if a close date is past due? Or, you want to note a high value opportunity? In the latest release, you can highlight fields in colors that draw the eye.
First, you need to set up your style variants in DSS. In the webinar, we demonstrated three field options: out of range (red), warning (orange), and high value (green).
Once the style variants are set in DSS, you can implement them at the field level in the App Composer. Within field properties, create rules that apply those variants once conditions are met.
To hear great follow-up questions from webinar attendees about UX optimization, and to see a complete walkthrough, check out the full webinar here.