Éléments d'interface utilisateur

Les utilisateurs interagissent avec votre application métier via des interfaces utilisateur. Avant de commencer la création de vos applications, consultez ces éléments d'interface utilisateur.

Pages

Les pages sont les interfaces utilisateur de votre application. Vous pouvez utiliser des pages pour générer différents types d'interfaces utilisateur pour votre utilisateur.

Vous développez vos pages avec un concepteur low-code dans lequel vous pouvez faire glisser différents composants sur votre page et les configurer. Lorsque votre application est déployée, vos pages sont affichées sous forme de pages Web HTML lors de l'exécution.

Il existe trois façons d'ajouter des pages à votre application :

Les utilisateurs de base et les utilisateurs avancés peuvent cliquer sur le menu de la page dans le panneau de navigation supérieur, puis cliquer sur Nouveau.
Lorsque vous commencez à créer une application, votre première page est créée par défaut. La palette de vues étant également démarrée immédiatement, vous pouvez commencer à ajouter des vues à votre première page. Cette page initiale est votre page de démarrage. Chaque fois que vous créez une page à l'aide de cette méthode, la palette de vues est automatiquement démarrée.
Les utilisateurs de base et les utilisateurs avancés peuvent ajouter de nouvelles pages lors de la configuration de certaines vues dans leur application.
Vous pouvez également ajouter de nouvelles pages lors de la personnalisation de certaines vues. Imaginons que vous ajoutiez un bouton à votre page de démarrage. Le bouton est un bouton Suivant qui appelle une action, puis dirige l'utilisateur vers une page donnée. Lorsque vous définissez les valeurs Étape suivante, vous devez sélectionner une entrée pour la propriété Aller à la page. Vous pouvez définir cette propriété sur Nouvelle page, puis indiquer un nom pour votre nouvelle page. Lorsque vous avez terminé de configurer la page Étape suivante, votre nouvelle page est générée. Vous pouvez créer de nouvelles pages lorsque vous configurez une vue qui utilise la configuration Étapes suivantes.
Les utilisateurs avancés peuvent utiliser le diagramme pour leur projet d'application afin d'ajouter une nouvelle page à leur application.

Lors de la création de pages, vous pouvez configurer une validation sans page de codes qui vous permet de vous assurer que les données attendues sont entrées par l'utilisateur final et que les valeurs de données sont valides pour cette page:

Vous pouvez marquer un élément comme requis et valider sa valeur. Par exemple, si vous avez une valeur d'âge sur la page, vous pouvez configurer la validation pour vous assurer que la valeur est présente et qu'elle respecte la plage de valeurs valides.
Il existe deux configurations possibles pour le traitement des erreurs de validation. Vous pouvez empêcher l'utilisateur de quitter la page en cas d'erreur et vous pouvez désactiver la vue en cas d'erreur. Par exemple, vous pouvez rester sur la page en cours lorsque vous cliquez sur le bouton OK et qu'une erreur est présente. Vous pouvez également configurer le bouton OK pour qu'il soit désactivé jusqu'à ce qu'il n'y ait aucune erreur de validation.

Il existe deux façons de supprimer une page :

Les utilisateurs de base et les utilisateurs avancés peuvent supprimer une page de votre application en basculant vers la page que vous souhaitez supprimer, puis en cliquant sur l'icône de suppression dans le panneau de navigation supérieur.
Conseil: Prenez un instantané de votre application avant de supprimer des pages.
Les utilisateurs avancés peuvent basculer vers le diagramme de l'application, cliquer avec le bouton droit de la souris sur une page, puis sélectionner Supprimer.

Si vous supprimez une page utilisée par une autre vue pour la propriété Aller à la page, vous brisez la logique de cette vue. Toute vue qui pointe vers la page que vous avez supprimée doit être mise à jour pour pointer vers une page existante.

Menu de navigation par page

Vous pouvez organiser les pages de votre application dans un menu de navigation visible de vos utilisateurs. Lorsque vous ajoutez une page à votre menu de navigation, une option de menu est créée pour cette page et ajoutée au menu.

Vous pouvez créer trois types d'éléments de menu de navigation :

