Konfigurieren des Showpad-Webtabs in SAP Sales Cloud (früher C4C)

Das Hinzufügen der Showpad Web App in SAP Cloud ermöglicht es Ihren Nutzern, innerhalb von C4C schnell auf ihre Kurse, Inhalte und mehr zuzugreifen. Dadurch steigt die Nutzung und Akzeptanz von Showpad als Tool für Sales Enablement, da Vertriebsmitarbeitende es verwenden können, ohne jemals ihr CRM verlassen zu müssen.

Wenn Ihre Organisation Single Sign-On für SAP Sales Cloud (früher C4C) verwendet und die Showpad Web Tab aktiviert ist, werden sich die Benutzer automatisch beim Showpad-Startbildschirm in ihrem Showpad Web Tab anmelden.

Die Installation ist identisch, egal ob Sie Showpad Coach, Content oder beides verwenden.

Schau dir an, wie es aussieht

Wichtigste Funktionen

• Zeigen Sie Showpad Content und Schulungsmaterialien in einer Web-Registerkarte in SAP Sales Cloud an 
• Ermöglichen Sie Ihren Vertriebsmitarbeitern, Showpad ganz einfach direkt in SAP Sales Cloud zu nutzen 
• Showpad-Nutzung steigern

Das brauchst du, um erfolgreich zu sein

Machen Sie dies Schritt für Schritt

• Erstellen einer Showpad Web-Tab-Lösung
• Fügen Sie Elemente zu Ihrer neuen Showpad-Web-Tab-Lösung hinzu
• Die Showpad-Webregisterkarte einrichten
• Porttyp-Paket erstellen und Mashup-Portbindung
• Erstellen des HTML-Mashups
• Die eingebettete Komponente erstellen
• Die Embedded-Komponente zur Arbeitszentrum-Ansicht hinzufügen
• Weisen Sie das Work Center / die Work-Center-Ansicht Geschäftsbenutzern zu
• Sehen Sie sich das Endergebnis an

Erstellen einer Showpad-Webtab-Lösung

1. Melden Sie sich beim SAP Cloud Application Studio an.
2. Klicke auf das Symbol „Neue Lösung erstellen“ im linken Menü oder klicke mit der rechten Maustaste auf den Ordner „Meine Lösungen“ und dann auf „Lösung erstellen“. 
    
   Falls Sie bereits eine erstellte Solution haben, die Sie verwenden möchten, überspringen Sie den nächsten Schritt und gehen Sie direkt zu Elemente zu Ihrer neuen Showpad Web Tab Solution hinzufügen.
3. Schreiben Sie ShowpadWebTab in das Feld Beschreibung und wählen Sie im Dropdown Bereitstellung „Customer Relationship Management“ aus. Klicken Sie anschließend auf OK.
   

Elemente zu Ihrer neuen Showpad-Webtab-Lösung hinzufügen

Wir fügen nun drei verschiedene Elemente zu unserer neuen Showpad-Web-Tab-Lösung hinzu.

1. Wenn das Menü Lösung-Explorer links nicht sichtbar ist, klicken Sie zunächst in der Symbolleiste auf Ansicht und dann auf Lösung-Explorer.
   
2. Erstellen Sie dann einen Ordner, indem Sie mit der rechten Maustaste auf die Solution klicken und Add > New Folder auswählen. Benennen Sie ihn ShowpadWebApp.
3. Klicken Sie mit der rechten Maustaste auf den Ordner und wählen Sie Hinzufügen > Neues Element aus.
4. Wählen Sie zunächst in der Vorlagenliste Business Object aus und benennen Sie es ShowpadMashup.bo. Klicken Sie dann auf Add.
   

5. Fügen Sie im erscheinenden ShowpadMashup-Fenster den folgenden Code ein:

   Suchen Sie Ihre Embedded Component im Tab Konfiguration unter IDnumber_Main > SRC > ShowpadWebTab und ziehen Sie sie per Drag-and-Drop in Ihre Work Center View.

   

6. Fügen Sie erneut eine neue Vorlage hinzu, indem Sie mit der rechten Maustaste auf den Ordner ShowpadWebApp klicken und im rechten Menü Add > New Item auswählen.
7. Wählen Sie dann Arbeitsbereich aus und benennen Sie ihn ShowpadWebTab.uiwoc. Klicken Sie auf „Hinzufügen“.
   
