Tâches supplémentaires pour concevoir une expérience sur application mobile

Améliorez la réactivité et le temps de chargement de l’interface utilisateur de votre application mobile en affichant le contenu de l’application sous forme de page de liste mobile (mobile list page). De cette façon, vous améliorez votre application avec un écran natif qui a des transitions fluides et une barre de recherche dans l’en-tête par défaut.

Par exemple, vous pouvez créer une list page native qui affiche toutes les dépenses de la catégorie Lodging. Un responsable qui utilise votre application peut rechercher le nom d’un employé spécifique pour obtenir des résultats incluant toutes les dépenses d’hébergement de cet employé.

Avant de commencer : préparez le framework de votre list page :

• Créez un canal mobile pour votre application. Pour plus d'informations, consultez la rubrique Setting up mobile apps (Configuration des applications mobiles).
• Assurez-vous d'avoir un type de dossier (case type) que vous pourrez utiliser pour remplir l'écran de la page. Par exemple, créez un type de dossier pour le reporting des dépenses. Pour plus d’informations, consultez la rubrique Case types.
• Si vous souhaitez ajouter des actions de balayage (swipe actions) personnalisées que les utilisateurs doivent effectuer sur les éléments de la liste, configurez d’abord une action à l’échelle du dossier (case-wide action). Pour plus d’informations, consultez la rubrique Ajouter des actions facultatives aux dossiers.

Dans la création prescriptive low-code pour les pages de liste, vous exploitez simplement les types de dossiers de votre application Pega. Vous pouvez ensuite ajuster le mode d'affichage des données du types de dossier pour les appareils mobiles. Conseil : Si vous créez une list page mobile à partir d'un type de dossier prenant en charge le traitement hors ligne, et que vous ajoutez ensuite une list page à la navigation de votre application, le processus de packaging automatique s'assure que tous les dossiers référencés par la list page sont disponibles hors ligne. Pour plus d’informations sur l’activation de la prise en charge hors ligne des types de dossiers dans votre application, consultez la rubrique Enabling case processing in offline-enabled mobile apps (Activation du traitement des dossiers dans les applications mobiles hors ligne).

1. Ouvrez votre canal mobile (mobile channel) :
   1. Dans le volet de navigation d’App Studio, cliquez sur Channels.
   2. Dans la section Current channel interfaces, cliquez sur la vignette qui représente un canal mobile pour votre application.
2. À la page du canal mobile, dans l’onglet Content, cliquez sur la catégorie List pages.
3. Créez une nouvelle list page en cliquant sur Add.
4. Dans la section Edit page, dans le champ Page name, saisissez le nom de la list page.
5. Facultatif : Pour modifier l'icône par défaut de la list page mobile, sélectionnez une icône dans le catalogue d'images :
   1. À côté du champ Page name, cliquez sur l’icône actuelle.
   2. Dans la fenêtre Icon class picker, sélectionnez l’icône que vous souhaitez utiliser.
6. Dans la liste Case type, sélectionnez le type de dossier (case type) qui prend le mieux en charge votre processus métier. Par exemple : Pour une list page où les utilisateurs soumettent leurs dépenses dans différentes catégories, comme la catégorie Hébergement, sélectionnez le type de dossier (case type) Expense reporting.
7. Dans la liste Data page, sélectionnez la source de données de liste que vous souhaitez utiliser pour renseigner l’écran de la page. Par exemple : Sélectionnez la vue des données qui stocke toutes les notes de frais de la catégorie Hébergement.
   Note : Lorsque vous créez un type de dossier, Pega Platform crée automatiquement une source des données de la liste, que vous pourrez utiliser dans les pages de listes mobiles.
8. Dans la section List item information, configurez comment la page affiche les éléments de travail (work item) :

   Choix	Actions
   Ajouter un champ à l'élément de travail	Dans la section List item information, cliquez sur Add field puis sélectionnez un type de champ. Dans la liste en regard du champ, sélectionnez la propriété que vous souhaitez utiliser pour remplir le champ lors de l’exécution.
   Supprimer un champ de l'élément de travail	Dans la section List item information, à côté du champ que vous souhaitez supprimer, cliquez sur l'icône Delete this row.

   Par exemple : Vous pouvez utiliser la configuration de champ et propriété suivante pour afficher la page contenant les notes de frais :
   • Pour le champ Primary, sélectionnez la propriété Label qui définit le nom du rapport.
   • Pour le champ Secondary, sélectionnez la propriété Amount qui définit le montant total des frais.
   • Pour le champ Secondary suivant, sélectionnez la propriété Create Date/Time qui définit la date et l'heure d'envoi de la note de frais.
   • Dans le champ Secondary suivant, ajoutez une propriété personnalisée définissant la catégorie de la note de frais (Lodging, par exemple).
   • Pour le champ Status, sélectionnez la propriété Work status qui définit le statut de la note de frais.
