Interface Web

Une Interface Web est la couche visuelle de votre application — l'environnement dans lequel les utilisateurs interagissent avec vos formulaires, tableaux de bord et écrans de tâches manuelles. Conçue avec un comportement réactif à l'esprit, l'interface s'adapte automatiquement aux appareils de bureau, tablettes ou mobiles.

Dans Softyflow, chaque interface est construite autour d'écrans, qui sont essentiellement des pages d'application. Ces écrans sont composés de widgets — des éléments de conception modulaires tels que des tableaux, des formulaires, des graphiques ou des boutons qui définissent ce que l'utilisateur voit et comment il interagit avec votre application.

Pour commencer, assurez-vous d'avoir terminé la configuration de votre projet et de comprendre les concepts de base derrière les interfaces Softyflow.

Le modeleur web fournit une toile de type glisser-déposer pour concevoir l'interface utilisateur de votre application.

1. Widgets​

Les widgets sont les blocs de construction fondamentaux de votre écran. Vous pouvez les glisser-déposer sur votre toile pour créer des interfaces utilisateur interactives et basées sur les données. Chaque widget peut être configuré individuellement et lié à des variables, des collections MongoDB, des processus, ou des sources externes grâce à nos fonctionnalités d'intégration.

1.1. Catégories de widgets​

Les widgets sont organisés en cinq catégories, chacune servant un objectif spécifique dans la construction d'une expérience utilisateur complète :

1.1.1. Composants de formulaire​

Ces widgets sont essentiels pour recueillir les entrées des utilisateurs dans les formulaires ou les flux de travail. Ils vont des simples champs de texte aux sélecteurs d'utilisateurs et de groupes plus complexes.

• Types d'entrée : Entrée, E-mail, Zone de texte, Nombre
• Date et heure : Minuteur, Heure, Date
• Sélecteurs : Bouton radio, Case à cocher, Sélection, Commutateur, Curseur
• Notation et commentaires : Note
• Entrée avancée : Auto-complétion, Téléchargement de fichier
• Gestion des utilisateurs : Sélecteur d'utilisateur, Sélecteur de groupe
• Actions : Bouton
• Outils de contenu : Éditeur, Devise

Une variété de composants de formulaire sont disponibles pour capturer les entrées des utilisateurs.

1.1.2. Composants de base​

Ces widgets sont utilisés pour les éléments d'interface utilisateur fondamentaux et l'affichage de contenu. Ils aident à structurer le contenu et à fournir des indices visuels à l'utilisateur.

• Éléments de mise en page : Espaceur, Séparateur
• Composants de texte : Titre, Texte
• Éléments multimédias : Image, Miniature
• Affichage de contenu : Carte, Alerte
• Outils de développement : Html
• Éléments visuels : Icône
• Outils de document : Lecteur PDF

Composants de base pour ajouter du texte, des images et d'autres éléments d'interface utilisateur essentiels.

1.1.3. Composants de mise en page​

Utilisés pour structurer et organiser le contenu sur la page, ces widgets aident à créer une mise en page propre et réactive.

• Systèmes de grille : Grille, Section
• Éléments de conteneur : Accordéon, Popup, Tiroir
• Mise en page de navigation : Onglets

Composants de mise en page pour structurer votre page avec des grilles, des onglets et des popups.

1.1.4. Composants de données​

Ces widgets sont utilisés pour afficher et gérer des données provenant de diverses sources comme les bases de données et les rapports.

• Affichage de données : Tableau
• Visualisation de données : Graphique de base
• Mesures de performance : Historique du widget

Composants de données pour afficher des tableaux, des graphiques et des données historiques.

1.1.5. Composants avancés​

Ces widgets prennent en charge un contrôle de processus et une interactivité étendus, ajoutant une couche de sécurité et d'intégration à votre application.

• Flux de processus : Étapes (flux de travail en plusieurs étapes), Sélecteur de lecteur (sélection de fichiers dans le cloud)
• Sécurité : Captcha (protection contre les robots), Signature (signatures numériques)
• Intégration : Code QR (fonctionnalité de numérisation rapide)

Composants avancés pour les processus en plusieurs étapes, la sécurité et les intégrations.

