Partager via

Ajouter et parcourir des écrans dans des applications canevas

  • Article

Créez des applications modernes et réactives en ajoutant des écrans prédéfinis pour les scénarios d’application courants. Les écrans disposent de conteneurs réactifs et de commandes modernes qui s’adaptent à différentes tailles d’écran. Vous pouvez également ajouter des écrans personnalisés avec différentes dispositions et commandes.

Les nouveaux écrans prédéfinis suivants sont disponibles :

Capture d’écran du menu Nouvel écran dans Power Apps Studio affichant les dispositions disponibles.

Ajouter un nouvel écran

  1. Connectez-vous à Power Apps.

  2. Créez une application canevas ou ouvrez-en une pour la modifier.

  3. Sur la barre de commandes, sélectionnez Nouvel écran, puis sélectionnez une disposition d’écran.

  4. Affichez un aperçu de l’application pour déterminer son apparence sur différents appareils. Pour en savoir plus, consultez Afficher un aperçu d’une application.

Astuce

Pour que l’application s’adapte à la taille de l’écran de l’appareil sur lequel elle s’exécute, désactivez l’option Mettre à l’échelle.

Écran d’accueil

L’ écran d’accueil est idéal pour le premier écran d’une application, où vous pouvez personnaliser des tuiles telles qu’une image, un titre et une description. Vous pouvez modifier le nombre de tuiles en les ajoutant ou en les supprimant dans le conteneur principal. Utilisez les tuiles pour diriger les utilisateurs vers d’autres parties de l’application.

L’écran de bienvenue comporte le modèle suivant pour les contrôles :

  • Conteneur d’écran
    • Conteneur d’en-tête
      • En-tête
    • Conteneur principal
      • Conteneur
        • Conteneur d’image
          • Image
        • Conteneur de titre
          • Bouton Élément de fonctionnalité
          • Texte de la description

Capture d’écran qui montre ce qui apparaît lorsque vous ajoutez un écran de bienvenue disposition à partir du bouton Nouvel écran.

Ajouter et personnaliser l’écran de bienvenue

  1. Sélectionnez Nouvel écran>Écran de bienvenue.

  2. Pour modifier l’image d’une vignette, sélectionnez-la, puis sélectionnez Modifier.

  3. Sélectionnez le contrôle de bouton Élément de fonctionnalité et ajoutez votre propre texte dans le volet Propriétés.

    Capture d’écran qui montre où modifier le texte de la mosaïque de l’élément en vedette.

  4. Sélectionnez le texte Description courte ou message engageant et ajoutez le vôtre.

  5. Ajoutez et supprimez des tuiles si nécessaire.

    • Pour ajouter des tuiles dans l’arborescence, copiez et collez un élément Conteneur .

    • Pour supprimer une vignette dans l’arborescence, cliquez avec le bouton droit sur un Conteneur, puis sélectionnez Supprimer.

Utilisez l’écran En-tête et galerie pour afficher un éventail d’informations sur un produit ou un service, comme un catalogue de produits. Lorsque vous Connecter un contrôle de galerie sur un source de données, un catalogue est automatiquement créé avec peu de personnalisation requise.

Le contrôle de galerie dans l'écran En-tête et galerie est un contrôle classique. Lorsque le contrôle de galerie moderne est lancé, l’écran En-tête et galerie l’utilise. Pour en savoir plus, consultez Présentation des contrôles et thèmes modernes dans les applications canevas.

L’écran En-tête et galerie comporte le modèle suivant pour les contrôles :

  • Conteneur d’écran
    • Conteneur d’en-tête
      • En-tête
    • Conteneur principal
      • Galerie
        • Conteneur de galerie
          • Conteneur d’image
            • Image
          • Conteneur de titre
            • Texte du titre
            • Texte de la description
          • Conteneur de bouton
            • Button

