View on GitHub

Wizard and Experts

On this page

Database UI Wizard

This is the most important wizard across all elements listed in the left-menu on the interface. It allows you to create simple Forms, complex Grids, beautiful Dashboards, dynamic Carousels and a Marquee display.

NOTE: You should import your required tables from the Import Tables menu to proceed creating elements under the Database UI

Element: Form

Select your required table to design a form. If you select multiple tables, a Grid is selected by default (currently supported settings for multiple table views)

Actions Required

  • Create Records:
    • Default - records submitted through the form will be inserted in the DB only if there is a unique primary key
    • Insert ignore - records submitted through the form will be inserted in the DB, irrespective of a unique primary key being present or not
    • Replace - records submitted through the form will be inserted in the DB, and will replace an existing record with the same primary key, if found
    • INSERT.. ON DUPLICATE KEY UPDATE - records inserted through the form will be inserted in the DB if there is a unique primary key OR will update the existing record (with the same primary key) with the fields present in the new record
  • Other actions are selected by default and you can not exclude them from your form. You can enable/disable sorting of records by checking/unchecking the action - Sorting Records
  • First Action - create records as the first action

Create

  • Master Table - Your selected table name
  • Buttons - position of buttons for Add, Edit, Delete and Pagination controls
  • Top/Bottom

Elements of the Page

Click on the Next button to edit the configurations for the different components of the form.

Click on the button to preview your form at any time.

Find

Settings for finding certain records in the form. To edit this component, double-click the Find item in the list. The Find Wizard opens up.

Search Type:

  • Static - all selected field(s) will appear on the form with a box to take the user’s input and search the required record(s)
  • Dynamic - you can select the required fields during run-time (by clicking on a button named as Add More & remove fields using Remove button), the run-time being, when you have exported the project and are running it in a live environment.
  • Common - a combination of the Static and Dynamic Find types. During run-time, you have a drop-down in the search bar, where you can select one or more fields of the chosen table as well as choose the kind of operator you want to use with them

Operator

It is set True (checked box) by default for Dynamic and Common Find types. You have the option to choose it for the Static Find type.

Setting the Operator check to True allows you to choose from a list of comparison operators during run-time, with the field names on the left and the search value on the right.

Setting the Operator check to False gets you the “like” operator by default and the operator can’t be changed.

Container

Choose the container in which you wish to place your Find component for the form.

You can choose one from: Details, Accordion, Fieldset, DIV and Card. DIV is set by default.

Placement

Choose the placement of your Find component from:

  • Page - places the component in the main page as the form
  • Modal - places the component in a modal which can be opened by clicking on the small search (lens) icon in the main page
  • Offcanvas - choose one of the positions to open the offcanvas from, as Left, Right, Top or Bottom

Click Next to go to the next screen where you choose the fields you wish to use for the Find functionality. These fields will appear as Static, Dynamic or Common find types during run-time. Click on Next to proceed.

In the Next screen, you can reorder the list of fields you chose in the previous step. Click on Submit to finish the setting-up of the Find functionality.

Sorting

Settings for sorting the required fields in a particular order. To edit this component, double-click the Sorting item in the list. The Sort Record Wizard opens up.

Select Fields

Select the required fields from the chosen table against which you wish to apply sorting

Sorting Type

  • Static - When you click on Next on the current screen, the selected fields from the above option are set to be sorted in a particular order during design. You can choose one from Ascending or Descending from the Order column
  • Dynamic - In the Next screen, you do not have to set the sorting order for the selected fields during design. The selected fields from the Select Fields option can be sorted in Ascending or Descending order during run-time

Click on Submit to finish the setting-up of the Sorting functionality.

Form

Settings for the actual design of the form itself. To edit this component, double-click the Form (Table: XXXXX) item in the list. The Form Wizard opens up.

Select Fields

Select the required fields from the chosen table that you wish to display in your form. To select All fields at once, click the check-box on the right side of this option.

Label for Controls

Select the placement of the labels for the controls of each selected field of the form.

Choose one of: Align Left, Align Right, Align Top, Align Bottom, Floating Label or No Label

Layout Method

Select the Layout for the individual fields of the form

  • Rows & Columns - all the fields of the form are divided into a matrix of Rows and Columns where you can choose the number of Columns you want to display your form fields.
  • Flex - all the fields of the form are listed in one single column, each field covering the full width of the container they are created in.

Columns

Select the number of columns as per which you want to display your form fields.

Click on Next to go to the next screen, where you can modify the properties of the chosen fields for the form. These edits can essentially change the properties set by/through the database.

You can edit the Required property for these fields, as well as the Data Type and any Validation(s) that you may wish against these form fields.

Grid

Select the required number of tables and establish the relationship(s) between them if you have selected multiple tables.

  • The tables listed in the drop-down are named in order as Table1, Table2 and so on.
  • Flex - all the fields of the form are listed in one single column, each field covering the full width of the container they are created in.
  • Select the relevant fields to establish the relationship between the selected tables.
  • Click on the Add Link button to add the selected table relationships.
  • A link gets added to the box below, with multiple such links highlighted in orange if selected.
  • Click on the Remove Link button to remove the select link.