Les widgets sont conçus par glisser-déposer dans le modeleur web et sont alignés à l'aide du système de mise en page en grille pour une structure réactive.

1.2. Configuration du widget​

Chaque widget est livré avec un riche ensemble d'options de configuration qui vous permettent d'adapter son comportement par écran et par contexte. Cela permet un haut degré de personnalisation et de comportement dynamique.

• Nom : Le nom que vous donnez à vos composants. Dans certains cas, comme pour les PopUp, les Séparateurs ou les Entrées, il sera affiché dans le rendu final.
• Variable / Modèle : Un nom distinctif qui contient ou représente le modèle de données du composant.
• ID : Un identifiant unique que vous attribuez au composant pour le distinguer dans l'interface ou la logique.
• Valeur par défaut : La valeur initiale attribuée au composant. Il peut s'agir d'une valeur statique ou liée dynamiquement à une variable.
• Règles de visibilité : Définissez si un widget est visible ou masqué en fonction du rôle, de l'écran ou des données du formulaire.
• Modifiable : Spécifie si le composant est modifiable ou en lecture seule.
• Obligatoire : Marque le composant comme obligatoire, en fonction de conditions définies.
• Liaison : Lie le contenu du composant à des variables, des collections de données ou des réponses d'API de notre système d'intégration.

Vous pouvez définir différentes règles par écran, garantissant qu'un widget se comporte différemment d'une étape à l'autre sans le dupliquer.

Le panneau de configuration des widgets permet une personnalisation détaillée des propriétés de chaque widget.

2. Actions​

Les Actions apportent interactivité et logique à votre interface à l'aide de notre système d'actions complet. Elles définissent ce qui se passe lorsque les utilisateurs effectuent des événements — comme cliquer sur un bouton ou soumettre un formulaire.

2.1. Création d'une nouvelle action​

Suivez ces étapes pour créer une nouvelle action à partir de l'interface :

1. Cliquez sur n'importe quel widget.
2. Cliquez sur Créer une action au clic.
3. Ajoutez les Actions souhaitées à partir de la liste disponible.
4. Cliquez sur Enregistrer pour stocker les actions sur l'interface.

Création d'une action "Au clic" pour un bouton dans le modeleur web.

Une action est un comportement déclenchable prédéfini qui peut être lié à des widgets, des variables ou des conditions logiques. Les utilisations courantes incluent :

• Appeler des API (par exemple, récupérer ou publier des données)
• Démarrer des flux de travail ou des processus
• Mettre à jour des variables ou des modèles
• Basculer la visibilité des widgets
• Exécuter des fonctions ou des scripts personnalisés
• Afficher des alertes, des confirmations ou des messages

2.1.1. Exemples de cas d'utilisation​

• Un bouton qui soumet un formulaire et envoie des données à une collection.
• Un écran qui, au chargement, récupère des rapports filtrés à partir d'une API.
• Un interrupteur qui révèle un autre champ et définit une variable.

2.2. Actions disponibles​

Les Actions sont organisées par catégorie. Voici un aperçu de ce que vous pouvez accomplir avec elles :

