Form designer
Application configuration > Form designer
The Form designer allows the administrator to configure application forms.
There are two different methods to access the Form designer. First one is by clicking the Form designer entry in the Navigation menu. The second approach is only possible when forms already are created in the application. In this case click the Open in form designer entry in the 
menu, next to the form title bar.
| Once the editor is opened, consider collapsing the navigation menu, in order to have a wider area for the form configuration. |
The application administrator can perform the following actions:
Create a form with a section
Before beginning to create a form, make sure that the current data model contains the tables and fields you wish to display in the new form.
-
Form. Click on the
icon at the top bar and then click on New. Click on the canvas area (where the "Form is empty" legend is) to list the properties of the form under the Properties area, and enter the Caption, which will be the title of the form.You may click on the
icon to enter a different caption for the permitted languages set for your application (i.e., translation).So far, the form is created, but empty.
-
Panel. Optional step. Select the Panel icon under Components, and drag and drop it onto the empty area.
Note that any component can be added directly on the canvas area, i.e. without a panel as base; however, we recommend you to add one for a better appereance and organization of those components (see a picture of the form’s item here).
-
Section. Select the desired section icon, depending on the design you need:
-
Detail, displays fields of a single record, selected via the Record selector (which includes the Record filter). For this, select first the Selector icon, and drag and drop it onto the panel or canvas. Then, do the same with the Detail icon. Under Properties of the selected Detail section, set the Datasource (i.e., the table containing the data to be displayed) and set "Selector" as Limited by (i.e., to relate the selected record with its data in fields placed on the section). Also, set the same Datasource for the Selector.
You may also use the Record selector limited by another section. -
Table, displays multiple records (of the same table) and their fields, which will be shown as rows and columns, respectively. Includes, at the bottom of the section, icons to save, delete, etc. And at the top, a variety of tools per column like pin or freeze function, autosize, filter per column, among others. To add this section, select the Table icon, and drag and drop it onto the panel or canvas, and then set the Datasource (i.e., the table containing the data to be displayed) under Properties.
-
Multi detail, similar to Detail section where fields of a single record can be displayed, with the difference that navigation through records is done by clicking on the Next and Previous controls. Add this section by selecting the Multi detail icon, then drag and drop it onto the panel or canvas, and finally set the Datasource (i.e., the table containing the data to be displayed) under Properties.
-
Repeater, multiplies itself as many times as records exist, providing a quick overview of your data with all the design that a Detail section stands; e.g., use it to display a list of products or services. To add this section, select the Repeater icon, and drag and drop it onto the panel or canvas, then set the Datasource (i.e., the table containing the data to be displayed) under Properties.
Placing a Repeater on a Detail section limited by a related record is a good idea to view and analyze your data in a horizontal way, where records will be displayed as columns instead of rows. You can also integrate a Button to save all edited records at a single click.
Other general tips about sections:
It is possible to add multiple sections in the same form, in order to display interrelated records from several tables, organize the data of a table in a better way, etc. For this, pay especial attention to the Limited by property, which connects sections, and the Limitation field property, with the following options, depending on the type of section and data:
-
Active record.
-
A Relation field to define the dependancy between sections connected.
-
Use same filter, to apply the query from the main section. For instance, if you filter a table to show only customers within the Area = “Downtown”, a Map limited by this table will be automatically refreshed to show locations within that Area.
-
Use custom IQL condition, to add the selected record from the main section as a variable for an advanced fixed filter.
-
Note that the Properties Parent, Limited by, and Target section, once set, become links that will take you to the component in question, wherever it is, so you can continue configuring in the right spot.
The variable @limitByValue is especially useful to customize any kind of relation between sections.
To have multiple sections designed as a "tabbed form" or "router form" (i.e., controlled by buttons used as tabs, or by fields with certain value, respectively), then use the Layers feature.
-
-
-
Fields. Note that when selecting a section, fields (both system and user defined) are listed under the Fields area. Drag and drop the needed fields onto the desired position within the section (multiple fields can be added at once by using the Control or Shift keys).
To be able to quickly find certain fields, use the filter icon of the Fields area. Note that the filter is case insensitive and does not need wildcards (i.e., * and ?).
Alternatively, you may add fields from the Components area (look for the ones in blue), where the Datasource field must be specified. Note that the field is added without a label.
Be aware that, in rendered forms, the user will be able to move from one field to another by hitting the Tab key, in the order the fields were added to the section. If you wish to establish the default order so that Tab works from top-left to bottom-right, then right-click on the section to pop up a context menu, and click on Reset tab order. If you prefer a specific order, use the Index property (the number next to Parent of the selected field or component).
Add the Record group field to a section meant to be used on mobile mode, in case there are many record groups defined and no Default record group selected in Data model editor (or selected, but with no rights).
Optionally:
-
Adjust the Snap to grid (magnet icon) and the Grid size settings, placed at the top bar, to ease the way you move components around.
-
Add components, such as Media, Links, Label, Maps, Icons and Calendars, Charts, among others.
-
Edit settings of the selected component under Properties, for example:
-
Type a title for the selected panel or section in the Caption property. Note that translation can be directly typed in here for the permitted languages set for the application. Switch to each language with the
icon. -
For any selected section, action icons can individually be shown or hidden by clicking on them. Also, the Run on select is available, useful to set up the selected record name, or any other value as parameter to filter another section, even if these are not related. For instance, @param = RecordName typed in this setting of a given "Inventory" section, can be later used in the “Filter: Configure…” Product = @param of your Suppliers’ price list to find the different prices available for the matching product.
-
For a selected Table section, set the Save automatically and the Full row edit in case you don’t want to have the Save icon on the section but to store your changes as soon as you hit Enter or focus away, and that clicking on a cell opens the entire row for edition, respectively. Note that the Save automatically setting must be unmark if the Table section is meant to be used in offline mode.
-
For a selected Detail section, tick Open in create mode to make it independent of having a Selector to avoid navigation between records, i.e., it will only allow the possibility to create and save.
-
For a selected Multi detail or Table section, or Record selector, the Sorting field can be set other than Record name, set by default.
-
Exclusive for mobile mode: Tick “Suppress collapse in mobile mode” checkbox if you want to deny users to collapse Panels or Sections while using mobile devices.
-
Exclusive for File fields: "Show file history" will enable a popup where previous versions of the file can be downloaded, in case the storage is an Amazon server.
-
For most of the selected components:
-
A Tooltip can be entered (i.e., the descriptive text that is displayed when the user hovers over a component in the form).
-
Style can be set, e.g., background, borders, font, etc. For example, if "Border radius" is set, the corners of the component will be rounded. Note that the color picker will show the Theme colors as well as all possible customizable combinations.
-
Fixed edges for making your layout adaptive to any screen size.
-
Set a custom Behavior so the component can "react" in a special way based on specif criteria defined in IQL.
-
Right-click on the component to display a context menu to be able to Bring to front, Send to back, Reset tab order (this is only enabled for sections), and Delete selected.
-
Set one or several actions upon clicking the component with the Run on click property.
-
Get the result of calculations immediately after changing values in your form with the Run on change property.
Note that multiple selection can be done having the lasso
icon enabled, to apply settings at once.
-
-
For most of the selected fields:
-
Set Mandatory and/or Read-only. Those field boxes will be marked in a special way to be quickly identified.
Note that making one field to be Mandatory in a section will make it that way in any other section of that form.
In a generated form, Read-only fields might look different than gray if other color is defined by the Theme.
-
Set Align to left, center or right on the horizontal aspect. If nothing set, the alignment is left as default. And set centered or bottom on the vertical aspect, where bottom is the default.
-
Set a Number format in case you wish to display a Number field in a different way other than the automatic one based on your language.
-
Set a Date format in case you wish to display a Date or Date time field in a different way other than the automatic one based on your language. For example, if you wish to remove the seconds from a Date time field, type DD/MM/YY HH:MM. Note that the seconds will still be editable as soon as the user clicks on the field.
-
-
-
Resize a component by having the
icon enabled, then select it and drag any of its perimeter controls (or its division line, in case of fields in a Table section). Alternatively, edit its Dimensions under Properties. -
Reposition a component by selecting it and dragging it to the desired position.
Alternatively, edit its Position under Properties. If that’s the case, be aware that the position will be relative to the Parent property, for example, a Panel might be at position X: 0 of the form canvas (i.e., "Form root" as Parent), which means that it will be seen at the very left hand of the screen, but a Button placed on that Panel (i.e., "Panel 123" as Parent) with position X: 0 results in being placed at the very left of the Panel.
A component moved out of the dimensions of its Parent will be automatically render inside that Parent component.
-
Bring to front/Send to back any selected component to specify its position over or under another component, with the icon next to Components, on the top bar of the Form designer.
-
Use Markdown on Note and Label fields with the
Display as formatted textproperty.Click on the canvas area to optionally apply these properties to the form:
-
Make available offline, to enable the Offline mode switch on the form.
-
Show save all button, to display a button component at the top of the form to save at once all changes made along the sections.
Note that this property will also reflect on mobile mode, enabling/disabling its floating Save icon. -
Disable keyboard shortcuts_, to avoid the effect of key bindings on forms.
-
Run on init, where you can set up with IQL initial data to display right after the user loads the form, without having to type any input to obtain further actions. For example, set today’s date automatically on a parameter field once the user opens the form, so that other fields and/or filters can have a chain reaction based on that.
Use the keyboard shortcut
Alt + xto quickly switch between the Select rectangle tool (known as Lasso, to select multiple components at the same time) and the Move tool (to select a single component) icons.
-
-
Save the form
Note that new forms are automaticaly added as a menu item into the GENERAL accordion of the navigation menu, with access rights to the ADMIN and USER roles. To edit access rights for these or other roles, use Form rights.
As an alternative to creating new forms from scratch, you may use the "Make a copy" option found within the
icon, to save your current form as a new one instead.In case you need to replace the original form with a copy where you saved changes, use then the "Replace another form" option. Be aware that this option is a full replacement, taking the original form’s place in the menu, rights granted, and URL.
Add a component (e.g., Media, Map, Calendar, Button, Chart, Barcode, etc.)
| Component | Description | Configuration | Remarks | Example |
|---|---|---|---|---|
Media |
A picture from the web or from a File field. A video from a File field. A white background for digital signing. |
Has multiple properties to resize the image, to preview PDF documents, to have a full image cover, etc. For images and text files clicked on this component, a preview will pop up with its content. |
|
|
An icon to save records, to open a form, or to run a report, among other actions. |
Use the Multiple actions can be set via the Run on click property. Also, style can be set via Behavior. In case this component uses Table data, but is placed outside the section, the property |
Record actions are a handful alternative instead of having the action icons at the top right corner of the form. Note that these actions are binded to the rights the user is granted to. Be aware that an Icon configured to do actions on a Table section will only work for the selected record. |
|
|
Link |
A link text that will take you to another form within the application, to a website or to run a report, among other actions. |
In case this component uses Table data, but is placed outside the section, the property |
Same remarks for Icon. Additionally, Link can be dropped as a column in Table sections. Link will not be displayed to users who do not have rights granted on the destination form. |
|
Text to have on the form as a legend, i.e., a static label that is not bounded to any field. May be used as frame to stream YouTube videos on Forms. |
Ways to use it: 1) Enter a Caption for this component. Style it with Properties, or double-click it to style it with Markdown, in combination with the Display as formatted text property, e.g., 2) Set the caption and style with Behavior, e.g. 3) Embed a YouTube video with Markdown in combination with the Display as formatted text property, e.g., |
|
||
Rectangle |
Useful to frame or highlight an area within the form, e.g., to draw a section within a real section. |
Optionally, edit its Style. |
Note that this component may have custom behavior. |
|
Geographic coordinates can be marked on this mapping service to store and identify the location referred by a record. |
|
|||
Map layer |
Additional layers of location markers can be overlaid onto a Map component. |
|
||
Map layer editor |
A layer overlaid onto a Map component that includes tools to draw areas or edit existing ones. |
A prerequisite to use this component is to have a Note field to store Geojson information. Once overlaid onto a Map, select the proper Datasource, Limited by (may be the Selector or any section), Limitation field and Geojson field. Do not set any property to the Map. |
|
|
Calendar |
A full-size calendar with day, week or month-view. |
Hover over the appointments (i.e., records) to display a tooltip with details. The color of the event is defined by the Theme (unless Style rules are set to the Calendar to customize colors). |
|
|
This component can integrate an icon and text in its design, useful to run reports, save records, open a form, scan a QR-code, take a screenshot to Maps, among other actions. |
You may set an Icon together with a Note that this component has an additional action: QR-Scanner, in combination with the QR-code component. In case this component uses Table data, but is placed outside the section, the property Multiple actions can be set via the Run on click property. |
Be aware that a Button configured to do actions on a Table section will only work for the selected record. |
|
|
Chart |
There are three types of charts: Bar , Line , and Pie . |
Clicking a legend hides the respective series, while double-click shows only that one. A tool bar is displayed when hovering over the top of the chart, that offers the possibility to download the chart as a PNG file and show closest data for Pie charts, and much more for Line and Bar charts. For any chart where the x-axis field is Date, you may use the Date range selector to be able to filter by periods of time. |
|
|
IQL Chart |
An advanced way to configure this component; for example, you can summarize the data of an extensive table to render it as bars, lines or table, i.e., like a pivot chart. |
For the Table type chart, the colors of the cells may be customized in combination with the Behavior property of the Count (or Sum, etc.) placed on the y-axis. Also, it is possible to pin the first column of the table. |
|
|
Ideal to graphically show the progress of a Number field based on a range, in the shape of a horizontal bar. |
Set its Datasource and Range. You may set colors depending on the range with rules. |
Hover over the bar to display its value. |
|
|
Gantt chart |
Helps you schedule your project tasks and track the progress over time. |
Click on Create new icon to add a Task. Double-click the Task to quickly rename it. Read about more features here. |
|
|
Use these optical labels to track and store information about goods or items, or for storing URLs of webpages, marketing, etc. |
Set its Datasource (must be Number or Text), Select the Bar-type and the Code format. You may change other properties. Optionally, add a Button component with Action QR-Scanner to your form to scan the code directly from your smartphone. In this case, make sure the QR code Datasource and the QR-Scanner field match (must be Text). |
Click the QR-Scanner button from a mobile device. Barcode scanning is an extended functionality. Please contact you IS Tools sales representant for a quote. Use the Scanner feature to write QR and Barcode values into a Search box to look for records in sections. |
|
|
It’s a field component, but with no table associated to it, used as input box to search data. |
From the Component bar, select and drag-and-drop onto the canvas a Text, Number, Date, Date time or Checkbox field. In the Properties panel, type Param1 (or any word you wish) as Datasource. Select the Record selector or the section, and click on Filter: Configure property. In the IQL editor type for example: You may want to add a Label component, e.g., Search for Task Id to the left of the Search box so it’s clear for users the purpose of it.
|
Can also search QR and Barcode values obtained via Button component. |
|
Set a fixed filter to a section
It can be very useful to have a section pre-filtered by conditions set by the administrator, so regular users who access the application form would see a limited record list based on such conditions, without being able to modify them, e.g., let’s say a subcontractor that can only see a fixed list of own pending tasks. This type of filter differs from the filter set in the Record filter (Show filter) button in that the latter one is customized and editable by the user on the finished form. Also, think of the Record filter (Show filter) button as a tool to find specific records, while the fixed filter works as a tool to permanently shorten the list of records shown to the users.
|
Fixed filters are designed to facilitate and support workflows. Should the use case involve separation of information, Record groups rights is the secure way to support it since the information access requirements are enforced regardless of forms and/or filters. Service accounts access the information using the API, where no forms or form filters exist. |
To set a fixed filter, select the wished Multi detail or Table section. For Detail sections, select the Record selector. Click on the Filter: Configure… property to pop up a window that is very similar to the Record filter window. Follow the regular instructions to create a filter on application forms. In case you don’t want to create but to apply an existing filter, click the Use existing filters button and then find it in Filters. Once the filter is configured or chosen, click on Set filter on section. After this, you can verify on the finished application form that the section with the fixed filter is showing the wished list of records; also, notice that the sections depending on the filtered section (usually the sections placed under this one) accordingly show a shortened list of records.
|
Be aware that the fixed filter will limit both the record list of the section where it has been configured and the record list of those sections depending on it. On the contrary, sections having no dependancy on a fixed-filtered section and no fixed filter themselves, will show a full list of records. There can also be the case that a section’s record list is limited first by its previous section’s fixed filter, and then by its own fixed filter. |
|
Note that fixed filters can also be set to Relation fields and to Line/Bar chart components, with the purpose of shortening the number of records displayed on them. Follow the same steps for when setting a fixed filter to a section described above. |
|
Apply a fixed filter to set your form to a "create-only" mode. |
Set custom behavior for components
Use the Behavior property to make the selected component change in a special way, depending on your business logic flow; e.g., a Note field that behaves hidden until a Checkbox it ticked, or the bar of a Chart turns red if it represents a low value. The supported components are: Button, Icon, Rectangle, Label, and all type of fields except for Multi-value and Relation. To see examples and syntax, go here.
|
The usage of Behavior may impact on the performance of the application due to the constant evaluation made on the form. |
Display field values in the Record selector / Relation fields on sections
It is possible to display, in addition to the Record name or instead of it, the value of fields in the Record selector of a Detail section, in order to better identify the record to application users. For instance, a list of Contact records may identify each record by an automatically created number, and to make it easier for an application user to identify each Contact in a list, it is reasonable to display, in addition to this number, the full personal name of the Contact, as stored in a text field called Full name, e.g., "10034-John Smith".
To configure this, hover over the Record selector of the Detail section. Use its Display fields property, which displays a list of available fields that can be marked (up to 3 fields).
|
Note that field values can also be displayed on Relation fields, following the same instructions described above. |
|
In case the added fields are Text, this feature will enable up to three quick filter boxes in the navigation drop-down of the Record selector. |
Edit a form
Click on the icon at the top toolbar, select the form and double-click to open it. The procedure for editing is similar to the one discussed on the topic for creating new forms, and their different sections.
|
To quickly find a form, use the filters in the table of existing forms. |
|
As an alternative to editing live forms which changes are applied and available to users immediately, you may want to create a copy first to implement the proper changes, test it, and then display it to users. For that, click on the Be aware that this option is a full replacement, taking the original form’s place in the menu, rights granted, and URL. |
Translate a form
All items in the form that have a label, e.g., labels that belong to fields and links components, and even the form name and its panels' and sections' titles, can be translated to the permitted languages set to the current application. For this, select the wished item and, under Properties, click on the icon in order to choose the language. Then, enter the Caption, Tooltip, etc.
*If translation is missing for a permitted language that is selected as the user language, the form will in many cases show the item(s) in the default language (read more here).
|
Delete a form
Click on the icon at the top toolbar, select one or many forms (listed by name) and click on Delete.
|
The action of deleting a form cannot be undone. The item in the navigation menu linked to this form is also removed. |
Copy and paste components in a form or between forms
This will help you to save time while configuring new views in your application. If you have a section designed with colored components and standard IQL queries (with no dependency constraint), simply press Ctrl+C and then Ctrl+V on the desired form, without having to start from scratch every time.
But if what you want is to move a section within a panel to another one or onto the canvas, or vice versa, then you can use our newly introduced Parent property, where you can edit the dependency constraint, very useful to also save time when redesigning an existing form.