Image Select Bar Control

The Image Select Bar Control is a Selection control that provides a visual presentation of the selection list and fetches the respective text for further action.

It is useful when you want to simplify the user interface for item selection by providing a visual presentation of items typically on an e-commerce website.

Properties

UI properties

  • Label: Label is the text that is displayed above the container box and helps the user to understand what the control represents in the micro-app.

  • Properties: These properties help you customize the Label by changing the text size, weight( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.

  • Type: The Type field is automatically generated depending upon the type of control used. In this case, it is a “ dhq_img_select_bar” 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 based on the Label name given to the control.

  • 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: This 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.

  • Submit Data: This is used to specify when the data from the form can be submitted. You can select it as Always, Never, or Not when hidden.

    1. Always: When this condition is selected, the data in the field will be submitted irrespective of the state of the field.
    2. Never: When this condition is selected, the data in the field will never be submitted irrespective of the state of the field.
    3. No When Hidden: When this condition is selected, the data in the field will be submitted if the field is visible and not submitted when the field is hidden.
  • Required: This option lets you set the field as a mandatory entry field.

  • Read-only: This option allows you to prevent data entry by making it Read-only.

  • Show Tooltip Icon: This allows you to toggle switch ON or OFF to show or hide the tooltip icon where the tooltip text would appear.

  • Show Description: This allows you to toggle switch ON or OFF to show or hide the Description text.

  • Hidden: The hidden option helps you to hide the control 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.

  • Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the field even when the 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 when getting the latest data from the sheets is not critical.

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

  • 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.

Properties

  • Selection Type: This specifies if multiple images can be selected. Options are to multi select or single select.

  • Text Style: This specifies the style of the text for each image. You can set the text size, weight( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.

  • Flex Control: This toggle is used to enable or disable control as flex control.

Selected

With these properties you would be able to set the Text Style, Background color and Border color of the Selected option.

Image Data

These properties would be set separately for each image option for the control. All of these properties are set individually but are the same for each.

  • Text: Is the text that appears below the image in the container. This is the text that would be returned by the control on selecting the options from the given choices and which can then be stored in the Sheet.

  • Select Image: This allows you to select the image from a source location.

  • Icon: This allows you to select the icon to represent the option.

  • Selected: This allows you to toggle switch ON or OFF to specify whether the image would be shown as selected by default when running the form.

  • Show image: This is the toggle to switch ON or OFF to specify whether to show the image.

  • Show icon: This is the toggle to switch ON or OFF to specify whether to show the icon.

At the bottom, you can see an Add Option button to add a new option to the list.

How to use Image Select Bar Control

The Image Select Bar control is an input control available under the Selection section under Controls Menu.

The Image Select Bar control gets added to the Screen. You can set the above properties, specify the option, add images or icons to create the list.

Let us take an example here to select the social media links to further provide input accordingly.

Set the appropriate Text for the different options that you want to submit. You can also set the Multi-select property ON if you want to provide multiple inputs.

For the sake of this example let us add a text control that fetches the text for the selected option.

controlsz

Preview

image select bar