2.2.1. DOM (Manipulation de l'interface/IU)​

Ces actions vous permettent de manipuler dynamiquement l'interface utilisateur.

• show, hide, toggleVisibilty
• setRequired, setDisable, disableForm
• refreshWidget, fillForm, clearForm
• confirm, pushToArray, alertMessage
• validateForm, validateHistoryComment
• setModel, setVariable

Une liste d'actions DOM disponibles pour la manipulation de l'interface utilisateur.

2.2.2. Collection (Gestion des données)​

Gérez les données dans les collections MongoDB et les bases de données externes avec ces actions.

• addToCollection, addManyToCollection, updateCollection
• getCollection, AggregateCollection
• getDocument, deleteDocument
• insertTable (EDS), updateTables (EDS)
• findOne (EDS), findMany (EDS), countTables (EDS)
• insertMany (EDS), delete (EDS), exectuteStatement (EDS)

Une liste d'actions de collection pour la manipulation des données.

2.2.3. Flux de travail/Processus​

Intégrez votre interface avec les fonctionnalités de conception de processus et de surveillance.

• startProcess,OpenNextTask, update, save
• openInstance, redirect, execute

Une liste d'actions de flux de travail et de processus pour l'intégration de processus.

2.2.4. Intégrations d'API​

Connectez-vous à des services externes via notre système d'intégration.

• invokeApi, sendEmail, nextValue
• editPDFTemplate, previewPDF

Une liste d'actions d'intégration d'API pour la connexion à des services externes.

2.2.5. Gestion des utilisateurs​

Intégrez avec les systèmes de gestion des utilisateurs et d'authentification.

• findUserById, findUsers
• userMetadata, getUserPendingTasks

Une liste d'actions de gestion des utilisateurs pour les opérations liées aux utilisateurs.

2.2.6. De base​

Ces actions fournissent des constructions logiques de base pour vos flux d'actions.

• if, if(obsolète)
• repeat (boucle), loopArray

Actions de base pour la logique conditionnelle et les boucles.

3. CSS et style​

Le style contrôle l'apparence de votre application — au niveau du widget et sur toute la mise en page. Softyflow vous offre plusieurs niveaux de capacités de style pour garder votre interface cohérente, réactive et facile à personnaliser.

Le panneau CSS et style permet un style personnalisé de votre application.

Chaque widget comprend un panneau Style où vous pouvez :

• Définir un texte de remplacement
• Contrôler la largeur (par exemple, 100 %, auto)
• Attribuer une classe personnalisée (par exemple, input-demo)

Cela vous permet de gérer l'espacement, la visibilité et l'alignement directement dans le modeleur web — sans code requis.

Le panneau de style d'un widget permet des ajustements de style rapides et faciles.

4. Paramètres de la page​

Le panneau Paramètres de la page définit l'identité et le comportement d'affichage de votre page d'interface. Il régit les métadonnées, les préférences de mise en page, la visibilité des utilisateurs en fonction de la gestion des rôles et la navigation.

Le panneau des paramètres de la page fournit un emplacement centralisé pour toutes les configurations au niveau de la page.

4.1. Informations générales​

Cette section vous permet de définir les informations générales de votre page, telles que le titre, le favicon et les autorisations d'accès.

• Nom : Le titre de la page affiché dans les menus et les en-têtes.
• Nom dynamique : Facultatif. Utilisez des variables (par exemple, ${request_number}) pour ajuster dynamiquement le titre de la page en fonction des données de l'utilisateur ou du formulaire.
• URL du favicon : Une URL vers un favicon personnalisé affiché dans l'onglet du navigateur.
• Utilisateur : Contrôle qui peut accéder à la page en fonction de notre système de gestion des utilisateurs. Par défaut, l'accès est défini sur Tout le monde.
• Afficher dans la page d'accueil : Indique si cette page apparaît dans l'interface d'accueil de l'application (page d'accueil).
  • URL de la miniature : Définit une image d'aperçu pour la page dans la page d'accueil ou la galerie de projets.
  • Espace de travail : Facultatif. Utilisez-le pour regrouper logiquement les pages dans des environnements multi-applications.

La section Informations générales dans les paramètres de la page.

4.2. Configuration​

Cette section vous permet de configurer la mise en page et l'apparence de votre page.

• Titre : Alignez le titre de la page à Gauche, Droite ou Haut.
• Largeur de l'étiquette : Définissez la largeur (en pixels) des étiquettes de formulaire pour une mise en page cohérente (par exemple, 100).
• Afficher la navigation : Indique si le panneau de navigation est affiché.
• Masquer le titre / Masquer l'en-tête : Affichez ou masquez le titre de la page et l'en-tête global.
• Taille : Définissez la densité visuelle de votre formulaire :
  • mini : Mise en page compacte
  • petite : Mise en page standard
  • moyenne : Mise en page spacieuse

La section Configuration dans les paramètres de la page.

Ces paramètres aident à adapter la présentation et l'accessibilité de votre page à des besoins spécifiques — que vous construisiez pour tous les utilisateurs ou des rôles spécifiques, des applications de back-office internes ou des applications publiques.

4.3. Liens​

Vous pouvez ajouter des liens CDN externes pour charger des bibliothèques JavaScript ou CSS dans votre application. C'est utile pour inclure des bibliothèques tierces comme Bootstrap, jQuery ou Font Awesome.

• Collez l'URL du CDN dans le champ de saisie.
• Sélectionnez le type : JS (JavaScript) ou CSS.
• Utilisez Ajouter un lien pour inclure plusieurs ressources CDN.
• Cliquez sur le bouton rouge moins (–) pour supprimer un lien.

📘 Les cas d'utilisation courants incluent le chargement de bibliothèques comme Bootstrap, jQuery, Font Awesome, etc.

La section Liens dans les paramètres de la page pour ajouter des liens CDN externes.

4.4. Conception de l'interface utilisateur​

Personnalisez l'interface à l'aide d'expressions compatibles JavaScript et d'URL compatibles avec notre SDK.

La section Conception de l'interface utilisateur dans les paramètres de la page pour une personnalisation avancée de l'interface utilisateur.

• URL CSS
  Une URL personnalisée pour charger un fichier CSS qui stylise l'interface utilisateur.

• URL du logo
  Une URL directe vers l'image du logo affichée dans l'interface de l'application.

5. Écrans​

Un écran est comme un masque appliqué à votre interface web. Il définit ce que chaque utilisateur voit, quand il le voit et comment il interagit avec tout au long du flux de travail. Au lieu de dupliquer des pages ou des formulaires, les écrans vous permettent de personnaliser la visibilité et le comportement pour différents rôles ou étapes de processus — le tout dans la même structure d'interface.

5.1. Pourquoi utiliser des écrans ?​

Par exemple, dans une application de demande de congé construite avec nos outils de conception de processus :

• Écran de lancement : L'employé remplit le formulaire.
• Écran du responsable RH : L'équipe RH valide la demande.
• Écran d'approbation : Un réviseur final confirme ou rejette la demande.

Un exemple de la façon dont les écrans peuvent être utilisés dans un flux de travail de demande de congé.

Même si tous les utilisateurs interagissent avec la même interface, les écrans contrôlent ce qui est affiché et modifiable en fonction du contexte. C'est particulièrement puissant lorsqu'il est combiné avec le contrôle d'accès basé sur les rôles.

5.2. Comment fonctionnent les écrans​

Lorsque vous ajoutez un nouvel écran :

• Il hérite de tous les widgets et de la mise en page de l'écran d'origine.
• Vous n'avez pas besoin de dupliquer ou de reconstruire le contenu.
• Chaque widget peut être configuré avec des règles :
  • Disponible : Le widget est-il présent dans l'interface ?
  • Visible : Est-il montré à l'utilisateur ?
  • Obligatoire : Doit-il être rempli ?
  • Désactivé : Est-il en lecture seule ?

Ces interrupteurs sont spécifiques à l'écran et définissent le comportement des widgets à travers les étapes du processus.

5.3. Connexion des écrans aux étapes du processus​

Chaque écran peut être directement attribué à une étape de processus dans notre modeleur de processus. Cette liaison garantit que l'interface s'adapte automatiquement lorsqu'un utilisateur atteint une étape spécifique.

Cela permet au comportement de changer en fonction de :

• L'étape actuelle du processus
• Le rôle de l'utilisateur (configuré via la gestion des utilisateurs)
• Les valeurs des données présentes dans le formulaire

Connexion des écrans aux étapes du processus dans le modeleur de processus.

Prochaines étapes​

Maintenant que vous comprenez la conception d'interfaces web, continuez à construire votre application :

• Conception de processus - Connectez vos interfaces à de puissants flux de travail
• Intégration de base de données - Connectez vos widgets à des sources de données
• Intégration - Connectez-vous à des API et des services externes
• Rapports - Créez des visualisations de données et des rapports
• Test et déploiement - Testez vos interfaces dans différents environnements

Pour une expérience pratique, essayez nos tutoriels pas à pas ou regardez nos tutoriels vidéo sur le modeleur web.

Pour une personnalisation avancée, explorez notre SDK du modeleur web et découvrez la bibliothèque complète de widgets.