9. Dans la section Swipe actions, indiquez ce qu’il se passe lorsque les utilisateurs balayent (swipe) les éléments de travail (work item) sélectionnés lors de l’exécution :

   Choix	Actions
   Ajouter une action de balayage de droite à gauche.	Dans la catégorie Right side actions, cliquez sur Add action puis sélectionnez l'action que vous souhaitez ajouter.
   Ajouter une action de balayage de gauche à droite.	Dans la catégorie Left side actions, cliquez sur Add action puis sélectionnez l'action que vous souhaitez ajouter.
   Supprimer une action de balayage	En regard de l’action que vous souhaitez supprimer, cliquez sur l’icône Remove.
   Renommer l'action de balayage	En regard de l’action dont vous souhaitez modifier le nom, cliquez sur l’icône Click to edit configuration. Dans le champ Name, saisissez un nouveau nom pour l’action. Cliquez sur Submit.
   Modifier l'icône d'une action de balayage	En regard de l’action dont vous souhaitez modifier l'icône, cliquez sur l’icône Click to edit configuration. Dans la section Icon, cliquez sur Change. Dans la fenêtre Icon class picker, sélectionnez l’icône que vous souhaitez utiliser. Cliquez sur Submit.
   Modifier le sens de balayage de l'action	Faites glisser l’action sélectionnée vers la catégorie de sens de balayage correspondante. Par exemple, pour modifier le sens de balayage (swipe) de la droite vers la gauche, faites glisser l’action vers la catégorie Right side actions.
   Changer l'ordre des actions de balayage	Note : Cette option est disponible si vous ajoutez plusieurs actions pour un sens de balayage.Faites glisser l’action sélectionnée vers le haut ou vers le bas dans la liste des sens de balayage.Conseil : Veillez à ce que l'action la plus importante de votre page soit le plus près possible de l'extrémité de l'écran, pour que l'élément soit plus facilement accessible par les utilisateurs de votre application mobile.

   Par exemple : Pour une page de notes de frais, vous pouvez configurer les actions de balayage suivantes :
   • Dans la catégorie Right side actions, ajoutez une action Edit details pour que les utilisateurs puissent modifier des notes de frais sélectionnées en balayant vers la gauche.
   • Dans la catégorie Right side actions, ajoutez une action au niveau du dossier Attach file pour que les utilisateurs puissent joindre des fichiers, tels qu'une facture, aux notes de frais sélectionnées en balayant vers la gauche.
   • Dans la catégorie Left side actions, ajoutez une action Follow pour que les utilisateurs puissent recevoir des notifications concernant une note de frais sélectionnée en balayant vers la droite.
10.  
    Le bouton d’action flottant est un bouton qui apparaît en bas de la page dans l’application mobile.
    Par exemple : Pour la list page mobile content une liste de notes de frais, le bouton d'action flottant crée une nouvelle note de frais.
11. Cliquez sur Save.

Par exemple : Un développeur d'applications mobiles crée une list page pour l'application de note de frais uPlus. Celle-ci permet aux utilisateurs de naviguer entre les notes de frais et de relire les informations les plus importantes, comme le libellé et le type de dépense.

Que faire ensuite : Ajoutez votre list page mobile à la barre de menus, puis vérifiez les modifications apportées à votre application mobile. Pour plus d'informations, consultez les rubriques Adding items to the menu bar (Ajouter des éléments à la barre de menu) et Previewing mobile apps (Prévisualiser les applications mobiles).

Adaptez les icônes de votre application mobile aux exigences de votre entreprise ou de votre projet en matière de charte graphique, en remplaçant les images par défaut par un ensemble de graphiques personnalisés.

En téléchargeant vos ressources personnalisées dans un seul fichier .zip, vous pouvez personnaliser les icônes qui apparaissent sur les écrans d’accueil et de lancement lorsque l’application mobile démarre.

