Control Section - Widget

In the Studio, the app builder has a list of controls. These controls are divided under various sections. The Studio has a Widget section in the list of controls. The widget section consists of all the widgets beings created in the account.

You can know more about creating widgets from here.

Widget - Properties

Info

  • Unique Name: The Unique Name is used to uniquely identify the widget in your App. Every widget that is created gets an auto-generated Unique Name on the basis of the Label name given to the widget.

  • Label: The text that is displayed helps the user to understand the type of control it represents.

  • Tooltip: The option to add tooltip text as a hint to the user. It is visible when you switch on the visibility toggle property.

  • Description: The option to provide a description that you can add for your control. It is visible when you switch on the visibility toggle property.

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

  • 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 fields 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 is not always critical.

  • Hidden: The hidden option helps to hide control from the user. This helps when you don’t want the user to view the control.

  • 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 are 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 control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.

Note: Hide on desktop, Hide on Mobile, Dynamic Height and Maintain space when hidden are
available in Basic Freeflow Editor Only.

Properties

Background -

  • Color: This property enables you to provide a theme/color to the widget.

  • Image: This property enables you to put an image to the whole widget screen/background. You can either upload or choose from the exiting images.

  • Image Fit: This property enables you to define the image fit for the widget. It can be either a cover or contained.

  • Opacity: This property enables you to provide opacity to the background.

Box Shadow: This allows you to add a shadow to the Container box. You can toggle to Enable or disable the box-shadow.

Border

The Border settings are used to set the borders to the widget container.

  • Border: This is the type of border as All borders, Top, right, bottom, and left borders.

  • Width: This is the border width in pixels or any other unit as per selection.

  • Style: This is the border style as solid, dashed, or dotted. You can also select None if you do not want to add the border.

  • Color: This is the color to be used for the borders.

  • Radius: This is the radius of the edges of the borders as can be seen in the illustration below.

Widget - Data Binding

The data bind options are the same as for any controls. The only differentiator is that the places to bind data are dependent on the number of input variables created for the respective widget.

You can know more about creating variables from here.
The variables created for the widgets are present under the data bind option. So, when a user binds some data, it is stored in that particular input variable present with the respective control in the widget.

Under the variable name we have list of methods to bind data.

  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 the data types required by the control which is using this particular variable in the widget*.*

  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.

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.