1. Agencement
2. Paramètres de contenu
3. Options d'affichage
4. Paramètre avancé

1. Agencement

• Choisissez la hauteur du composant en cliquant sur : Petite, Moyenne ou Large. Elle correspond à la taille standard du composant de Jint que vous pouvez utiliser pour aligner le composant dans vos pages.
• Personnalisez la taille du composant en ajoutant la quantité de pixels sous "Personnaliser".

2. Paramètres de contenu

Le composant Focus vous offre un grand nombre de paramètres pour créer le design que vous souhaitez. Vous trouverez ci-dessous la description des différents contenus que vous pouvez concevoir.

2.1 Texte 

• Ajoutez un titre et une description dans les zones de texte.
• Définissez la couleur du titre ou de la description en saisissant une valeur au format hexadécimal (#FFFFFF pour le blanc par exemple).
• Activez "Afficher le tag" et écrivez le nom de votre balise dans la zone de texte.

2.2 Lien de redirection

Le composant sert à créer de la navigation de manière visuelle et impactante. Vous pouvez donc définir le lien et la manière de l'ouvrir.

• Vous avez le choix entre ouvrir une URL classique ou une application PowerApps.
  • Le composant focus peut ouvrir une PowerApps si vous lui fournissez l'ID de l'app. Vous pouvez trouver l'ID en suivant la Documentation Microsoft .
• Définissez comment le lien s'ouvre : dans un nouvel onglet, dans le même onglet, dans une fenêtre, ou dans un panel
• Vous pouvez définir la zone sélectionnable par l'utilisateur.
  • Par défaut, l'intégralité du composant est cliquable.
  • Vous pouvez choisir d'afficher un bouton afin qu'uniquement celui-ci soit cliquable. Pour ajouter un bouton, activez "Afficher un bouton d'action"
• Vous pouvez personnaliser votre bouton 
  • Nommez le bouton dans la zone de texte.
  • Vous pouvez définir l'alignement du bouton :
    • L'alignement en dessous ou à gauche du texte
    • Puis la position du bouton haut/bas ou gauche/droite et centré
  • Changez le style et la couleur du bouton

2.2 Image ou couleur

Dans cette section, vous pouvez définir le contenu visuel du composant. Vous pouvez ajouter du contenu dans deux emplacements différents :

1. Arrière-plan : le fond du composant qui sera derrière le texte et le contenu. 
2. Contenu : l'emplacement contenant une image qui sera placée à côté du texte.

• Arrière-plan :
  • Ajoutez une image comme arrière-plan du composant en cliquant sur "Sélectionner une image". Vous pouvez ajuster la taille et l'emplacement de l'image dans les menus déroulants.
  • Définissez une couleur pour l'arrière-plan en cliquant sur "Couleur" et ajoutez une valeur au format hexadécimal pour la couleur que vous souhaitez dans la zone de texte.

• Contenu : 
  • Ajoutez une image dans le contenu en cliquant sur "Sélectionner une image".
  • Vous pouvez sélectionner son ratio si vous souhaitez modifier sa taille ou conserver l'original. 
  • Dans "Paramètres avancés", vous pouvez modifier la position de l'image à gauche ou à droite du composant.
  • Si vous téléchargez une image en format portrait, vous pouvez ajuster la taille du contenu en activant "Affichage en mode portrait".

3. Options d'affichage

3.1 Ombre

• Ajoutez un effet d'ombre au composant en activant "Activer l'ombre" et choisissez entre une ombre Légère, Normal et Forte.

3.2 Arrondis

• Le paramètre "Arrondis" vous permet de sélectionner la forme de la bordure du composant. Vous pouvez choisir entre les paramètres suivants : Semi-arrondi, Arrondi et Rond. Vous pouvez également la personnaliser vous-même en ajoutant la quantité de pixels.

3.3 Positionnement du contenu

Choisissez la place de la carte dans le composant afin de laisser apparaître l'illustration de fond du Focus. La carte est décrite dans le chapitre 2. Paramètres de contenu.

exemple de focus avec la carte en position "Remplir"

exemple de focus avec la carte en position "Gauche"

3.4 Paramétrage de la carte et flou gaussien

Nous vous proposons des options pour personnaliser le fond de carte.

• Par défaut le fond de carte et transparent. Pour le rendre apparent, activé l'option "Fond de carte apparent"
• Définissez sa couleur et sa transparence
  💡 La transparence est un bon moyen de créer un design moderne et d'adoucir les contrastes
• Ajoutez un effet flou gaussien, ou "glassmorphism". L'effet flou gaussien combine un flou à la transparence pour un effet de verre fumée très tendance !
  • Les différents niveaux d'intensité correspondent à différents niveaux de flou

4. Paramétrages avancés

4.1 Audiences

Définissez l'audience de votre composant afin de le rendre visible à une population spécifique !

• Sélectionnez un ou plusieurs groupes Entra ID comme audience du composant
• Seules les personnes appartenant à moins l'un des groupes pourront voir les composants
• Le composant n'apparaîtra pas pour les autres utilisateurs

Exemple de mise en page