Configurer l'onglet Web Showpad dans SAP Sales Cloud (anciennement C4C)

L'ajout de la Showpad Web App dans SAP Cloud permet à vos utilisateurs d'accéder rapidement à leurs cours, contenus et plus encore dans C4C. Cela permet d'augmenter l'accès et l'adoption de Showpad en tant qu'outil d'aide à la vente, car les représentants peuvent l'utiliser sans jamais avoir à quitter leur CRM.

Si votre organisation utilise l'authentification unique pour SAP Sales Cloud (anciennement C4C) et a l'onglet Showpad Web activé, les utilisateurs se connecteront automatiquement à l'écran d'accueil Showpad dans leur onglet Showpad Web Tab.

La configuration d'installation sera la même que vous utilisiez Showpad Coach, Content, ou les deux.

Voir à quoi cela ressemble

Fonctionnalités clés

• Afficher le contenu Showpad et les supports de formation dans un onglet Web dans SAP Sales Cloud
• Permettez à vos représentants commerciaux d'accéder facilement à Showpad depuis SAP Sales Cloud
• Augmenter l'adoption de Showpad

Vous en avez besoin pour réussir

Faites cela étape par étape

• Créer une solution d'onglet Web Showpad
• Ajouter des éléments à votre nouvelle solution Showpad Web Tab
• Configurer l'onglet Web Showpad
• Créer un package de type de port et une liaison de port Mashup
• Créer le HTML Mashup
• Créer le composant intégré
• Ajouter le composant intégré à la vue du centre de travail
• Attribuer le centre de travail / la vue du centre de travail aux utilisateurs métier
• Voir le résultat final

Créer une solution d'onglet Web Showpad

1. Connectez-vous à SAP Cloud Application Studio.
2. Cliquez sur l'icône Créer une nouvelle solution dans le menu de gauche, ou cliquez avec le bouton droit sur le dossier Mes solutions, puis sur Créer une solution.
    
   Si vous avez déjà créé une Solution que vous souhaitez utiliser, ignorez l'étape suivante et allez directement à Ajouter des éléments à votre nouvelle solution d'onglet Web Showpad.
3. Saisissez ShowpadWebTab dans le champ Description, et sélectionnez Customer Relationship Management dans le menu déroulant Déploiement. Puis, cliquez sur OK.
   

Ajouter des éléments à votre nouvelle solution Showpad Web Tab

Nous allons maintenant ajouter trois éléments différents à notre nouvelle solution Showpad Web Tab.

1. Tout d'abord, si le menu de gauche Explorateur de solutions n'est pas visible, cliquez sur Affichage dans la barre d'outils, puis sur Explorateur de solutions.
   
2. Ensuite, créez un dossier en faisant un clic droit sur la Solution et en sélectionnant Ajouter > Nouveau dossier. Nommez-le ShowpadWebApp.
3. Cliquez avec le bouton droit sur le dossier et cliquez sur Ajouter > Nouvel élément.
4. Tout d'abord, dans la liste des modèles, sélectionnez Business Object et nommez-le ShowpadMashup.bo. Ensuite, cliquez sur Ajouter.
   

5. Dans la fenêtre ShowpadMashup qui apparaît, insérez le code ci-dessous :

   Trouvez votre Composant Intégré dans l'onglet Configuration sous IDnumber_Main > SRC > ShowpadWebTab, et glissez-déposez-le dans votre Vue Centre de Travail.

   

6. Ajoutez à nouveau un nouveau modèle en faisant un clic droit sur le dossier ShowpadWebApp et cliquez sur Ajouter > Nouvel élément dans le menu de droite.
7. Ensuite, sélectionnez Centre de travail et nommez-le ShowpadWebTab.uiwoc. Cliquez sur Ajouter.
   
8. Lorsque la fenêtre modale Sélectionner un objet métier apparaît, indiquez ShowpadMashup dans le champ Objet métier, puis cliquez sur Ok.
   