Capture d’écran illustrant l’écran En-tête et galerie.

  1. Sélectionnez Nouvel écran>En-tête et galerie.

  2. Dans l’arborescence, sélectionnez Galerie et connectez-la à une source de données, par exemple Dataverse.

  3. Sélectionnez des contrôles spécifiques dans la galerie, tels que l’image, le texte du titre et la description du texte. Dans les propriétés du contrôle, utilisez la syntaxe ThisItem pour définir l’image, le texte du titre et la description souhaités.

    Par exemple, pour ajouter le Nom du compte au contrôle de texte du titre, recherchez-le en saisissant ThisItem dans la barre de formule pour afficher une liste d’éléments disponibles à ajouter à partir de votre jeu de données.

    Capture d’écran qui montre où utiliser ThisItem dans la barre de formule.

Écran Demande d’approbation

L’écran Demande d’approbation comporte un en-tête, un formulaire avec un bouton d’envoi et une galerie avec des phases prédéfinies. L’écran Demande d’approbation est utile pour les scénarios où des actions sont déclenchées par des envois de formulaires, comme l’envoi d’une demande d’approbation ou l’affichage d’un processus de flux de travail pour une entreprise.

Astuce

Lorsque vous ajoutez un écran de demande d’approbation, il vous est demandé de le marquer avec un Connecter. Le source de données détermine les noms de champs dans le formulaire de demande.

L’écran Demande d’approbation comporte le modèle suivant pour les contrôles :

  • Conteneur d’écran
    • Conteneur d’en-tête
      • En-tête
    • Conteneur principal
      • Conteneur de formulaire
        • Texte du titre du formulaire
        • Formulaire d’approbation
        • Bouton d’envoi
      • Conteneur de barre latérale
        • Texte des réviseurs
        • Galerie de réviseurs

Capture d’écran illustrant l’écran Demande d’approbation.

Ajouter et personnaliser l’écran Demande d’approbation

  1. Sélectionnez Nouvel écran>Demande d’approbation.

  2. Dans l’arborescence sur ApprovalForm, vous êtes invité à vous connecter à une source de données telle que Dataverse.

  3. Choisir une source de données.

  4. Pour afficher les détails des étapes d’approbation, dans l’arborescence, sélectionnez ReviewersGallery sous le nœud SidebarContainer. Ensuite, dans le volet des propriétés, sélectionnez l’onglet Avancé et accédez à Éléments.

    Les étapes d’approbation présentent les détails suivants :

    • Nom : nom de l’étape ou de l’approbateur
    • Titre : sous-titre de l’étape ou de l’approbateur
    • Statut : Statut de l’étape
    • Actuel : indique si cette étape est l’étape actuelle de la demande d’approbation

    Capture d’écran qui montre la propriété avancée Éléments.

Vous pouvez ajouter un flux de travail d’approbation Power Automate dans le bouton pour notifier l’approbateur. Pour en savoir plus, consultez Créer et tester un flux de travail d’approbation avec Power Automate.

En-tête et formulaire

L’écran En-tête et formulaire comporte un en-tête, un formulaire et deux boutons permettant d’envoyer le formulaire ou d’annuler l’envoi du formulaire. Cet écran est idéal pour utiliser un formulaire plein écran.

L’écran En-tête et formulaire contient le modèle suivant pour les contrôles :

  • Conteneur d’écran
    • Conteneur d’en-tête
      • En-tête
    • Conteneur principal
      • Conteneur de formulaire
        • Formulaire
      • Conteneur de bouton
        • Bouton Annuler
        • Bouton d’envoi

Capture d’écran illustrant l’écran En-tête et formulaire.

Ajouter et personnaliser l’en-tête et l’écran du formulaire

  1. Sélectionnez Nouvel écran>En-tête et formulaire.

  2. Dans l’arborescence, vous voyez le Formulaire sélectionné et une invite apparaît pour connecter le formulaire à une source de données.

  3. Choisir une source de données.

  4. En option, pour garantir la meilleure réactivité de l’écran, Sélectionner chaque donnée carte sur le formulaire et définissez sa propriété Ajustement de la largeur sur Activé dans l’onglet Affichage du volet Propriétés .

En-tête et table

L’écran En-tête et tableau comporte deux contrôles, un contrôle d’en-tête et un contrôle de tableau. Ce modèle est idéal pour afficher un tableau de données détaillé sur un écran.

