root
/
public
mirror of https://github.com/01-edu/public.git
14
27
Fork 3
Code Releases Wiki Activity
Browse Source

update modular step doc with new input type countries, better form step example, rename subtypes (to form-step/sign step)

pull/83/head
Louise Foussat 5 years ago committed by Clément
parent
e10adba2f9
commit
2a0ae8159c
1 changed files with 45 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      docs/modular-steps-management.md

81
docs/modular-steps-management.md
unescape_control_characters View File

@ -36,7 +36,7 @@
<img width="1073" alt="Capture d’écran 2019-04-22 à 15 59 33" src="https://user-images.githubusercontent.com/35296671/56507445-3936ef00-6519-11e9-90c8-d85056e9330b.png">
* Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator'
* Add a new key **subtype** of type `String` with the exact value 'form-step'
* Add a new key **form** of type `Object`
* Form can have several sections. Each section is displayed with a title, and its inputs.
> NB: The submission of the form will check the required inputs of all the sections created for the form.
@ -48,13 +48,13 @@
> The values will be considered as the properties of your input.
#### Defining an input:
* A **type** key of type `String` must be declared. It defines the type of the input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`).
* A **type** key of type `String` must be declared. It defines the type of the input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea`, `countries`.
* All other attributes needed for the input can be added to the object, according to the input type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc...
#### Important indication:
* The **index** property is used to order the inputs. It will not be passed onto the input. Be mindful not to set the same index twice.
* The **type** property is required. It will be used to determine the kind of input should be generated. It is passed onto the input only if the input type attribute is required (type 'tel' or 'text' for example, but not for type 'select' - in this case, we will generate a select element)
* At the moment, our team is creating a special type 'countries' (a `Select` displaying all the countries). Documentation will be updated as soon as it is available.
* A special type 'countries' has been added to the classicals. It generate a `Select` (containing all the countries) with a search bar. 'Items' property is handled by the app.
* `onChange` prop are ignored as the event is handled by the app.
* For `switch` and `checkbox` input types, the default value has to be set as a boolean property named **value**.
* More information for each inputs is available in the design documentation:
@ -68,74 +68,83 @@
### Examples
Here is an example of the form step's attributes. It presents a form with two sections, and an example of each kind of input type.
> NB : this example object will soon be provided in the admin.
> NB : this example object is provided in the admin, in the onboarding section: 'Form step example'.
```json
{
"subtype": "onb-adm-form",
"subtype": "form-step",
"form": {
"section1": {
"title": "My section title",
"inputs": {
"firstName": {
"typeText": {
"index": 0,
"placeholder": "First name",
"placeholder": "Text placeholder",
"maxLength": 50,
"type": "text",
"required": true
},
"tel": {
"typeTel": {
"index": 1,
"required": true,
"type": "tel",
"label": "Phone number",
"label": "Tel label",
"placeholder": "+333 33 33 33 33",
"pattern": "[+][3][0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}"
},
"medicalInfo": {
"label": "Medical informations",
"index": 6,
"placeholder": "Medical Informations",
"typeTextArea": {
"label": "Textarea label",
"index": 7,
"maxLength": 250,
"placeholder": "Textarea placeholder",
"type": "textarea"
},
"dateOfBirth": {
"typeDate": {
"index": 2,
"required": true,
"type": "date",
"label": "Date of birth",
"label": "Date label",
"value": "2000-01-01"
},
"gender": {
"typeCountries": {
"index": 4,
"id": "countries",
"type": "countries",
"required": true,
"emptyItem": { "label": "Select your country label" }
},
"typeSelect": {
"index": 3,
"type": "select",
"id": "genders",
"id": "typeSelect",
"required": true,
"emptyItem": { "label": "Select your gender" },
"emptyItem": { "label": "Special emply item" },
"items": [
{ "label": "Male", "data": "male" },
{ "label": "Female", "data": "female" }
{ "label": "Item 1", "data": "item1" },
{ "label": "Item 2", "data": "item2" }
]
},
"environment": {
"index": 4,
"typeRadio": {
"index": 5,
"type": "radio",
"required": true,
"label": "Which environment do you live in ?",
"label": "Radio label - choose your radio",
"inlineBlock": true,
"items": [
{ "label": "City", "data": "city" },
{ "label": "Countryside", "data": "countryside" }
{ "label": "Radio 1", "data": "radio1" },
{ "label": "Radio 2", "data": "radio2" }
]
},
"programmingAbilities": {
"index": 5,
"typeSwitch": {
"index": 6,
"type": "switch",
"label": "I am new in programming",
"label": "Switch label",
"value": true
},
"generalConditions": {
"index": 7,
"typeCheckbox": {
"index": 8,
"type": "checkbox",
"label": "I have read and I accept the general conditions",
"label": "Checkbox label",
"value": false
}
}
@ -143,9 +152,9 @@ Here is an example of the form step's attributes. It presents a form with two se
"section2": {
"title": "My second section title",
"inputs": {
"firstName": {
"typeText": {
"index": 0,
"placeholder": "First name",
"placeholder": "Text placeholder",
"type": "text",
"required": true
}
@ -157,7 +166,7 @@ Here is an example of the form step's attributes. It presents a form with two se
This 'form' step would look like this:
![form step example](https://user-images.githubusercontent.com/35296671/56503976-012aae80-650f-11e9-82c8-dd7d026b6eb1.png)
![form step example](https://user-images.githubusercontent.com/35296671/56800060-1a36a680-6812-11e9-9357-28311046641e.png)
## Settings for a `document to sign` step
The newly created child can be customized with these attributes :
@ -176,7 +185,7 @@ The newly created child can be customized with these attributes :
1. Edit you step object
2. Go to *Object attributes*
3. Add the following attributes:
* Add a new key **subtype** of type `String` with the exact value 'onb-adm-sign'
* Add a new key **subtype** of type `String` with the exact value 'sign-step'
* Add a new key **text** of type `String` with the text of your document to sign as value
* Add a new key **buttonText** of type `String` with the text that you want to display in the submit button of your step. Default value for this attribute is 'Sign'.
* Add a new key **checkbox** of type `Object`, if the user has to be forced to click on a checkbox before validating his document (ex: 'I have read and accepted the conditions'). In the checkbox object, the following attributes should be defined:
@ -191,7 +200,7 @@ Here is an example of the structure a 'document to sign' step could have:
```json
{
"subtype": "onb-adm-sign",
"subtype": "sign-step",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare non sem eu pretium. Integer porttitor risus eget nibh iaculis, ac lacinia orci dictum. Nunc ullamcorper consequat enim in posuere. Aliquam volutpat est odio, vel maximus arcu maximus sit amet. Donec ultricies faucibus magna id luctus. Duis et dapibus elit. In vestibulum ipsum erat, at commodo tortor convallis vel. Nunc ut ultrices nulla. Etiam lorem justo, consequat a consectetur a, porttitor non turpis. Mauris eu mollis nisl, id dignissim quam. Curabitur condimentum sollicitudin rutrum. Aenean blandit, arcu nec ullamcorper rhoncus, lectus sem lacinia lorem, venenatis dignissim velit mi et sapien. Nullam posuere augue ut magna ullamcorper dignissim. Ut rhoncus sapien vel nulla commodo finibus. Cras non leo vel urna finibus volutpat. Praesent et ex eget diam tincidunt suscipit. Phasellus bibendum neque vel placerat iaculis. Vestibulum bibendum ultrices ipsum, non sodales lectus. Cras eget orci eget elit blandit scelerisque at ut nulla. Integer ligula eros, eleifend quis sodales a, porttitor sit amet neque. Fusce mollis magna at lectus varius, quis suscipit mi cursus. Etiam id imperdiet metus, in malesuada quam. Aliquam facilisis nunc non sapien condimentum, quis iaculis nisl auctor. Nunc lorem sapien, interdum vel efficitur ac, dapibus a diam. Ut ante urna, sodales in bibendum vel, lacinia ut mauris. In vel placerat leo. In libero dui, tincidunt at sem id, faucibus sollicitudin elit.",
"buttonText": "Sign chart",
"checkbox": {

Write Preview
Loading…
Cancel
Save