Application du style et de la mise en forme

SAP Build Apps vous permet non seulement de créer rapidement des interfaces utilisateur fonctionnelles, mais aussi de créer des applications attrayantes, conviviales et permettant d'adapter visuellement les composants individuels aux besoins de l'utilisateur et de l'entreprise. Les thèmes jouent un rôle important ici et sont utilisés pour déterminer la conception et la gestion d'une application. De nombreuses propriétés de style sont facilement disponibles dans le menu pour modifier l'apparence de l'application.

L'avantage des thèmes est qu'ils apportent différents styles, couleurs ou polices avec différentes collections, d'une part, pour s'assurer que le design apparaît toujours cohérent. D'autre part, cela a l'avantage que les développeurs peuvent gagner du temps et se concentrer davantage sur le développement grâce à l'ajustement rapide et la configuration avec des thèmes.

Pour travailler sur la conception et modifier l'apparence de votre application, vous pouvez utiliser l'éditeur de thèmes. Vous pouvez accéder à l'éditeur de thèmes dans la partie supérieure de la carte d'enregistrement. Vous pouvez y trouver différentes palettes de couleurs et sélectionner une déjà disponible ou en créer une qui répond à vos besoins ou, par exemple, à la conception d'entreprise de votre société.

SAP Build Apps bénéficie de couleurs intelligentes. Ils peuvent être utilisés pour optimiser l'expérience utilisateur. Après la configuration de la couleur du contenu intelligent, les composants s'ajustent automatiquement à la couleur d'arrière-plan, par exemple, si elle passe d'un arrière-plan clair à un arrière-plan sombre.

À l'aide de la variable Thème, la conception peut également être distinguée des couleurs, qui adaptent ensuite tous les éléments de l'application comme option sélectionnée. Par exemple, vous pouvez définir la configuration de la taille du texte, de la bordure, de l'ombre, de l'espacement et de la police avec les options données. Vous pouvez également définir facilement de nouvelles variables de thème. Le grand avantage est que vous pouvez également rendre toutes les variables dynamiques ici à l'aide de l'option de liaison.

Si vous voulez utiliser les thèmes par défaut, deux groupes de thèmes (thème universel et thème SAP Fiori) sont actuellement disponibles, avec différentes possibilités de conception pour adapter la conception des applications à vos besoins.

Lors de l'utilisation de composants, une distinction doit être faite entre eux en tant qu'élément IU avec leurs propriétés et la manière dont ils sont approvisionnés par rapport au style. Le style et l'apparence d'un composant n'affectent pas les fonctions de ce composant. Cependant, il est important de piloter l'utilisabilité souhaitée de l'application et le comportement d'utilisation.

Dans l'exemple d'un composant de bouton, il peut contenir une description et déclencher des actions au toucher d'un bouton, mais le même bouton peut différer en couleur, forme et taille. La conception se réfère alors séparément à l'intention dans une certaine situation. Cela peut être, par exemple, qu'un bouton s'affiche en rouge ou en vert, selon le statut dans un processus de commande. Cela permet d'afficher si toutes les informations sont disponibles et si le bouton peut être sélectionné. Ou, une autre possibilité est la taille, pour indiquer s'il s'agit d'un bouton principal important pour continuer une action ou un petit bouton pour un réglage intermédiaire.

Selon le type de composant, différents paramètres de style sont fournis. Mais l'accent est mis sur les classes de style. Par défaut, il existe toujours une définition complète, que vous pouvez sélectionner directement, comme Primaire, Secondaire, Tertiaire, Danger et Réussite, et donc avoir déjà un style approprié pour de nombreux cas d'utilisation.

Une classe de style définit des valeurs pour toutes les propriétés de style du composant. Par conséquent, le passage à une classe de style différente modifiera complètement l'apparence de votre composant.

Vous pouvez également modifier les classes de style et créer les vôtres. Cela offre l'avantage de pouvoir l'ajuster encore plus précisément avec la possibilité de définir de nombreux autres paramètres de style, que vous souhaitiez maintenant que le composant soit arrondi aux coins, qu'il ait une ombre ou que le type de police soit ajusté. Il y a d'innombrables possibilités. Il y a un grand avantage pour chaque réglage qu'encore plus de dynamique peut être introduite au moyen d'une fixation.

Outre les composants, une page peut également être modifiée dans l'onglet Style. Vous pouvez ainsi rendre l'arrière-plan plus attrayant en ajustant la couleur d'arrière-plan de l'application ou en définissant le remplissage. Mais il existe également des options avancées, telles que la désactivation du défilement d'une page.

Cependant, au lieu de colorer l'arrière-plan, vous pouvez également sélectionner une image d'arrière-plan pour la page que vous pouvez sélectionner, par exemple, les fiches info ou la liaison. Ici, on utilise alors le conteneur, dont l'agencement lui-même peut encore être modifié en ce qui concerne les marges, afin d'éviter éventuellement une bordure.

Vous pouvez utiliser l'onglet Mise en forme pour configurer la mise en forme des composants et la mise en forme de la page ou du composant sélectionné. La mise en page peut être réalisée en sélectionnant un espace dans une zone libre. Cela permet de modifier l'alignement de tous les composants de cette page en même temps, qui sont ensuite alignés à gauche, au centre ou à droite.

D'autres catégories importantes dans l'onglet Mise en forme sont le paramétrage des composants en termes de largeur et de hauteur, ainsi que la position. Vous pouvez également y manipuler votre contenu avec l'index Z qui permet une meilleure expérience utilisateur. L'index Z est une propriété qui vous permet de contrôler l'ordre des éléments sur votre page. Il fonctionne en attribuant à chaque élément une valeur numérique (l'index z) puis en utilisant ce nombre pour déterminer quel élément s'affichera devant ou derrière un autre élément. Plus l'index z est élevé, plus un élément s'affiche près du visualiseur.

Lorsqu'un composant est sélectionné, des options supplémentaires apparaissent dans l'onglet Présentation. Ces options sont influencées par le concept d' espace entre les composants. Au lieu d'utiliser des marges, le concept d'écart de composant est introduit. L'écart de composant détermine l'espacement entre les composants, jouant essentiellement le rôle de "gap" entre eux. Cette approche améliore considérablement le workflow intuitif pour l'espacement des composants, tout en préservant la possibilité de personnaliser chaque aspect selon les besoins. De plus, l'écart de composant se comporte de manière cohérente, que la mise en forme soit verticale ou horizontale. Cette approche unifiée garantit une expérience fluide dans la gestion de l'espacement des composants.