Designing Apps – Spreadsheet and Table Widgets

One of the most important and unique qalcwise features is spreadsheet based UI, designers can use two types of spreadsheet based widgets to create rich and dynamic UI.

Right click on the spreadsheet or the table section to manipulate cells and rows.

Spreadsheet widget

Fixed size spreadsheet, designer can add/remove rows and columns, change columns and rows height and width, modify multiple cells at once.

Spreadsheet cells are always addressed with ROW COLUMN syntax (for example: A1, B6, AB67) in formulas, when used in another section, add section name in front of cell address (for example: section1.A1, section1.B6, section1.AB67).

  Spreadsheet can be bound to one data object, it means that one data object can be displayed in section cells, one data object can be used in cells formulas, one data object can be modified in spreadsheet.

 

Spreadsheet section bound o SYSUSER, email, name and isactive are SYSUSER columns

Style - Spreadsheet

New styles section available since version 2.2

Section:

• We can choose a style from the list or specify it using a formula.
• Border settings:
  • Using the border options, we can set its parameters (top, bottom, left, and right) by selecting the appropriate color and rounded edges.
• Adding section shadow:
  • By adding a shadow to the section, we have the option to adjust its color
• Cells:
  • We can assign a selected style from the list or calculate it using a formula for cells that are non-editable. There is an option to set the style from the formatting bar, add borders, and save the selected style for later use.
• Editable Cells:
  • For editable cells, we have the option to set the style by choosing from a list or calculating it using formulas. Additionally, there is an option to assign colors to editable cells. We can also save the style for later use.
• Placeholder:
  • To assign the appropriate style to a Placeholder, you need to mark the cell as editable and give it a name to be displayed. You can also assign a background color to the cell and customize the text appearance using the style bar. There is an option to save the created Placeholder style, making it easier to use later. The style can also be selected from a list or determined using a formula.

Next to each style property, there is an icon  thet allows you to:

- reset the applied style

-save the selected style

-modify a previously saved style

Table widget

Table widget is a spreadsheet with fixed columns and dynamic rows, you can add/remove columns, but number of rows depends on data filter and add new rows option.

In the table, widget cells are addressed with COLUMN only (for example: A, B, AB) in formulas, and this address scope is limited to table row, it means that formula =A+15 will be repeated for each table row. When table column address is used outside of this table section, add section name in front of it and it means whole column array (for example: section1.A, section1.B).

You change column header names and format them (more about formatting).

 Table section can be bound to an array of data objects, it means that one data object is bound to one table row. Multiple data object can be displayed and modified in the table section.

When Allow add rows is checked, end user will be able to add new rows to section.

 

Table section definition, column D formula will be repeated for each row.

 

Table section preview, 3 object of SYSUSER type are bound, spare row is visible.

Style - Table

New styles section available since version 2.2

Table - options

Table - style

Section:

• We can choose a style from the list or specify it using a formula.
• Border settings:
  • Using the border options, we can set its parameters (top, bottom, left, and right) by selecting the appropriate color and rounded edges.
• Adding section shadow:
  • By adding a shadow to the section, we have the option to adjust its color

• Header:
  • We can apply a style to table headers using a list of styles or calculate it using formulas. There is an option to set the style from the formatting bar, add borders, and save the selected style.
• Cells:
  • We can assign a selected style from the list or calculate it using formulas for cells (non-editable). There is an option to set the style from the formatting bar, add borders, and save the selected style.
• Alternate row cells:
  • The style will be displayed in every other row, starting from the second row alternately. We can assign a selected style from the list or calculate it using formulas. There is an option to assign colors to cells and save the style.
• Editable Cells:
  • We can determine the style for editable cells by selecting it from the list or calculating it with formulas. There is an option to assign colors to editable cells. We can also save the style.
• Placeholder:
  • To assign an appropriate Placeholder style, you need to mark the cell as editable and give it a name to be displayed in the cell properties above. We can also assign a background color to the cell and customize the text appearance using the style bar. Additionally, there is an option to save the created Placeholder style, making it easier to apply it elsewhere later. The style can also be selected from a list or determined using a formula.

Next to each style property, there is an icon  thet allows you to:

- reset the applied style

-save the selected style

-modify a previously saved style

Above the styles, in the properties, we have 'Header Style' and 'Style', which are used to specify the style of a specific cell.