9. Ajoutez le troisième modèle en faisant un clic droit sur le dossier ShowpadWebApp et cliquez sur Ajouter > Nouvel élément dans le menu de droite.
10. Dans la liste des modèles, sélectionnez Work Center View et nommez-le ShowpadWebTab.uiwocview. Puis, cliquez sur Ajouter.
    
11. Lorsque la fenêtre modale Sélectionner un objet métier apparaît, indiquez ShowpadMashup dans le champ Objet métier, puis cliquez sur Ok.

Voici à quoi devraient ressembler les éléments de votre Solution à ce stade :

Configurer l'onglet Web Showpad

1. Ouvrez la vue du centre de travail en double-cliquant sur l'élément dans le menu de droite
2. Supprimez la plupart des sections de la Vue du Centre de Travail et ne conservez qu'une seule, comme indiqué ci-dessous.
   
3. Fermer et enregistrer.
4. Ouvrez le Work Center dans l'UI Designer en double-cliquant sur l'élément dans le menu de droite.
5. Faites un clic droit sur la barre latérale gauche et cliquez sur « Ajouter > WorkCenterView ».
   
6. Naviguez vers l'Explorateur de configuration dans le menu en bas à droite, et parcourez pour trouver le dossier 'IDnumber_MAIN > SRC'. Si on vous demande de renommer, cliquez sur Oui, et glissez-déposez la Vue du Centre de travail dans la Vue comme indiqué ci-dessous.
   
7. Enregistrer et fermer le concepteur d'interface utilisateur.

Créer un package de type de port et une liaison de port Mashup

1. Pour ajouter un nouveau modèle, faites un clic droit sur votre dossier 'ShowpadWebApp' dans le menu de droite de l'Explorateur de solutions, puis cliquez sur Ajouter > Nouvel élément.
2. Dans la liste des modèles, sélectionnez Port Type Package (PTP) et nommez-le ShowpadWebTab.uicomponent. Puis, cliquez sur Ajouter.
   
3. Lorsque la fenêtre modale Sélectionner un objet métier apparaît, indiquez ShowpadMashup dans le champ Objet métier, puis cliquez sur Ok.
4. Double-cliquez sur le fichier PortTypePackage pour l'ouvrir dans l'UI Designer. Si le verrou est toujours affiché à côté du nouveau dans l'onglet en haut, cliquez d'abord sur l'icône crayon dans la barre d'outils pour passer en mode édition.
   
