AX1056
Formatted Grid components support interactivity in the following ways:
-
The selected row in the grid can be submitted back to the source file to impact another component, such as to change the data displayed in a chart based on the currently selected row.
-
Individual cells in the grid can be flagged as editable, so that the changed contents of the cell are submitted back to the source file. This can support basic user inputs.
-
Special content tags are available to present certain interactive controls within individual cells, such as drop-down lists and check boxes. These items will either submit changed contents back to the source file or perform an action, depending on the specific tags used.
For general information on setting up interactive components for an Axiom form, see Using interactive components in an Axiom form.
If the [RowID] column is used in the data source, then users viewing the Axiom form can select a row in the grid. The selected row becomes highlighted in the form, and the selected row is submitted back to the source file, using the value in the [RowID] column. The selected row ID is written to the Selected Row ID setting on the Form Control Sheet.
If you want the Axiom form to respond to the currently selected row, then you must set up the file so that another component references the selected row ID and changes based on it.
For example, an Axiom form could contain a chart that dynamically changes data based upon the currently selected row in a grid. The row IDs in the grid could contain region names, like North, South, etc. When a user selects the row with an ID of North, that selection is written back to the source file.
The chart could then reference that value to filter the data in the file, or to show the appropriate series for the selected value. So as the user selects rows in the grid, the chart updates to show data relating to the selected row.
Note the following when setting up the row IDs:
- Row IDs must be unique. Only one row in the grid can be selected. If IDs are not unique, the grid will not behave as expected.
- If a row does not have a row ID (the cell is blank), then that row is not selectable. Clicking on that row will not result in a row ID being written back to the source file.
- Rows tagged with
[Fixed]are not selectable, regardless of whether the row has a row ID. Clicking on a fixed row will not result in a row ID being written back to the source file.
The appearance of the hover row and the selected row is determined by the style or skin (in that order).
If any cells in the grid are unlocked, then users viewing the Axiom form can edit the contents of that cell. The changed contents are submitted back to the source file, to the corresponding cell in the data source on the sheet.
The determiner of whether a cell can be edited is the cell's locked status (Locked must be unchecked in the cell properties). The unlocked cell is displayed in the grid as a text box. If the cell uses a numeric format, then it will be treated as a numeric text box without a defined range. Otherwise, the cell is treated as a regular text box.
In some cases you may want the editable cell to display as a normal cell by default, and only render as an editable text box when the user clicks into it. To achieve this effect, you can use a special column style named click-to-edit. This style requires the form to use the Web Client Container.
In most cases, editable cells are used to save the user's inputs to the database (although it can also be used to simply impact the contents of the form in some way). If saving edited data to the database, remember that the file itself is not saved. For more information, see Saving data from an Axiom form.
Alternatively, the TextArea content tag can be used to present editable cells to users in an Axiom form. The content tag provides greater control over the display and behavior of the editable cell. For more information, see Using text boxes in Formatted Grids.
Formatted grids support a series of content tags that can be used to format cell content and apply special features to a cell. Content tags can be used to present user inputs within a grid—such as combo boxes, text boxes, and check boxes—as well as to display symbols or hyperlinks. These tags have no effect in the source file, but when the Axiom form is rendered, the cell will display according to the content tag configuration.
The content tags can be used in any cell that falls within the data source for the formatted grid. The tags use the following basic syntax:
[FormatTag;Parameter1=Value;Parameter2=Value]
Where the FormatTag is the tag that defines what you want to display in the cell, with one or more parameters specific to that tag separated by semicolons.
For more information, see Using content tags in Formatted Grids.
Design considerations
One of the most important design considerations when working with interactive formatted grids is whether the data in your grid is being sourced using an Axiom query.
For example, imagine that you have set up an editable cell in a grid that is being populated by an Axiom query. When a user edits the cell in the Axiom form, the change is submitted back to the source file (either by the grid being set to Auto-Submit or by using a separate Button component). However, after the changed values are submitted, the source file is refreshed, including running Axiom queries. If the query that populates the formatted grid is run at this time, then it will simply overwrite the edit made by the end user. This means you must carefully think about when each Axiom query should be run, and configure the refresh options and/or active status of the query to achieve the desired results.
You may want to use the Triggering Component setting on the Form Control Sheet to control when an Axiom query should be run. When an update is triggered for an Axiom form, the name of the component that triggered the update is written to this field. For example, if a formatted grid is set to Auto-Update and a user edits a cell in that grid, then when the form is updated as a result of this change the triggering component is set to the name of the formatted grid. You can set up a formula in the Axiom query settings so that the query is inactive when the triggering component is that formatted grid, and therefore the query will not run when the update occurs.
Alternatively you may be saving the user's inputs to the database, and therefore you want to run the query only in the following circumstances:
- When the form is first opened by the user, to initially populate the formatted grid.
- After data is saved to the database, to repopulate the formatted grid to include the recently saved data.
You can achieve this behavior by setting the refresh options for the Axiom query as follows:
You could also use a combination of these options—for example you might toggle the Refresh on manual refresh option on or off depending on whether the update was triggered by the formatted grid or not.
