Tutoriels : Construisez votre première application Softyflow

Bienvenue dans la section tutoriels de Softyflow ! Ici, vous vous lancez dans un voyage passionnant pour construire votre première application fonctionnelle en utilisant notre plateforme low-code intuitive. Nous vous guiderons étape par étape, en veillant à ce que vous acquériez de l'expérience pratique et la confiance nécessaire pour concrétiser vos idées.

Pour ce tutoriel, nous allons aborder un scénario courant du monde réel : une Application de Demande d'Approbation Budgétaire. Imaginez un système où les employés peuvent facilement soumettre des demandes budgétaires, et leurs responsables peuvent efficacement les examiner, les valider ou les rejeter. À la fin, vous aurez une application totalement opérationnelle qui démontre la puissance et la simplicité de Softyflow.

Avant de commencer, assurez-vous de comprendre les concepts fondamentaux de Softyflow. Pour une vue d'ensemble complète de la plateforme, consultez notre guide de démarrage.

Niveau : Débutant Temps estimé : 15–20 minutes

Ce que vous apprendrez​​

Ce tutoriel est conçu pour vous donner une vue d'ensemble complète des capacités essentielles de Softyflow. Vous apprendrez à :

• Créer Votre Premier Projet : L'étape fondamentale pour toute application dans Softyflow en utilisant notre guide de configuration de projet.
• Concevoir un Formulaire Utilisateur pour l'Approbation Budgétaire : Comment construire un formulaire interactif permettant aux utilisateurs de soumettre leurs demandes, sans écrire une seule ligne de code en utilisant nos outils de conception d'interface web.
• Construire un Workflow d'Approbation : Implémenter la logique qui définit comment les demandes budgétaires traversent le processus d'approbation, y compris la validation par le responsable en utilisant la conception de processus.
• Stocker les Données dans une Collection : Comprendre comment Softyflow gère automatiquement le stockage des données pour votre application en utilisant les collections MongoDB.
• Ajouter un Rapport Basique : Générer des rapports simples pour visualiser et suivre vos demandes budgétaires avec nos outils de création de rapports.
• Tester et Exécuter Votre Application : Voir votre application en action et comprendre comment les utilisateurs interagiront avec elle en utilisant nos fonctionnalités de test et déploiement.

La meilleure partie ? Aucun codage n'est requis ! Suivez simplement ces étapes simples et regardez votre application prendre vie sous vos yeux.

Construisez votre première application​

Plongeons dedans et commençons à construire notre Application de Demande d'Approbation Budgétaire. Cette application permettra aux employés d'initier facilement des demandes d'achat ou budgétaires, et permettra aux responsables de les valider ou de les rejeter en fonction de critères prédéfinis, tels que les seuils d'montant.

1. Créez votre premier projet​​

Chaque application dans Softyflow commence par un projet. Pensez à un projet comme le conteneur central qui rassemble tous les composants essentiels de votre application : vos formulaires utilisateur, les workflows sous-jacents, les collections de données et les rapports que vous générez.

Instructions étape par étape :​

1. Naviguez vers l'IDE :

   • Une fois connecté à Softyflow, localisez et cliquez sur le bouton ou l'onglet "IDE" (Environnement de Développement Intégré) dans votre navigation principale. C'est là que toute la magie de la création d'applications se produit.

Navigation vers l'IDE à partir du tableau de bord principal.

2. Démarrez un Nouveau Projet :
   • Dans l'IDE, cherchez un bouton proéminent généralement intitulé "Nouveau Projet" ou une icône représentant la création (par exemple, un signe +). Cliquez dessus.
   • Une boîte de dialogue ou un formulaire apparaîtra, vous demandant les détails du projet.

Le bouton "Nouveau Projet" dans l'IDE.

3. Nommez Votre Projet :

   • Dans le champ "Nom du Projet", entrez un nom clair et descriptif pour votre application. Nous recommandons quelque chose comme : demo-approbation-budgetaire
   • Conseil : Utiliser des tirets (-) au lieu d'espaces est une pratique courante pour les noms de projets et les rend plus faciles à gérer dans de nombreux systèmes.

4. Ajoutez une description (Optionnel mais recommandé) :

   • Dans le champ "Description", vous pouvez ajouter une brève explication de ce que votre projet concerne. Par exemple : "Une application pour gérer les demandes d'approbation budgétaire des employés aux responsables."
   • Pourquoi c'est utile : Une bonne description aide vous et votre équipe à comprendre rapidement l'objectif du projet, surtout à mesure que vous construisez plus d'applications.

La boîte de dialogue "Créer un Nouveau Projet" avec les champs de nom et de description du projet.

5. Créez le Projet :

   • Après avoir rempli les détails, cliquez sur le bouton "Créer Projet".

Félicitations ! Vous avez créé avec succès votre premier projet Softyflow. Vous êtes maintenant prêt à commencer à construire et à donner vie à votre Application de Demande d'Approbation Budgétaire dans cet environnement de projet.

2. Créez votre premier formulaire​

Maintenant que vous avez configuré votre projet, il est temps de construire l'interface utilisateur - le formulaire que les employés utiliseront pour soumettre leurs demandes d'approbation budgétaire. Ce formulaire sera le point principal d'interaction pour les utilisateurs qui initient de nouvelles demandes.

Un aperçu de l'interface du formulaire d'approbation budgétaire.

Champs clés et leur objectif​

Notre Formulaire de Demande d'Approbation Budgétaire comprendra divers champs, chacun conçu pour capturer des informations spécifiques. Comprendre ces champs est crucial pour construire une application efficace :

• Demandeur : Ce champ affichera automatiquement le nom de l'utilisateur actuellement connecté qui crée la demande. C'est un champ en lecture seule, ce qui signifie que les utilisateurs ne peuvent pas le modifier. En savoir plus sur la gestion des utilisateurs pour l'authentification des utilisateurs.
• Statut : Ce champ sera également automatiquement mis à jour et en lecture seule. Il reflétera l'étape actuelle de la demande budgétaire dans le workflow d'approbation. Les valeurs possibles incluent : - Brouillon - En attente de l'approbation du responsable de département - En attente de l'approbation du directeur financier - En attente de l'approbation du directeur général - En attente de l'approbation du directeur exécutif - Rejeté - Approuvé
• Réf. Interne : Un numéro de référence généré automatiquement pour chaque demande soumise. Ce champ sera en lecture seule et n'apparaîtra qu'une fois la demande soumise.
• Département : Une liste déroulante permettant à l'utilisateur de sélectionner le département effectuant la demande. Utilisez notre widget select pour ce champ.
• Titre de la Demande : Un titre court et descriptif pour la demande budgétaire (par exemple, "Achat de nouvelles chaises de bureau"). Utilisez un widget input.
• Type de Dépense : Définit la catégorie ou la nature de la dépense (par exemple, "Fournitures de Bureau", "Licence Logicielle", "Voyage"). Cela pourrait être un widget checkbox ou un widget select.
• Date d'Achèvement : La date prévue à laquelle l'achat ou la dépense est prévue de se produire. Utilisez notre widget datepicker.
• Justification des Coûts : Un champ de texte multi-lignes facultatif où l'utilisateur peut fournir une explication détaillée de la raison pour laquelle l'achat est nécessaire, y compris les économies attendues ou les avantages. Utilisez un widget textarea.
• Détails d'Achat : C'est une section cruciale qui permettra aux utilisateurs d'ajouter plusieurs articles pour différents articles dans une seule demande en utilisant un widget loop ou un widget table. Chaque article comprendra :
  • Description : Une brève description de l'article spécifique en cours d'achat.
  • Catégorie : La catégorie de l'article d'achat individuel.
  • Quantité : Le nombre d'unités requises.
  • Prix unitaire (€) : Le coût par unité.
  • Taux TVA : Le taux de TVA applicable pour cet article.
  • Sous-total (€) : Total calculé automatiquement pour l'article excluant la TVA (Quantité * Prix unitaire).
  • TVA (€) : Montant TVA calculé automatiquement pour l'article (Sous-total * Taux TVA).
  • Total (€) : Total calculé automatiquement pour l'article incluant la TVA (Sous-total + TVA).

