akvo-react-form-editor
v2.0.1
Published
Survey editor for akvo-react-form
Downloads
24
Maintainers
Readme
akvo-react-form-editor
Survey Editor for generating Akvo React Form survey definition. View Demo
Install
Using NPM
npm install --save akvo-react-form-editor
Using Yarn
yarn add akvo-react-form-editor
Supported Question Type
| Type | Value | | ----------------------------- | --------------- | | Input Text | input | | Input Number | number | | Cascade Select | cascade | | TextArea | text | | Date | date | | Option | option | | Multiple Option | multiple_option | | Tree Select | tree | | Geolocation | geo | | Table (Multiple Question) | table | | Autofield (fn string) | autofield |
Usage
import React from 'react';
import 'akvo-react-form-editor/dist/index.css'; /* REQUIRED */
import WebformEditor from 'akvo-react-form-editor';
const Example = () => {
const onSave = (values) => {
console.log(values)
}
render() {
return <WebformEditor initialValue={{}} onSave={onSave} />;
}
}
API
WebformEditor
| Props | Description | Type | Default |
| --------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------- |
| onSave | Trigger after save button click | function(values)
| - |
| limitQuestionType | Support to limit question type available | Array[QuestionType] | undefined
| - |
| defaultQuestion | Support to set custom default new question type, name and required status | Object{defaultQuestion} | undefined
| - |
| initialValue | Set value by Form initialization (Required as empty object) | Object{initialValue} | {}
| - |
| settingCascadeURL | Value for Select Option on cascade question type | Array[settingCascadeURL] | undefined
| - |
| settingHintURL | Value for Hint / Validate question setting | Object{settingHintURL} | undefined
| - |
| customParams | Custom Parameters | Object{customParams} | undefined
|
Properties
Default Question (optional)
Default question should be defined as object.
| Props | Description | Type |
| ------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| type | Use one of QuestionType as default new question type | number
| input
| text
| option
| multiple_option
| cascade
| tree
| geo
|
| name | Set default new question title / name | String |
| required | Set new question required true
/false
by default | Boolean |
Example:
<WebformEditor
defaultQuestion={{
type: 'text',
name: 'New Question Title',
required: true,
}}
/>
Setting Cascade URL
Setting cascade URL should be defined as array of object. This value was used to fill Select Option value for cascade question type.
| Props | Description | Type |
| ------------ | ------------------------- | -------------------------------------------------------------------- |
| id | Unique id as option value | Integer |
| name | Shown as option label | String |
| endpoint | Cascade API | String |
| initial | Initial Parameter | Integer | String | undefined
|
| list | Object name of array | res.data?.[list]
| res.data
| String | undefined
| false
|
Example:
<WebformEditor
settingCascadeURL={[
{
id: 1,
name: 'Province',
endpoint:
'http://tech-consultancy.akvo.org/akvo-flow-web-api/cascade/seap/cascade-296940912-v1.sqlite',
initial: 0,
list: false,
},
]}
/>
Setting Hint URL
Setting Hint URL should be defined as array of object. This value was used to fill Select Option value for hint setting in a question.
Example:
<WebformEditor
settingHintURL={{
questionTypes: ['number'],
settings: [
{
id: 1,
name: 'JMP Explorer API',
endpoint: 'https://jmp-explorer.akvotest.org/api/hint',
path: [
{
label: 'Maximum',
value: 'max',
},
{
label: 'Minimum',
value: 'min',
},
{
label: 'Average',
value: 'mean',
},
{
label: 'Quantile 1',
value: 'q1',
},
{
label: 'Quantile 2',
value: 'q2',
},
{
label: 'Quantile 3',
value: 'q3',
},
],
},
],
}}
/>
Setting Hint URL Object
| Props | Description | Type |
| ----------------- | -------------------------------------------------- | -------------------------------------------------------------- |
| questionTypes | Value to limit hint setting for a certain question | Array[QuestionType] | undefined
|
| settings | Value for hint options | Array[Settings Parameters] |
Settings Parameters
| Props | Description | Type | | ------------ | ----------------------------------------------------------------------------------------------- | ------------------------------------------ | | id | Unique id as option value | Integer | | name | Shown as option label | String | | endpoint | Hint API | String | | path | Hint of object path provided by API which containt the value will be shown as a hint/validation | Array[Path Parameters] |
Path Parameters
| Props | Description | Type | | --------- | -------------------------- | ------ | | label | Label for the path options | String | | value | Value for the path options | String |
Initial Value (optional)
Webform initial value use the same format as Akvo React Form form structure. This value was used to load a form into Akvo React Form Editor to update that form definition.
Example: Initial Value Example
Custom Params
Custom parameters are key-value pairs that we can implement in the Webform Editor.
Example:
<WebformEditor
customParams={{
label: 'Set Custom Parameter',
params: [
{
name: 'params_name_a',
label: 'Single Option Param',
type: 'option',
multiple: false,
options: [
{ label: 'Option 1', value: 'SO1' },
{ label: 'Option 2', value: 'SO2' },
],
},
{
name: 'params_name_b',
label: 'Multiple Option Param',
type: 'option',
multiple: true,
options: [
{ label: 'Multiple Option 1', value: 'MO1' },
{ label: 'Multiple Option 2', value: 'MO2' },
],
},
{
name: 'params_name_c',
label: 'Input Param',
type: 'input',
},
],
}}
/>
Custom Parameters Setting
| Props | Description | Type |
| ---------- | ------------------------------- | ---------------------------------------------- |
| label | Label for the custom params tab | String | undefined
|
| params | List of custom parameters | Array[Custom Parameters] |
Custom Parameters
| Props | Description | Type |
| ------------ | ----------------------- | ------------------------------------------------------------- |
| name | Parameter name | String |
| label | Parameter label | String | undefined
|
| type | Field Type | option
| input
| number
|
| multiple | Whether multiple or not | Boolean |
| options | Parameter Options | Array[Option Parameters] | undefined
|
Option Parameters
| Props | Description | Type |
| --------- | ---------------------------- | --------------------- |
| label | Label for the params options | String | undefined
|
| value | Value for the params options | String |
License
AGPL-3.0 © akvo