Skip to content

Commit

Permalink
Update(bonita-camp-FR): update exercises FR DAY 1
Browse files Browse the repository at this point in the history 
- modify structure and change images with Bonita 2021.1
  • Loading branch information
dcoille committed Oct 7, 2021
1 parent d402d4d commit 8e325b9
Show file tree
Hide file tree
Showing 12 changed files with 621 additions and 0 deletions.
166 changes: 166 additions & 0 deletions docs/fr/07-data-contract-deep.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
---
title: Exercice 2 - Ajout de données et spécification de contrats
---

## Objectif

L'objectif de cet exercice est de continuer l'implémentation du processus de demande de congés en :

1. Configurant un modèle de données métier communément appelé BDM (Business Data Model)
1. Spécifiant des contrats pour l'instanciation du processus et l'exécution des étapes humaines

Une fois complété, le processus sera exécutable avec des formulaires générés automatiquement permettant la saisie de données.

> ⚠ Il est important de respecter strictement la casse et la syntaxe des noms techniques fournis dans les instructions.
## Instructions résumées

Dupliquer le diagramme de processus de l'exercice précédent pour créer une version 2.0.0.

Créer un objet BDM *DemandeConges* (il s'agit d'un nom technique, il faut donc omettre les espaces, accents et autres caractères spéciaux) avec les attributs suivants (n'utilisez pas l'option **Multiple**):

Nom | Type | Multiple | Obligatoire
--- | ---- | -------- | -----------
*idDemandeur* | `Long` | ◻ | ☑
*dateDebut* | `Date only` | ◻ | ☑
*nombreJours* | `Entier` | ◻ | ☑
*estApprouvee* | `Booléen` | ◻ | ◻

Déclarer une variable métier *demande* de type *DemandeConges* sur le pool.

À l'aide de l'assistant du Studio (i.e. **Ajouter à partir de données...**), générer un contrat d'instanciation ainsi que le script d'initialisation de la variable métier en utilisant la variable métier *demande* et en incluant donc les éléments suivants :

- dateDebut
- nombreJours

Ajouter les deux contraintes suivantes sur le contrat d'instanciation :

- *dateDebut* doit être dans le futur
- *nombreJours* doit être strictement supérieur à zéro

Initialiser le BDM *demande* en utilisant la génération automatique à partir du contrat.

Ajouter un contrat sur l'étape *Valider demande* en utilisant l'assistant avec l'élément suivant :

- estApprouvee

## Instructions pas à pas

1. Dupliquer le diagramme de processus existant pour créer une version *2.0.0* :
- Dans le menu supérieur du Studio, cliquer sur **Fichier / Dupliquer le diagramme...**
- Mettre à jour les numéros de version du diagramme ET du processus (pool)
1. Créer le BDM *DemandeConges* :
- Naviguer dans le menu **Développement / Modèle de Données Métier / Définir...** L'éditeur de Modèle de données métier s'ouvre.
- Renommer l'objet initialisé par défaut **BusinessObject** dans la liste d'objets métiers en *DemandeConges* (A) (il s'agit d'un nom technique, il faut donc omettre les espaces, accents et autres caractères spéciaux)
- Avec l'objet *DemandeConges* sélectionné, ajouter les attributs suivants (B) :

Nom | Type | Multiple | Obligatoire
--- | ---- | -------- | -----------
*idDemandeur* | `Long` | ◻ | ☑
*dateDebut* | `Date only` | ◻ | ☑
*nombreJours* | `Integer` | ◻ | ☑
*estApprouvee* | `Boolean` | ◻ | ◻

![définition du modèle de données métier](images/ex02/ex2_01.png)

- Sauvegarder. Le message suivant s'affiche pour indiquer qu'il faut déployer le BDM

