Exercice - Mesurer dans MR et filtrer dans Power Apps

  • 10 minutes

Dans cette unité, vous allez utiliser certains des composants fonctionnels clés de Power Apps. Cela inclut la mesure en MR et des méthodes de filtrage. Les utilisateurs peuvent mesurer la distance, la surface et le volume dans le monde réel avec le composant Measure in MR de Power Apps.

Filtrage spatial à l’aide de Measure dans MR

La fonctionnalité Mesure dans MR est utilisée pour filtrer spatialement les produits qui peuvent être facilement placés dans le monde réel en fonction des mesures reçues par le biais de la session de mesure. Certaines formules de base sont utilisées pour effectuer le filtrage.

  1. Accédez à la page d’accueil. Sous l’onglet Insertion , développez la liste déroulante Réalité mixte et sélectionnez Mesure dans MR.

    Capture d’écran pour ajouter Measure dans MR

  2. Positionnez la mesure dans le bouton MR, comme indiqué dans la figure et configurez les propriétés suivantes :

    • Texte : Filtrer par dimensions
    • Unité de mesure : centimètres
    • Type de mesure : Forme libre

    Capture d’écran pour configurer les propriétés de Measure dans MR.

  3. Dans la page d’accueil, ajoutez une galerie en sélectionnant La galerie>verticale. Remplacez le nom de la galerie par Measure_gallery.

    Capture d’écran de l’ajout d’une galerie.

  4. Positionnez la galerie verticale juste en dessous du bouton Filtrer par dimensions . Configurez la propriété Layout en sélectionnant Titre, Sous-titre et corps.

    Capture d’écran pour configurer la disposition

  5. Configurez la propriété Items de l’Measure_gallery en ajoutant la ligne suivante :

    MeasureInMR1.Measurements

    Capture d’écran de la source de données de la galerie.

  6. Supprimez le séparateur et NextArrow. Positionnez le titre, le sous-titre et le corps équidistant les uns des autres, comme indiqué dans l’image.

    Capture d’écran de l’emplacement équidistant.

  7. Configurez la propriété Text des trois étiquettes comme suit :

    • Titre :

      "Unit: "&ThisItem.Unit

      Capture d’écran du texte du titre

    • Sous-titre :

      "Area: "&ThisItem.Area&"cm²"

      Capture d’écran du texte du sous-titre.

    • Corps :

      "Height: "&ThisItem.Height&"cm"

      Capture d’écran du corps du texte.

  8. Ajoutons une icône de rechargement pour permettre aux utilisateurs de rétablir les mesures s’ils ne sont pas satisfaits. Sous l’onglet Insertion , développez la liste déroulante Icônes et sélectionnez l’icône Recharger .

    Capture d’écran de l’ajout d’une icône de rechargement.

  9. Positionnez l’icône comme indiqué dans l’image et configurez la propriété OnSelect comme suit :

    UpdateContext({galleryvisible:false});

    Capture d’écran de la configuration d’OnSelect pour l’icône de rechargement.

    Conseil / Astuce

    Vous pouvez personnaliser la police, la taille de police et le style de police pour qu’elles correspondent à la conception de votre application. Toutefois, pour une meilleure expérience utilisateur, conservez une police cohérente dans l’ensemble de l’application.

  10. Une fois que le composant Mesure dans MR est entièrement configuré, nous passons à l'étape du filtrage spatial. Ici, nous filtrons spatialement les produits en fonction des valeurs Width, Depth et Height reçues dans la mesure dans la session MR.

    Accédez à la page Produits , puis configurez la propriété Items de l’Gallery_products comme suit :

    If(
ID = 1 And Measure_gallery.Selected.Height = 0,
(Filter('Easy Sales',(ProductCategory = "Sofa") And ((Depth < Measure_gallery.Selected.BoundingDepth And Width < Measure_gallery.Selected.BoundingWidth) Or (Depth < Measure_gallery.Selected.BoundingWidth And Width < Measure_gallery.Selected.BoundingDepth)))),
ID = 1 And Measure_gallery.Selected.Height > 0,
(Filter('Easy Sales',(ProductCategory = "Sofa") And ((Depth < Measure_gallery.Selected.BoundingDepth And Width < Measure_gallery.Selected.BoundingWidth And Height <= Measure_gallery.Selected.Height) Or (Depth < Measure_gallery.Selected.BoundingWidth And Width < Measure_gallery.Selected.BoundingDepth And Height <= Measure_gallery.Selected.Height)))),
ID = 1,
Filter('Easy Sales',ProductCategory = "Sofa"), 

ID = 2,
Filter('Easy Sales',ProductCategory = "Chair"), 
ID = 2 And Measure_gallery.Selected.Height = 0,
(Filter('Easy Sales',(ProductCategory = "Chair") And ((Depth < Measure_gallery.Selected.BoundingDepth And Width < Measure_gallery.Selected.BoundingWidth) Or (Depth < Measure_gallery.Selected.BoundingWidth And Width < Measure_gallery.Selected.BoundingDepth)))),
ID = 2 And Measure_gallery.Selected.Height > 0,
(Filter('Easy Sales',(ProductCategory = "Chair") And ((Depth < Measure_gallery.Selected.BoundingDepth And Width < Measure_gallery.Selected.BoundingWidth And Height <= Measure_gallery.Selected.Height) Or (Depth < Measure_gallery.Selected.BoundingWidth And Width < Measure_gallery.Selected.BoundingDepth And Height <= Measure_gallery.Selected.Height)))),

ID = 3,
Filter('Easy Sales',ProductCategory = "Table"),
ID = 3 And Measure_gallery.Selected.Height = 0,
(Filter('Easy Sales',(ProductCategory = "Table") And ((Depth < Measure_gallery.Selected.BoundingDepth And Width < Measure_gallery.Selected.BoundingWidth) Or (Depth < Measure_gallery.Selected.BoundingWidth And Width < Measure_gallery.Selected.BoundingDepth)))),
ID = 3 And Measure_gallery.Selected.Height > 0,
(Filter('Easy Sales',(ProductCategory = "Table") And ((Depth < Measure_gallery.Selected.BoundingDepth And Width < Measure_gallery.Selected.BoundingWidth And Height <= Measure_gallery.Selected.Height) Or (Depth < Measure_gallery.Selected.BoundingWidth And Width < Measure_gallery.Selected.BoundingDepth And Height <= Measure_gallery.Selected.Height))))
)

    Capture d’écran de la configuration d’éléments dans les canapés.

    Important

    Fournissez les noms appropriés pour la liste sharePoint et la galerie afin d’éviter d’avoir des erreurs à l’avenir. Conservez les noms des composants dans les formules pour éviter toute confusion.

    Remarque

    Le filtrage spatial n’est pas inclus pour la page Tapis, car une autre fonctionnalité spécifique au produit est ajoutée. La zone mesurée dans la session Mesure dans MR sera utilisée pour estimer le prix du tapis sélectionné.

    Conseil / Astuce

    Enregistrez fréquemment votre application en sélectionnant l’onglet Fichier en haut et en sélectionnant l’option Enregistrer . Si vous y êtes invité, sélectionnez l’option cloud , puis sélectionnez Enregistrer.

Calculer le prix en fonction de la zone

  1. Accédez à la page Carpet_details , ajoutez une étiquette, puis renommez-la Area_carpets.

    Capture d’écran de l’ajout d’une étiquette de zone

  2. Ajoutez une autre étiquette vide en regard de l’étiquette Area_carpets , puis configurez la propriété Text de l’étiquette vide comme suit pour afficher la zone calculée :

    Measure_gallery.Selected.Area&"cm²"

    Capture d’écran du calcul de zone.

  3. Configurez l’étiquette en regard de l’étiquette Price comme suit pour afficher le prix calculé :

    "$"&Measure_gallery.Selected.Area * content_carpets.'Price/cm2'

    Capture d’écran du calcul du prix.

Après avoir implémenté les étapes ci-dessus, votre application filtrera spatialement les produits et calculera le prix exact des tapis en fonction de vos mesures réelles.

Animation de la démonstration d’application après l’implémentation de la mesure dans mr et le filtrage spatial.