-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #53 from i-VRESSE/table-widget
Table widget
- Loading branch information
Showing
13 changed files
with
727 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| # UI schema | ||
|
|
||
| The global and node parameters are edited in a form generated from the JSON schema. | ||
| To customize the look and feel of the form the `uiSchema` can be defined in the catalog. | ||
| For example rendering a radio group or a text area can be done by filling the `uiSchema`. | ||
|
|
||
| The [react-json-schema-form](https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/uiSchema/) docs describes the uiSchema format and which built-in fields are avaiable. | ||
|
|
||
| Besides the built-in react-json-schema-form uiSchema fields, the workflow builder adds the following: | ||
|
|
||
| ## ui:field: collapsible | ||
|
|
||
| An property of type object can be rendered as a collapsible sub-form with | ||
|
|
||
| ```json | ||
| { | ||
| "prop1": { | ||
| "ui:field": "collapsible" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| This will render the children of `prop1` in a initially collapsed sub-form. | ||
| To expand press the expand icon button. | ||
|
|
||
| ### Initially expanded | ||
|
|
||
| Render the sub-form initially expanded with | ||
|
|
||
| ```json | ||
| { | ||
| "prop1": { | ||
| "ui:field": "collapsible", | ||
| "ui:collapsed": true | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Or alternativly using `ui:options` with | ||
|
|
||
| ```json | ||
| { | ||
| "prop1": { | ||
| "ui:field": "collapsible", | ||
| "ui:options": { | ||
| "collapsed": true | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## ui:group | ||
|
|
||
| ```json | ||
| { | ||
| "prop1": { | ||
| "ui:group": "<group name>" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Any property with a group uiSchema field will be grouped together with other properties with the same group in the form. The generated toml file will have the props ungrouped. | ||
| The group will also be collapsible and collapsed by default. | ||
|
|
||
| ## ui:field: table | ||
|
|
||
| A property which is an array of objects can be rendered as a table with | ||
|
|
||
| ```json | ||
| { | ||
| "prop1": { | ||
| "ui:field": "table" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Each array item will be a row and each object property will be a column. | ||
| The header cells show the title of the property together with a popup for the description. | ||
| The other cells show the property without any titles or descriptions. | ||
|
|
||
| ### Column widths | ||
|
|
||
| The column widths can be customized. | ||
|
|
||
| For example given an array of objects with properties `prop2` and `prop3`. To make `prop3` column have `40%` of the total table width use: | ||
|
|
||
| ```json | ||
| { | ||
| "prop1": { | ||
| "ui:field": "table", | ||
| "ui:options": { | ||
| "widths": { | ||
| "prop3": "40%" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.