Image Choice Control

The Image Choice control is a Selection control that provides a visual presentation of the selection list and fetches the respective text to store in the bound column.

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_image_radio_btn” 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: 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 .
    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.

Properties

  • Selected Border Color: Is the border color of the Image selected from the list.

  • Background color: Is the background color of all images in the Image choice control.

  • Image Background color: Is the background color for the images.

  • Image Fit: This specifies how the image fits into the image container provided for the list item. It can be Fill, Cover, Contain, None.

    1. None: With None the image is not resized to fit the container.

    2. Contain: The image is scaled while maintaining the aspect ratio while filling the container box.

    3. Cover: The image is clipped to fit the container box while filling the container box.

    4. Fill: The image fits completely in the container box. It is stretched to fit if its aspect ratio does not match the container’s aspect ratio.

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

  • Image Height: This specifies the height of the image in pixels

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

  • Magnify: This is the toggle to switch on or off the feature to magnify the image when you run the form. This enables you to zoom out or zoom in to preview the image.

Layout on Device

With Layout on Device you would specify the number of columns on the different devices.

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 stored in the Sheet.

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

  • Selected: This specifies whether the image would be shown as selected by default when running the form.

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

How to use Image Choice Control

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

Let us take an example here to select the apparel from the list and the delivery address. Add the Image Choice Control for the apparels list, and set the properties seen above. Add a text area control for the delivery address.

Set the appropriate Text for the different apparels that you want to submit to your sheet. Set whether selection would be multi-select.

Now add an Update Sheet workflow to your form and link it to the Submit button. Select the respective sheet and select the action “What to do” as Insert Record. Now to insert data to the respective columns in your sheet, link the control. In this example, the Productname column would is linked to the ChooseApparels (which is the Image Choice Control). So depending upon the selection the text of the selected columns would be stored in the column.

Once the control is linked to the column sheet, click Done. Make sure the workflow is linked to the Submit button and you are done. When you run the form and select the images from the given list of choices, the text of the selected images is stored in the sheet and not the image. It is only the graphical representation of the choices available.

Preview