5. Cliquez sur « Nouveau » (l'icône « + ») et créez deux nouveaux types de port. Renommez-les en Inport et Outport.
   Ensuite, ajoutez un paramètre de liste sous Inport et Outport en faisant un clic droit sur le Type de Port et en sélectionnant Ajouter un Paramètre de Liste. Renommez-les en InportParameter et OutportParameter.
   
6. Enregistrer et fermer.

Créer le HTML Mashup

1. Ajoutez un nouveau modèle en faisant un clic droit sur le dossier ShowpadWebTab dans le menu de droite, puis en sélectionnant « Ajouter > Nouvel élément ».
2. Dans la liste des modèles, sélectionnez Mashup Port Binding et nommez-le ShowpadWebTab. Puis, cliquez sur Ajouter.
   
3. Dans le Concepteur de liaison de port, double-cliquez sur ShowpadWebTab et spécifiez le package de type Inport & Outport créé à l'étape précédente, comme indiqué ci-dessous.
   
4. Enregistrer et fermer
   
   Voici à quoi devraient ressembler les éléments de votre Solution à ce stade : 
    
5. Cliquez avec le bouton droit sur l'élément MashUp Authoring et sélectionnez Create HTML Mashup
6. Lorsqu'une boîte de dialogue apparaît, comme illustré ci-dessous, choisissez « Oui ». Cela vous dirigera vers la solution SAP Sales Cloud. Ensuite, connectez-vous à l'environnement sales cloud avec votre utilisateur de développement.
7. Dans l'écran de création HTML Mash Up qui apparaît, procédez comme suit :
   • Choisissez « With Port binding »
   • Choisissez la liaison de port pertinente déjà créée à partir de la solution, et nommez-la 'Showpad Web Tab'

   • Sélectionnez l'URL de type et spécifiez l'URL suivante (en remplaçant [yoursubdomain] par le sous-domaine de votre compte Showpad) :

     https://[yoursubdomain].showpad.biz/content/  

   • Définir la hauteur à 1000
   • Cliquer sur aperçu devrait afficher l'écran de connexion Showpad ou l'application web (selon que vous êtes déjà connecté dans votre navigateur ou non). Si cet aperçu s'affiche correctement, alors votre mashup de page web devrait également s'afficher correctement.
   • Cliquez sur Enregistrer et fermer et retournez au SAP Application Studio.

Créer le composant intégré

1. Ajoutez un nouveau modèle en faisant un clic droit sur le dossier 'ShowpadWebTab' dans l'Explorateur de solutions du menu de droite, puis sélectionnez 'Ajouter > Nouvel élément'.
2. Dans la liste des modèles, sélectionnez Composant intégré et nommez-le ShowpadWebTab_EC. Puis, cliquez sur Ajouter.
   
3. Ouvrez le Composant Intégré dans le Concepteur d'Interface Utilisateur, et vérifiez si l'EC est verrouillé (affiché dans l'onglet en haut). S'il est verrouillé, cliquez sur l'icône crayon dans la barre d'outils pour passer en mode édition.
4. Depuis l'onglet Configuration dans le coin inférieur droit, trouvez le Mashup sous IDnumber_MAIN > SRC > Mashups > Pipes, et glissez-déposez-le sur le Composant Intégré.
   
5. Ensuite, depuis l'onglet Controller dans le coin inférieur gauche, créez un port de sortie comme suit :
   • Sélectionnez le dossier Outports, puis faites un clic droit dessus et sélectionnez Add OutPort
   • Sélectionnez le Package PortType, puis définissez la Référence PortType sur Inport comme indiqué ci-dessous :
     
6. Créez une navigation simple en procédant comme suit :
   • Ouvrez l'onglet Designer dans le coin inférieur gauche et cliquez sur Bind
   • Sélectionnez l'onglet Navigations dans la boîte de dialogue qui apparaît, puis faites un clic droit sur Navigations. Ensuite, choisissez « Ajouter une navigation »
   • Vérifiez si les paramètres sont correctement mappés en bas de l'écran
   • Cliquez sur OK pour enregistrer votre navigation
   • Votre nouvelle entrée devrait se trouver sous « Navigation simple » avec Inport et Outport spécifiés :
     
7. Enregistrer et fermer.

Ajouter le composant intégré à la vue du centre de travail

1. Ouvrez la vue du centre de travail en double-cliquant dessus.
2. 
   
3. Enregistrer et fermer

À ce stade, voici les composants qui devraient se trouver dans votre Solution :

Attribuer le centre de travail / vue du centre de travail aux rôles métier

1. Assurez-vous que tous vos composants créés sont sauvegardés et activés dans Application Studio & UI Designer. Pour ce faire, faites un clic droit sur la solution et cliquez sur Activer > Tous les éléments dans l'Explorateur de projet.
   
2. Connectez-vous à votre tenant SAP en tant qu'administrateur et sous Administrateur > Rôles métier, assignez ce centre de travail à tous les rôles métier qui doivent y avoir accès.

Voir le résultat final

Vos utilisateurs pourront accéder à Showpad depuis leur instance SAP Sales Cloud en cliquant sur le nouvel onglet Showpad. Voir quelques exemples ci-dessous.

Remarque : Vos utilisateurs devront se connecter avec leur compte Showpad comme dans l'environnement Web App habituel.