Créer une liste principale et des détails principaux avec Page Frame

Introduction

Un « page frame » est un composant de la toolbox qui crée une section pour afficher une autre page au sein de la même application. C’est le même concept que l’Iframe en HTML.

Gardez à l’esprit que pour modifier la page affichée dans le page frame, vous devez modifier directement la page référencée.

Dans cet exemple, un page frame est créé pour afficher la page de détail du compte, à côté du repeater des comptes.

Étapes à suivre

1. Configurer la liste principale avec repeater et Account Card

Commencez par une page personnalisée, où un Aggregate Account a été ajouté et affiché comme repeater. Pour personnaliser les cartes du repeater, supprimez les champs par défaut et insérez le composant réutilisable Account Card*.

Consultez le guide « create a reusable component – account card » pour en savoir plus.

2. Ajouter le composant Page Frame pour les détails du compte

Ensuite, glissez-déposez un composant Page Frame de la toolbox, à côté du repeater

Ajoutez un page State dans la boîte principale du repeater (C) pour récupérer l’id du compte afin d’afficher ses détails dans le page frame.

Depuis l’onglet Attribute, ajoutez un Placeholder au Page Frame : Click to see account details. Et enveloppez-le dans une boîte, pour pouvoir ajuster sa taille à 100 % en hauteur et en largeur.

Ensuite, depuis l’onglet Attribute du Page Frame, définissez le Page ID pour déterminer quelle page afficher. Récupérez donc l’ID depuis « edit definition » de la page de détail des Accounts et copiez-le. Collez-le dans « Page ID ».

À partir de ce moment, votre placeholder devrait être affiché.

3. Lier le Page Frame pour afficher les détails du compte sélectionné

Ensuite, ajoutez « data ?? db.get(params.id) » au Set Component Data de la page source view.

Le page frame obtient ses informations à partir de « data » pour afficher les détails du compte. Normalement, nous obtenons les paramètres à partir de l’URL de la page. Cependant, dans le cas d’un page frame, les données sont définies dans la page où il est utilisé.

Comme dernière étape, ajoutez cette ligne JavaScript dans un comportement Set Component Data, sur le Page Frame :

pageState.selected ? db.get(pageState.selected) : undefined

Cela affichera le compte sélectionné dans le page frame s’il y en a un de sélectionné.

Après avoir complété cette étape, cliquer sur un Account de la liste devrait afficher la page de détail via le Page Frame.

4. Afficher les opportunités dans un onglet de la page de détail du compte

Pour pousser cet exemple plus loin, nous allons maintenant ajouter un Page Frame à un onglet de la page de détail du compte. Cet onglet affichera une liste de toutes les opportunités associées au compte.

Pour créer cette liste d’opportunités, créez un champ calculé qui est une collection d’opportunités.

Ensuite, changez le code, via le Properties Panel, pour « search » opportunity avec le critère « customer equal (JS) data » et ajoutez le champ calculé comme repeater à l’onglet.

Un peu de style a été appliqué au repeater. Le style peut être personnalisé selon les préférences de l’utilisateur.

Ensuite, ajoutez un Page Frame à côté du repeater et un comportement Save Page Data :

On Click

Key: selectedOpportunity

Value source: other

Value (field): id

Reproduisez l’étape 2, mais cette fois, récupérez l’ID de la page de détail de Opportunity.

Reproduisez l’étape 3

5. Effacer l’opportunité sélectionnée lors du changement de compte

Ajoutez un Save Page Data, à la boîte principale du repeater de comptes, pour effacer l’opportunité sélectionnée lors de la sélection d’un compte différent.

Event: onClick

Key: selectedOpportunity

Value Source: Other

Value (JS): null

Sur la page de détail du compte, ajoutez un comportement Show/Hide au page frame qui le masquera lorsqu’il n’y a aucune opportunité associée à ce compte.

6. Ajouter et appliquer un Page Filter au repeater des opportunités

Glissez-déposez un composant Page Filter au-dessus du repeater des opportunités. Depuis l’onglet Attribute, sélectionnez :

Type: Enum

Event: OpportunityStatus

All Values Label: All Status

Ensuite, avec le repeater des opportunités sélectionné, ajoutez le comportement Applicable Page Filter :

Type: Opportunity

Fields: status

Cette étape garantira que la sélection faite dans le page filter s’applique au repeater des opportunités.

7. Masquer les composants lorsqu’aucune opportunité n’est disponible

Comme dernière étape, ajoutez un comportement Show/Hide pour n’afficher le filtre de statut que lorsqu’il existe des opportunités :

data.length > 0

Conclusion

En utilisant une liste principale et un page frame pour les détails principaux, vous pouvez afficher des données connexes (comme les détails de compte et les opportunités) de manière organisée et efficace. Cette approche améliore la navigation au sein de l’application en intégrant du contenu dynamique sans avoir besoin de recharger la page, ce qui améliore l’expérience utilisateur globale.