Typeahead control

The Studio supports an interesting control similar to text input, called Typeahead. It is an input control that provides aid to the end user while typing something. The control provides word suggestions based on a few typed letters.
This enables users to work faster and to recall words based on a few alphabets of the word. This control requires binding of data, to get the words suggestions from.

Properties

Info

  • Type : The Type field is automatically generated depending upon the type of control used. In this case, it is a “dhq_text_suggestion” type.

  • Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

  • Label : The label is the text that is displayed above the control and helps the user to understand the purpose of the Typeahead Control.

  • Hide Label : This option hides the label of the control from the view.

  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

  • Generic :

    • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the state that the LOOKUP returns will be cached and the user will be able to see this state of the field even when user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.

    • Hidden : The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

    • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here ..By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

  • Grid Configuration :

    • Hide on desktop: This option hides the selected control in the desktop view.

    • Hide on Mobile : This option hides the selected control in the mobile view.

    • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.

    • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the proceeding control depending on the space the previous control has occupied.

Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.

Properties

  • Theme : The theme option lets you choose the color of the text box. You can either enter a custom hex code value or use one from the available themes in the builder.

  • Placeholder : It is a prompt to give a hint to the user as to what has to be done. It is present in the text field and is overridden when the user inputs something into it.

  • Debounce Time (In ms): This is the delay in milliseconds between events. You can add the debounce time to control the frequency when the action triggers on change in value.

  • Suggest After(Characters): You can set the number of characters after which you want suggestions to come into view.

  • Suggestion Limit: You can set the number of suggestions you want to be displayed at a time.

  • Suggestion Tray Max Height: This decides each menu/suggestion’s height.

  • Highlight Color: This property will showcase the color of the typed text in the given suggestion.

  • Hover Color: This property enables you to provide color highlight on hover above the suggestions.

    image

    image

How to use Typeahead control

Select Typeahead under Custom section from Controls.

Bind data to Typeahead control

There are different ways in which you can bind data to the Typeahead control.

  1. Data: This is the data that does not change over a period of time. Such data is used to assign default values in fields in your application. The static data should be based on JSON data type of array of values consisting of data.

  2. Controls: This allows you to get data from one of the App controls.

  3. Variables & Keywords: This assigns the value of the variables and keywords defined or available in the app.

  4. Query String: You can also select from the available query string to bind data to the control.

  5. LoggedIn User: You can display the properties related to the LoggedIn User like username, usermail, Admin, status, and so on. You can select a single property only. Select column and click Save .

  6. Connectors: This allows you to select a configured connector and call its API to fetch values and bind the values returned by the respective API. You can select multiple keys to display values.

  7. Custom Formula: This can be used to apply formulas and store the output of those formulas. You can learn more about formulas here.

  8. Custom JavaScript: You can also add a Custom JavaScript to fetch data and use it for your app operations.

Typeahead control property

For the Typeahead control, the studio provides you with a dedicated property that you can use for the purpose of data-binding.
The typeahead.PROPERTIES.TYPEDTEXT property enables you to fetch the typed/available text in the typeahead control. This helps to provide real-time data to the dynamic variables used in the queries. If you use typeahead keyword only, you will get delayed responses after debouncing time interval whereas, with TYPEDTEXT keyword, this will get you the real-time response

NOTE: This is a very useful property when bound with queries; since it will call the query each time, with every single text being typed in the typeahead control.

DronaHQ Docs have found a new place!

We have updated and moved our documentation to docs.dronahq.com.
You can continue to ask questions in the community here.