L’écran En-tête et table comporte les contrôles suivants :

  • Conteneur d’en-tête
    • En-tête
  • Conteneur principal
    • Table

Ajouter et personnaliser l’écran En-tête et table

  1. Sélectionnez Nouvel écran>En-tête et table.

  2. Dans l’arborescence, Sélectionner Table and Connecter le transforme en source de données.

Table et formulaire

L’écran Tableau et formulaire contient deux contrôles principaux : le contrôle de tableau moderne et le contrôle de formulaire moderne. Ce modèle dispose de formules intégrées pour permettre une connexion et une personnalisation faciles des données. Power Fx Ce modèle est idéal pour sélectionner et modifier un enregistrement à l’aide d’un formulaire.

L’écran Tableau et formulaire contient les contrôles suivants :

  • Conteneur d’écran
    • Conteneur d’en-tête
      • Contrôle d’en-tête
    • Conteneur de corps
      • Saisie de texte (recherche)
      • Contrôle de table
      • Contrôle de formulaire
      • Bouton
        • Nouvelle
        • Modifier
        • Delete
        • Soumettre
        • Annuler

Capture d’écran montrant l’écran Tableau et formulaire.

Ajouter et personnaliser l’écran Table et formulaire

Dans Power Apps Studio :

  1. Sélectionnez Nouvel écran>Table et formulaire.

  2. Sélectionnez Données dans la barre d’actions en ligne.

  3. Sélectionnez la source de données souhaitée.

    Capture d’écran qui montre l’emplacement du bouton Données, où vous pouvez Sélectionner un source de données à partir d’une liste.

    Une fois liés, les contrôles de table et de formulaire sont tous deux liés à la source de données.

Vous pouvez Sélectionner un enregistrement dans le contrôle de table et le formulaire affiche les détails de l’enregistrement sélectionné.

Tous les boutons de ce modèle ont des actions Power Fx prédéfinies, il n’est donc pas nécessaire de les personnaliser davantage. Lorsque vous déplacez l’écran vers le Connecter sélectionné, l’écran est désormais entièrement fonctionnel.

Capture d’écran qui montre la vue de l’écran lorsqu’il est connecté à un source de données : une liste de données et ses éléments de formulaire avec un bouton d’envoi.

Réorganiser les écrans

Lorsque vous avez plusieurs écrans dans votre application, vous pouvez les placer dans un ordre différent dans votre arborescence.

Sélectionnez le menu déroulant d’un écran que vous souhaitez réorganiser, puis sélectionnez Déplacer vers le haut ou Déplacer vers le bas.

Capture d’écran montrant où se trouve le menu déroulant afin de déplacer un écran vers le haut ou vers le bas dans votre arborescence.

Utilisez la propriété StartScreen pour définir l’écran à affiche en premier.

Ajouter la navigation

Lorsque vous avez plusieurs écrans dans votre application, vous pouvez ajouter une navigation pour que vos utilisateurs puissent se déplacer entre eux.

  1. Avec l’écran sélectionné, sélectionnez Insérer. Dans la zone de recherche, saisissez Flèche suivante, puis sélectionnez-la.

  2. Déplacez la flèche à l’endroit où vous souhaitez qu’elle apparaisse sur l’écran.

  3. Avec la flèche sélectionnée, définissez la propriété OnSelect sur la fonction Navigate ; par exemple, Navigate(Target, Fade).

    Remplacez Cible par le nom de l’écran sur lequel vous souhaitez naviguer.

    Capture d’écran de la propriété OnSelect définir sur la fonction Navigate.

    Dans cet exemple, lorsqu’un utilisateur sélectionne la flèche, l’écran cible apparaît.

  4. Sur l’écran Cible, ajoutez une icône Flèche précédente de la même manière. Définissez sa propriété OnSelect , par exemple, Navigate(Target, ScreenTransition.Fade).

    Remplacez Cible par le nom de l’écran auquel vous souhaitez revenir.

Référence sur les contrôles d’écran