Widgets Overview
Widgets Overview
Embedded Files
Widgets
Widgets
Widgets are built-in controls to be placed on a Page in a Dragonce App. There are 3 types of widgets offered, Layout, Input and Display. Users can put widgets of their choice on to the pages they create, in order to customize the pages in a way that best interacts with end users.
How to Use
How to Use
The widgets panel is on the left hand side of the Page Builder. You can click the arrow on the top right corner to enlarge or smallen the panel.
To add any widget onto the page, drag and drop its icon to the blank design area.
Configuration Shortcuts
Configuration Shortcuts
Relocate
Relocate
To quickly relocate the widget, mouse over the top left corner of the widget.
The cross arrow will transform into your mouse pointer and appear on the screen.
Click and drag the widget to your desired location.
Resize
Resize
To quickly resize the widget, mouse over the right bottom corner of the widget.
Click on the triangle and drag to resize the widget.
Quick Setting panel
Quick Setting panel
To open the quick control panel, click on a widget in the design area.
Here are some descriptions of the quick setting panel controls:
Settings and Permission buttons
Settings and Permission buttons
Widget Property Settings can be opened by this button or by double clicking a widget. Permission refers to workflow stakeholders permission and user role permission.
These 2 buttons are available for all widgets. For particular widgets, they have more buttons on this row for configurations, such as Data Source, Form Validation etc.
Delete Widget buttons
Delete Widget buttons
The Delete button removes the widget.
Name of Widget
Name of Widget
Be aware that widget name and value are different. Name helps distinguish different widgets being referred to. Value (Configured in widget settings) is the display value in the input field of the widget.
You cannot use these keyboard symbols ~ ! @ # $ ^ & * in the widget name.
Sizing Mode
Sizing Mode
You can decide whether the size of the widget is fixed (Absolute Size) or automatically adjusted based on the window size (Relative Size).
Coordination, Width and Height of Widget
Coordination, Width and Height of Widget
This states the coordination, width and height of the widget on the form.
Description of Widget
Description of Widget
This information is for internal purposes. It is never shown to end users.
Widgets - Layout
Widgets - Layout
‘Layout’ type widgets help arrange widgets in proper order and group them up clearly.
Container
Container
Container allows users to group widgets together clearly.
Formatted Container
Formatted Container
Formatted Container allows users to group widgets together clearly. Its difference with containers is that widgets being put in a formatted container will be arranged one after another without free relocation. Users can reorder the elements by dragging and dropping the body of the widget.
Form
Form
Form allows users to input, edit value and perform action to individual form records. It is the only widget that can connect to a workflow.
Combined Use with Other Widgets
Combined Use with Other Widgets
Container
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Formatted Container
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Form
Inside Form
Inside Form
No
Outside Form
Outside Form
Yes
Sub Form
Inside Form
Inside Form
Yes
Outside Form
Outside Form
No
Tabs
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Input Box
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Auto Complete
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Selection Box
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Dropdown Menu
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Date & Time
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
User & Group
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
File Uploader
Inside Form
Inside Form
Yes
Outside Form
Outside Form
No
Image Uploader
Inside Form
Inside Form
Yes
Outside Form
Outside Form
No
Label
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Chart
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Calendar
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Table (Sub Form)
Inside Form
Inside Form
No
Outside Form
Outside Form
Yes
Reference Table
Inside Form
Inside Form
Yes
Outside Form
Outside Form
No
Table
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Batch Action
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Report Viewer
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Attachment
Inside Form
Inside Form
Yes
Outside Form
Outside Form
Yes
Sub Form
Sub Form
Sub Form is a widget within a form that allows users to create and edit sub-entry for individual form records. Different from a form, it looks like a table during Run Time.
Combined Use with Other Widgets
Combined Use with Other Widgets
Container
Container
Inside Sub Form
Inside Sub Form
Yes
Formatted Container
Formatted Container
Inside Sub Form
Inside Sub Form
Yes
Form
Form
Inside Sub Form
Inside Sub Form
No
Sub Form
Sub Form
Inside Sub Form
Inside Sub Form
No
Tabs
Tabs
Inside Sub Form
Inside Sub Form
Yes
Input Box
Input Box
Inside Sub Form
Inside Sub Form
Yes
Auto Complete
Auto Complete
Inside Sub Form
Inside Sub Form
Yes
Selection Box
Selection Box
Inside Sub Form
Inside Sub Form
Yes
Dropdown Menu
Dropdown Menu
Inside Sub Form
Inside Sub Form
Yes
Date & Time
Date & Time
Inside Sub Form
Inside Sub Form
Yes
User & Group
User & Group
Inside Sub Form
Inside Sub Form
Yes
File Uploader
File Uploader
Inside Sub Form
Inside Sub Form
No
Image Uploader
Image Uploader
Inside Sub Form
Inside Sub Form
No
Label
Label
Inside Sub Form
Inside Sub Form
Yes
Chart
Chart
Inside Sub Form
Inside Sub Form
No
Calendar
Calendar
Inside Sub Form
Inside Sub Form
No
Table (Sub Form)
Table (Sub Form)
Inside Sub Form
Inside Sub Form
No
Reference Table
Reference Table
Inside Sub Form
Inside Sub Form
No
Table
Table
Inside Sub Form
Inside Sub Form
No
Batch Action
Batch Action
Inside Sub Form
Inside Sub Form
No
Report Viewer
Report Viewer
Inside Sub Form
Inside Sub Form
Yes
Attachment
Attachment
Inside Sub Form
Inside Sub Form
No
Tab Container
Tab Container
Tab container is formed by dragging container(s)/formatted container(s) into it which allows end users to switch between them easily. They are used to categorize widgets, inputs and information clearly.
Tabs can be renamed by pressing "Tab Container
" on the quick settings menu.
Combined Use with Other Widgets
Combined Use with Other Widgets
Container
Container
Inside Tab Container
Inside Tab Container
Yes
Formatted Container
Formatted Container
Inside Tab Container
Inside Tab Container
Yes
Form
Form
Inside Tab Container
Inside Tab Container
No
Sub Form
Sub Form
Inside Tab Container
Inside Tab Container
No
Tabs
Tabs
Inside Tab Container
Inside Tab Container
No
Widgets - Input
Widgets - Input
‘Input’-type widgets provide fields for end users to input values or upload files, which can be stored in the system.
Input Box
Input Box
A field for inputting values in Run Time, supporting String, Integer, Decimal, and Percent types.
Auto Complete
Auto Complete
A field that provides recommended values based on previous inputs.
Selection Box
Selection Box
A field for selecting options in Run Time, available as Radio Box or Check Box.
Dropdown Menu
Dropdown Menu
A field that allows the end user to select a value from a list of options in Run Time.
Date & Time
Date & Time
A field for choosing date and/or time in Run Time, with Date Picker, Time Picker, or Datetime Picker.
User & Group
User & Group
A field that allows the end user to select user(s) and/or group(s) in Run Time.
File Uploader
File Uploader
A field that allows end users to upload files in Run Time.
Image Uploader
Image Uploader
A field that allows the end user to upload an image file in Run Time.
Widgets - Display
Widgets - Display
‘Display’-type widgets serve to display information, data or files.
Label
Label
Label is used to display text and cannot be edited by the end user.
Chart
Chart
Chart is used to generate a graph that shows data obtained from a form.
Calendar
Calendar
Calendar is used to display data from a form in an event calendar view.
PDF Report
PDF Report
PDF Report is a connector to a designed dynamic PDF report. End users can download the required report by entering the criteria on the page and then click on the Report Viewer to download it.
Attachment
Attachment
Attachment is file(s) uploaded to the system available for end users to download.
Widgets - Display
Widgets - Display
‘Table’-type widgets are used to display data in a tabular format, allowing for various interactions and displays of form data.
Table (Sub Form)
Table (Sub Form)
Displays data from a sub form in rows and columns.
Reference Table
Reference Table
Displays data from a child form connected by a unique key to the parent form.
Form Table
Form Table
Displays data from a form in rows and columns.
Batch Table
Batch Table
Allows performing actions on a batch of form records of a specific workflow state.
Page updated
Report abuse