> After their first authentication in the app, every candidate has to effectuate his **sign up** and his **onboarding**. The steps that compose the **sign up** and the **administration** section of the onboarding are:
> * Of two kinds:
> * forms (identification, medical information, etc.)
> * documents to sign (general conditions, charts, regulations, etc.)
> * Modular: you can add, update, delete and order it as you wish.
> After their first authentication in the app, every candidate has to do his **sign up** and his **onboarding**. The steps that compose the **sign up** and the **administration** section of the onboarding are either:
> * Forms (identification, medical information, etc.)
> * Documents to sign (general conditions, charts, regulations, etc.)
>
> All the sections are modular: you can add, update, delete and order them as you wish.
>
> This documentation explains how to manage these steps.
## Create a step
Every step that you want to create must :
* Be related as a child to the correct parent object in the *Admin*
* Steps related to the Sign up -> *Admin* > *Objects* > *SignUp* > ***Sign Up***
* Steps related to the onboarding's Administration section -> *Admin* > *Objects* > *Onboarding* > ***Administration***
* Be defined with the correct object **type**
* Steps related to the Sign up -> type **sign up**
* Steps related to the onboarding's Administration section -> type **onboarding**
---
## Creating a step:
### Create a new object for your step in the admin
> (in *Admin* > *Add new object*)
#### To create a step, you must:
1. Create a new object for your step in the admin (in *Admin* > *Add new object*)
* The title of your object will be the title displayed to your candidates (for the step you're creating). Use a intellegible title for your user.
* NB : you can always edit it in the *Admin*
* This object must have the same type as its future parent object ("signup" or "onboarding").
* The title of your object will be the title displayed to your candidates (for the step you are creating). Use an intellegible title for your user.
> NB: you can always edit it in the *Admin*
* This object must have the same type as its future parent object ("signup" or "onboarding").
> Your step is then available in the *Admin*. You can find it in the section of its type (*SignUp* or *Onboarding*) or thanks to the search bar of the cursus object's page.
2. Add this new object as a child of your parent object
### Add this new object as a child of your parent's object
1. Edit the parent object (*Sign up* or *Administration*)
#### 1. Edit the parent object (*Sign up* or *Administration*)
* Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator'
* Add a new key **form** of type `Object`
* The form you're creating 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 you've created for the form.
* To create a section, add a new key to your form object, of type `Object`, that contains :
* A **title** key of type `String`. The value of this property will be the title displayed in the top of your form section.
* If you have only one section in your form step, and you don't need a section title, you don't have to set up this property.
* An **inputs** key of type `Object`, which will contain all the inputs of the section. For each input you want to add, you must set up the input as this :
* Add a new `Object` element in the "inputs" object. The key of this object will be used as the "name" attribute of your input. The values will be considered as the props of your input.
* Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator'
* Add a new key **form** of type `Object`
* The form you are creating 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 you have created for the form.
* To create a section, add a new key to your form object, of type `Object`, that contains:
* A **title** key of type `String`. The value of this property will be the title displayed in the top of your form section.
> If you have only one section in your form step, and you don't need a section title, you do not have to set up this property.
* An **inputs** key of type `Object`, which will contain all the inputs of the section. For each wanted input, add a new `Object` element in the "inputs" object.
> The key of this object will be used as the "name" attribute of your input.
> The values will be considered as the properties of your input.
#### Set up of an input props:
* You must declare a **type** key of type `String`, wich define the type of your input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`).
* Then you can fill the props you need for your input, according to its type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc.
#### Defining an input:
* You must declare a **type** key of type `String`, which define the type of your input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`).
* Then you can fill the props you need for your input, according to its type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc...
#### Important indication:
* The **index** property is used to order your inputs. It won't be spread in the input. But be careful not to set the same index two times.
* The **type** property is resquired. It will be used to determine the kind of input we must generate. It is spread in 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, we're creating a special type 'countries' (select displaying all the countries). Documentation will be updated as soon as it's available.
* Don't declare an **onChange** in your props, the event is handled by the app. It would break the functioning of the form.
* For switch and checkbox inputs type, you have to set the default value as a boolean property named **value**.
* For more informations, each input type has its own attributes. You can check how to set up your inputs in the design documentation :
* The **index** property is used to order your 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 we must generate. 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, we are creating a special type 'countries' (a `Select` displaying all the countries). Documentation will be updated as soon as it is available.
* `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:
* [textInput documentation](https://alem.01-edu.org/design/Components/FormInputs/TextInput) - used for inputs type 'text', 'tel', and 'date'
Frenchris
5 years ago
committed by