The Image control is used to display images in a microapp. It is a Media control and is used only to display or view and is not related to any submission activities.
Properties
UI Properties
-
Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the Image Control.
-
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 an “Image_Box” 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.
-
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.
-
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 he 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.
-
Hide Label : This option hides the label of the control 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.
-
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 preceeding 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
-
Select Image: This allows you to select an image from the Gallery or import and then upload it from a source location.
-
Image caching: By enabling image caching you ensure that the image gets cached.
-
Magnify: This is a toggle to add the magnify feature to your image control. When switched on, you will be able to see an eye icon over the image. If you click on it an overlay will open where you can zoom in and zoom out the image. So it is basically a preview of the image that can be viewed with this property.
-
Image URL: This specifies the URL of the image being displayed.
Border
-
Padding: This specifies the space between the image and the border as a number of pixels to the top, bottom, left, and right.
-
Margin: This specifies the margin for the image. It is the space outside the Padding specified earlier. It is specified as a number of pixels to the top, bottom, left, and right.
-
Width: This is the width of the Margin.
-
Style: This is the Style of the Margin as none, solid, dashed, or dotted.
-
Color: This is the color of the Margins.
-
Radius: This is the radius to provide a rounded corner to the image. You can specify each value for top-left, top-right, bottom-left, and bottom-right corners accordingly.
Style
-
Image width : This is used to set the width of the image in the container in pixels or as a percentage.
-
Image max width: This is used to set the max widht of the image in pixels or as a percentage.
-
Max Height (in px): This is the maximum height of the image specified in pixels.
-
Alignment : This allows you to choose the alignment of the Image as left, right, or center alignment.
-
Fill Type : This is used to define how the image occurs on the screen as Cover or Contain. Cover gives a scaled up image while contain gives a scaled down image.
-
Container Height : This allows you to set the Image container height . When you do not enter any value the height will be automatically set according to the image.
-
Container width : This option lets you set the width of Image container .
How to Use Image Control?
Start with selecting the Image Control from the Media section of the Controls Menu.
The Image Control will then appear on the screen in the builder, you can then set all the above properties as per your requirements.
You can use the following Data options to bind data to the image control. Following are the different ways to bind data.
-
Static Data: This is used to directly type in the value that you want to set.
-
Sheet: This allows you to get value from a sheet and display it in the control.
-
Controls: This allows you to bind data to the control by using another control’s value present in the microapp.
-
Variables: This allows you to bind a variable.
-
Loggedin User: This allows you to assign the value of a property of the Loggedin User like the username, user email and so on.
-
API: This allows you to bind it a key of the selected API.
-
Custom Formula: This can be used to apply formulas and use the output of those formulas to set the control. You can learn more about formulas here.
Using a URL
You can provide a URL that can be from a sheet or a connector row or simply provide it as a Static URL. Let us see an example here to provide the URL as Static Data.
Using Base64
You have seen how an image can be added using a URL from any of the sources. You can instead add a Base64 string to add an image. Image control supports Base64. You can provide the specific string to the Custom Formula in the syntax data:image/<type>;base64, . Make sure that data:image/<type>;base64, is appended before the string.
Here is a sample base64 string which can be used in Custom Formula for a ‘gif’ type of file:
data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7
Preview
Magnify image
