Skip to main content

Search

Table cell customization

  • Updated

IntelliSurvey offers tools for creating tables efficiently, typically displaying all options consistently across rows and columns. However, when customization is needed — such as hiding options or replacing cells with text or images — the cell tag allows you to target specific cells and modify their content or behavior.

Try it!

Details

  • The cell tag is added to a table widget, specifying the option, row, and/or column IDs to target.
  • Enclose the targeted cells in square brackets [ ], using the same inclusion/exclusion syntax as other list references, like optsfrom.
  • By default, targeted cells are left blank, but decorators can be added to further modify the content.
  • The cell tag is necessary to create an "Other Specify" field when using autoothers as table options.
  • Tables can use multiple cell tags when different adjustments are needed.

Specifying target cells

In every cell tag, the "coordinates" must be identified by putting in the specific IDs of each axis of the table. The axis is specified by a capital letter as shown below. Inside the square brackets, insert the option, row, or column ID(s).

Code Description
O[ID]

Targets option IDs (e.g., O[5] for option 5).
R[ID]

Targets row IDs (e.g., R[1,3..5] for rows 1, 3, 4, and 5).
C[ID]

Targets column IDs (e.g., C-[2] excludes column 2).

Decorators

Decorators modify the targeted cell's behavior or appearance.

Decorators Description
column_span When set to 'y', merges adjacent column cells.
condition

Applies the cell tag only when conditions are met (e.g., {if anyChecked($QX,[rid])}).
image

Replaces content with an image (e.g., {image: image URL here}).
option_span

When set to 'y', merges adjacent option cells.

text

Replaces cell content with text (e.g., {text: N/A}).

 

Inside the decorators, option data placeholders can be used to iterate through a list and substitute IDs dynamically.

Option data Description
[id]

Option ID (e.g., {if anyChecked($QX,[id])}).
[rid]

Row ID (e.g., {text: $Q4R[rid]}).
[cid]

Column ID (e.g., {image: /survey/mysurvey/_s/images/brand[cid].jpg}).

Note: Unlike other tags such as rowsfrom or colsfrom, [id] may not be used for rows or columns in the cell tag — the corresponding placeholder shown above must always be used.

Additional examples

The most common examples are shared below. Please see Advanced table cell customization examples for more information.

Targeting an entire row

In a radio table or checkbox table, the syntax O[*] can be used to target every option without needing to specify them individually. In the following example, O[*] is the equivalent of O[1..5].

1A. Targeting every individual option in one row.
type: radio table
rowsfrom: series[1..5]
optsfrom: series[1..5]
cell: R[3] O[*]

If only the row is defined at the cell tag, such as R[3], the system will target the entire row of options as a single unit.

1B. Targeting the entire row of options as one.
type: radio table
rowsfrom: series[1..5]
optsfrom: series[1..5]
cell: R[3]

Depending on the survey theme used, this could affect the button or cell layout of your table differently. This distinction also affects how the image and text decorators behave. Try both programming options to see what works best for your survey.

Replacing content with images or text

As the above examples have demonstrated, specifying a target cell removes the option from that cell. It is possible to replace the contents of the targeted cell instead of leaving it blank using the text and image decorators.

In Q1A, the first option in the third row is replaced with an image, and then in Q1B it is replaced with text.

Note, the first example references an image that has been uploaded to the survey's images folder.

Applying 'option_span' and 'column_span' decorators

The option_span: y and column_span: y decorators merge adjacent table cells. When merged, any content added via text or image decorators will appear only once within the merged cells, rather than repeating in each individual cell.

3. Targeting options 2,4,5; merging options 4 and 5:
type: radio table
mode: classic
rowsfrom: series[1..3] 
optsfrom: series[1..5]
cell: R[2] O[2,4,5] { option_span: y } { text: N/A }

4. Targeting columns 2,4,5; merging columns 4 and 5:
type: text table
size: 3
rowsfrom: series[1..5]
colsfrom: series[1..5]
cell: R[2] C[2,4,5] { column_span: y } { text: N/A }

Note: These tags are intended to work with non-Modern based themes. If using themes such as Modern, Device Diverse, or Flex, you may need to apply mode: classic when including either option_span or column_span.

Conditionally targeting cells using placeholders

The condition decorator applies the cell tag to specific cells only when a condition is true. For example, in Q2A, cell: C[1] {text: N/A} replaces all cells in column 1 with "N/A." The condition limits this replacement to rows not selected in Q2.

In Q2B, a similar approach is used for a radio table. Here, [rid] is changed to [id] in the condition to reference table options instead of rows.

Creating multiple 'autoother' options in a table

To enable the "Other" option in a table, include the cell tag with the autoother placeholder decorator. In the example below, option 97 in the HEROES list uses the autoother decorator. Then, the R[*] placeholder is placed on the cell tag, indicating that the autoother placeholder and text should be pulled into every cell in the "Other" row. 

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.