Étapes d'approbation​

Cette section affichera la liste des étapes d'approbation requises et les utilisateurs assignés à chacune. Le nombre d'étapes obligatoires s'ajustera dynamiquement en fonction du montant total demandé :

• Moins de 2 500€ : 1 étape de validation obligatoire.

• Entre 2 501€ et 7 500€ : 2 étapes de validation obligatoires.

• Plus de 7 500€ : 4 étapes de validation obligatoires (avec 1 étape supplémentaire optionnelle).

• Commentaires : Un champ facultatif où différents utilisateurs (demandeur, approbateurs) peuvent laisser des commentaires tout au long du cycle de vie de la demande. Il y aura une zone de texte pour entrer un commentaire et un bouton "Ajouter un Commentaire" pour le soumettre.

Formulaire actions (Boutons)​

Le formulaire inclura également des boutons essentiels pour l'interaction de l'utilisateur :

• Enregistrer (comme Brouillon) : Ce bouton permet à l'utilisateur d'enregistrer la demande sans la soumettre pour approbation. Les brouillons peuvent être accessibles ultérieurement à partir de l'onglet "Mes demandes par statut" dans l'interface web "Gestion de l'Approbation Budgétaire - Rapport". Utilisez un widget button pour cette action.
• Enregistrer et Soumettre pour Approbation : Ce bouton initie le workflow d'approbation budgétaire en utilisant nos fonctionnalités de conception de processus. Une demande ne peut être soumise que si tous les champs obligatoires sont remplis.

Étape par Étape : Construire votre formulaire d'approbation budgétaire​

Commençons à construire le formulaire dans votre projet Softyflow en utilisant nos outils de conception d'interface web. Contrairement à la construction à partir de zéro, Softyflow fournit souvent un modèle pré-configuré, vous donnant un bon point de départ. Nous vous montrerons comment tirer parti de cette structure par défaut et la personnaliser selon vos besoins.

