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 ordinateurs de bureau, tablettes ou appareils 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, formulaires, graphiques ou 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 des interfaces Softyflow.

Le modeleur web fournit un canevas par glisser-déposer pour concevoir l'interface utilisateur de votre application.

1. Widgets​

Les widgets sont les éléments de base fondamentaux de votre écran. Vous pouvez les glisser-déposer sur votre canevas pour créer des interfaces utilisateur interactives et pilotées par les données. Chaque widget peut être configuré individuellement et lié à des variables, des collections MongoDB, des processus, ou des sources externes via 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 collecter les saisies des utilisateurs dans les formulaires ou les workflows. Ils vont des simples champs de texte aux sélecteurs d'utilisateurs et de groupes plus complexes.

• Types de Saisie: Input, Email, Text Area, Number
• Date & Heure: Timer, Time, Date
• Sélecteurs: Radio Button, Checkbox, Select, Switch, Slider
• Notation & Retour: Rate
• Saisie Avancée: Autocomplete, File Upload
• Gestion des Utilisateurs: User Picker, Group Picker
• Actions: Button
• Outils de Contenu: Editor, Currency

Une variété de composants de formulaire est disponible pour capturer les saisies 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: Spacer, Divider
• Composants de Texte: Title, Text
• Éléments Média: Image, Thumbnail
• Affichage de Contenu: Card, Alert
• Outils de Développement: Html
• Éléments Visuels: Icon
• Outils de Document: PDF Reader

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

1.1.3. Composants de Mise en Page​

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

• Systèmes de Grille: Grid, Section
• Éléments Conteneurs: Collapse, Popup, Drawer
• Mise en Page de Navigation: Tabs

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 les données provenant de diverses sources comme les bases de données et les rapports.

• Affichage de Données: Table
• Visualisation de Données: Basic Chart
• Métriques de Performance: Widget History

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 le contrôle de processus étendu et l'interactivité, ajoutant une couche de sécurité et d'intégration à votre application.

• Flux de Processus: Steps (workflows multi-étapes), Drive Picker (sélection de fichiers cloud)
• Sécurité: Captcha (protection contre les bots), Signature (signatures numériques)
• Intégration: QR Code (fonctionnalité de scan rapide)

Composants avancés pour les processus multi-é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 des Widgets​

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

• Name: Le nom que vous donnez à vos composants. Dans certains cas, comme PopUp, Divider ou Input, il sera affiché dans le rendu final.
• Variable / Model: 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.
• Default Value: La valeur initiale attribuée au composant. Il peut s'agir d'une valeur statique ou liée dynamiquement à une variable.
• Visibility Rules: Définissent si un widget est visible ou masqué en fonction du rôle, de l'écran ou des données du formulaire.
• Editability: Spécifie si le composant est modifiable ou en lecture seule.
• Requirement: Marque le composant comme obligatoire, en fonction de conditions définies.
• Binding: Lie le contenu du composant à des variables, des collections de données ou des réponses 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 à travers les étapes 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 de l'interactivité et de la logique à votre interface en utilisant 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, 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 Create On Click Action.
3. Ajoutez vos Actions souhaitées à partir de la liste disponible.
4. Cliquez sur Save pour enregistrer les actions sur l'interface.

Création d'une action "On Click" 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 APIs (par exemple, récupérer ou envoyer des données)
• Démarrer des workflows ou processus
• Mettre à jour des variables ou des modèles
• Basculer la visibilité des widgets
• Exécuter des fonctions ou scripts personnalisés
• Afficher des alertes, confirmations ou messages

2.1.1. Exemples de Cas d'Usage​

• 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 depuis 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/UI)​

Ces actions vous permettent de manipuler l'interface utilisateur de manière dynamique.

• 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. Workflow/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 workflow et de processus pour l'intégration des processus.

2.2.4. Intégrations API​

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

• invokeApi, sendEmail, nextValue
• editPDFTemplate, previewPDF

Une liste d'actions d'intégration API pour se connecter à 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. Basique​

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

• if, if(deprecated)
• repeat (loop), loopArray

Actions de base pour la logique conditionnelle et les boucles.

3. CSS et Style​

Le style contrôle l'apparence et la convivialité de votre application — à la fois au niveau du widget et sur l'ensemble de 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 inclut un panneau Style où vous pouvez :

• Définir le texte d'espace réservé
• 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 — aucun code requis.

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

4. Paramètres de Page​

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

Le panneau Paramètres de 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.

• Name: Le titre de la page affiché dans les menus et les en-têtes.
• Dynamic Name: Optionnel. 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.
• Favicon URL: Une URL vers un favicon personnalisé affiché dans l'onglet du navigateur.
• User: 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 Everybody.
• Show in HP: Active ou désactive l'affichage de cette page dans l'interface d'accueil de l'application (page d'accueil).
  • Thumbnail URL: Définit une image d'aperçu pour la page dans la page d'accueil ou la galerie de projets.
  • Workspace: Optionnel. Utilisez-le pour regrouper logiquement les pages dans des environnements multi-applications.

La section Informations Générales dans les Paramètres de Page.

4.2. Configuration​

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

• Title: Alignez le titre de la page à Left, Right ou Top.
• Label Width: Définissez la largeur (en pixels) des étiquettes de formulaire pour une mise en page cohérente (par exemple, 100).
• Show Nav: Active ou désactive l'affichage du panneau de navigation.
• Hide Title / Hide Header: Afficher ou masquer le titre de la page et l'en-tête global.
• Size: Définissez la densité visuelle de votre formulaire :
  • mini: Mise en page compacte
  • small: Mise en page standard
  • medium: Mise en page spacieuse

La section Configuration dans les Paramètres de 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 publiques.

4.3. Liens​

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

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

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

La section Liens dans les Paramètres de Page pour ajouter des liens CDN externes.

4.4. Conception UI​

Personnalisez l'interface en utilisant des expressions compatibles JavaScript et des URL compatibles avec notre SDK.

La section Conception UI dans les Paramètres de Page pour une personnalisation avancée de l'interface utilisateur.

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

• Logo URL 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 workflow. 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 les É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 workflow 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. Cela 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 original.
• Vous n'avez pas besoin de dupliquer ou de reconstruire le contenu.
• Chaque widget peut être configuré avec des règles :
  • Available : Le widget est-il présent dans l'interface ?
  • Visible : Est-il affiché à l'utilisateur ?
  • Required : Doit-il être rempli ?
  • Disabled : Est-il en lecture seule ?

Ces bascules sont spécifiques à l'écran et définissent comment les widgets se comportent à travers les étapes du processus.

5.3. Connexion des Écrans aux Étapes de Processus​

Chaque écran peut être assigné directement à 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 dans le processus
• Le rôle de l'utilisateur (configuré via la gestion des utilisateurs)
• Les valeurs de données présentes dans le formulaire

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

Prochaines Étapes​

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

• Conception de Processus - Connectez vos interfaces à des workflows puissants
• Intégration de Base de Données - Connectez vos widgets à des sources de données
• Intégration - Connectez-vous avec des APIs et services externes
• Rapports - Créez des visualisations de données et des rapports
• Test & 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 du modeleur web.

Pour une personnalisation avancée, explorez notre SDK du Modeleur Web et apprenez-en plus sur la bibliothèque complète de widgets.