Personnaliser une vue au moment de l’exécution
3 Tâches
5 mins
Scénario
Les parties prenantes de GoGoRoad souhaitent que les vues Enter customer information et Identify Location soient rationalisées pour afficher les informations pertinentes avec les validations appropriées. Pour répondre à cette demande, modifiez la disposition des informations de couverture dans la vue Enter customer information pour les afficher sur deux colonnes, et ajoutez la propriété ZIP code à la vue Identify Location avec les validations requises.
Vous trouverez dans le tableau suivant les identifiants dont vous avez besoin pour relever le défi.
Rôle | Nom d’utilisateur | Mot de passe |
---|---|---|
Développeur d’applications | author@gogoroad | pega123! |
Présentation du défi
Détail des tâches
1 Ajouter une propriété à un type de données
- Dans le volet de navigation d’App Studio, cliquez sur Data.
- Dans la page d’accueil Data objects and integrations, cliquez sur Service address pour ouvrir le data object Service address.
- Cliquez sur Add field pour ajouter un nouveau champ au data object Service address.
- Dans le champ Field name, saisissez Zip.
- Dans la liste Type , sélectionnez Text (single line).
- Cliquez sur Advanced pour développer les options.
- Dans le champ Max length, saisissez 5.
- Cliquez sur Submit et enregistrez les modifications.
2 Passer à un modèle de mise en page sur deux colonnes
- Dans le volet de navigation d’App Studio, cliquez sur Case types > Assistance Request pour ouvrir le type de dossier Assistance Request.
- Cliquez sur Save and run pour créer une instance de dossier.
- Avancez au-delà de l'étape Identify issue.
- Dans la vue Enter customer information, activez le mode Design.
- Passez le curseur sur la section Enrollment information, puis cliquez sur Edit this section pour ouvrir le volet Enrollment information .
- Dans le volet Enrollment information, à droite de Template, cliquez sur Change pour modifier le modèle.
- Dans la fenêtre Select a template, cliquez sur 2 Column.
- Dans le volet Enrollment information, passez le curseur sur Coverage level, , puis cliquez sur l’élément et faites-le glisser vers Column B.
- Cliquez sur Close pour fermer le volet Enrollment information.
- Activez le mode Design.
3 Configurer les paramètres de contrôle
- Cliquez sur Continue pour faire avancer le dossier jusqu’à l’étape Identify location.
- Activez le mode Design.
- Passer le curseur sur la section Service address, puis cliquez sur Edit this section.
- Dans le volet de droite, cliquez sur Add.
- Dans la section Fields , passez le curseur sur le champ Zip et cliquez sur Add to view.
- Cliquez sur Close pour revenir au volet précédent.
- Dans le volet de droite, passez le curseur sur Zip, puis cliquez sur Edit this "Text input".
- Décochez la case Use property default.
- Dans le champ Label value, saisissez Zip code.
- Dans la liste Placeholder, sélectionnez Other.
- Dans le champ sous la liste Placeholder, saisissez 12345 comme valeur du placeholder.
- Dans la liste Required, sélectionnez Always.
- Cliquez sur l’onglet Presentation.
- Dans la section Editable Settings, dans le champ Min characters, saisissez 5.
- Répétez l’étape 14 pour le champ Max characters.
- Dans la section Editable Format, dans la liste Type, sélectionnez Number.
- Dans la liste Text alignment, sélectionnez Left.
- Décochez la case Display value using read-only formatting.
- Cliquez sur Apply pour enregistrer vos modifications.
- Cliquez sur Close pour revenir au volet précédent.
- Cliquez sur Close pour fermer le volet de la section.
- Activez le mode Design.
Vérifier votre travail
- Depuis le menu de navigation en plusieurs étapes, cliquez sur Enter customer information pour revenir à l'étape précédente.
- Dans la liste Account ID, sélectionnez un client inscrit et confirmez que Coverage level est affiché dans le deuxième colonne.
- Cliquez sur Continue pour naviguer jusqu’à l’étape Identify location.
- Dans la vue Identify location, vérifiez que vous ne pouvez que saisir des chiffres dans le champ Zip code.
- Dans le champ Zip code, renseignez une valeur de plus de 5 chiffres et cliquez sur Continue.
- Confirmez que vous recevez un message d'erreur lorsque la longueur du Zip code est supérieure à 5 caractères.
- Dans le champ Zip code, renseignez une valeur de plus de 5 chiffres et cliquez sur Continue.
- Confirmez que vous recevez un message d'erreur lorsque la longueur du Zip code est supérieure à 5 caractères.
- Dans le champ Zip code, renseignez une valeur de plus de 5 chiffres et cliquez sur Continue.
- Confirmez que le dossier avance jusqu'à l'étape Identify vehicle.
Want to help us improve this content?