Table Component designstudio pro icon

Table Component

The Table component allows you to add a table to your form. Tables allow you to add components into their cells while being able to control their spacing and location on the form.

Example of a Table Component (3 Columns and 3 Rows) Rendered on a Form Canvas

Table Example

Settings

The settings for each component are grouped under tabs. While there are multiple tabs and many fields, some are applicable to advanced users (for example, the API and Conditional tabs and JSON fields) and you do not need to complete them to render the component. For this reason, the settings that are necessary are detailed for each component. In some cases, when an optional field is frequently used, it is listed in a second optional settings table. For tabs and fields that are not listed, advanced users are assumed to have pre-existing knowledge of how to work with them if they elect to apply them; however, they should be aware that the fields may not be compatible with WebEOC. Contact the Juvare Support Center at +1 (877) 771-0911 for additional information.

Table Component Settings Window

The following settings are necessary to render the component:

Table settings fields (required)

Field

Description

Procedure

Label

(Display tab)

Text that appears above the table. Unlimited alphanumeric characters, including special characters.

Number of Rows

(Display tab)

Number of rows in the table.

Unlimited numeric characters. The default number is 3.

Number of Columns

(Display tab)

Number of columns in the table.

Unlimited numeric characters. The default number is 3.

The following settings are frequently used but are optional:

Table settings fields (optional)

Field

Description

Procedure

Clones Row Components

(Display tab)

Copies a component in a column to the remaining rows in that column.

 

  • A selected checkbox copies and pastes the components.

  • A cleared checkbox disables this feature (default).

  • After the component is copied, open each settings window to specify the settings.

  • All columns are affected.

  • DesignStudio Pro copies the last component in a column to the remaining rows in that column. For example, if you insert a Checkbox component in column 2, row 1, and then insert a Button component in column 2, row 2, the Button component is copied to the remaining rows in that column (column 2, row 3; column 2, row 4, and so on.)

  • There is no undo for this action. To remove the components, remove them individually.

  • The Remove button in the settings window removes the table.

Cell Alignment

(Display tab)

Aligns the cell contents, horizontally.

Select one of the following options:

  • Left

  • Center

  • Right

Icons

The following tool icons are available:

Tool icons and descriptions
Icon Name What it Does Procedure
Settings Icon Settings Displays the settings window, in which you can modify the component’s settings.

To modify settings

  1. In the Design area, move the mouse pointer over the component. A toolbar appears on the top right. The icons that appear depend on the component.

    Form Icons

  2. Click the Settings icon.

  3. Modify the fields as needed. See Add Form Components.

  4. Click Save.

Move Icon Move

Moves the component to another position on the board.

This option is useful with touch pages. If you are not using a touch page, you can drag the component to its new location.

 
Copy Icon Paste Icon

Copy

Paste

Copies the current component and its settings and pastes it after the current component.

To copy the component

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Copy icon.

  3. Click the Paste below icon. A copy of the component appears below the original component.

  4. Click the Settings icon and modify the settings for the new component.

  5. Click Save to save the new settings for the newly-copied component.

Delete Icon Remove Removes the current component.

To remove the component

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Remove icon.