Low-code designer > App builder > Tables / Table settings

Table settings

In ELMA365, you can change a table’s width, manage numbering, configure grouping, etc. To configure a table in the app form settings, open a Table type field and click Table settings.

table-visibility-1

General settings

General settings are applied to the whole table. You can change the table’s width, manage numbering, grouping, or sorting of rows, as well as hide or display columns’ headers and footers. Let’s see how these options work:

table-visibility-2

  • Fit table to window / Custom. Select Fit table to window is you want the table to stretch across the width of the page. Columns’ sizes will be percentages of the total table’s width. Select Custom to set a fixed pixel width for each column. The total width of the table will equal the sum of the columns’ sizes.
  • Show sequential number for rows. A column for the row’s number will appear in the table. Numbers will be filled out automatically.
  • Allow deleting rows with read-only cells. Enable this option to let users remove rows even if the table includes read-only columns.

Let’s say there are read-only cells in the Order details table. These are the cells that data from the Orders app is passed to. The rest of the data in the table is entered by the sales rep. If the option is enabled, the sales rep will be able to delete a row in the table, for example, if the data is incorrect.

  • Group table rows. This option allows structuring data in the table and displaying it in a more convenient way.
    • In the Group by column field, specify the column that rows need to be grouped by.
    • Use the Sort in option to place groups of cells in ascending or descending order. If you group items based on a String type field, items will be sorted alphabetically.

Note that if the Sorting option is enabled for a column, you are not allowed to group rows. In the notification that appears, select the option that you want to keep.

table-visibility-3

Column settings

For each column, you can set:

Width

Depending on the Fit table to window / Custom option, a column’s size is set either as a percentage of the table’s width or in pixels. To set custom column width, drag the column’s border.

table-visibility-4

A column’s width can also change automatically to match the width of its content. To enable this option, click the value of the column’s width and select one of the following options:

  • Set to maximum. The column will be as wide as possible, limited by the width of other columns. When you select this option, the width’s value will change to max.
  • Set to minimum. The column’s width will be equal to the size of the longest item in its cells. When you select this option, the width’s value will change to min.

table-visibility-5

Design

You can apply a background color to columns, change the text’s alignment or font color, make it underlined, italic, or bold. To do that, click the gear icon next to a column’s name. In the pop-up window that opens, switch between different options to format text the way you want.

table-visibility-6

Visibility

You can hide headers and footers of all columns in the table. To do that, click the eye icons on the left of the table. To make a hidden element visible again, click eye-closed.

table-visibility-7

Read only and Required flags

To ensure that data in a column will not be changed, use the Read only option. To do that, click the read only icon in the row above the column’s header. When a user works with the table, it will be impossible to edit cells in this column.

Important: By default, users cannot delete table rows if the table contains read-only columns. To change this, in the table’s settings, enable the Allow deleting rows with read-only cells option.

table-visibility-8

If calls in a column shouldn’t be left empty, use the Required option. To do that, click the asterisk-icon-gray icon in the row above the column’s header. The icon’s color will change to red. Now when an employee works with the table, it will be impossible to save the changes without filling out cells in this column. To remove the Required flag, click the icon again.

Important: All empty cells in the column will need to be filled out.

Sorting

You can sort data in columns in ascending and descending order, as well as alphabetically. Sorting is only available for the following types of fields: Number, Money, String, Users, App, Phone number, Full Name, and Email address.

To enable sorting for a column, check the Sorting box when you create or edit it.

table-visibility-9

Note that sorting is not available if you use the Group table rows option. In the notification that appears, select the option you want to keep.

When you enable sorting, you can open an app item’s view form and click the corresponding column’s header. Cells will be sorted in the ascending order. If you click the header again, they will be sorted in descending order. Another click will reset the order of cells.

Column settings on forms and in the context

Column visibility, as well as the Read only and Required flags are configured differently on app forms, in interfaces, and in business process tasks. Let’s see how to change table settings in each case.

On a business process task form

Change the table’s settings in the following way:

  1. On the business process diagram, double-click a Task activity and open the Form tab.
  2. In the Name on form column, select a Table type field.
  3. In the window that opens, go to the Columns display tab.
  4. Check boxes to enable or disable the following options:
    • Hide a column: eye-closed.
    • Make cells in a column required: required-star-red.
    • Make cells in a column read-only and restrict editing: read only.

table-visibility-10

To let users delete rows in tables with read-only columns, enable the Allow deleting rows with read-only cells option in the table’s settings.

  1. Save the changes.

Important: Column settings you configure here only apply to the current task in the business process.

On the form of an app, a widget, or a page

If a Table type field is placed on the form of an app, a page, or a widget, you can configure columns as follows:

  1. Open the form in the advanced mode and go to the Interface designer.
  2. Select a Table type property or add it to the form. To do that, drag it from the right side panel.
  3. Click the gear icon in the property’s header.
  4. In the window that opens, go to the Display settings tab.
  5. Check boxes to enable or disable the following options:
    • Hide a column: eye-closed.
    • Make cells in a column required: required-star-red.
    • Make cells in a column read-only and restrict editing: read only.

table-visibility-11

  1. Save the changes.

Important: These table settings are only applied on the form they are configured for. For example, if you hid certain columns on the app’s create form, they will still be displayed on the view form.

Instead of checking boxes, you can select a context variable of the Yes/No switch type. To do that, click the bind_table-icon icon next to the checkbox you need. Select a variable from the list. The column’s settings will be turned on or off depending on the value of the bound variable.

Example of binding a column’s display settings to a variable

On an app’s form in the standard mode

In an app, you can also quickly change columns’ settings in the Form Settings window on the Create, View, and Edit tabs without opening the Interface designer. To do that:

  1. Click the gear icon on the right of the app’s name and select Form Settings.
  2. Go to the Create, View, or Edit tab.
  3. To change the settings of a Table type field, select it in the Context column on the left and drag it to the list of properties on the right.
  4. Click the field’s name in the Name on form column.

table-visibility-12

  1. In the window that opens, open the Columns display tab.
  2. Check boxes to enable or disable the following options:
    • Hide a column: eye-closed.
    • Make cells in a column required: required-star-red.
    • Make cells in a column read-only and restrict editing: read only.
  1. Save the changes.

Found a typo? Highlight the text, press ctrl + enter and notify us