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 ou moins originales avec uniquement des composants natifs. Voici le résultat :

Bien qu’au premier abord, cela puisse sembler peu inspirant, il est possible de créer des designs sympas avec de l’imagination.

Cependant, le nombre de composants croît rapidement et leurs positionnements se compliquent lorsque l’on ne veut utiliser qu’une partie de la forme.

De plus, les options de personnalisation ne permettent pas de créer des effets couramment répandus 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 tels que des ombres 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 garder 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.

Limitations
PowerApps ne supporte pas le CSS uniquement défini au niveau de l’élément via l’attribut style. Il n’est pas possible de le définir via la balise style.

Pour les non-adeptes du HTML/CSS, il 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 générer le dégradé.

Lorsque vous intégrez du HTML dans Power Apps, pensez à remplacer les doubles apostrophes par des simples pour éviter les conflits avec la syntaxe Power Apps. La commande “remplacer tout” dans votre éditeur de texte préféré fera des merveilles.

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