Split Button control

The studio has excellent control of Spilt Button which is a combination of dropdown control and button control. The Split Button is a composite control that has the dual functionality of a primary button with a default on-click action trigger along with secondary dropdown menu with a list of mutually exclusive values.

The split button control consists of an arrow and a label; A default action is chosen by clicking on the label, and a list of other possible actions is displayed by clicking on the arrow. Users can pass different values and attributes in the control data and set them as various properties for the control.

UI Property

Info

  • Unique Name: A Unique Name is u* sed 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 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.

Property

image

  1. Title Column: This property decides the title of every option to be shown in the dropdown menu on click of the arrow button, from bounded data columns.

  2. Description Column: This property is helpful when you want to show data of a column from an array of object data as a description right under the title.

  3. Value Column: This property is helpful when you want to return the value of a specific column from an array of object data, from the selected dropdown options.

    In the above image, we have found the data of text control with the value returning from a split button control.

  4. Image Column: This property helps you to select a column with image details or you can say that it helps to choose the image key from an array of objects to show the images with respect to each option present in the dropdown menu.

  5. Border Radius(Image): As the property name suggests, it helps to provide a border radius to images selected in the options.

Button properties

image

This property section enables you to apply different styling properties to the button function of the control. You can choose from the text property to the background property of the display button, including color, size weight, and more.

Dropdown properties

This property section of the control enables you to apply the property to the dropdown menu functionality of the split button control. You can choose from the title and description property to the background property of the dropdown menu list, including color, size weight, and more.

How to use Split button control?

Start with selecting the Split Button Control from the Custom section of the Controls Menu.

Bind data in Split button 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 objects consisting of label, value, image and more.

  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.

App preview