Unified Interface Controls – The Radial Knob

Let’s press some BUTTONS!

Continuing along our series of the Unified Interface controls, today we are going to implement another number based control – the Radial Knob.

Weeeeee – circles!

The Radial knob is a control that adds an extra layer of interactivity to our forms. It will again allow the user a great visual representation of a min/max value of a field. If you’re not already familiar with how to add a control to a field on a form, I recommend reviewing my previous blog post.

Using the Radial Knob – 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

Implementing the Radial Knob is extremely similar to the linear slider. In this example, I will demonstrate binding a max value to another field on the record. Our use case here is for an Event entity that will clearly show the number of registrants, using the Maximum Available Seats field as our bound max value. Here’s what those fields look like before implementing controls:

Now let’s add that Radial Knob to make things a lot easier to visually digest:

Adding the Radial Knob control

I’ve set the parameters as usual – bound the min value to a static value of 0, but this time I am setting the max value to the “Max Available Seats” field seen above:

As this field is showing the number of registrants for an event, I am setting the Step value to 1, meaning the value will increase by 1 each time. Here is a look at my setup:

Now for the fun part! Once we save and publish our new control, we’ll get the following visual:

Congratulations! Now you have implemented another custom control!

One thought on “Unified Interface Controls – The Radial Knob

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 )

Google photo

You are commenting using your Google 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.