.png)
.png)
While Screen Flows have come on a great deal since the grey boxes of the Classic runtime, they are still lacking in UI.
Salesforce is pushing this forward, with the Winter 20 release comes the pilot of a much better screen builder within Flow, pushing us closer to being able to build screens that look closer to those that Salesforce provides.
In our previous blogs, we have spoken about different ideas, components and manners of thinking that can be applied to Flow and declarative methods across the platform to keep things scalable and within admin control while working past Flows limitations.
We will be continuing that theme today with a focus on screens.
Looking and feeling like Salesforce should always be the goal at the end of the day unless this Flow or Component will be living on Community.
Salesforce has a great design system as is, and this exists for a reason. If you haven’t already checked out the Lightning Design System, I would highly recommend it. Anywhere you can leverage this is a win.
Developers will thank you if you can point to specific components or areas (for example, data table or cards) and you’re more likely to get something that looks as you expect. Not only does this help you get a better, more Salesforce looking product, but it can help you identify re-usable areas – for example (again!) the Datatable that can be found on Unoffical SF.
As with our last article – we’re going to focus on some of the limitations on Flow and how these have been overcome by these components, as well as providing some real-world examples of where these have benefited.
A favourite area of mine is buttons. This is a shockingly common use case that Salesforce doesn’t allow for. The buttons along the bottom of a flow are ALWAYS: Next, pause, Finish, back.
These absolutely do not convey to the User what will happen when they click that button. Its one of the biggest giveaways your user is in a Flow, and often leads to confusion. It also doesn’t allow you to offer your end-user a choice in a sensible or visual manner. For example – if you have a Flow allowing you to create an Opportunity through a Flow – you have no way (outside of a toggle or checkbox – which are unintuitive) to offer you User a choice to either save and exit, or continue on to create a Quote.
A quick fix to this is this Flow Button Component , though there are several of these knocking around, or make your own for better formatting (as this example doesn’t allow multiple buttons on one row – though others do). This sets a variable to true/false if a button is clicked, and then moves to the next element – which in this case would be a decision to see which button had been checked – allowing you to send the flow in different directions.
For those who like this idea – there’s also a Custom Footer override and a different set of buttons.Visual picklists is an area we’ve mentioned briefly before but is another big win in terms of making UI look clear an engaging – especially when quick choices need to be made (eg: phone calls). There are two components that really stand out design-wise for this.
One is Salesforce labs ‘Flow Magic’ which allows for visual picklists (though doesn’t filter by record type at all), which allows either Lightning Design Thumbnails to be used as icons, or custom images. It’s quick and easy to set up and can make a mundane set of choices look slick and professional.
The other more detailed option that requires a little more time and knowledge to setup is the community-made ‘Quick Choice’ which allows you to input values that don’t rely on an existing picklist and can accept a host of other settings.
Sadly both of these only work with single select – but for those who want a multi-select, that’s a great challenge, and these components provide a great starting point.The biggest gap, in my opinion, is data input. Many times has there been a need to provide record input in a page layout style and being honest, Flows don’t provide great input for a vast amount of fields, especially with one field taking up one line.
This leads me to my absolute favourite flow component – Display Record Details.This component covers a great many use cases – it can provide a view-only mode which is great for giving Users a preview of the record they have created, or showing back details of whatever they have found in a search (thinking back to call scripts again!) without leaving the Flow. It can be also used to drive record creation/editing.
The best thing about this component – harking back to other blogs – is that it is super reusable – accepting an input of a comma-separated list of fields as well as Record Types.
This means it can be used to display a handful of fields of your choosing – or be combined with other Actions that return a list of fields for a page layout to give the correct fields for a record type or user. This is immensely powerful as this continues the look and feel a User expects when working with records without compromising on flexibility or having to leave your Flow.
These three Flow components are all trying to do the same thing – push forward the UI in ways that Flow doesn’t allow while keeping it Salesforce. Combining these with Flow Actions we’ve mentioned in previous blogs, like the ‘show toast’ action can really provide a slick and engaging experience without compromising on configurable or flexibility.
These make a fine addition to any admin or consultants tool belt and can provide impressive-looking results without the need to involve development. They also provide a great example to show or talk through with a developer/development team, of how Salesforce’s styles and components can be re-applied to push for configurable and reusability without sacrificing the look and feel.
