Améliorer vos interfaces avec HTML

Comment rendre mes interfaces plus attractives ? C’est une question que je me suis rapidement posée quand j’ai commencé avec Power Apps. L’éditeur propose nativement un certain nombre de formes pour agrémenter nos applications : rectangle, cercle, triangle, étoile… Mais les combiner correctement n’est pas simple !

Je me suis lancé le défi de créer quelques entêtes plus au moins originales avec uniquement des composants natifs. Voici le résultat:

Bien qu’au premier abord, ça peut être peu inspirant, il est possible de faire des designs sympas avec de l’imagination.

Cependant le nombre de composants croit rapidement et leurs positionnements se compliquent lorsque l’on veut utiliser qu’une partie de la forme.

De plus, les options de customisations ne permettent pas de faire des effets couramment répondu sur le web.

HTML à notre secours

Pendant longtemps, j’ai laissé de côté le composant texte HTML, en me disant qu’il permettait uniquement d’embellir des textes.

Quelle erreur ! C’est sous estimer l’utilité de ce composant.

Il permet également d’utiliser des balises HTML pour la mise en forme, y compris les div et du CSS !

Il devient alors possible d’ajouter des effets comme des ombrages ou des dégradés comme ceci:

Pour arriver à ce résultat, j’ai utilisé le composant HTML texte pour faire le fond de l’entête, 2 labels et 1 image. 

(Il aurait été possible de tout faire avec le composant HTML. Ici, j’ai voulu gardé l’approche Low-Code.)

Le code HTML est le suivant :

<div style='
    width:1346px;
    height:100px;
    padding:0px;
    background:linear-gradient(90deg,rgba(0,153,255,1) 49%,rgba(0,202,255,1) 88%);
    border-radius:0px 50px 50px 0px;
    box-shadow:5px 5px 5px #cacaca;'>
</div> 

Quelques explications :

J’utilise le tag div comme conteneur et lui défini un dégradé (background), un arrondi à droite (border-radius) et  un ombrage (box-shadow) grâce à l’attribut style en CSS.

Pour les non-adeptes du HTML/CSS, il est existe une pléthore d’outils qui permettent de générer du HTML/CSS grâce à un éditeur visuel. Par exemple, j’ai utilisé le site CSS Gradient pour le dégradé.

Lorsque vous intégrez du HTML dans PowerApps, pensez à remplacer les double apostrophes par des simples pour éviter les conflits avec la syntaxe PowerApps. La commande « remplacer tout » dans votre éditeur de texte préféré fait des merveilles.

Toute la documentation de sur le composant texte HTML se trouve ici.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *