Skip to main content

How do I set up multiple variables with a single User Input Control?

Updated

It can be useful to set multiple variables based on the selection of a single User Input control. To do this, you need to build multiple User Input Control components, where the primary User Input Control is visible and the other User Input Controls are hidden. Settings are based on the values assigned to the variable associated with the visible one.

When setting multiple user input controls that are dependent on each other, it’s best practice to use a button component and set the values of the user input controls “on button press”.

This article assumes that you know how to create and work with variables. Learn more about variables here.

Note: This approach is not recommended for Klips or dashboards that have been shared by scheduled email. Scheduled email reports require that all variables on a dashboard, including those set by hidden UI Controls, be configured. Learn more here.

This article includes the following examples of how to use multiple variables:

Select one time period to set separate start and end dates

You can build a User Input control that sets start and end date variables based on a single time period selector to minimize future maintenance. If a new time period is added later, only the hidden start and end date User Input Controls need to be modified and any Klips that use the startDate and endDate variables will continue to work as is.

To do this, you will need to create three User Input Control components with a button component:

  • Time Period User Input Control
  • Start Date User Input Control
  • End Date User Input Control
  • A button component

To create your User Input Controls:

  1. From your dashboard, click + Add a Klip > Build a Custom Klip, or, from the Klips page, click Build a Custom Klip.
  2. Click and drag three User Input Control components into your Klip preview workspace.

For the Time Period User Input Control component:

  1. Click the User Input Control component in the component tree.
  2. In the Properties tab, set the following settings as shown and set the other settings as required.
    Use variable: timePeriod
    Set Value: On button press
    Visibility: Show always
  3. Set the Values and Labels formulas:
    Values: ARRAY( "thisWeek", "lastWeek", "-29", "-89" )
    Labels: ARRAY( "This Week", "Last Week", "Last 30 Days", "Last 90 Days" )

For the Start Date User Input Control component:

  1. Click the User Input Control component in the component tree.
  2. In the Properties tab, set the following settings as shown and set the other settings as required.
    Use variable: startDate
    Set Value: On button press
    Visibility: Hide always
  3. Set the Values formula:
    Values: SWITCH( $timePeriod, "thisWeek", DATE_STARTOF( TODAY(),week ),"lastWeek", DATE_STARTOF(TODAY(), week, -1 ),"_default_", DATE_ADD( TODAY(), day, $timePeriod))

For the End Date User Input Control component:

  1. Click the User Input Control component in the component tree.
  2. In the Properties tab, set the following settings as shown and set the other settings as required.
    Use variable: endDate
    Set Value: On button press
    Visibility: Hide always
  3. Set the Values formula:
    Values: SWITCH( $timePeriod, "thisWeek", TODAY(), "lastWeek", DATE_ENDOF( TODAY(), week, -1 ),"_default_", TODAY() )

Set multiple service IDs using a single selection

You can build a Klip that lets you set multiple IDs used by different services by selecting a single value from a User Input Control. For example, you can set a Google Analytics Profile ID and a Facebook Page ID by selecting a customer name.

To build a Klip that lets you set multiple service IDs using a customer name, you will need to create three User Input Control components with a button component:

  • Customer Name User Input Control
  • Google Analytics ID User Input Control
  • Facebook Page ID User Input Control
  • A button component

For this example, you will also need a customer mapping CSV file with 3 columns, containing customer name, Google Analytics Profile ID and Facebook Page ID, to be uploaded to Klipfolio as a data source.

To create your User Input Controls:

  1. From your dashboard, click + Add a Klip > Build a Custom Klip, or, from the Klips page, click Build a Custom Klip.
  2. Click and drag three User Input Control components into your Klip preview workspace.

For the Customer Name User Input Control component:

  1. Click the User Input Control component in the component tree.
  2. In the Properties tab, set the following settings as shown and set the other settings as required.
    Use variable: customerName
    Set Value: On button press
    Visibility: Show always
  3. Set the Values formula to point to the Customer Name column in the Customer Mapping data source and, if required, filter to exclude the header row.

For the Google Analytics ID User Input Control component:

  1. Click the User Input Control component in the component tree.
  2. In the Properties tab, set the following settings as shown and set the other settings as required.
    Use variable: galID
    Set Value: On button press
    Visibility: Hide always
  3. Set the Values and Labels formulas to select the Google Analytics Profile ID according to the customerName variable. The labels are not visible but are used here to filter based on the customerName variable.
    Values: B:B
    Labels: A:A, set Filter > Condition, where values match the customerName variable

For the Facebook Page ID User Input Control component:

  1. Click the User Input Control component in the component tree.
  2. In the Properties tab, set the following settings as shown and set the other settings as required.
    Use variable: FBpage
    Set Value: On button press
    Visibility: Hide always
  3. Set the Values and Labels formulas to select the Facebook Page according to the customerName variable. The labels are not visible but are used here to filter based on the customerName variable.
    Values: C:C
    Labels: A:A, set Filter > Condition, where values match the customerName variable

Using the variables in a dynamic data source

You can now use these variables in dynamic data sources.

  1. Create a dynamic Google Analytics data source using the gaID variable, for example,
    https://analyticsdata.googleapis.com/v1beta/{props.ga4PropertyId}:runReport
  2. Create a dynamic Facebook data source using the FBpage variable, for example,
    https://graph.facebook.com/v2.10/{props.FBpage}/insights/page_fans_by_like_source/day?date_present=last_90_days

Related articles