Enhancing AARI Table Fields

Table Operations

Reading All Rows in a Table

  1. Add the β€œRead AARI Table Field” brick

  2. ⚠️ If you are using the brick in a Trigger, set the Root Mode of the brick to Document. If set to Inherit, PixieBrix will not find the table because it will search within the element that triggered the event

Setting Cell Values in a Table

  1. Add the β€œSet AARI Table Field Values” brick

  2. ⚠️If you are using the brick in a Trigger, set the Root Mode of the brick to Document. If set to Inherit, PixieBrix will not find the table because it will search within the element that triggered the event

Handling Row Clicks

  1. Add a Click handler targeting the table field, e.g., #Table1 tbody tr

  2. When you click the row, the output of the brick with be available as an array at @row.values

Reading a Column by Name

  1. Add the "Read AARI Table Field Column” brick

  2. Provide the table selector based on the field name of the table, e.g., #Table1

  3. Provide the column heading to read, e.g., Column 1

  4. ⚠️If you are using the brick in a Trigger, set the Root Mode of the brick to Document. If set to Inherit, PixieBrix will not find the table because it will search within the element that triggered the event

Highlighting Cells

  1. Add the β€œHighlight AARI Table Cells” brick

  2. ⚠️If you are using the brick in a Trigger, set the Root Mode of the brick to Document. If set to Inherit, PixieBrix will not find the table because it will search within the element that triggered the event

Appending a Row to a Table

  1. Add the β€œAppend AARI table row” brick

  2. Provide the table selector based on the field name of the table, e.g., #Table1

  3. Provide an array of values to write in the new row. You can also pass an array of values

  4. ⚠️ If you are using the brick in a Trigger, set the Root Mode of the brick to Document. If set to Inherit, PixieBrix will not find the table because it will search within the element that triggered the event

Table Validation and Calculations

Example: Checking Aggregate Values

  • Add the @pixiebrix/jq brick

  • Pass the output key of the β€œRead AARI Table Field” brick for the data property

  • The check if the value in the last row is equal to the sum of the proceeding columns, use the following jq filter:

    PropertyValue

    filter

    (.rows[-1]["Column 1"] | tonumber) == (.rows[0:-1] | map(.["Column 1"] | tonumber) | add)

    data

    @table

The (.rows[-1]["Column 1"] | tonumber) expression gets the value in the last row and converts it to a number

The (.rows[0:-1] | map(.["Column 1"] | tonumber) | add) expression gets the proceeding rows, converts the value in Column 1 to a number, and sums the values

Example: Multi-Column Validation

  • Add the @pixiebrix/jq brick

  • Pass the output key of the β€œRead AARI Table Field” brick for the data property

  • To report rows where the value in β€œColumn 1” is greater than the value in β€œColumn 2”, use the following jq filter:

    PropertyValue

    filter

    .rows | map((.["Column 1"] | tonumber) > (.["Column 2"] | tonumber)) | to_entries | map(select(.value)) | map({row: .key, column: 1})

    data

    @table

.row |

# Map to an array of true/false with the condition
map((.["Column 1"] | tonumber) > (.["Column 2"] | tonumber)) |

# Map to an array of records with {key: <row index>, value: <condition>}
to_entries |

# Exclude entries where the condition is false
map(select(.value)) | 

# Map to an array of rows/columns indexes (e.g., to pass to the Highlight AARI Table Cells brick)
map({row: .key, column: 1})
  • Pass the output of the jq brick to the Highlight AARI Table Cells brick

Writing Table Selectors

Table Selectors

The AARI Table Fields can each be targeted with a selector corresponding to the field in the form #Table0, #Table1

Column Selectors

To target a particular column in the table, you can:

  • Target the column id: #Table1 td:has(#Table1_col0-defaultValue). NOTE: the column id is not necessarily the column index. The column id is dependent on which order the the columns were added during AARI form creation

  • Target the column by index (1-indexed): #Table1 td.preview-table__body-column:nth-child(1)

Known Limitations

β€œAttach Autocomplete” brick fills multiple cells when a value is selected

There is a known issue when selecting a value from Attach Autocomplete brick that it fills all the inputs matching the selector. (I.e., as opposed to only filling the input for which the autocomplete was shown)

Last updated