Unified Interface Controls – The Linear Slider

Who doesn’t?

In this new blog post series, I will be breaking down the various new out of the box controls that comes with your new shiny upgrade to Unified Interface! In a previous post, I covered how to implement the calendar control, and explained a little bit about what a control is. If you’re not familiar with Unified Interface, it’s worth taking a look through before continuing on.

My favourite part of the updated UX/UI experience that comes as part of Unified Interface is the many new ways in which users can interact and consume data. A lot of these controls now allow for an easier input of data and a much clearer way to visualise that data. Today we’ll be looking at one of these controls – the Linear Slider.

So satisfying

As you can see from the gif above, the Linear Slider allows the user to easily drag the slider across to change the value of the field. It also shows the user, at a glance, where this value is in between a minimum and maximum value. In my case, I have applied the control to the Credit Limit field on the Account entity. Now let’s take a look at how I applied this control.

Using the Linear Slider – The Facts:

  • Must be used with a number field: Whole, floating point, currency, decimal
  • Must implement a min/max value
  • Allows the user to increment in “Steps” – specific values for each new level on the slider

Now let’s add some buttons!

It’s important to note that the control can only be applied at a form level. At the time of writing, most custom controls (if not all, please feel free to correct me on this) are still only available in the classic customisation interface. From here, we’ll access the form we want to apply the control to:

Here are the list of forms available for the Account entity

Next we’re going to locate the field we want to apply the control to:

Double click the field and we’ll have some editing options, select the “Controls” tab and “Add Control”

Select the Linear Slider control and click Add:

Nice little preview of your control

Once we have added the control, we can now apply several customisations:

Let’s take a look at the Min/Max customisations. We have the ability to either designate a static value for the Min/Max or we can assign it to another field on that record:

Min/Max options

Once those are set, we now have to designate how much the value can be adjusted by per step:

So in this case, each movement of the slider will increase or decrease the value of the field by 100. Next we have to determine which versions of this form will the control appear on:

This is a standard option across all controls – we have the option to determine if this control appears on this form on the Web client, phone or tablet. In some cases, the phone may not be suitable format for a control, the smaller space may make certain controls difficult to interact with.

As always, make sure to save and publish your changes. Then you’ll see the magic happen on your chosen form on your chosen client! Here’s a look at what we’ve just implemented:

Now we can very easily adjust the value by using the slider, stepping up the value by controlled increments!

6 thoughts on “Unified Interface Controls – The Linear Slider

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.