1. Help Center
  2. App Creation
  3. Form Elements (Reference)

FORM ELEMENTS (REFERENCE)

Features and properties of Form Elements (Reference)

Reference Form Elements are mainly used to fetch/refer the data into an application from our Quixy internal data base or any external 3rd party database. Additionally, can also fetch a user's data as well.  

There are four types of reference form elements:

  1. Reference
  2. External Reference
  3. User Detail
  4. User Reference

In this article, you will know about Reference:

Reference Form Element

The reference form element field fetches the data from selected Data tables or Data sources into the current application.

Usage of the Reference Element Field is mainly dependent on Data Tables and Data Tables Functions. So, create a Data Table and Data Table Function (GET) first.

To fetch data from a data table into the application using reference form element, first, drag-and-drop the reference form element on the form.

You may now specify which data table you want to fetch data from and what data you want to fetch in the properties of the reference form element.

Reference Form Element - Properties

The reference element has two sub-categories.

1. Data Table Reference

Use this category if you wish refers to the Data Table element fields to fetch the data from the data table onto the current App.

2. Data Source Reference

Use this category refers to the element fields from a data source to fetch the data from a data source onto the current App.

Data Table Reference

Follow the points as given below to add data table reference properties.

  • Click on the Select Data Table drop-down, and select the Data Table that you created.

  • Click on the Select Data Table Function drop-down, and select the Data Table Function that you created.

  • The Function Type will populate as you defined in the Output type while creating the Data Functions, whether it be List or Grid.

  • Click on Select Reference Elements drop-down, and it shows the list of Elements fields that you defined in Output Elements while creating the Data Table Functions.
  • Select the elements from the drop-down of which you want to retrieve the data in your application.

  • Click on the Save button.

  • The Reference Element Field properties get to save. The element field, set as an Input function while creating the Data table function, becomes your primary Input Element field.
  • The application will show data in all the Element fields selected while defining the Reference Element Field properties and the Input Element that you defined while Creating the Data Table Functions.

  • You can see the additional Data table Reference Element in the application.

  • You can click on the Preview button to see how data table reference works.

  • Preview app page pop-up will open on the screen.

  • Click on the Data table Reference Element. It shows all the values of the element in the data table.

  • Select a value from the Reference Element Field for which you want to retrieve the data from the Data Tables.

  • The data belongs to that value is retrieved from the Data Tables into the application.

Data Source Reference


To create data source reference against an form element,

  • First you need to create a data source.
  • Data source has collection of data from the data tables and Apps.(Refer to Data sources section to create Data source)
  • Click on the Reference Element,
  • Properties window of the reference element will open on the screen.
  • Click on the Select Category, select the Data source Reference option.

  • Click on the Select Data source drop-down, it contains list of data sources in the workspace.

  • Select a data source, the data which you need in the App.

  • The Reference element will automatically set, the element which is selected as the reference element while creating data source.
  • Select Type will also set automatically, it is the type of data source.

  • Click on the Select Reference Elements drop-down, which contains list of elements in the datasource.
  • Select the elements, the elements data which you needs in the app.

  • Click on the Save button in the properties window to save data source reference.

  • The Data source Reference will save, and the selected elements will add to the app.

External Reference

There are two types of External references.

  1. External Drop-down: This is to link External Look ups.
  2. External App reference: This is to link External app data.

External Drop-down (Lookup)

Create External Lookup

  • Login to your Quixy account.
  • You will land on the Dashboard Page.

  • The Dashboard page will have header icons, as shown below.

  • Click on the Admin Menu --> Data Base --> Lookups.

  • The page redirected to Lookups List page.

  • Click on External Lookups tab, the page will redirect to External Lookups List page.

  • Click on the Add button.

  • The page will redirect to Create External Lookup page.

  • Click on the Select Workspace drop-down and select a Workspace from the drop-down.

  • Click on Text box External Lookup Name and enter the name for External lookup.

Without Authorization

  • In Authorization Type select Without Authorization radio button.
  • Click on the URL text field.

  • Enter URL of External lookup and enter optional parameter if exists and click on Test URL Button.

  • You can see a toaster message as URL Tested as shown below.

  • Click on the select element drop-down.

  • Select an element from the drop-down which you want to display in your App as drop-down.

  • Click on the Values drop-down.

  • The drop-down will have values based on the elements selected as shown below.

  • Select a value you want and click on the Save button.

  • Then Success Message lookup Saved Successfully will be display on the screen.

With Authorization (Using External Look Up)

App Creation

  • Click on the Create App icon on the dashboard.

  • The page will redirect to Create App page.

  • In the Name section select the Workspace in which you want to create the App, provide a App Name and Description (Description is not mandatory)
  • Click on the Next button.

  • The page will Redirect to the Form Builder section, you can see the form Elements on the left side of the page
  • You can add multiple sections (Section 1, Section 2, Section 3) in the form builder. you can add the form elements into these sections.

Create Form Builder

In Form Builder, you can see the form elements are in the left side of the page, the form is divided into sections, you can add the elements into sections.

  • Click on the Reference section of the form elements in the form builder.

  • The reference form elements will display as shown below.

  • Drag-and-drop the External Reference from element from the reference section to the builder section.

  • In External form element properties, click on the select category Dropdown.

The drop-down will display two values External Drop Down and External App Reference, select External Drop Down for external lookup.

  • Click on the Field Name text field.

  • Enter a Field name for that External drop down field.

  • Click on the Label Name and enter the label name.

  • Click on the External Drop-down type, and select a required option from the drop-down.

  • Click on the Default Value drop-down, and Select a default value from the drop-down.

  • Click on the Next button.

  • The page will redirect to Workflow Define the workflow step, Business rules, Access Permissions, and publish the app.
  • The app will get created and a success toaster message App Created Successfully will display on the screen.

Add Record to the created app

  • Click on the Add Record option in the custom menu.

  • Select the workspace and click on the App that you created.

  • The app will open in add record mode, click on the Port drop-down filed of the app.

  • List of ports from external lookup created will display in the drop-down as shown below.

User Detail Form Element

User Detail Form Element is to pull the details of a user in the selected form elements in the app who is registered and assigned to that app while adding records to the app.

  • Drag-n-drop User detail form element on to the form builder.

  • Here, you need to select the form elements in the properties window from Select Reference Elements drop-down to pull the data of that particular form elements of the registered user of that app.

  • The elements you select will add to the app when you click on the save button in the properties window.

  • The elements will add to the app as shown below.

  • The user detail reference element will pull the details of the user registered in the app (add record) in to the selected form element fields as shown below.

User Reference Form Element

User Reference element is used to select the users in the workspace for whom you want to send the details of the user.

User Reference is used in Triggers.

Here, you can select a single user if you select the drop-down from properties.

You can choose one or more users if you select the multi-select from the properties of user reference.

  • It shows the list of users in drop-down when you are adding record to the app.

Set Pattern validation to an element

  • Select the element which you want to set pattern validation
  • Click on the element, Properties window is open
  • Check the Pattern Validation option, then Message, Validation Pattern fields and Choose Validation Pattern link are shown in Properties window.

  • Click on the Choose Validation Pattern link then Validation Pattern pop-up window will open on the screen.

  • Validation Pattern pop-up window contains pre-defined validations to select from or you can create your own patterns.

  • Select pattern and click on the Save button, then the validation is set to the element.

Form Builder - Delete Form Element

In Form Builder Section, if you want to delete a form element from the Form, a pop up will display on the screen.

  • Click on delete Form Element icon in the element.

  • A pop-up will display with a confirmation message to delete the element.

  • Click on the Yes button to delete the form element.