public/doc/modular-steps-management.md

Sign up & onboarding's Administration section - Modular steps management

Usage

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.

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

---

To create a step, you must:

1. Create a new object for your step in the admin (in Admin > Add new object)

   ́cran 2019-04-22 à 15 57 37" src="https://user-images.githubusercontent.com/35296671/56507169-6505a500-6518-11e9-89bb-04c7fd9b41ca.png"/> ́cran 2019-04-22 à 15 58 21" src="https://user-images.githubusercontent.com/35296671/56507180-6afb8600-6518-11e9-97a5-4dcff8f0a069.png"/>
   • 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").

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

   1. Edit the parent object (Sign up or Administration)

      ́cran 2019-04-22 à 19 24 23" src="https://user-images.githubusercontent.com/35296671/56517407-cb98bc00-6534-11e9-98d6-a2b1c0193a38.png"/> ́cran 2019-04-22 à 19 24 10" src="https://user-images.githubusercontent.com/35296671/56517421-d0f60680-6534-11e9-86ef-97fb9e59786e.png"/>

   2. Go to Children > Add a child

      

   3. Set up the new child:

      • Enter its name in the input "Add a child name"
      • Select your step object in the select input
      • Click on "ADD"

Your step is then related to its parent. You can see it in the Children section of the parent object. There, you can now :

• Delete the step as a child of its parent (the actual object of your step won't be deleted)
• Reorder it in the children's list, by dragging it to the place you cant
• Go to update its settings by clicking on the eye of its reference (it will redirect you to the actual object of your step). ́cran 2019-04-22 à 19 51 12" src="https://user-images.githubusercontent.com/35296671/56518936-a1e19400-6538-11e9-81c7-520ffd365cff.png"/>

Settings for a form step

In the step object you've created, 2 attributes must be filled:

1. subtype
2. form

Description

Edit the step object you've created :

1. Go to Object attributes

   ́cran 2019-04-22 à 15 59 33" src="https://user-images.githubusercontent.com/35296671/56507445-3936ef00-6519-11e9-90c8-d85056e9330b.png"/>

2. Add the attributes:

   • 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.

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.

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 :
  • textInput documentation - used for inputs type 'text', 'tel', and 'date'
  • textArea documentation
  • select documentation
  • radio button documentation
  • switch documentation
  • checkbox documentation

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.

{
  "subtype": "onb-adm-form",
  "form": {
    "section1": {
      "title": "My section title",
      "inputs": {
        "firstName": {
          "index": 0,
          "placeholder": "First name",
          "type": "text",
          "required": true
        },
        "tel": {
          "index": 1,
          "required": true,
          "type": "tel",
          "label": "Phone number",
          "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",
          "type": "textarea"
        },
        "dateOfBirth": {
          "index": 2,
          "required": true,
          "type": "date",
          "label": "Date of birth",
          "value": "2000-01-01"
        },
        "gender": {
          "index": 3,
          "type": "select",
          "id": "genders",
          "required": true,
          "emptyItem": { "label": "Select your gender" },
          "items": [
            { "label": "Male", "data": "male" },
            { "label": "Female", "data": "female" }
          ]
        },
        "environment": {
          "index": 4,
          "type": "radio",
          "required": true,
          "label": "Which environment do you live in ?",
          "inlineBlock": true,
          "items": [
            { "label": "City", "data": "city" },
            { "label": "Countryside", "data": "countryside" }
          ]
        },
        "programmingAbilities": {
          "index": 5,
          "type": "switch",
          "label": "I am new in programming",
          "value": true
        },
        "generalContions": {
          "index": 7,
          "type": "checkbox",
          "label": "I have read and I accept the general conditions",
          "value": false
        }
      }
    },
    "section2": {
      "title": "My second section title",
      "inputs": {
        "firstName": {
          "index": 0,
          "placeholder": "First name",
          "type": "text",
          "required": true
        }
      }
    }
  }
}

This 'form' step would look like this:

Settings for a document to sign step

In the child object you've created, 2 attributes must be filled:

1. subtype
2. text
3. buttonText (facultative)
4. checkbox (facultative)

Description

To set up the child object you've created with these elements:

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 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 you want to display in the submit button of your step. If you don't fill this property, the default value if 'Sign'.
   • Add a new key checkbox of type Object, if you want to force your user to click on a checkbox before validating his document (ex: 'I have read and accepted the conditions'). In the checkbox object, you should define:
     • A label key of type String, with the text you want to associate to the checkbox
     • A required key of type Boolean, set at true if you want to force the user to check it
     • A name key of type String
     • Then you can add all other properties you want to your checkbox.

Examples

Here is an example of the structure a 'document to sign' step could have:

{
  "subtype": "onb-adm-sign",
  "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": {
    "name":"acceptChart",
    "label":"I have read and accepted the Chart 01",
    "required":true
  }
}

This 'document to sign' step would look like this: