How can we help?

How to build User Input Control components (+video)

The User Input Control component enables you to control your dashboard display according to variables assigned to that component.

The User Input Control component sets the value of a variable. Go here to learn about variables.

This article contains the following sections:

Choose a User Input Control type

When building a User Input Control, you choose from 4 different options: Date Picker, Text Field, Drop-Down List, or Multi-Select Drop-Down List. These choices are made in the Properties panel, beside Control Type.

  • Date Picker enables users to select a date value.
  • Text Field enables users to type in a term and search for values.
  • Drop-Down List or Multi-Select Drop-Down List enables users to pick from one or more pre-defined values:
    • Values: The list of possible values to be assigned to the variable associated with the drop-down list.
    • Labels: You have the option to display values with an overriding label rather than the original value name. For example, if Values are a list of employee numbers (used to index into a data source), the Labels could be the corresponding employee names to make it easier for the user to select. If Labels are specified, the number of Labels must be the same as the number of Values.

Here is an example of a User Input Control component that uses the Text Field:

Hover over the image below to watch a short video.

Multi-Select Drop-Down List example

The Multi-Select Drop-Down List Control Type enables variables to support more than one value by setting the variable value to a comma-separated list of your selected values. When using this control type, you need to add a hidden data column to your Klip and apply a filter to that column to include “TRUE”.

Refer to the following screenshots for an example configuration, including a formula structure that enables the multi-select to filter properly.

Column used for user input control values:

Filter settings:

Full configuration with formula example:

The final Klip on a dashboard:

Choose a variable for the User Input Control

To assign the variable that the User Input Control component will set:

  1. Select the Control Type.
  2. Select a variable from the Use Variable option.
  3. Optional: Provide a Default Value for the component to use.
    • The default value is used the first time the Klip is viewed in a dashboard. Once you select a different value, the most recent selection is retained.
    • The first value in the drop-down list is used as the default if a default value is not set.
  4. Set the Scope. (See the following section.)

Set the scope

Scope sets the level your User Input Control component will control: Only this Klip, Only this Dashboard, or All Dashboards. (Only Klips that use variables are affected.)

Klip scope

A User Input Control component with Scope set to Klip will control the values displayed on Klips (using its variable) in the same multi-component Klip as the User Input Control component.

Dashboard scope

A User Input Control component with Scope set to Dashboard will control the values displayed on Klips (using its variable) on the same dashboard as the User Input Control component.

All Dashboards scope

A User Input Control component with Scope set to All Dashboards will control the values displayed on Klips (using its variable) on all dashboards.

Impact of changing the scope

If you change the scope of a variable from a smaller to a larger scope, that is,

  • From a Klip to a dashboard
  • From a Klip to all dashboards
  • From a dashboard to all dashboards

then , you must perform the following steps to reset the variable controls:

  1. Close the dashboard by hiding it from the active list. To do this, click the active dashboard's 3-dot menu and select Hide from list.
  2. Sign out of Klipfolio.
  3. Sign in to Klipfolio.
  4. Add the dashboard you closed in step 1 back to your active list. To do this, click Dashboards, locate the dashboard, and click the Open dashboard button.

Setting visibility

You have the option to set the Visibility of your User Input Control component in the Properties panel. This option enables you to hide your User Input Control on your dashboard and still change the settings for it in the Klip Editor.

The value of a variable is set by a (visible) User Input Control on the dashboard. You can choose from Show always or Hide always. If you choose the Hide always option when building your User Input Control, the value of the variable as set in the Klip Editor will not be shown on the dashboard because setting values for your variable in the Klip Editor only applies in the Klip Editor.

This feature also enables you to set User Input Controls to Hide when scope overridden. This means that if another User Input Control with a larger scope (Only this dashboard scope or All dashboards scope) and the same variable is causing Klips on that dashboard to react, the User Input Controls with the visibility setting will be hidden so Klips are only reacting to one control. This option is available when the Scope is set to Only this Klip.

Assigning values in a drop-down list: Example

The Values sub-component provides values, typically through a data source. The value selected from the drop-down list is the value that is assigned to the variable.

Select the Values sub-component of the User Input Control component from the Component Tree. Select the column of data (in the following example, A:A) you want to assign as your drop-down options.

Use the Filter action to set a condition that filters out the column header from the Values sub-component of the User Input Control component.

Select the Include "All" data option when you want the user to be able to view all selections. This is equivalent to adding an "all" value (the Label defaults to All and can be modified if needed). Note that this will include all data, regardless of applied filters. The video at the end of this article includes an example of selecting the Include "All" data option.

 

Watch this video for a demonstration of assigning values using a drop-down list (including filtering and grouping).

Learn more:

Updated
Have more questions? Submit a request