diff --git a/docs/operate/customize/metadata/custom_fields/widgets.md b/docs/operate/customize/metadata/custom_fields/widgets.md index c4d866f6..2de8f2af 100644 --- a/docs/operate/customize/metadata/custom_fields/widgets.md +++ b/docs/operate/customize/metadata/custom_fields/widgets.md @@ -4,6 +4,28 @@ _Introduced in v10_ The following document is a reference guide for all the React UI widgets available for custom fields. +## Common props + +These props are applicable to all widgets. In the reference below, only props additional to these are shown for each widget. + +- **fieldPath** `String` _required_: The path to the field e.g. `cern:experiment`. + +- **label** `String` _required_: The label for the element's display. This is used whenever the field should be displayed e.g. upload form, landing page etc. + +- **labelIcon** `String` _optional_: The optional icon that your field might have. The value should be one of the [Semantic UI icons](https://react.semantic-ui.com/elements/icon/). + - Previously known as **icon**. + +- **placeholder** `String`: The placeholder for the element's display. You should fill this in with an example value. + +- **helpText** `String` _required_: The description for the element's display. You should provide useful information on how the users should fill this field in. + - Previously known as **description**. + +- **required** `Boolean` _optional_: Define if the field should be required i.e. display the `*` symbol. + +- **disabled** `Boolean` _optional_: Define if the field should be displayed as disabled thus no input can be filled. + +- **hidden** `Boolean` _optional_: Define if the field should be hidden completely. Hiding a field will still retain any value that it already contained. + ## Input An input field for a single string value. @@ -14,29 +36,13 @@ An input field for a single string value. ``` -### Props - -- **fieldPath** `String` _required_: The path to the field e.g. `cern:experiment`. - -- **label** `String` _required_: The label for the element's display. This is used whenever the field should be displayed e.g. upload form, landing page etc. - -- **placeholder** `String` _required_: The placeholder for the element's display. You should fill this in with an example value. - -- **description** `String` _required_: The description for the element's display. You should provide useful information on how the users should fill this field in. - -- **icon** `String` _optional_: The optional icon that your field might have. The value should be one of the [Semantic UI icons](https://react.semantic-ui.com/elements/icon/). - -- **required** `Boolean` _optional_: Define if the field should be required i.e. display the `*` symbol. - -- **disabled** `Boolean` _optional_: Define if the field should be displayed as disabled thus no input can be filled. - ## NumberInput An input field for numbers e.g. integers, float etc. @@ -47,29 +53,13 @@ An input field for numbers e.g. integers, float etc. ``` -### Props - -- **fieldPath** `String` _required_: The path to the field e.g. `cern:experiment`. - -- **label** `String` _required_: The label for the element's display. This is used whenever the field should be displayed e.g. upload form, landing page etc. - -- **placeholder** `String` _required_: The placeholder for the element's display. You should fill this in with an example value. - -- **description** `String` _required_: The description for the element's display. You should provide useful information on how the users should fill this field in. - -- **icon** `String` _optional_: The optional icon that your field might have. The value should be one of the [Semantic UI icons](https://react.semantic-ui.com/elements/icon/). - -- **required** `Boolean` _optional_: Define if the field should be required i.e. display the `*` symbol. - -- **disabled** `Boolean` _optional_: Define if the field should be displayed as disabled thus no input can be filled. - ## MultiInput An input field for multiple string values. @@ -80,27 +70,15 @@ An input field for multiple string values. ``` -### Props - -- **fieldPath** `String` _required_: The path to the field e.g. `cern:experiment`. - -- **label** `String` _required_: The label for the element's display. This is used whenever the field should be displayed e.g. upload form, landing page etc. - -- **placeholder** `String` _required_: The placeholder for the element's display. You should fill this in with an example value. - -- **description** `String` _required_: The description for the element's display. You should provide useful information on how the users should fill this field in. - -- **icon** `String` _optional_: The optional icon that your field might have. The value should be one of the [Semantic UI icons](https://react.semantic-ui.com/elements/icon/). - -- **required** `Boolean` _optional_: Define if the field should be required i.e. display the `*` symbol. +### Additional props - **additionLabel** `String` _optional_: The label to show when a user is adding a new value. @@ -118,24 +96,14 @@ A rich input field for HTML text, with a WYSIWYG editor. ``` -### Props - -- **fieldPath** `String` _required_: The path to the field e.g. `cern:experiment`. - -- **label** `String` _required_: The label for the element's display. This is used whenever the field should be displayed e.g. upload form, landing page etc. - -- **description** `String` _required_: The description for the element's display. You should provide useful information on how the users should fill this field in. - -- **icon** `String` _optional_: The optional icon that your field might have. The value should be one of the [Semantic UI icons](https://react.semantic-ui.com/elements/icon/). - -- **required** `Boolean` _optional_: Define if the field should be required i.e. display the `*` symbol. +### Additional props - **editorConfig** `Object` _optional_: The config to pass to the underlying HTML WYSIWYG editor as described in the [CKEditor configuration](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html) page. @@ -149,24 +117,12 @@ An input field for multi line text.