Pages: Un élément de menu qui accède à une ou plusieurs pages.
Dossiers: Un élément de menu pouvant imbriquer d'autres éléments de menu.
Liens externes: Un élément de menu qui associe l'utilisateur à une destination externe à votre application.

Vous pouvez également associer des pages à des éléments de menu de navigation existants, en particulier des pages. Supposons que votre application a un flux de pages de quatre pages, mais que vous ne voulez pas que chaque page du flux possède son propre élément du menu de navigation. Vous pouvez choisir d'associer les quatre pages de votre flux à un élément de menu de navigation. De cette façon, quel que soit l'endroit où votre utilisateur se trouve dans le flux de pages, l'élément de menu associé est mis en évidence.

Dans les scénarios avancés, les éléments de menu de navigation peuvent déclencher des événements limite. Pour configurer des événements limite, passez au mode vue Avancé et utilisez le Diagramme.

Vues

Les vues sont des ensembles réutilisables de widgets d'interface utilisateur, tels que des zones de texte, des sélecteurs de date/heure et des boutons, qui permettent aux utilisateurs d'interagir avec un objet métier ou un service. Les vues peuvent comprendre un ou plusieurs ensembles d'autres vues, des liaisons de données, des instructions de mise en page et des comportements.

Étant donné que les vues sont réutilisables, chaque instance de vue peut partager des parties de son interface utilisateur avec d'autres instances de vue. Par exemple, vous créez une page contenant une instance de vue qui inclut un ensemble de champs d'adresse. Si vous créez une deuxième page qui nécessite les mêmes champs d'adresse, vous pouvez réutiliser la même vue. Dans les deux cas, la page utilise une instance de la vue. Vous pouvez modifier indépendamment les propriétés de chaque instance. Par exemple, la modification du libellé d'une instance de vue n'entraîne pas la modification du libellé de l'autre. Les deux instances de la vue utilisent une référence pour pointer vers la définition de la vue. Cette approche signifie que si la définition de vue change, vous pouvez voir la modification se refléter dans les instances de la vue.

Vous pouvez modifier les instances de vue à l'aide des propriétés de configuration et en remplaçant le style par défaut. Si vous définissez une liaison pour une instance, elle doit correspondre au type figurant dans la définition de page. Un avertissement se produit si le type d'objet métier ne correspond pas à celui de liaison de données défini pour la vue. Les propriétés de configuration sont présentées pour chaque instance de vue. Si vous voulez remplacer la valeur par défaut, vous pouvez fournir une valeur spécifique ou affecter une variable. Vous pouvez également exposer la propriété de configuration à n'importe quelle vue qui contient la vue. L'exposition de la propriété de configuration crée une option dans la vue en cours avec la liaison correspondante. Vous n'avez pas besoin de créer ni de lier l'option de configuration.

Vues dans les kits d'outils ou les applications: Vous pouvez créer une vue dans l'application ou dans un kit d'outils. En général, les vues hautement réutilisables sont créées via des kits d'outils, tandis que les vues plus spécialisées sont créées dans des applications. Si vous choisissez l'application, cela signifie que vous pouvez la réutiliser uniquement dans l'application. Néanmoins, cela signifie également que si quelqu'un édite la vue, les modifications s'appliquent aux instances de la vue dans cette application. Si la vue se trouve dans un kit d'outils et que quelqu'un l'édite, les modifications peuvent s'appliquer à toutes les instances de vue de toutes les applications qui utilisent cette version de la boîte d'outils. Étant donné que l'édition d'une définition de vue peut affecter plusieurs instances, faites attention lorsque vous effectuez des modifications. Par exemple, la suppression d'une zone de contenu dans la définition de vue peut signifier que les pages ou les vues qui contiennent des instances de cette vue ne peuvent pas afficher le contenu qui est défini dans cette zone de contenu. Vous ne pouvez pas modifier directement la définition de la vue à partir de la page ou de la vue parente. A la place, vous devez ouvrir la définition de la vue pour pouvoir apporter des modifications.

Kit d'outils d'interface utilisateur: Le kit d'outils de l'interface utilisateur, qui est le kit d'outils par défaut, fournit un ensemble complet de vues que vous pouvez utiliser pour créer des applications qui s'exécutent sur plusieurs unités. Utilisez les vues de l'interface utilisateur pour les nouveaux développements. Pour vous familiariser avec les vues de l'interface utilisateur, explorez l'exemple de découverte des interfaces utilisateur (Discover UI).