Avant de commencer : Créez un canal mobile (mobile channel) pour votre application mobile. Pour plus d'informations, consultez la rubrique Setting up mobile apps (Configuration des applications mobiles).Remarque : Effectuez cette procédure uniquement dans les scénarios suivants :

• Pour spécifier des icônes différentes pour les applications iOS et Android.
• Pour télécharger des images d’icônes dans un format autre que le format SVG par défaut, par exemple, dans le format .png.
• Pour télécharger des images d’icônes dans une résolution autre que celle recommandée de 512 x 512 pixels.
• Pour les applications Android, afin de télécharger une icône de notification personnalisée pour la barre d’état de votre application mobile.

Sinon, personnalisez l’icône et l’écran de lancement de votre application mobile dans un environnement low-code. Pour plus d'informations, consultez la rubrique Customizing the icon and launch screen of mobile apps (Personnalisation de l'icône et de l'écran de lancement de vos applications mobiles).

Important : Lorsque vous remplacez les fichiers image par défaut dans le fichier .zip des ressources, assurez-vous que la structure du répertoire, les noms de fichiers et les dimensions des images de votre fichier .zip personnalisé sont identiques à ceux du fichier .zip par défaut. Si une image spécifique manque à votre fichier .zip de ressources personnalisées, le système d’exploitation de l’appareil mobile redimensionne les ressources existantes (Android) ou remplace les ressources manquantes par les ressources par défaut du système (iOS).

1. Téléchargez le fichier .zip des ressources simplifiées (simplified assets) qui correspond à votre version de Pega Mobile Client.
   Pour plus d’informations, consultez la rubrique Branding assets templates for Pega Mobile Client (Modèles de ressources de charte graphique pour Pega Mobile Client).