1. Créez un nouveau formulaire :

   Il y a quelques façons d'initier la création d'un nouveau formulaire :

   Option 1 : Utiliser le panneau "Démarrage Rapide" (recommandé pour les débutants)

   • Dans votre projet demo-approbation-budgetaire dans l'IDE Softyflow, assurez-vous d'être dans la section "Build" (cherchez l'onglet "Build" en haut).
   • Sur le côté droit, localisez le panneau "Démarrage Rapide".
   • Cliquez sur le bouton "+ Formulaire" dans ce panneau.

Création d'un nouveau formulaire en utilisant le panneau "Get Started".

• Définir les écrans : Il s'agit d'une fonctionnalité puissante ! Dans la section "Add Screens", vous pouvez définir plusieurs vues ou "écrans" distincts au sein de cette interface unique. Chaque écran peut avoir une mise en page unique et un ensemble de champs visibles, permettant à différents rôles ou étapes de workflow d'interagir avec les mêmes données de manière personnalisée.
  • Pour notre application d'approbation budgétaire, vous voudrez ajouter des écrans pour :
    • Budget Request (pour l'employé qui initie la demande)
    • Team Manager (pour le premier niveau d'approbation)
    • Department Manager (pour les approbations ultérieures)
    • Save to SAP (un exemple d'écran d'action spécifique)
  • Vous pouvez cliquer sur "Add new Screen" pour en ajouter d'autres selon vos besoins.
• Cliquez sur "Add" (ou "Create Form") pour finaliser la création et ouvrir le canevas du constructeur de formulaire avec vos écrans nouvellement définis prêts pour la personnalisation.

Option 2 : Utiliser le raccourci "Web Interface"

• Alternativement, pendant que vous êtes dans la section "Build" de votre IDE Softyflow, regardez la barre de navigation de gauche.
• Localisez la section "Web Interface".
• Vous verrez une icône "+" à côté du titre "Web Interface". Cliquez sur cette icône.
• Un menu déroulant apparaîtra. Sélectionnez "New Form" dans les options.

Création d'un nouveau formulaire en utilisant le raccourci "Web Interface".

Après avoir choisi l'une ou l'autre option :

• Une boîte de dialogue apparaîtra vous invitant à nommer votre formulaire. Entrez : budget-approval-form
• Cliquez sur "Create Form" (ou bouton similaire) pour ouvrir le canevas du constructeur de formulaire.

2. Comprendre la structure de formulaire par défaut :

   Lors de la création de votre nouveau formulaire, vous remarquerez que Softyflow fournit une mise en page de base avec quelques sections et champs préremplis. Cela sert de fondation, vous permettant de modifier rapidement plutôt que de partir de zéro.

La mise en page du formulaire par défaut avec des sections et champs préremplis.

Remarquez les sections existantes comme "Information Générales" (Informations générales) et les champs de base tels que "Numéro de demande" (Numéro de demande), "Status," "Nom" (Nom), et "Prénom" (Prénom). Ce sont d'excellents points de départ !

3. Personnaliser et ajouter les widgets requis :

   Maintenant, vous allez modifier les champs existants et ajouter de nouveaux widgets pour correspondre aux exigences de notre formulaire de demande d'approbation budgétaire. Nous allons transformer la structure par défaut en notre formulaire complet.

   Passons en revue les principaux domaines sur lesquels vous travaillerez :

• Modifier "Information Générales" (Informations générales) / "Request Details" :

• "Numéro de demande" (Numéro de demande) : Ce champ devient généralement Internal Ref. en tant que Read-only Input. Sa valeur sera générée automatiquement.

• "Status" : Conservez ceci comme Read-only Input. Softyflow gérera sa valeur.

• "Nom" (Nom) et "Prénom" (Prénom) : Ceux-ci sont déjà remplis avec $(SF_connectedUser.lastName) et $(SF_connectedUser.firstName), ce qui est parfait pour notre champ Requestor. Vous pouvez combiner ces éléments en un seul Read-only Input étiqueté "Requestor" ou les garder séparés selon votre préférence.

• "Date de création" (Date de création) : Changez ceci en Completion Date et assurez-vous qu'il s'agit d'un widget sélecteur de Date.

• Ajouter/Ajuster :

• Department : Faites glisser un select widget. Étiquetez-le "Department" et définissez votre liste de départements (par exemple, "Sales", "Marketing", "HR", "IT").

• Request Title : Faites glisser un input widget. Étiquetez-le "Request Title".

• Expenditure Type : Faites glisser un checkbox widget. Étiquetez-le "Expenditure Type". Dans ses propriétés, vous définirez vos catégories (par exemple, "Office Supplies", "Software License") en utilisant des custom lists.

• Cost Justification : Faites glisser un textarea widget. Étiquetez-le "Cost Justification".

Ajout et personnalisation de widgets pour la section des détails de la demande.

• Construire "Purchase details" :

  • Recherchez un loop widget, table widget, ou un composant similaire qui permet des sections répétables. Ceci est crucial pour ajouter plusieurs articles d'achat.
  • À l'intérieur de cette boucle/table, ajoutez les widgets suivants pour chaque ligne :
    • Description : Text Input
    • Category : Select widget
    • Quantity : Number Input
    • Unit price (€) : Number Input
    • VAT rate : Select widget ou Number Input
    • Subtotal (€) : Read-only Number Input
    • VAT (€) : Read-only Number Input
    • Total (€) : Read-only Number Input
    • Rappel : Les calculs pour le sous-total, la TVA et le total seront configurés dans une étape ultérieure en utilisant les web modeler actions.

Construction de la section "Purchase details" avec un widget de boucle ou de tableau.

• Ajouter "Approval Steps" :

  • Pour structurer la hiérarchie d'approbation, vous devez d'abord ajouter un grid widget à votre formulaire. Cela fournit une mise en page flexible pour organiser vos champs d'approbation.
  • Après avoir ajouté la grille, localisez son panneau de propriétés. Recherchez une option "Collapse". Basculer cela sur "On" ou cocher la case vous permettra de définir un titre pour cette section qui peut être développée ou réduite par l'utilisateur, gardant votre formulaire ordonné. Vous pouvez ensuite ajouter un title widget à l'intérieur de la grille réductible, par exemple, "Approval Steps".

Utilisation d'une grille réductible pour organiser la section "Approval Steps".

• Dans cette grille, vous ajouterez des user picker widgets pour chacun des rôles d'approbation :
  • Department Manager : Faites glisser un user picker widget et étiquetez-le "Department Manager".
  • Financial Director : Faites glisser un user picker widget et étiquetez-le "Financial Director".
  • Managing Director : Faites glisser un user picker widget et étiquetez-le "Managing Director".
  • Executive Director : Faites glisser un user picker widget et étiquetez-le "Executive Director".
• Ces user picker widgets permettront au système ou à un administrateur d'assigner des utilisateurs spécifiques à ces rôles d'approbation, ou aux utilisateurs de les sélectionner si applicable. Ces champs seront généralement en Read-only pour le demandeur initial mais visibles pour montrer la chaîne d'approbation. En savoir plus sur la gestion des utilisateurs et la gestion des rôles.

• Configurer les actions (Boutons) :

  • Vous ajouterez divers boutons d'action à votre formulaire. Certains seront visibles pour le demandeur initial, tandis que d'autres apparaîtront dynamiquement pour les approbateurs en fonction de l'étape du workflow.

  • Pour le demandeur (Soumission initiale) :

    • Ajoutez un button widget. Étiquetez-le : "Save (as Draft)".
    • Ajoutez un autre button widget. Étiquetez-le : "Submit for Approval".
    • Note : Ces boutons doivent être configurés pour être visibles uniquement lorsqu'un employé crée ou modifie son brouillon de demande.

  • Pour les approbateurs (visibilité conditionnelle) :

    • Ajoutez un button widget. Étiquetez-le : "Reject".
    • Ajoutez un autre button widget. Étiquetez-le : "Approve".
    • Note : Ces boutons "Reject" et "Approve" seront généralement configurés pour apparaître uniquement lorsque le formulaire est consulté par un approbateur désigné (Department Manager, Financial Director, etc.) et que la demande est en attente de leur approbation spécifique. Leur visibilité sera contrôlée par les paramètres de workflow ou de logique de formulaire dans Softyflow.

Ajout de boutons d'action pour soumettre, enregistrer, approuver et rejeter les demandes.

Configuration des actions de bouton (événements "On click")​

Une fois que vous avez ajouté vos boutons, vous devez définir ce qui se passe lorsqu'un utilisateur clique dessus. Cela se fait en configurant leurs actions "On Click". Concentrons-nous sur le bouton "Submit" comme exemple.

1. Sélectionner un bouton : Cliquez sur le bouton "Submit" sur votre canevas de formulaire. Son panneau de propriétés s'ouvrira à droite.

2. Accéder aux Actions : Dans le panneau de propriétés, recherchez la section "Actions" puis cliquez sur le bouton "View attached action" (ou similaire, comme le gestionnaire d'événement "On Click").

Accès aux actions "On Click" d'un bouton depuis son panneau de propriétés.

3. Définir la logique "On Click" : Un nouveau panneau s'ouvrira, vous permettant d'ajouter une séquence d'actions qui se produisent lorsque le bouton est pressé. Pour le bouton "Submit", vous configurerez généralement des actions comme :

Le panneau d'actions pour définir la logique qui s'exécute lors du clic sur un bouton.

• Définir les données/statut : Ajoutez une action pour mettre à jour un champ de formulaire ou une variable. Par exemple, vous pouvez définir la variable report_status (ou directement le champ Status du formulaire) sur "Nouvelle Demande" (Nouvelle demande). Cela marque la demande comme prête pour le workflow.
• Déclencher le Workflow/Processus : C'est critique ! Ajoutez une action pour démarrer votre workflow Budget Approval Management. Cette action indique à Softyflow d'initier le processus que vous avez conçu dans la section suivante du tutoriel.
• Désactiver le formulaire (Optionnel) : Vous pouvez choisir d'ajouter une action pour Disable forms après la soumission, empêchant d'autres modifications une fois que la demande entre dans le workflow.
• Autres Actions : Vous pouvez ajouter d'autres actions selon les besoins, telles que l'affichage de messages de succès, la redirection de l'utilisateur ou l'exécution de calculs.

Vous suivrez un processus similaire pour configurer les boutons "Save (as Draft)", "Approve" et "Reject", chacun avec sa propre logique "On Click" spécifique adaptée à sa fonction (par exemple, "Save" enregistre les données sans démarrer de workflow ; "Approve" complète la tâche actuelle dans le workflow et définit le statut sur "Approved" ; "Reject" complète la tâche actuelle, définit le statut sur "Rejected" et peut nécessiter une raison de refus).

4. Organiser et styliser votre formulaire :
   • Faites glisser et déposez les widgets pour les organiser logiquement sur le formulaire. L'interface glisser-déposer de Softyflow facilite cette tâche.
   • Utilisez toutes les mises en page de section ou de colonne fournies par Softyflow pour organiser les champs en groupes clairs et lisibles (par exemple, "Request Details", "Purchase Details").
   • Enregistrez régulièrement votre formulaire au fur et à mesure que vous apportez des modifications ! Recherchez un bouton "Save".

Enregistrement du formulaire après avoir apporté des modifications.

• Testez avec le mode Prévisualisation

Prévisualisation du formulaire pour voir à quoi il ressemblera pour les utilisateurs finaux.

Application de CSS personnalisé pour un style avancé​

Bien que les widgets de Softyflow offrent de nombreuses options de style, vous pourriez avoir besoin d'appliquer des styles personnalisés pour des exigences spécifiques de branding ou de design. Softyflow vous permet d'ajouter votre propre CSS personnalisé à vos formulaires.

1. Ouvrir le panneau CSS : Dans le constructeur de formulaire, sur le panneau de propriétés à droite, recherchez un onglet "CSS".

Le panneau CSS personnalisé pour un style avancé.

2. Ajouter vos règles CSS : Vous pouvez écrire des règles CSS standard pour cibler des éléments de votre formulaire. Pour identifier les sélecteurs corrects pour les éléments de formulaire, vous pouvez utiliser les outils de développement de votre navigateur pour inspecter le formulaire en mode prévisualisation. C'est une bonne pratique d'utiliser des sélecteurs spécifiques pour éviter d'affecter involontairement d'autres éléments.

3. Exemple : Pour changer la couleur de fond d'une section spécifique, vous pourriez ajouter :

#my-section-id {
  background-color: #f0f8ff;
  border-radius: 8px;
}

En utilisant le panneau CSS personnalisé, vous pouvez obtenir un design au pixel près qui s'aligne avec la marque de votre entreprise.

Vous avez maintenant conçu et personnalisé avec succès l'interface utilisateur de votre application de demande d'approbation budgétaire ! Prenez un moment pour admirer votre travail, votre formulaire complété devrait ressembler à ceci :

La vue finale du formulaire d'approbation budgétaire.

Dans les prochaines étapes, nous connecterons ce formulaire au stockage de données et définirons le puissant workflow d'approbation qui rendra votre application véritablement fonctionnelle.

3. Construire le Workflow​

Maintenant que votre interface utilisateur (le formulaire) est prête, il est temps de construire le "cerveau" de votre application : le workflow. Le workflow définit la séquence de tâches, de décisions et de notifications qui guident une demande budgétaire de sa soumission à son approbation ou son rejet final. Nous utiliserons le process modeler visuel de Softyflow, qui suit les principes BPMN (Business Process Model and Notation), pour concevoir cette logique en utilisant nos outils de conception de processus.

Comprendre la logique d'approbation et le workflow implémenté​

Notre workflow définit un flux de validation. Alors qu'une application complète pourrait avoir un routage complexe basé sur le montant dès le début, pour ce tutoriel, nous nous concentrerons sur les étapes d'approbation séquentielles et les fonctionnalités de base telles que décrites dans le diagramme BPMN implémenté ci-dessous, y compris comment le chemin d'approbation change dynamiquement.

Caractéristiques clés du workflow :

• Initiation de la demande : Commence lorsqu'un nouveau formulaire est soumis.
• Traitement initial des données : Étapes automatisées pour configurer la demande.
• Approbations séquentielles : Les demandes passent par une chaîne définie d'approbateurs (Équipe, Département, Financier, Direction, Exécutif).
• Chemin d'approbation dynamique : Après la validation initiale de l'équipe, la chaîne d'approbation suivante est déterminée par le montant total de la demande.
• Points de décision : Chaque approbateur peut Approuver ou Rejeter la demande.
• Notifications : Des e-mails automatisés informeront les utilisateurs des affectations de tâches et de l'état de leurs demandes.

Étape par étape : Créer votre workflow d'approbation budgétaire​

Plongeons dans l'éditeur de workflow Softyflow pour construire votre processus, étape par étape, en suivant le diagramme ci-dessus.

1. Créer un nouveau processus :
   • Naviguez vers la section "Workflow" dans votre projet budget-approval-demo dans l'IDE Softyflow.
   • Recherchez l'"icône plus" (+) ou un bouton "New Process". Cliquez dessus pour démarrer un nouveau workflow.
   • Lorsque vous y êtes invité, nommez votre processus : Budget Approval Management
   • Cliquez sur "Create Process" pour ouvrir le canevas du workflow.

Création d'un nouveau processus depuis la section workflow.

2. Ajouter l'événement de début ("Nouvelle demande") :

   • Faites glisser un widget "Message Start Event" (un cercle avec une icône d'enveloppe à l'intérieur) sur le canevas. Étiquetez-le : Nouvelle demande.
   • Configurez cet événement de début pour être déclenché par la soumission de votre budget-approval-form. Cela signifie que chaque fois qu'un employé clique sur "Save and Submit for Approval" sur le formulaire, ce workflow commencera.

Ajout d'un événement de début de message au canevas du workflow.

3. Ajouter la tâche de traitement initial des données :

   • Immédiatement après l'événement de début "Nouvelle demande", faites glisser une "Service Task" (un rectangle, possiblement avec une icône d'engrenage/clé). Étiquetez-la : Nouvelle demande. Cette tâche gérera les actions initiales au niveau du système.
   • Configurez les propriétés de cette tâche :
     • Nom : Nouvelle demande.
     • Entrées : Cette tâche est cruciale pour traiter les données initiales du formulaire. Remarquez les variables "Input" comme request_id, requestor_name, requestor_mail, et global_status. Cette tâche définit généralement les valeurs initiales de ces variables basées sur les données du formulaire soumis.

Ajout d'une tâche de service pour le traitement initial des données.

4. Modéliser les étapes d'approbation (Tâches utilisateur et passerelles) et flux conditionnels : Maintenant, construisons la séquence des tâches d'approbation humaines, leurs points de décision, et comment le chemin du workflow s'ajuste dynamiquement.

   • Tâche utilisateur : Validation par l'équipe (Validation by team)

     • Faites glisser un widget "User Task" (rectangle avec une icône de personne). Étiquetez-le : Validation by team.
     • Connectez-le depuis la tâche de service "Nouvelle demande".
     • Configurez les propriétés de cette tâche :
       • Nom : Validation by team (ID: Activity_Validation_0).
       • Utilisateurs/Rôles : Sous "Users And Roles," cette tâche sera assignée au Team Manager concerné. La capture d'écran montre $(SF_initiator.mail), ce qui indique généralement une affectation dynamique (par exemple, résolution au responsable d'équipe assigné de l'initiateur).
       • Interface/Écran : Liez cette tâche à votre budget-approval-form. La propriété Screen (par exemple, Department Manager de la capture d'écran) indique quelle vue ou configuration spécifique de votre formulaire le responsable assigné verra lorsqu'il ouvrira cette tâche.
     

     Configuration d'une tâche utilisateur pour la validation par l'équipe.

   • Ajouter une passerelle exclusive après "Validation by team" :

     • Faites glisser une "Exclusive Gateway" (forme de losange avec un 'X') après la tâche Validation by team. Étiquetez-la : "Team Decision".
     • Cette passerelle aura plusieurs "Sequence Flows" (flèches) sortants pour diriger le processus en fonction de la décision prise et du montant total de la demande.
   

   Ajout d'une passerelle exclusive pour la prise de décision.

   • Configuration des flux conditionnels (Conditions de Sequence Flow) : C'est là que se produit le routage dynamique. Vous cliquerez sur les flèches (Sequence Flows) sortant de vos passerelles pour définir les conditions sous lesquelles le workflow suivra ce chemin spécifique.

     • Sélectionner un Sequence Flow : Cliquez sur une flèche provenant de la passerelle "Team Decision". Son panneau de propriétés s'ouvrira à droite.
     • Définir la condition Script : Dans le champ "Script", vous entrerez une condition en utilisant les variables de votre formulaire ou workflow.

• Exemple 1 : Approbation pour les montants <= 2500€
  • Sur le flux de séquence menant au chemin d'approbation court (ou directement vers la fin s'il s'agit de la seule étape), entrez une condition comme : action0 == 'valider' && total <= 2500

Configuration d'un flux conditionnel pour les montants inférieurs ou égaux à 2500€.

• Exemple 2 : Approbation pour les montants > 2500€
  • Sur le flux de séquence menant à la tâche d'approbation suivante (par exemple, "Validation by department"), entrez une condition comme : action0 == 'valider' && total > 2500

Configuration d'un flux conditionnel pour les montants supérieurs à 2500€.

• Explication :

  • action0 == 'valider' : Cela vérifie si l'utilisateur a cliqué sur le bouton "Validate" ou "Approve" (cette variable action0 capture le résultat de la tâche utilisateur).

  • total <= 2500 et total > 2500 : Ces conditions vérifient la valeur de la variable total (qui contient le montant total de votre formulaire).

  • Ces conditions garantissent que le workflow emprunte le bon chemin après la validation de l'équipe, le dirigeant vers la séquence appropriée d'approbations ultérieures en fonction du montant de la demande.

• Ajouter une tâche de notification après l'approbation de l'équipe (si approuvé et acheminé) :

  • Après les flux de séquence "Approved" spécifiques (par exemple, pour total > 2500), vous pouvez inclure une "Send Task" étiquetée Notification.
  • Configurez les propriétés de cette tâche (référençant image_6cef82.png) :
  • Nom : Notification.
  • Pour utilisateurs/rôles : La capture d'écran montre [[SF_initiator.mail]], indiquant que le demandeur original recevra un e-mail.
  • Configuration de l'e-mail : Définissez le "Mail Subject" et liez un "Mail template" pour informer l'initiateur que sa demande a passé cette étape.

• Continuer avec les étapes d'approbation ultérieures :

  • Continuez à partir des flux conditionnels avec "User Task: Validation by department", suivi de sa propre "Exclusive Gateway" pour la décision.
  • Répétez ce modèle pour les niveaux d'approbation restants : Validation by financial, Validation by managing, et Validation by executive. Chacun aura une tâche utilisateur suivie d'une passerelle.
  • Chaque chemin "Approved" d'une passerelle se connecte à la tâche utilisateur suivante dans la séquence, continuant jusqu'à l'approbation finale.

5. Définir le chemin de rejet :
   • À partir de tout flux de séquence "Rejected" sortant d'une Exclusive Gateway, connectez-le à un processus de rejet central.

• Send Task : Notification de refus (Refus: Notification)
  • Connectez tous les chemins "Rejected" à une "Send Task" étiquetée Refus: Notification.
  • Configurez cette tâche pour envoyer un e-mail de notification au Demandeur original, l'informant que sa demande a été rejetée. Le contenu de l'e-mail devrait idéalement inclure la raison du refus fournie par l'approbateur.

6. Terminer le processus :
   • Événement de fin : Après l'étape d'approbation finale (de la passerelle "Validation by executive") ou après la tâche "Refusal Notification", ajoutez un "End Event" (un cercle rouge avec une bordure épaisse).
   • Étiquetez-le de manière appropriée (par exemple, "End"). Cela signifie l'achèvement du workflow.

Voici un aperçu complet de votre workflow d'approbation budgétaire complet :

Le workflow complet d'approbation budgétaire avec toutes les étapes, passerelles et notifications.

Actions de workflow clés et flux de données​

• Actions de bouton : Les boutons "Submit", "Approve" et "Reject" sur votre formulaire seront liés à des actions spécifiques dans ce workflow. "Submit" déclenchera l'événement de début "Nouvelle demande". Les boutons "Approve" et "Reject", apparaissant conditionnellement pour les approbateurs, compléteront la tâche utilisateur actuelle et activeront le flux de séquence sortant correspondant de la passerelle en fonction de ses conditions configurées.
• Mises à jour de statut : Au fur et à mesure que la demande progresse dans le workflow, le champ Status de votre formulaire sera automatiquement mis à jour par Softyflow (par exemple, de "Nouvelle Demande" à "Waiting for Department Manager Approval" à "Approved").
• Affectation d'utilisateur et notifications : Les tâches utilisateur sont assignées à des utilisateurs ou rôles spécifiques, et les tâches de notification (comme "Notification" et "Refus: Notification") sont configurées pour envoyer des e-mails. (Des explications plus détaillées sur la gestion des utilisateurs/rôles et la configuration des notifications par e-mail peuvent être trouvées dans nos sections dédiées sur la [Gestion des utilisateurs] et les [Notifications]).
• Passage de données : Les sections "Input" et "Output" visibles dans les propriétés des tâches indiquent comment les données du formulaire sont transmises et mises à jour par les tâches du workflow.

En modélisant visuellement ces étapes dans l'éditeur de workflow de Softyflow, vous créez un processus robuste et automatisé qui ne nécessite aucun codage. Vous dessinez littéralement votre logique métier !

4. Exécuter l'interface Web du rapport d'approbation budgétaire​

L'interface Web du rapport d'approbation budgétaire est un composant crucial qui permet aux responsables (et autres utilisateurs concernés) de surveiller, suivre et filtrer efficacement les demandes d'approbation. Cette interface fournit une vue centralisée de toutes les demandes—qu'elles soient en attente, en cours ou déjà terminées—en fonction du rôle de l'utilisateur et du statut du workflow. Voici comment vous allez la configurer et l'utiliser.

Étape par étape : Configuration de votre interface de rapport​

1. Créer un rapport

Tout d'abord, vous devez créer le rapport lui-même dans Softyflow, qui servira de source de données pour votre interface Web.

• Naviguer vers la section Reports :
  • Dans votre projet budget-approval-demo dans l'IDE Softyflow, localisez la section "Reports" dans le panneau de navigation de gauche (elle peut être représentée par une icône comme un document avec un graphique).
• Démarrer un nouveau rapport :
  • Cliquez sur l'"icône +" située à côté du titre "Reports" dans le panneau de gauche. Un menu déroulant apparaîtra.
  • Sélectionnez "New Report" parmi les options.

Création d'un nouveau rapport depuis la section "Reports".

• Remplir les détails du rapport :
  • Une boîte de dialogue "Create new Report" apparaîtra. Remplissez les informations suivantes :
    • Report Name : Entrez un nom descriptif, tel que My Tasks - Budget Approval - Report.
    • Process : Dans le menu déroulant, sélectionnez votre workflow précédemment créé : Budget Approval Management. Cela lie le rapport directement aux données générées par votre workflow.
    • Type : Choisissez Task. Ce type de rapport est idéal pour afficher les étapes manuelles actives (tâches) dans votre workflow, ce qui le rend parfait pour que les responsables voient les approbations en attente.
  • Cliquez sur "Add" pour créer le rapport.

La boîte de dialogue "Create new Report" avec le nom du rapport, le processus et le type.

2. Configurer le rapport

Une fois le rapport créé, vous devez configurer son contenu, y compris les données que vous souhaitez afficher et tous les filtres nécessaires.

L'écran de configuration du rapport.

Définir les Measures dans votre workflow​

Avant de pouvoir ajouter des colonnes à votre rapport, vous devez définir des "Measures" dans votre workflow.

Que sont les Measures ?

Les mesures sont les points de données spécifiques (champs) de votre formulaire ou variables de workflow que vous souhaitez rendre disponibles pour les rapports. Considérez-les comme une "liste blanche" de données que vous choisissez explicitement d'exposer pour les rapports et l'analyse. En définissant une variable comme mesure, vous indiquez à Softyflow que cette information est importante et doit être interrogeable lors de la construction de rapports.

Pour plus de détails, vous pouvez consulter la documentation sur les Measures.

• Naviguer vers votre workflow :
  • Revenez à la section "Workflow" dans le panneau de gauche et ouvrez votre workflow Budget Approval Management.

Navigation vers le workflow pour définir les mesures.

• Ouvrir le panneau Measures :
  • Sur le côté droit de l'éditeur de workflow, localisez et ouvrez le panneau "Measures" (il peut s'agir d'une icône comme une règle ou un graphique).

Ouverture du panneau "Measures" dans l'éditeur de workflow.

• Définir les champs :
  • Ici, vous définirez tous les champs souhaités en utilisant des chaînes JavaScript qui référencent vos champs de formulaire ou variables de workflow. Par exemple :
    • request_id (par exemple, ${request_id})
    • instance_id (par exemple, ${instance_id})
    • created_at (par exemple, ${created_at})
    • global_status (par exemple, ${global_status})
    • next_task (par exemple, ${next_task_name})
    • requestor_name (par exemple, ${requestor_name})
    • total_amount (par exemple, ${total})
    • Et tout autre champ pertinent de votre budget-approval-form tel que department, request_title, etc.

Définition des champs à utiliser comme mesures dans le rapport.

Définir les colonnes du rapport (dans les détails du rapport)​

Maintenant, dans le panneau "Report Details", vous spécifierez quelles measures définies apparaissent comme colonnes dans votre tableau de rapport.

• Localiser la section "Columns" : Dans le panneau "Report Details", trouvez la section "Columns".

• Ajouter/Sélectionner des colonnes :

  • Cliquez sur le champ de saisie dans la section "Columns", ou sur l'icône déroulante/plus, pour révéler une liste de toutes les measures disponibles.
  • Les champs que vous avez précédemment définis comme "Measures" dans votre workflow sont automatiquement listés ici, prêts pour que vous les sélectionniez et les ajoutiez comme colonnes à votre rapport.
  • Sélectionnez les champs souhaités à inclure comme colonnes dans votre rapport. Par exemple, vous sélectionnerez Created At, Status, request_id, instance_id, requestor_name, requestor_mail, report_status, global_status, next_validation_var, action_status, et next_task.

• Configurer l'affichage des colonnes : Une fois ajoutées, vous pouvez configurer davantage chaque colonne (bien que pas entièrement visible dans les captures d'écran fournies, il s'agit d'une fonctionnalité standard) :

  • Étiquettes : Changez l'étiquette visible par l'utilisateur (par exemple, de request_id à "Request ID").
  • Visibilité : Masquer ou afficher les colonnes.
  • Formatage : Appliquez un formatage spécifique (par exemple, formats de date pour Created At).

Définition des colonnes à afficher dans le rapport.

Appliquer des filtres​

Les filtres sont essentiels pour restreindre les données affichées aux utilisateurs, en s'assurant qu'ils ne voient que les informations qui les concernent (par exemple, leurs propres demandes ou les demandes assignées à leur département).

• Aller à la section Filtres :

  • Une fois que vous êtes dans la configuration de votre rapport nouvellement créé (après l'avoir créé à l'étape 1), localisez la section "Filters".

• Ajouter une règle de filtre :

  • Cliquez sur "+ Add Filter" pour créer une nouvelle règle de filtrage.

• Configurer le filtre :

  • Par exemple, pour afficher uniquement les données pertinentes pour l'utilisateur actuellement connecté (par exemple, les tâches qu'il a créées ou qui lui sont assignées) :
    • Sélectionnez le champ "Created By".
    • Choisissez la condition "equals".
    • Sélectionnez la valeur "Connected User".
  • Cela garantit que la visibilité des données est limitée par utilisateur et par contexte d'interface utilisateur.

Application de filtres au rapport pour restreindre la visibilité des données.

Filtres d'écran (Information facultative)​

Vous pouvez également ajouter des filtres d'écran pour adapter dynamiquement l'ensemble de données affiché en fonction de l'écran (ou onglet dans une interface Web) ouvert. Par exemple, vous pourriez définir un filtre qui affiche uniquement les "tâches en attente" lorsqu'un utilisateur navigue vers un onglet "My Tasks", et les "tâches terminées" sur un onglet "History". Cela offre une expérience dynamique et conviviale.

Utilisation de filtres d'écran pour adapter dynamiquement l'ensemble de données affiché.

Gestion des rapports​

Au fur et à mesure que votre application mûrit, vous gérerez son cycle de vie à travers différents environnements, tels que TEST (pour le développement), UAT (pour les tests d'acceptation utilisateur), et PROD (l'environnement de production en direct).

Softyflow prend en charge cela en vous permettant de déployer ou de "migrer" vos rapports entre les environnements. Cela garantit qu'un rapport construit et vérifié dans un environnement de test peut être promu de manière fiable en production sans être reconstruit.

L'interface présentée ci-dessous illustre comment vous pouvez gérer ces déploiements pour un processus de publication cohérent et contrôlé.

Gestion des déploiements de rapports dans différents environnements.

3. Lier le rapport à une interface Web

Pour rendre votre rapport visible et interactif pour les utilisateurs, vous devez l'intégrer dans une interface Web.

• Créer une nouvelle interface Web (ou réutiliser une existante) :
  • Naviguez vers la section "Web Interface" dans le panneau de gauche (ou utilisez le bouton "+ Interface" dans "Get Started").
  • Nommez-la en conséquence, par exemple : Report - Budget Approval.

Création d'une nouvelle interface Web pour afficher le rapport.

• Ajouter un widget Table :
  • Une fois dans le canevas de votre interface Web, faites glisser et déposez un "Table widget" sur la mise en page.
  • Liez-le à votre rapport : Dans les propriétés du widget Table, sélectionnez votre My Tasks - Budget Approval - Report comme source de données.

Liaison du widget table au rapport comme source de données.

4. Configurer le tableau

Un tableau de données sera ajouté à la mise en page de votre interface Web. Ce tableau agit comme la représentation visuelle de vos données de rapport, et nous allons maintenant le connecter à votre rapport et définir son comportement de base.

• Sélectionner le widget Table : Cliquez sur le widget "Table" que vous avez fait glisser sur le canevas de votre interface Web. Son panneau de propriétés s'ouvrira sur le côté droit de l'écran.

Sélection du widget table pour configurer ses propriétés.

• Lier la source de données :
  • Dans le panneau de propriétés, localisez la section "Data source".
  • Assurez-vous que le menu déroulant "Data source" est réglé sur "Report".
  • À côté du champ "Report", sélectionnez "My Tasks - Budget Approval - Report" (le rapport que vous avez créé à l'étape 1). C'est ainsi que le tableau sait où extraire ses données.

Liaison du widget table au "My Tasks - Budget Approval - Report".

5. Définir les colonnes du rapport

C'est ici que vous spécifiez exactement quelles informations de votre rapport vous souhaitez afficher dans le tableau, et comment elles doivent apparaître.

• Localiser la section "Columns" : Dans le panneau de propriétés du widget Table (le même qui est ouvert depuis l'étape 4), faites défiler vers le bas pour trouver la section "Columns". Ici, vous verrez une liste de lignes, chacune représentant une colonne de votre tableau.
• Ajouter et configurer des colonnes :
  • Vous pouvez cliquer sur "Add Column" pour ajouter une nouvelle colonne vide.
  • Les champs que vous avez définis comme "Measures" dans votre workflow (à l'étape 2) sont automatiquement disponibles pour que vous les sélectionniez et les configuriez comme colonnes ici.
  • Pour chaque colonne, vous configurerez :
    • Field/ID (champ le plus à gauche) : Il s'agit de l'ID interne de la mesure de votre workflow (par exemple, request, SF_create, report_status).
    • Label (champ du milieu) : Il s'agit du nom convivial qui apparaîtra comme en-tête de colonne (par exemple, "Request Number", "Create At", "Status").
    • Type (menu déroulant) : Le type de données de la colonne (par exemple, String, Date, Number).
  • Exemples de colonnes à ajouter (comme vu dans la capture d'écran) :
    • request comme "Request Number" (String)
    • SF_create comme "Create At" (Date)
    • SF_due comme "Due Date" (Date)
    • request_created_by comme "Created by" (String)
    • request_requestor comme "Requestor" (String)
    • report_status comme "Status" (String)
    • open comme "Open" (String)
• Formatage de date :
  • En bas de la section "Columns", vous trouverez des options pour le formatage de date (par exemple, yyyy-MMM-DD), garantissant que les dates sont affichées de manière cohérente et lisible.

Définition des colonnes à afficher dans le tableau du rapport.

6. Personnaliser l'affichage (Optionnel)

Softyflow fournit des options de personnalisation étendues pour améliorer l'expérience utilisateur de votre rapport.

• Style : Appliquez un style personnalisé au tableau ou à ses cellules.
• Widgets supplémentaires : Ajoutez d'autres widgets comme des barres de recherche, des filtres avancés, des étiquettes ou des indicateurs de statut colorés à côté ou dans le tableau.
• Formatage conditionnel : Appliquez des conditions pour mettre en évidence certaines valeurs (par exemple, colorer les lignes en rouge pour le statut "Rejected", ou en vert pour "Approved").

7. Enregistrer et prévisualiser l'interface

Il est crucial d'enregistrer et de prévisualiser régulièrement votre travail pour vous assurer que tout fonctionne et apparaît comme prévu.

• Enregistrer l'interface Web : Utilisez l'icône de sauvegarde (généralement une icône de disquette) dans la barre supérieure de l'IDE pour enregistrer votre interface Web.

Enregistrement de l'interface Web pour le rapport.

• Prévisualiser en tant qu'utilisateur final : Cliquez sur l'icône "œil" (ou bouton "Preview") pour ouvrir l'interface dans un nouvel onglet de navigateur. Cela vous permet de tester la mise en page, la réactivité et l'exactitude des données exactement comme un utilisateur final le verrait.

Prévisualisation de l'interface Web du rapport.

8. Vue finale du rapport

La vue utilisateur finale de votre interface Web de rapport affichera un tableau dynamique rempli avec des données en direct de vos demandes d'approbation budgétaire. Les onglets et filtres que vous avez configurés permettront aux utilisateurs d'accéder efficacement aux tâches en attente, à leurs propres demandes, ou de revoir les demandes historiques terminées. Tout est visible et interactif directement dans l'interface utilisateur de la plateforme Softyflow.

La vue finale de l'interface Web du rapport d'approbation budgétaire.

Cela complète la configuration d'une interface de rapport qui permet aux responsables de visualiser et d'interagir avec les demandes budgétaires dans une mise en page conviviale et segmentée, améliorant considérablement l'utilisabilité de votre application Softyflow. En savoir plus sur le reporting et explorez notre documentation sur les rapports.

5. Créer un Backoffice​

Pour gérer et stocker efficacement toutes les demandes d'approbation budgétaire, et les données qui y sont associées, vous pouvez créer un Backoffice dédié en utilisant Softyflow. Un Backoffice fournit une interface conviviale pour les administrateurs ou des rôles spécifiques pour afficher, ajouter, modifier et supprimer directement des enregistrements dans les collections de base de données de votre application. En savoir plus sur l'intégration de base de données.

Guide étape par étape : Construction de votre Backoffice​

1. Accéder à la section Web Interface :

   • Depuis le panneau de navigation de gauche dans l'IDE Softyflow, localisez et cliquez sur la section "Web Interface". C'est ici que tous vos formulaires, menus et backoffices sont gérés.

2. Créer un nouveau Backoffice :

   • Dans la section "Web Interface", recherchez l'"icône +" (signe plus) à côté du titre "Web Interface".
   • Cliquez sur cette "icône +", et un menu déroulant apparaîtra.
   • Parmi les options, sélectionnez "New Backoffice".

Création d'un nouveau backoffice depuis la section "Web Interface".

3. Configuration du Backoffice (Configurer la connexion à la base de données) :
   • Une fenêtre popup intitulée "Create New Backoffice" apparaîtra. C'est ici que vous définirez le cœur de votre backoffice, y compris sa connexion à une collection de base de données.
   • Entrer un nom : Dans le champ "Backoffice Name", fournissez un nom clair, par exemple : budget-approval-backoffice.

La boîte de dialogue "Create New Backoffice".

• Se connecter à une nouvelle base de données ou à une existante : Il s'agit d'un choix crucial :

• Sélectionner "Yes" (Se connecter à une nouvelle base de données) : Si vous choisissez "Yes", Softyflow créera automatiquement une nouvelle collection de base de données pour ce backoffice. Vous serez ensuite invité à définir les champs initiaux (schéma) pour cette nouvelle collection directement dans la popup. Pour notre budget-approval-backoffice, vous définirez des champs comme :

  • Name (Type : String)
  • Manager (Type : User)
  • Date (Type : Date)

Cela signifie que votre nouvelle collection commencera avec ces colonnes prédéfinies.

Connexion du backoffice à une nouvelle collection de base de données.

• Sélectionner "No" (Se connecter à une collection existante) : Si vous avez déjà une collection (par exemple, si vous en aviez déjà créé une manuellement pour vos demandes budgétaires), vous sélectionneriez "No" puis choisiriez votre collection existante dans la liste déroulante.

Connexion du backoffice à une collection de base de données existante.

4. Configurer le tableau du Backoffice :
   • Après la configuration initiale, un nouvel écran s'ouvrira, affichant la vue principale de votre backoffice nouvellement créé. Cet écran inclut automatiquement un tableau qui est connecté à votre collection de base de données sélectionnée (ou nouvellement créée).
   • Ajouter/Modifier des colonnes : Le tableau affichera initialement des colonnes basées sur votre schéma de base de données. Vous pouvez maintenant personnaliser davantage quelles colonnes sont affichées et comment elles apparaissent.
   • Dans le panneau de propriétés du tableau (généralement à droite), vous pouvez ajouter, modifier ou supprimer des colonnes. Assurez-vous que votre tableau affiche les champs pertinents comme :
     • name (String)
     • manager (String)
     • date (Date)
     • Et surtout, des champs comme request_id, status, total, request_title de vos données de demande budgétaire.
   • Vous pouvez souvent glisser-déposer pour réorganiser les colonnes, modifier leurs étiquettes d'affichage et ajuster leurs types de données ou leur formatage.

Configuration des colonnes du tableau du backoffice.

5. Enregistrer et exécuter votre Backoffice :
   • Enregistrer l'interface : Cliquez sur l'icône "Save Interface" (généralement une icône de disquette) dans la barre supérieure de l'IDE pour enregistrer toutes vos configurations de backoffice.
   • Visualiser l'interface : Ensuite, cliquez sur l'icône "View Interface" (souvent une icône "œil" ou bouton "Run") pour prévisualiser votre backoffice en mode d'exécution. Il s'ouvrira dans un nouvel onglet de navigateur.

Enregistrement et exécution de l'interface backoffice.

6. Aperçu du Backoffice (Vue d'exécution) :
   • Dans la vue d'exécution de votre backoffice, vous pouvez maintenant interagir avec vos données :
     • Voir la liste des entrées : Tous les enregistrements actuellement dans votre collection de base de données connectée seront affichés dans le tableau.
     • Ajouter une nouvelle entrée : Cliquez sur le bouton "Ajouter" (généralement trouvé au-dessus du tableau) pour ajouter manuellement un nouvel enregistrement à votre collection. Cela peut être utile pour les tests ou la saisie manuelle de données.
     • Modifier ou supprimer des entrées : Dans la colonne des opérations (souvent la dernière colonne du tableau), vous trouverez des boutons ou icônes pour modifier une entrée existante ou la supprimer.

La vue d'exécution du backoffice, montrant la liste des entrées.

Ajout d'une nouvelle entrée dans le backoffice.

Vérifier la base de données (Optionnel mais recommandé)​

C'est une bonne pratique de vérifier directement votre collection de base de données :

• Aller à l'onglet Base de données : Dans l'IDE Softyflow, naviguez vers l'onglet "Database" (généralement représenté par une icône de base de données) dans le panneau de gauche.

Navigation vers l'onglet "Database" pour vérifier la collection.

• Localiser votre collection : Trouvez votre collection nouvellement créée (ou connectée) (par exemple, budget-approval-backoffice_db si vous en avez créé une nouvelle, ou le nom de votre collection existante).
• Vérifier les droits d'accès : Assurez-vous que les droits d'accès nécessaires (opérations Create, Read, Update, Delete - CRUD) sont correctement définis pour les rôles d'utilisateurs concernés. Cela contrôle qui peut effectuer quelles actions sur les données.
• Utiliser Migrate (si nécessaire) : Si vous apportez des modifications au schéma (ajout/suppression de champs) à votre collection, vous pourriez utiliser la fonctionnalité "Migrate" pour pousser ces changements de schéma à travers différents environnements (TEST, UAT, PROD) si votre instance Softyflow le prend en charge.

Vérification des droits d'accès et utilisation de la fonctionnalité "Migrate" pour la collection de base de données.

Cela complète la configuration du backoffice, vous fournissant une interface centrale pour gérer et auditer efficacement vos enregistrements de demandes d'approbation budgétaire.

Félicitations ! 🎉​

Vous avez construit avec succès votre première application Softyflow complète ! Votre application de demande d'approbation budgétaire inclut maintenant :

• ✅ Formulaire convivial avec conception d'interface Web
• ✅ Workflow automatisé utilisant la conception de processus
• ✅ Stockage de données avec collections MongoDB
• ✅ Rapports interactifs avec outils de reporting
• ✅ Backoffice administratif pour la gestion des données

Prochaines étapes​

Maintenant que vous maîtrisez les bases, voici quelques façons d'élargir vos connaissances :

Explorer les fonctionnalités avancées​

• Intégration - Connectez-vous à des APIs et systèmes externes
• Authentification - Configurez le SSO et la gestion des utilisateurs
• Configuration mail - Configurez les notifications par e-mail
• Planification - Automatisez les tâches et processus

En savoir plus sur le développement​

• Test et déploiement - Bonnes pratiques pour le déploiement
• Surveillance et exécution - Suivez vos applications en production
• Documentation SDK - Personnalisations avancées
• Intégration Node.js - Programmation côté serveur

Regarder les tutoriels vidéo​

• Vidéos Web Modeler - Conception d'interface visuelle
• Vidéos processus et rapports - Automatisation de workflow
• Vidéos bases de données - Gestion de données

Administration et sécurité​

• Gestion des utilisateurs - Gérez les utilisateurs et les permissions
• Gestion des rôles - Définissez les contrôles d'accès
• Paramètres - Configurez votre environnement
• Logs - Surveillez et dépannez

Continuez à apprendre​

• Révisez les concepts de base pour approfondir votre compréhension
• Consultez le guide de démarrage pour des informations plus complètes
• Restez à jour avec nos dernières notes de version

Vous êtes maintenant prêt à construire des applications plus complexes avec Softyflow. Bon développement ! 🚀