Kit d'outils Milieu de travail: Le kit d'outils Milieu de travail se compose d'un ensemble de vues que vous pouvez utiliser pour concevoir vos propres applications métier et tableaux de bord basés sur le service utilisateur côté client qui sont personnalisés pour la gestion des travaux dans Milieu de travail. Les vues du kit d'outils Workplace sont disponibles dans la palette Application Designer pour la conception des tableaux de bord et des applications.

Kit d'outils Content Services: Le kit d'outils Content Services contient tous les composants, actions et données de l'interface utilisateur qui peuvent être utilisés pour fournir des fonctionnalités de gestion de contenu.

Développement d'une vue de style composite et d'une vue de style widget

Généralement, lorsque vous créez votre vue, vous pouvez suivre l'un des modèles suivants ou utiliser une combinaison des deux modèles si votre interface utilisateur est plus complexe et l'exige.

Les vues de style composite sont simples et ne nécessitent pas de compétences techniques avancées pour être générées. Pour créer une vue de style composite, ajoutez du contenu à la présentation depuis la palette. Si votre vue comporte plusieurs zones d'informations, utilisez la présentation sous forme de grille pour organiser les vues, puis définissez leurs propriétés et effectuez la liaison des données, le cas échéant. Les vues de style composite peuvent être réutilisées dans plusieurs pages ou dans d'autres vues qui peuvent être construites de manière hiérarchique.
Les vues de style widget sont plus complexes et nécessitent un ensemble de compétences plus technique. En règle générale, les vues de style widget sont des vues personnalisées qui peuvent inclure, par exemple, un segment de code HTML personnalisé que vous pouvez compléter avec du code HTML, ou une trame d'information ayant un ID spécifique. Vous pouvez définir les propriétés de configuration de la vue de style widget et ajouter une feuille de style en cascade en ligne et une logique JavaScript en ligne sur la page Comportement. Pour un comportement se produisant lors de l'exécution, par exemple lorsqu'une page est chargée ou qu'un bouton est activé, vous pouvez placer la logique JavaScript dans les gestionnaires d'événements de la vue, sous Evénements.

Afficher les modèles

Les canevas (templates) permettent de créer un aspect normalisé sur plusieurs pages.

Un modèle est une vue qu'un utilisateur marque comme pouvant être utilisée comme modèle dans les propriétés Présentation. Les utilisateurs peuvent ensuite sélectionner le modèle lorsqu'ils créent des vues. Le contenu du modèle sert aux vues de contenu de base auquel les utilisateurs peuvent ajouter du contenu. Vous pouvez, par exemple, créer une vue comprenant le logo et le nom de la société dans une zone bannière, ainsi qu'une zone de contenu servant de marque de réservation pour un autre contenu. Lorsque vous utilisez cette vue comme canevas, vous pouvez ensuite la sélectionner lorsque vous créez une autre vue ou une autre page. La nouvelle vue contient la zone de bannière définie dans le canevas, ainsi qu'une zone pour le contenu. D'autres utilisateurs peuvent également utiliser le canevas lorsqu'ils créent des vues afin que la présentation soit cohérente sur les nouvelles vues. Étant donné que les canevas sont des vues, vous pouvez également les déposer sur des pages. Par exemple, si vous disposez d'un canevas qui possède une bannière commune, vous pouvez le déposer sur une page afin que la page contienne cette bannière commune.

Conseil: Si le modèle utilise des cellules dans une présentation de grille, les paramètres de direction des cellules remplacent les paramètres de prévisualisation de toutes les boîtes de contenu de ces cellules.

Le modèle permet également de mettre à jour simultanément plusieurs vues. Étant donné que le canevas est une référence à une vue et non à une copie, si vous modifiez le canevas, toutes les vues et toutes les pages basées sur ce canevas sont également mises à jour avec ces modifications. Pour poursuivre l'exemple ci-dessus, mettez à jour le modèle pour modifier l'image du logo. Toutes les vues qui utilisent votre modèle sont mises à jour avec le nouveau logo.