Button

What is it?

With the Button widget, end users can easily trigger a table behaviour or open up a new item. It even allows you to pass values from Current Page Widgets (like the unique Form ID) to Destination Widgets on a one-to-one basis.

How and When to use it? 

To add a new Button to your page, simply drag and drop the “Button” widget from the left side of the page screen to the design area of your page.

To change the name of the button, tap on the placed button widget to reveal the blue Quick Settings panel. By default, the name is displayed on the widget’s left side.

How to configure it?

1. Drag a Button into the Form

2. Click the Button and then click the setting button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains two tabs, General and Visibility. We will demonstrate how each tab and property is used. 

Introduction of General Tab Properties

Basic

The fields in “Basic” are Name, Display Name, and Description. If you leave the display name field blank when setting up your widget, the name field will automatically become the Display Name. If you fill in both fields, the system will use the Name field as an internal reference (like in page builder), while showing the display name to your users in Production. 

Position, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

Introduction of Button Configurations

1. Drag a Button into the Form

2. Click the Button and then click the button configurations button to open the Button Configurations. 

3. The Button Configuration is shown. We will demonstrate how each tab and property is used. 

Action Type

The first field you'll see in this configuration is called 'Action Type’. You will find six different types of Action to choose from, each with its own unique purpose. You can have more than one action per button. Just remember that all of the actions you choose must be of the same type.

Click “+ New Action” to add a new action as there is none by default.

You will notice that all of the action types share a common field called 'Open In’. You can choose the action to open in Popup Window, New Tab or Current Window.

Open Link

In Open Link, clicking the button can open a link such as a web address. You can type the address in the current widget when choosing a customized link. 

Open the dropdown next to Link to select the kind of Link you want to use.

Alternatively, one can make the widget open the address which is stored in the widget value of another widget on the same page. 

Open Form

You can also make the button to open a Form by choosing Open Form. The Form can be any Form from any app the user can access on Dragonce, and it doesn't have to be from the current app. You can even set one-to-one rules for mapping current page widget values onto destination widgets.

Open Page

In Open Page, you can make the button to open a Page. The Page can be any Page from any app the user can access on Dragonce, and it doesn’t have to be from the current app. You can also set one-to-one rules for mapping current page widget values onto destination widgets.

If you select Popup Window or Current Window in the field “Open In”, you can change the Width and Height of the Window.

Open Record

Open Record only works when you select a Dropdown Widget with “Use Widget Values From Other Form” as the Options Source Type on the same page. The button will open the Form Record which includes the value selected in the Dropdown Widget.

When a button is set to Open Record, it will open the Form Record that is the source of the value selected in the Dropdown Widget.

Trigger Table Refresh

Trigger Table Refresh refreshes a Normal or Joint Table on the same page. 

Trigger Table Record Generator

Trigger Table Record Generator triggers Record Generation for a table on the same page if you have enabled the Record Generation Settings.

Same Page Validation for Empty Widgets

You can require your users to fill in any number of same-page widgets before they can click the button.

If the user clicks the button without meeting these requirements, they will receive an error message from the system, and no actions will be taken.

Message

You can customize the message that appears when the user clicks the button without filling in all of the required widgets. For example, if the user clicks the button without entering anything in Widget 1 and Widget 2, the error message will be "1 Widget 1, Widget 2 2". If the user fills in the widget, the widget's name will not be shown in the error message.

You can select the desired punctuation mark or symbol to be used as a separator between the two widgets in the message. 

You can decide whether the name of the widget should be displayed along with the message. 

Introduction of Button Layout Configurations

1. Drag a Button into the Form

2. Click the Button and then click the button layout button to open the Button Layout. 

3. The Button Layout Configurations is shown. We will demonstrate how each tab and property is used. 

General

Dimension

You can edit the numerical value of the Button’s width and height in units of pixels in the Dimension field.

Display Text

You can change the name of the button in the Display Text. 

Mode

You can choose the kind of Button appearance in the Mode field. 

Icon

If you choose Icon Only / Icon & Text in mode, you can upload the icon to be displayed in the Button in the icon field. 

Button Style

You can choose the border colour and fill colour of the button in the Button Style field.

Content Size

You can choose the size of the content opened by the button in the Content Size field. 

Advanced Mode

To enable the options in advanced mode, you must check the checkbox next to Enable. The options in Advanced Mode will change depending on the option selected in Mode. 

Icon Size and Font Size

The fields Icon Size and Font Size are numerical values in units of pixels. There is a set of buttons for selecting button alignment next to them. 

Line Height

Line Height is a percentage that defines the distance between each line of text relative to the default spacing, out of 100%. The text in the button, which always goes left to right and gains lines downwards, will go to the next line whenever there is a space and there is no more space on the right. A Line Height of 0% means that all lines of the button text will completely overlap.

Layout and Ratio

With the Layout field, you can easily choose how you want your button text and icon to be positioned relative to each other. With the Ratio field, you can adjust the percentage of button area that is assigned to either button or text.

Padding

With the 'Padding' feature, you can easily adjust the position of your button icon or the starting point of your text in units of pixels.