2. Extraire le contenu du fichier .zip.
3. Remplacez les ressources de type image dans les dossiers que vous avez extraits du fichier .zip pour personnaliser l’un des graphiques suivants :

   Choix	Actions
   Icône de l'application mobile (iOS)	Dans le dossier common_assets, remplacez le fichier icon.svg par le fichier image que vous souhaitez utiliser. Note : Si vous prévoyez de publier votre application mobile dans l'App Store d'Apple, utilisez une icône rectangulaire. Les appareils mobiles iOS redimensionnent également le fichier icon.svg et l'utilisent comme icône pour afficher des notifications dans la barre d'état de votre application mobile.
   Icône de l'application mobile (Android)	Dans le dossier common_assets, remplacez le fichier icon.svg par le fichier image que vous souhaitez utiliser. Dans le dossier android, remplacez le fichier icon_round.svg par le fichier image que vous souhaitez utiliser. Remarque : Utilisez une icône circulaire. Les appareils Android qui prennent en charge les icônes de démarrage circulaires utilisent le fichier icon_round.svg au lieu du fichier icon.svg comme icône d'application. Dans le dossier android, remplacez le fichier notification_icon.svg par le fichier image que vous souhaitez utiliser. Les appareils mobiles Android utilisent cette icône pour afficher les notifications dans la barre d’état de votre application mobile. Note : Utilisez une icône qui répond aux exigences suivantes : Format d’image – 32-bit .png (avec alpha) Image transparente Indice de transparence de la couleur - Blanc (#FFFFFF) Facultatif : Pour activer les icônes adaptatives pour votre application mobile, dans le dossier android, remplacez les fichiers icon_background.svg et icon_foreground.svg par les fichiers image que vous souhaitez utiliser. Pour plus d'informations sur les icônes adaptatives dans les systèmes d'exploitation Android, consultez la rubrique Adaptive icons sur le site Web des Développeurs Android.
   Logo de l'écran d'accueil (iOS et Android)	Dans le dossier common_assets, remplacez le fichier splashlogo.svg par le fichier image que vous souhaitez utiliser.

4. Sélectionnez les dossiers que vous avez extraits du fichier .zip et qui contiennent maintenant vos ressources personnalisées, puis compressez-les dans un seul fichier .zip.
5. Ouvrez votre canal mobile (mobile channel) :
   1. Dans le volet de navigation d’App Studio, cliquez sur Channels.
   2. Dans la section Current channel interfaces, cliquez sur la vignette qui représente un canal mobile pour votre application.
6. Sur la page du canal mobile, dans l'onglet Layout, cliquez sur Branding.
7.  
8. Dans la section Upload custom branding file, cliquez sur Choose file, puis sélectionnez le fichier .zip qui contient vos ressources personnalisées.
9. Confirmez votre choix en cliquant sur OK.
10. Cliquez sur Save.

Résultat : Au moment de l'exécution, votre application mobile utilisera les ressources personnalisées du fichier .zip que vous avez téléchargées dans le canal mobile.Que faire ensuite : Vérifiez les changements apportés à votre application mobile en générant, en installant et en lançant l’application. Pour plus d'informations, consultez la rubrique Generating native mobile apps (Générer des applications mobiles natives).

Avant de générer un fichier exécutable pour votre application mobile, vérifiez que les pages et la mise en page (layout) correspondent à votre design et que la logique de l'application fonctionne conformément à vos attentes. Utilisez un appareil mobile avec l'application Pega Mobile Preview pour prévisualiser un canal mobile (mobile channel) que vous configurez pour une application.

Avec Pega Mobile Preview, vous n’avez pas besoin d’obtenir des certificats ou de générer des fichiers exécutables avant d’accéder au contenu de votre application mobile.

Avant de commencer : Préparez-vous à prévisualiser une appli mobile :

• Configurez le canal mobile. Pour plus d'informations, consultez la rubrique Configuration des applications mobiles.
• Sur votre appareil mobile, téléchargez et installez Pega Mobile Preview à partir de l’App Store ou de Google Play.

Lorsque vous développez une application mobile pour une application, prévisualisez le canal mobile sur un appareil mobile après chaque modification lorsque celle-ci a un impact sur l’application. Par exemple, générez un aperçu (preview) après l’ajout d’une page, le changement de la mise en page (layout) ou la modification du flux.

Attention : N’utilisez pas Pega Mobile Preview à des fins de production.

Pega Mobile Preview donne une idée de l’expérience utilisateur, ce qui peut vous aider à développer et à tester votre application mobile, jusqu’à ce que vous construisiez un fichier exécutable. Pega Mobile Preview ne prend pas en charge certaines fonctionnalités, par exemple les notifications push.

Les canaux mobiles que vous ajoutez à Pega Mobile Preview expirent au bout de 30 jours.

1. Dans le volet de navigation d’App Studio, cliquez sur Channels.
2. Dans la section Current channel interfaces, cliquez sur la vignette qui correspond au canal mobile que vous souhaitez modifier.
3. Dans le coin supérieur droit de la page de configuration du canal mobile, cliquez sur l’icône Pega mobile preview.

   

   

   Résultat : Le volet Preview your application avec un QR code apparaît.
4. Sur votre appareil mobile, ouvrez Pega Mobile Preview, puis appuyez sur Start configuring.
5. Sur l’écran de définition du canal (channel), ajoutez votre canal mobile à la liste des canaux mobiles disponibles :

   Choix	Actions
   Scanner le QR code	Appuyez sur Scan the QR code, pointez l'appareil photo sur le QR code dans le volet Preview your application, puis attendez que le lecteur reconnaisse le code.
   Saisir l'URL du canal mobile	Dans App Studio, sur la page de configuration du canal mobile, dans le volet Preview your application, cliquez sur Email me instructions. Résultat : Un e-mail s’ouvre dans votre messagerie client par défaut. Avec votre messagerie client par défaut, envoyez l’e-mail vers une boîte de réception à laquelle vous pouvez accéder depuis votre appareil mobile. Sur votre appareil mobile, ouvrez le message, puis copiez l’URL du canal mobile. Dans Pega Mobile Preview, appuyez sur Enter URL manually, puis collez l’adresse du canal mobile.

   Dans la liste Active, vous pouvez ajouter d'autres canaux en appuyant sur l'icône Add, ou supprimer des canaux en les faisant glisser vers la gauche ou la droite.
6. Dans la liste Active, appuyez sur le canal auquel vous souhaitez accéder.
7. Sur l'écran d'authentification, connectez-vous au canal.
8. Testez le canal (channel) mobile pour vous assurer que la mise en page (layout) et les fonctionnalités de l’application mobile répondent aux exigences.
9. Facultatif : Pour mettre à jour le canal mobile après avoir modifié l'application mobile dans Pega Platform, actualisez le canal :

   Choix	Actions
   Actualiser l'écran actuel	Balayez le contenu de l'écran vers le bas.
   Actualiser le canal mobile	Sur n’importe quel écran du canal mobile actuel, appuyez sur l’icône Retour. Dans la liste Active, appuyez sur le nom du canal mobile.