![message d'information déploiement du BDM](images/ex02/ex2_09.png)

- Cliquer sur le bouton ![icone déploiement](images/ex02/ex2_11.png) dans l'éditeur de BDM pour déployer le BDM.
Le message suivant indique que le BDM a été déployé avec succès.

![message déploiement réussi du BDM](images/ex02/ex2_10.png)

- Cocher l'option **Ne plus me montrer ce message**
- Cliquer sur **Ok**
1. Déclarer une variable métier de type *DemandeConges* dans le processus :
- Sélectionner le pool du processus
- Naviguer dans l'onglet **Données / Variables du pool**
- Cliquer sur **Ajouter...** dans la section **Variables métier**
- Nommer la variable *demande* et sélectionner le type d'objet métier *com.company.model.DemandeConges*
- Cliquer sur **Terminer**

![déclaration d'une variable métier](images/ex02/ex2_02.png)

1. Configurer le contrat d'instanciation :
- Sélectionner le pool de processus
- Naviguer dans l'onglet **Exécution / Contrat / Entrées**
- Cliquer sur le bouton **Ajouter à partir de données...**
- Sélectionner la variable métier *demande*
- Garder le nom par défaut *demandeInput*
- Cliquer sur **Suivant**
- Décocher les attributs *idDemandeur* et *estApprouvee*

![assistant de définition de contrat](images/ex02/ex2_03.png)

- Cliquer sur **Terminer** (pas sur **Terminer & Ajouter**) et ignorer les messages d'avertissement concernant l'initialisation partielle de la variable métier

![contrat défini pour le démarrage du processus](images/ex02/ex2_04.png)

- Toujours dans l'onglet **Exécution / Contrat**, basculer dans l'onglet **Contraintes**
- Ajouter la contrainte suivante :

Propriété | Valeur
--------- | ------
Nom | dateDebutDansFutur
Expression | `demandeInput.dateDebut.isAfter(java.time.LocalDate.now())`
Message d'erreur | La date de début doit être dans le futur

- Ajouter une seconde contrainte :

Propriété | Valeur
--------- | ------
Nom | auMoinsUnJour
Expression | `demandeInput.nombreJours > 0`
Message d'erreur | Le nombre de jours doit être supérieur à zéro

![définition de contraintes](images/ex02/ex2_05.png)

1. Modifier l'initialisation de la variable métier *demande* pour pouvoir récupérer l'initiateur de la nouvelle demande :
- Sélectionner le pool du processus et naviguer dans l'onglet **Données / Variables du pool**
- Sélectionner la variable *demande*
- Cliquer sur **Modifier...**
- Cliquer sur l'icône **crayon** associé au champ **Valeur par défaut** pour ouvrir l'éditeur d'expression. Le script a déjà été initialisé.
- Dans le menu de gauche, sélectionnez **Modèles de code/Utilisateurs Bonita** (A) et faites glisser le modèle *processInitiatorUser* avant la dernière ligne commençant par `return
Le script permettant de récupérer l'instance du processus et l'initiateur est créé automatiquement.
- Saisissez `demandeCongesVar.idDemandeur = processInitiator.id` pour récupérer l'id de l'initiateur de l'instance dans l'attribut *idDemandeur* (B).

![editeur expression script](images/ex02/ex2_12.png)

- Le script va initialiser la variable métier en utilisant les données du contrat et l'identifiant de l'auteur de la demande
- Cliquer sur le bouton **OK** pour fermer l'éditeur d'expression
- Cliquer à nouveau sur le bouton **OK** pour valider la modification de la variable métier
1. Configurer le contrat de l'étape *Valider demande* :
- Sélectionner l'étape *Valider demande*
- Naviguer dans l'onglet **Exécution / Contrat / Entrées**
- Cliquer sur le bouton **Ajouter à partir de données...**
- Sélectionner la variable métier *demande*, garder le nom de l'input par défaut *demandeInput*
- Cliquer sur **Suivant**
- Sélectionner seulement l'attribut *estApprouvee*
- Cliquer sur **Terminer** (et pas sur **Terminer & Ajouter**) et ignorer les messages d'avertissement concernant l'initialisation partielle de la variable métier
1. Noter qu'une opération (**Exécution / Opérations**) sur la tâche *Valider demande* pour mettre à jour la demande a automatiquement été générée

![opération générée automatiquement](images/ex02/ex2_06.png)

1. Configurer la condition sur la transition *Oui* à partir de l'attribut *estApprouvee* du BDM *demande* :
- Sélectionner la transition *Oui*
- Naviguer dans l'onglet **Général / Général**
- Cliquer sur l'icône crayon à côté du champ **Condition** pour ouvrir l'éditeur d'expression
- Dans l'éditeur d'expression, sélectionner **Java** comme type d'expression
- Sélectionner la variable *demande* et la méthode *isEstAprouvee*

![utilisation de variable métier pour définir la condition d'une transition](images/ex02/ex2_07.png)

1. Enregistrer le processus :
- Cliquer sur le bouton **Enregistrer** de la barre de menu supérieur du Studio
1. Exécuter le processus et tester les contraintes des contrats :
- Lancer le processus et remplir les formulaires automatiquement générés

> ℹnformation :
> - pour le champ *dateDebut*, le format de date attendu est AAAA-MM-JJ
> - pour le champ *estApprouvee*, une valeur booléenne est attendue : soit `true` ou `false`
![formulaire autogénéré](images/ex02/ex2_08.png)

[Exercice suivant : création de formulaires](03-forms.md)
170 changes: 170 additions & 0 deletions docs/fr/08-forms-deep.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
---
title: Exercice 3 - Création de formulaires
---

## Objectif

L'objectif de cet exercice est de fournir des formulaires conviviaux et adaptés pour l'exécution du processus.

## Instructions résumées

Dupliquer le diagramme de processus de l'exercice précédent pour créer une version *2.1.0*.

Créer les formulaires suivants :
- Un formulaire d'instanciation de processus au niveau du pool permettant d'initialiser les attributs *dateDebut* et *nombreJours* de la variable métier *demande*
- Un formulaire d'étape permettant d'afficher les informations du demandeur et les données *dateDebut* et *nombreJours* en lecture seule puis d'alimenter la donnée *estApprouvee*

## Instructions pas à pas
1. Dupliquer le diagramme de processus de l'exercice précédent pour créer une version 2.1.0
1. Créer un formulaire d'instanciation :
- Sélectionner le pool du processus
- Naviguer dans l'onglet **Exécution / Formulaire d'instanciation**
- Cliquer sur l'icône **Crayon** du champ **Formulaire cible**

![création d'un formulaire](images/ex03/ex3_01.png)

- Cela va ouvrir l'UI Designer dans votre navigateur web avec un nouveau formulaire généré automatiquement à partir de la définition du contrat d'instanciation

![Initialisation du formulaire dans UID](images/ex03/ex3_02.png)

1. Renommer le formulaire :
- Utiliser le champ texte en haut de l'écran pour renommer le formulaire depuis *newForm* vers *remplirDemandeConges* (il s'agit d'un nom technique, il faut donc omettre les espaces, accents et autres caractères spéciaux)
- Cliquer sur le bouton **Enregistrer**
1. Changer le titre du formulaire :
- Sélectionner le widget **Titre** *Demande* en haut du formulaire.
- Dans la section à droite de l'écran, éditer les propriétés suivantes :

Propriété | Valeur
--------- | ------
Texte | *Saisir une demande de congés*
Niveau du titre | Niveau 2
Alignement | au centre

1. Changer le widget **Date Picker** *Date Debut* :
- Sélectionner le widget *Date Debut* et éditer les propriétés suivantes :

Propriété | Valeur
--------- | ------
Libellé | Date de début
Format technique de la date | dd/MM/yyyy
Placeholder | jj/mm/aaaa
Afficher le bouton Aujourd'hui | non

1. Changer le widget **Input** *Nombre Jours* :
- Sélectionner le widget *Nombre Jours* et éditer les propriétés suivantes :

Propriété | Valeur
--------- | ------
Libellé | Nombre de jours
Placeholder | Nombre de jours de congés
Valeur minimum (à ne pas confondre avec la propriété **Longueur minimum de la valeur**) | 1

1. Supprimer les valeurs initiales des champs (cela permettra d'afficher les placeholders lors du rendu final) :
- Dans la partie inférieure de l'écran, sous l'onglet **Variables**, cliquer sur l'icône **Crayon** situé à droite de la ligne contenant la variable *formInput*
- Remplacer la valeur du JSON par ceci :
```json
{
"demandeInput" : {
"dateDebut" : null,
"nombreJours" : null
}
}
```

1. Changer le widget **Button** *Submit* :
- Sélectionner le widget *Submit*
- Changer son libellé en *Soumettre*

1. Vérifier le formulaire :
- Vérifier que le formulaire ressemble à ceci dans l'éditeur :

![formulaire dans l'UI Designer](images/ex03/ex3_05.png)

- Cliquer sur le bouton **Enregistrer** en haut de l'écran
- Cliquer sur le bouton **Aperçu** en haut de l'écran
- Vérifier que l'aperçu ressemble à ceci :

![aperçu d'un formulaire](images/ex03/ex3_06.png)

- On notera les points suivants dans l'aperçu :
- Le widget présentant l'erreur n'est pas visible
- Il est possible de tester l'aperçu sur différents périphériques, du mobile au grand écran
- Le bouton *Soumettre* est désactivé par défaut (ceci est dû à la validation fournie par le conteneur de formulaire)
- Le bouton *Soumettre* est activé quand le contenu du formulaire est valide

> **Note :** il n'est pas possible de soumettre le formulaire depuis l'aperçu même lorsque ce dernier est valide.
1. Fermer la fenêtre d'aperçu

1. Créer un formulaire pour l'étape *Valider demande* :
- Dans le Studio, sélectionner l'étape *Valider demande*
- Naviguer dans l'onglet **Exécution / Formulaire**
- Cliquer sur l'icône **Crayon** du champ **Formulaire cible** pour ouvrir l'UI Designer sur un nouveau formulaire
- Répondre **Oui** à la question concernant l'ajout de widgets en lecture seule

> **Note :** le formulaire a été généré automatiquement à partir du BDM et du contrat, et affiche en lecture seule les données du BDM qui ne sont pas attendues par le contrat à cette étape.
1. Renommer le formulaire :
- Depuis le UI Designer, renommer le formulaire en *validerDemandeConges* et l'enregistrer

1. Récupérer les informations concernant le demandeur
- Cliquer sur le bouton **Créer une nouvelle variable** pour définir une variable avec les propriétés suivantes :

![propriétés variable demandeur](images/ex03/ex3_03.png)

1. Modifier le titre du formulaire
- Sélectionner le widget de type **Titre** situé en haut du formulaire
- Configurer le widget de la manière suivante :

Propriété | Valeur
--------- | ------
Texte | Valider une demande de congés
Niveau du titre | Niveau 2

1. Supprimer le widget *Id demandeur* et mettre à la place un widget pour présenter le prénom et nom du demandeur :
- Faire glisser un widget de type **Text**
- Configurer le widget comme ceci : `<b>Demandeur : </b>{{firstname}} {{lastname}}`

![propriétés texte demandeur](images/ex03/ex3_04.png)

1. Ajouter un widget pour refuser la demande:
- Faire glisser un widget de type **Button** et l'ajouter dans le form container (zone délimitée par une ligne pointillée épaisse)
- Configurer le widget comme ceci :

Propriété | Valeur
--------- | ------
largeur | 6
Libellé | Refuser
Alignement | à droite
Style | danger
Données envoyées au clic | `{"demandeInput":{"estApprouvee":false}}`
Valeur de réponse en cas d'échec | `formOutput._submitError`
URL cible en cas de succès | `/bonita`

1. Ajouter un widget pour approuver la demande
- Faire glisser un widget de type **Button** dans la zone "6 colonnes" à droite du bouton *Refuser*
- Configurer le widget comme ceci :

Propriété | Valeur
--------- | ------
Libellé | Approuver
Style | success
Données envoyées au clic | `{"demandeInput":{"estApprouvee":true}}`
Valeur de réponse en cas d'échec | `formOutput._submitError`
URL cible en cas de succès | `/bonita`

1. Supprimer la case à cocher *Est Approuvee* et le bouton *Submit*

1. Vérifier le formulaire :
- S'assurer que le formulaire ressemble à ceci :

![Formulaire de validation / refus de la demande de congés](images/ex03/ex3_08.png)

1. Enregistrer le formulaire :
- Utiliser le bouton **Enregistrer** en haut au centre de l'écran pour enregistrer le formulaire

1. Tester l'exécution du processus :
- Lancer l'exécution du processus par le biais du Studio
- Valider à partir de l'historique des cas que le bon chemin a bien été emprunté jusqu'à la fin du processus

[Exercice suivant : définition des acteurs](04-actors.md)
59 changes: 59 additions & 0 deletions docs/fr/09-extensions.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: Exercice 4 - Gestion d'acteurs
---

## Objectif

L'objectif de cet exercice est d'apporter une notion de collaboration au processus existant en distribuant les tâches entre deux acteurs : le demandeur et le validateur.

## Instructions résumées

Dupliquer le diagramme de processus de l'exercice précédent pour créer une version *3.0.0*.

Ajouter une lane *Validateur* au diagramme et y déplacer la tâche *Valider demande*.

Configurer un filtre d'acteur de type **Manager de l'initiateur du processus** sur la lane *Validateur*.

## Instructions pas à pas

1. Dupliquer le diagramme de processus de l'exercice précédent pour créer une version *3.0.0*

1. Ajouter une lane *Validateur* au diagramme :
- Sélectionner l'élément lane à partir de la palette d'éléments BPMN présente sur le côté gauche du Studio :

![élément lane dans la palette BPMN](images/ex04/ex4_01.png)

- Cliquer dans le pool du processus pour ajouter la lane
- Sélectionner la lane
- Naviguer dans l'onglet **Général / Lane**
- Modifier le nom en *Validateur*

1. Renommer l'autre lane en *Demandeur*

1. Faire glisser la tâche *Valider demande* dans la lane *Validateur*

1. Configurer un filtre d'acteur de type **Manager de l'initiateur du processus** sur la lane *Validateur* :
- Sélectionner la lane *Validateur*
- Naviguer dans l'onglet **Général / Acteurs**
- Sélectionner l'acteur *Employee actor* à partir du menu déroulant
- Cliquer sur le bouton **Définir...** associé au filtre
- Sélectionner un filtre de type **Manager de l'initiateur du processus**
- Cliquer sur **Suivant**
- Nommer le filtre *managerInitiateur*
- Cliquer sur **Terminer**

1. Vérifier que le diagramme ressemble à ceci :

![diagramme avec deux lanes](images/ex04/ex4_02.png)

1. Exécuter le processus avec les deux acteurs :
- Lancer le processus à partir du Studio (l'utilisateur Walter Bates sera utilisé)
- Soumettre le formulaire de *Saisie demande congés*. Si les acteurs sont correctement configurés, la tâche *Valider demande de congés* ne devrait pas être proposée
- Se déconnecter du portail en naviguant sur le nom d'utilisateur dans le coin supérieur droit puis **Déconnexion** :

![déconnexion du portail](images/ex04/ex4_03.png)

- Se connecter avec l'utilisateur *helen.kelly* et le mot de passe *bpm*
- Si le filtre d'acteur s'est bien exécuté, la tâche *Valider demande de congés* devrait être disponible dans la liste des tâches à faire

[Exercice suivant : configuration d'un connecteur](05-connectors.md)
Loading

0 comments on commit 8e325b9

Please sign in to comment.