Low-Code Designer > Apps / Tables

Tables

A Table is a specific field type that can be used both in apps and in business processes. By adding it to a form, you will be able to align data in a tabular fashion in rows and columns and insert formulas to calculate the values of a cell or a column.

For instance, add a table to the Order app form to display all the goods selected by a customer. Insert a formula to one of the table cells to automatically calculate the total amount depending on the number of the purchased goods.  

Adding a table to the app form

начало внимание

Only the  users in the Administrators group can add and set up tables.

конец внимание 

You can add a table field when creating a new app or editing an existing one.

Drag the Table property form a side panel to a form and configure the settings:

gif01.gif

 

  • Name - create a table name that your colleagues will see on the creation, viewing and editing forms of an app item.
  • Code - field code which is used when working with API, scripts, templates.
  • Tip - here you can enter additional information, for example, a description or an instruction. This is a convenient way to help an employee fill out a table correctly.
  • View -  Select a table view:
    • Table - standard table view.
    • Template – you might want to use this setting when working with large tables. It is not always necessary to show all the table rows. Sometimes showing total amount might be enough, while other rows might be hidden. In this case, use a template.

00.png

In the Template field, enter a text that a user will see on the form, for instance, "Order Total".

Click on the plus icon {+}  to add the total value of a corresponding column. This option is available if the table has already been created and configured. Otherwise, you can add only the number of table rows to the template.

An example of a template:

01.png

  • Use one header for all nested tables - you can create a table inside another table. By default, each row of a nested table will have a header. If you want the header to appear only under the parent column header, select the checkbox next to this option.  
  • Table Settings - Click this link to go to the table display settings. You can read more about them below.

Setting up a table

You can add columns and specify what type of data they will contain, create formulas and change the display settings: set up column width, fill it with color, change the font color, etc.

To add a new column, in a table settings window click the icon +.

02.png

Select column type: data or formula.

  • Data – each column can contain data of only one type. For example, numbers, email addresses, or app items. You can choose one of the standard QuickBPM data types. A detailed description of each type we provided in this article.  
  • Formula – this option is available only for such data types as string, money or number. It allows you to specify a formula for calculating the value in each row of a column. The rows cannot be filled manually by users. The formula may include a constant, an operator, and/or a link.

A constant is a fixed value; it is not calculated; it always stays the same. It can be a number or a text. String constants should be written in double quotation marks “”.

Operators are used to perform arithmetic operations and return a numerical value. You can add, substract, multiply and divide numbers using the following operators: +, -, *, /. Parentheses () are used to set the priority of mathematical operations.

Links allow making reference to other table columns or to the app fields.

Data type column

gif02.gif

To create a column, enter the following information:

Display name* – the name of the column that will be displayed on the creation, viewing and editing forms of an app item;

Property name* – the name of the property used when working with APIs, scripts, templates. The name is generated automatically, but if necessary, you can change it;

Tip an explanatory text or an additional description which will be displayed as a tooltip when you hover over the column heading;

Type * – the data type used in this column. For example, by selecting the String type you will be able to fill the column with any text information;

начало внимание

If you select string, money or number data types, you will be able to calculate column total.  For the money and number data types, you can calculate the sum, maximum, minimum and average. For the string type, you will be able to add a caption.

конец внимание

Formula type column

To better understand formulas, let's take a look at the following simple example.

An employee enters order details in a table on the Order app form. He or she specifies the name of the product, its quantity, and the price per unit. The total price for each table item can be calculated automatically with a formula, by multiplying the unit price and the quantity of this product.

Let's then create a column of the formula type where the quantity and the prices will be automatically multiplied.

To do so, click the + icon and select Formula.  

gif03.gif

In the provided window, configure the Formula settings. First, create a name, for example, Total Price.

In the Formula field, click the {+} icon. In the drop-down list, you will see the names of other columns and app fields. Select Quantity (link to the second column) and Price per unit (link to the third column). Add the * operator to multiply the contents of the second and the third columns.  

начало внимание

For a formula type column, QuickBPM can show the total in the footer. To do this, in the footer, in the drop-down list, select the function: text, total, maximum, minimum and average.

конец внимание

Now, filling out the table, the employee will select the product and enter the quantity, and the total price will be calculated automatically.

Example of a table

How to add data from another app to the table

When creating a table, you might need to refer to data from another app. Suppose you keep records of all stock items using the Stock List app, and all customer orders are accounted for in the Orders app. You can add a table to the order form, in which employees can select stock items from the drop-down list. At the same time, QuickBPM will automatically retrieve the item price from the Stock List app and display it in the table.

To do this, add the table field to the Orders app form. Then, in the table settings, create the Data column. In the type field, select "app" and add a link to the Stock List app. The column name is filled in automatically and matches the name of the app item.

03.png

Once it's done, on the app form, you will see a table that will refer to the items of the Stock List app. By clicking on the cell in the Product column, an employee can select a product.

The prices of stock items are stored in the Stock List app. Employees enter this information when they add a new item to the stock. Thus, each item has the Price per unit property with a unique value. By adding this property to the column of the table, you will save employees from having to re-enter the price manually and prevent possible errors.

To do this, use the Formula type column. In the column creation window> in the formula field, click the {+} icon. In the drop-down list, you will see the names of other columns and app fields. Select Product (link to the first column)> Price per unit (property).

04.png

Now, instead of entering such information into the form manually, the employee will open a drop-down list, select and item, and QuickBPM will automatically show its price.

An example of the configured table

Display settings

You can change the display of the table. To do this, open the form settings, find the table filed, and click the Table settings link.  

06.png

In the provided window you can change the table display settings: setup column width, fill with color, change the font color, etc.

Column Width  

Switch between options in the upper part of the window, to set up the column width. You can stretch the table to fit the app form and specify custom width values for each column, to do this simply drag the column border.

07.png

To hide the header and footer, click the icon 23.png to the left of the table.

Column headers, text formatting

You can fill for the columns with colors, as well as change the location, color of the text, use underlines, italics and bold. To do this, click the gear icon24.png next to the column name. In the window that opens, switch between options to format the text as you need.

08.png

Deleting columns  

In the table settings window, click the gear icon 24.pngnext to the name of the column you want to delete. In the lower right corner of the pop-up window, click the bucket icon and confirm the deletion.

09.png