Partager via

Ajouter et parcourir des écrans dans des applications canevas

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

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 plus d’informations, consultez Aperçu d’une application.

Astuce

Pour que l’application s’adapte à la taille de l’appareil sur laquelle elle s’exécute, désactivez l’option Mise à l’échelle pour l’adapter .

Écran d’accueil

L’écran d’accueil fonctionne ainsi que le premier écran d’une application. Vous pouvez personnaliser chaque vignette avec une image, un titre et une description. Ajoutez ou supprimez des vignettes dans le conteneur principal pour modifier le nombre de vignettes. Utilisez les vignettes pour guider les utilisateurs vers d’autres parties de l’application.

Le modèle d’écran d’accueil inclut les contrôles suivants :

  • 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 montrant ce qui apparaît lorsque vous ajoutez une disposition d’écran d’accueil à 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 montrant où modifier le texte de la vignette Élément en vedette.

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

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

    • Pour ajouter des vignettes 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 connectez un contrôle Gallery à une 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 plus d’informations, consultez Vue d’ensemble des contrôles et thèmes modernes dans les applications de 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 montrant 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, connectez-le à une source de données. La source de données détermine les noms des 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'affichage arborescent de ApprovalForm, connectez-vous à 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, sélectionnez ReviewersGallery sous le nœud SidebarContainer dans l’arborescence. Ensuite, dans le volet des propriétés, sélectionnez l’onglet Avancé et accédez à Éléments.

    Les phases d’approbation comportent 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 que cette phase est la phase actuelle de la demande d’approbation

    Capture d’écran montrant la propriété avancée Items.

Pour notifier l’approbateur, ajoutez un flux de travail d’approbation Power Automate dans le bouton. Pour plus d’informations, 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’écran d’en-tête et de 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. Si vous le souhaitez, pour garantir une meilleure réactivité de l’écran, sélectionnez chaque carte de données 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 table. Ce modèle est idéal pour afficher une table de données détaillée 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électionnez Table et connectez-la à une source de données.

Table et formulaire

L’écran Table et formulaire contient deux contrôles principaux : le contrôle Table moderne et le contrôle Formulaire moderne. Ce modèle a des formules Power Fx intégrées pour faciliter la connexion et la personnalisation des données. Ce modèle est idéal pour sélectionner et modifier un enregistrement à l’aide d’un formulaire.

L’écran Table 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 Table 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 montrant l’emplacement du bouton Données, où vous pouvez sélectionner une source de données dans une liste.

    Lorsque vous vous connectez, la table et les contrôles de formulaire se connectent à la source de données.

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

Tous les boutons de ce modèle ont prédéfini Power Fx. Vous n’avez donc pas besoin de les personnaliser. Lorsque vous connectez l’écran à la source de données sélectionnée, l’écran devient entièrement fonctionnel.

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

Réorganiser les écrans

Lorsque votre application a plusieurs écrans, vous pouvez modifier leur ordre dans l’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 qui s’affiche en premier.

Ajouter la navigation

Lorsque votre application a plusieurs écrans, ajoutez la navigation afin que vos utilisateurs puissent se déplacer entre eux.

  1. Sélectionnez l’écran. Cliquez sur 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 à l’écran.

  3. Sélectionnez la flèche. Définissez la propriété OnSelect sur la fonction Navigate . Par exemple, utilisez Navigate(Target, Fade).

    Remplacez Cible par le nom de l’écran dans 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

  • Last updated on