8. Wenn das Modal „Select Business Object“ erscheint, geben Sie im Feld „Business Object“ ShowpadMashup an und klicken Sie auf „OK“.
   
9. Fügen Sie die dritte Vorlage hinzu, indem Sie mit der rechten Maustaste auf den Ordner ShowpadWebApp klicken und im rechten Menü auf Add > New Item klicken.
10. Wählen Sie in der Vorlagenliste Work Center View aus und benennen Sie sie ShowpadWebTab.uiwocview. Klicken Sie anschließend auf Add.
    
11. Wenn das Modal „Select Business Object“ erscheint, geben Sie im Feld „Business Object“ ShowpadMashup an und klicken Sie auf „OK“.

So sollten die Elemente in Ihrer Lösung an diesem Punkt aussehen:

Die Showpad-Webregisterkarte einrichten

1. Öffnen Sie die Work-Center-Ansicht, indem Sie im rechten Menü doppelt auf das Element klicken
2. Entfernen Sie die meisten Abschnitte der Work Center View und behalten Sie nur einen bei, wie unten gezeigt.
   
3. Schließen und speichern.
4. Öffnen Sie das Work Center im UI Designer, indem Sie im rechten Menü auf den Eintrag doppelklicken.
5. Klicken Sie mit der rechten Maustaste auf die linke Seitenleiste und wählen Sie „Add > WorkCenterView“.
   
6. Navigieren Sie im Menü unten rechts zum Configuration Explorer und suchen Sie den Ordner „IDnumber_MAIN > SRC“. Wenn Sie aufgefordert werden, umzubenennen, klicken Sie auf Ja, und ziehen Sie die Work Center View per Drag-and-drop in die Ansicht, wie unten gezeigt.
   
7. Speichern und schließen Sie den UI Designer.

Paket für Porttyp erstellen und Mashup-Portbindung

1. Um eine neue Vorlage hinzuzufügen, klicken Sie im rechten Menü des Solution Explorers mit der rechten Maustaste auf Ihren Ordner "ShowpadWebApp" und wählen Sie Hinzufügen > Neues Element.
2. Wählen Sie in der Vorlagenliste Port Type Package (PTP) aus und benennen Sie es ShowpadWebTab.uicomponent. Klicken Sie anschließend auf Add.
   
3. Wenn das Modal „Select Business Object“ erscheint, geben Sie im Feld „Business Object“ ShowpadMashup an und klicken Sie auf „OK“.
4. Doppelklicken Sie auf die Datei PortTypePackage, um sie im UI Designer zu öffnen. Wenn neben dem neuen Eintrag im Tab oben noch das Schloss angezeigt wird, klicken Sie zuerst auf das Stiftsymbol in der Symbolleiste, um in den Bearbeitungsmodus zu wechseln.
   
5. Klicken Sie auf „Neu“ (das „+“-Symbol) und erstellen Sie zwei neue Porttypen. Benennen Sie sie in Inport und Outport um.
   Fügen Sie dann einen Listenparameter unter Inport und Outport hinzu, indem Sie mit der rechten Maustaste auf den Porttyp klicken und „Listenparameter hinzufügen“ auswählen. Benennen Sie sie in InportParameter und OutportParameter um.
   
6. Speichern und schließen.

Erstellen des HTML-Mashups

1. Fügen Sie eine neue Vorlage hinzu, indem Sie im rechten Menü mit der rechten Maustaste auf den Ordner ShowpadWebTab klicken und dann "Add > New item" auswählen.
2. Wählen Sie in der Vorlagenliste Mashup Port Binding aus und benennen Sie es ShowpadWebTab. Klicken Sie anschließend auf Add.
   
3. Doppelklicken Sie im Port Binding Designer auf ShowpadWebTab und geben Sie das im vorherigen Schritt erstellte Inport & Outport Type Package an, wie unten gezeigt.
   
4. Speichern & schließen
   
   So sollten die Elemente in Ihrer Lösung an diesem Punkt aussehen: 
    
