Skip to main content

Using smart inputs in Views

Feedback request

We're collecting feedback about your use of smart inputs in Studio Views. We'd love to hear where you're currently using smart inputs and if there are Studio features you'd like them to be enabled on. To send us your feedback, use the following form:

Smart Inputs - Feedback Form

Smart inputs allow you to create custom interactions and expressions directly in text fields in Studio’s visual editors. When typing in supported text fields, smart inputs give you autocomplete suggestions from existing queries in your package. You can then click on the suggestion or use the arrow keys and hit Enter to add it to your expression.

For example, a smart input is used in the tab name to display the current date:

An animated image showing the use of smart inputs in a button component.

This is configured using the following smart input:

${new Date().toDateString()}

For a video overview of smart inputs in Views:

 

Studio text fields that support smart inputs

You can use smart inputs in the following Studio text fields and components:

  • Button label

  • Button variant

  • Color mapping for components

  • Filter dropdown label

  • Input box label

  • Input dropdown label

  • Tab container

  • Tab name

  • View name

Writing expressions using smart inputs

When you write an expression, you’ll receive an output shown below the smart input field. Depending on the value, that output can be a number, string, or boolean. Since smart inputs are currently only available for text (string) input fields, the output will automatically be converted into a string.

With smart inputs, selected suggestions are automatically enclosed with the required ${} syntax. For example, the following button title is a combination of free text and a view variable:

Result: ${view_variable}
An animated image showing the use of smart inputs in a button component.

For custom JS expressions that don't appear in the suggestions, you need to enclose your expression with the ${} syntax manually. Once the syntax is typed, the input field resembles an inline code editor. This is where you’ll write your expression.

Expressions can be created using a combination of:

  • Queries, such as:

    • Variables (View or Knowledge Model Variables).

    • Translation keys.

  • Operators and booleans that are used to set up a specific calculation.

  • Functions that the smart input can take to return a certain output.

Example expressions

Smart Inputs can operate on various properties and functions, including the following example expressions:

Basic example expressions

Description

Expression

Output

Variable combined with free text

Result: ${view_variable}

Result: Value

Combining variable with javascript expression

${view_variable + 'Free Text'}

Value Free Text

Display output based on a current value of a boolean variable value boolean condition.

${boolean_variable?"Output true":"Output false"}

Output true / Output false

Checking if a variable is empty and show placeholder text

${!string_variable ? "Placeholder Text" : string_variable}

Output true / Output false

Checking if a value is greater than a threshold variable

${temparatur_variable > 30 ? "Hot" : "Cool"}

"Hot" (if temperature greater than 30)

Joining multiple variables into one string

${first_name + " " + last_name}

"John Doe"

Date example expressions

Description

Expression

Output

Get the current date and time as a full string

${new Date().toString()}

“ Thu Mar 13 2025 13:31:42 GMT+0100 (Central European Standard Time) ”

Get only the date without time

${new Date().toDateString()}

“Tue Mar 13 2025”

Format a date to MM/DD/YY, HH:MM AM/PM

${formatDate(new Date())}

“3/13/25, 12:35 PM”

Get only the year

${new Date().getFullYear()}

“2025”

Get only the month (zero-based, so add +1 if needed)

${new Date().getMonth() +1}

“3” (for March)

Get only the day of the month

${new Date().getDate()}

“13” (if March 13)

Get the day of the week (0 = Sunday, 6 = Saturday)

${new Date().getDay()}

"4" (for Thursday)

Get the current timestamp on page load (milliseconds since 1970)

${new Date().getTime()}

“1741869560110”

Format date to ISO 8601 format

${new Date().toISOString()}

“2025-03-13T12:40:58.834Z”

Get the current time (HH:MM:SS)

${new Date().toLocaleTimeString()}

“13:42:27”

Get the current date in a specific format (%Y-%m-%d)

${formatDate(new Date(),"%Y-%m-%d")}

“2025-03-13”

Number example expressions

Description

Express

Output

Formats the number 1000 to have 13 digits and adds a percentage sign

${formatNumber(1000, '13', '%')}

1000000000 %

Multiplies the number by 100 and adds a % sign

${formatNumber(0.75, '0.0%')}

75%