Matrix Component

The Matrix (Centauri v1.0) component enables Creators to create a series of questions that have the same responses. For example, creating a survey where end-users answer several questions on a scale of 1 to 5.

The Matrix component displays data in one of two ways as shown below:

For logic-based configurations, you can also assign numeric values to your response options. For example, Strongly Agree = 5, Agree = 4, and so on.

You'll find the Matrix component in the Display & Layout group to the left of the Module Builder.

To learn more about general component settings, view our General Component Settings article.×

Default State Options

A static image displaying the Matrix component's display settings.

Setting

Description

Hide Label

Setting Hide Label to  (ON) hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder.

By default, this setting is set to (OFF).

Hide Field

Displays or hides the component from view. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

Formatting

Setting

Description

Display Type

You can choose to display the Matrix component either as a Table or Inline.

  • Table: Table display is the standard matrix layout. It's a grid with columns and rows.

  • Inline: Inline display shows each collection one after the other, in a list-like layout. Each collection shows all options, displayed as a series of radio buttons.

Table

When using Table display, you can add a text field column to your Matrix component. Doing so lets the end-user enter values, and the text field column triggers when the end-user selects the triggering value. For example, if an end-user selects an option called Other/Not, the selection triggers a text field where the end-user can enter a specific value.

Selecting Table displays the following settings:

  • Header for Optional Text Field Column: Displays a label or header for the rightmost text field column.

  • Display Text Fields When Triggered By: Select which value triggers the text field column. Until the end-user selects this value, the text field column is disabled.

Inline

When you select Inline, the following setting displays:

Tooltip: A short hint that displays when an end-user positions their cursor over the Questionmark Icon (Tooltip) icon. Tooltips can display across more than one line.

Input Behavior

Setting Description

Input Behavior

Controls how end-users interact with the component. Choose from the following options:

  • Enable User Input: Allow end-users to view and enter data in this field.

  • Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.

  • Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

In this scenario, you'll create a car insurance questionnaire using the default Table display option. These instructions assume that you have an open module saved with a title.

1. In the Module Builder drag and drop a Matrix component onto your canvas.
2. In the Property ID field, enter surveyInsurance .
3. In the Canvas Label Text field, enter Car Insurance Questionnaire .
4. In the Rows/Collections table, enter the following:
 

Label

Value

1

My car insurance is priced fairly.

myCarInsuranceIsPricedFairly

2

My car insurance does not provide enough coverage.

myCarInsuranceDoesNotProvideEnoughCoverage

3

My car is not worth insuring.

myCarIsNotWorthInsuring

4

Car insurance should not be required by law.

carInsuranceShouldNotBeRequiredByLaw

The Label column sets the row labels for your table.

5. In the Columns/Properties table, enter the following:
 

Label

Value

1

Strongly Agree

stronglyAgree

2

Agree

agree

3

Undecided

undecided

4

Disagree

disagree

5

Strongly Disagree

stronglyDisagree

The Label column sets the column headers for your table.

A static image displaying the surveyInsurance Matrix component's settings.

6. Click Save Component.
7.  Save  your module.

Preview your module in Express View. Note how the data displays in the Matrix table:

A static image displaying the Matrix component in Express View.