5. Klicken Sie mit der rechten Maustaste auf das Element MashUp Authoring und wählen Sie Create HTML Mashup aus
6. Wenn ein Dialogfeld erscheint, wie unten gezeigt, wählen Sie „Ja“. Dadurch werden Sie zur SAP Sales Cloud Solution weitergeleitet. Melden Sie sich anschließend mit Ihrem Entwicklungsbenutzer in der Sales-Cloud-Umgebung an.
7. Führen Sie auf dem Bildschirm „HTML-Mashup erstellen“, der angezeigt wird, Folgendes aus:
   • Wählen Sie "Mit Portbindung"
   • Wählen Sie die relevante, bereits in der Lösung erstellte Portbindung aus und benennen Sie sie „Showpad Web Tab“

   • Wählen Sie den Typ URL aus und geben Sie die folgende URL an (ersetzen Sie [yoursubdomain] durch die Subdomain Ihres Showpad-Kontos):

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

   • Setzen Sie die Höhe auf 1000
   • Beim Klicken auf Vorschau sollte der Showpad-Anmeldebildschirm oder die Web App angezeigt werden (je nachdem, ob Sie in Ihrem Browser bereits angemeldet sind). Wenn diese Vorschau korrekt angezeigt wird, sollte auch Ihr Webseiten-Mashup korrekt angezeigt werden.
   • Klicken Sie auf Speichern und schließen und kehren Sie zum SAP Application Studio zurück.

Erstellen der eingebetteten Komponente

1. Fügen Sie eine neue Vorlage hinzu, indem Sie im rechten Menü im Solution Explorer mit der rechten Maustaste auf den Ordner „ShowpadWebTab“ klicken und dann „Add > New item“ auswählen.
2. Wählen Sie in der Vorlagenliste Embedded Component aus und benennen Sie es ShowpadWebTab_EC. Klicken Sie dann auf Add.
   
3. Öffnen Sie die Embedded Component im UI Designer und prüfen Sie, ob die EC gesperrt ist (wird im Tab oben angezeigt). Wenn sie gesperrt ist, klicken Sie in der Toolbar auf das Stiftsymbol, um in den Bearbeitungsmodus zu wechseln.
4. Öffnen Sie die Registerkarte Configuration in der unteren rechten Ecke, suchen Sie das Mashup unter IDnumber_MAIN > SRC > Mashups > Pipes und ziehen Sie es per Drag-and-drop auf die Embedded Component.
   
5. Erstellen Sie anschließend auf der Registerkarte Controller in der unteren linken Ecke einen Outport wie folgt:
   • Wählen Sie den Ordner Outports aus, klicken Sie dann mit der rechten Maustaste darauf und wählen Sie Add OutPort aus
   • Wählen Sie das PortType-Paket aus und setzen Sie dann die PortType-Referenz auf Inport, wie unten gezeigt:
     
6. Erstellen Sie eine einfache Navigation, indem Sie Folgendes tun:
   • Öffnen Sie unten links die Registerkarte Designer und klicken Sie auf Bind.
   • Wählen Sie im erscheinenden Dialogfeld die Registerkarte Navigations und klicken Sie mit der rechten Maustaste auf Navigations. Wählen Sie dann „Navigation hinzufügen“
   • Überprüfen Sie, ob die Parameter unten auf dem Bildschirm korrekt zugeordnet sind
   • Klicken Sie auf OK, um Ihre Navigation zu speichern
   • Ihr neuer Eintrag sollte unter „Simple Navigation“ mit angegebenen Inport und Outport erscheinen:
     
7. Speichern & schließen.

Fügen Sie die eingebettete Komponente zur Work-Center-Ansicht hinzu

1. Öffnen Sie die Arbeitsbereichsansicht, indem Sie sie doppelt anklicken.
2. 
   
3. Speichern & schließen

An diesem Punkt sollten dies die Komponenten in Ihrer Lösung sein:

Arbeitscenter/Arbeitscentersicht Business-Rollen zuweisen

1. Stellen Sie sicher, dass alle von Ihnen erstellten Komponenten in Application Studio & UI Designer gespeichert und aktiviert sind. Klicken Sie dazu mit der rechten Maustaste auf die Lösung und wählen Sie im Project Explorer Aktivieren > Alle Elemente.
   
2. Melden Sie sich als Administrator bei Ihrem SAP-Mandanten an und weisen Sie unter Administrator > Geschäftsrollen dieses Work Center allen Geschäftsrollen zu, die darauf zugreifen sollen.

Sieh dir das Endergebnis an

Ihre Nutzer können über ihre SAP Sales Cloud-Instanz auf Showpad zugreifen, indem sie auf die neue Showpad-Registerkarte klicken. Nachfolgend finden Sie einige Beispiele.

Hinweis: Ihre Benutzer müssen sich mit ihrem Showpad-Konto anmelden, genau wie in der normalen Web App-Umgebung.