Configure the Showpad Web Tab in C4C

Adding the Showpad Web App inside SAP Cloud lets your users quickly access their coursework, content, and more within C4C. This allows for increased access and adoption of Showpad as a sales enablement tool, as reps can use it without ever having to leave their CRM. 

If your organization employs Single Sign-on for C4C and has the Showpad Web Tab enabled, users will automatically log into the Showpad home screen in their Showpad Web Tab.

The installation setup will be the same whether you use Showpad Coach, Content, or both.

See how it looks

Key features

• Display Showpad content and training materials in a Web Tab in C4C
• Let your sales reps access Showpad easily from within C4C
• Increase Showpad adoption

You need this to succeed

• Developer or admin access in C4C
• Access and familiarity with SAP Cloud Application Studio
• A user account to assign the Custom Work Center to, for verifying and testing the integration
• Admin access on Showpad's Online Platform
• Integration between Showpad and C4C enabled

Do this step by step

• Create a Showpad Web Tab Solution
• Add Items to your new Showpad Web Tab Solution
• Set up the Showpad Web Tab
• Create Port Type Package and Mashup Port binding
• Create the HTML Mashup
• Create the Embedded Component
• Add the Embedded Component to the Work Center View
• Assign the Work Center / Work Center View to business users
• See the final result

---

 

Create a Showpad Web Tab Solution

1. Login to SAP Cloud Application Studio.
2. Click the Create a New Solution icon in the left menu, or click right on My Solutions folder and then Create Solution. 
   
   In case you already have a created Solution you would like to use, skip the next step and directly go to Add Items to your new Showpad Web Tab Solution.
3. Write ShowpadWebTab in the Description field, and select Customer Relationship Management in the Deployment dropdown. Then, click OK.
   

---

 

Add Items to your new Showpad Web Tab Solution

We will now add three different items to our new Showpad Web Tab Solution.

1. First, if the Solution Explorer left menu is not visible, click on View in the toolbar and then Solution Explorer.
   
2. Then, create a folder by right-clicking the Solution and selecting Add > New Folder. Name it ShowpadWebApp.
3. Right-click the folder and click Add > New Item.
4. First, in the template list, select Business Object, and name it ShowpadMashup.bo. Then, click Add.
   
5. In the ShowpadMashup window appearing, insert the below code:

   import AP.Common.GDT as apCommonGDT;
   businessobject ShowpadMashup {
   element Name: ID;
   }

   
6. Add a new template again by right-clicking the ShowpadWebApp folder and click Add > New Item in the right menu.
7. Then, select Work Center, and name it ShowpadWebTab.uiwoc. Click Add.
   
8. When the Select Business Object modal appears, indicate ShowpadMashup in the Business Object field, and click Ok.
   
9. Add the third template by right-clicking the ShowpadWebApp folder and click Add > New Item in the right menu.
10. In the template list, select Work Center View, and name it ShowpadWebTab.uiwocview. Then, click Add.
    
11. When the Select Business Object modal appears, indicate ShowpadMashup in the Business Object field, and click Ok.

Here is how the items in your Solution should look at this point:

---

 

Set up the Showpad Web Tab

1. Open the Work Center View by double-clicking on the item in the right menu
2. Remove most of the Work Center View sections and keep only one, as shown below.
   
3. Close and save.
4. Open the Work Center in the UI Designer by double-clicking on the item in the right menu.
5. Right-click on the left sidebar and click 'Add > WorkCenterView'.
   
6. Navigate to the Configuration Explorer in the bottom right menu, and browse to find the folder 'IDnumber_MAIN > SRC'. If you're asked to rename click Yes, and drag and drop the Work Center View in the View as shown below.
   
7. Save and close the UI Designer.

---

 

Create Port Type Package and Mashup Port binding

1. To add a new template, right-click on your folder 'ShowpadWebApp' in the Solution Explorer right menu, and click Add > New Item.
2. In the template list, select Port Type Package (PTP), and name it ShowpadWebTab.uicomponent. Then, click Add.
   
3. When the Select Business Object modal appears, indicate ShowpadMashup in the Business Object field, and click Ok.
4. Double-click the PortTypePackage file to open in the UI Designer. If the lock is still displayed next to the new in the tab at the top, click the pencil icon in the toolbar to change to edit mode first.
   
5. Click 'New' (the '+' icon) and create two new Port Types. Rename them to Inport and Outport.
   Then, add a list parameter under Inport and Outport by right-clicking on the Port Type and selecting Add List Parameter. Rename them to InportParameter and OutportParameter.
   
6. Save and close.

---

 

Create the HTML Mashup

1. Add a new template by right-clicking the ShowpadWebTab folder in the right menu, then selecting 'Add > New item'.
2. In the template list, select Mashup Port Binding, and name it ShowpadWebTab. Then, click Add.
   
3. In the Port Binding Designer, double-click ShowpadWebTab and specify the Inport & Outport Type Package created in the previous step, as shown below.
   
4. Save & close.
   
   Here is how the items in your Solution should look at this point:
   
   
5. Right-click on MashUp Authoring item and select Create HTML Mashup
6. When a dialog box appears, as shown below, choose 'Yes'. This will navigate you to the C4C Solution. Then, log into the sales cloud environment with your development user.
7. In the HTML Mash Up Create screen that appears, do the following:
   • Choose "With Port binding"
   • Choose the relevant Port Binding already created from the solution, and name it 'Showpad Web Tab'
   • Select the Type URL, and specify the following URL (replacing [yoursubdomain] with the subdomain of your Showpad account):

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

   • Set the height to 1000
   • Clicking preview should display the Showpad login screen or web app (depending on whether you are already logged in in your browser). If this preview is displayed properly, then your webpage mashup should also be displayed properly.
   • Click Save and Close and return to the SAP Application Studio.

---

 

Create the Embedded Component

1. Add a new template by right-clicking the 'ShowpadWebTab' folder from Solution Explorer in the right menu, then select 'Add > New item'.
2. In the template list, select Embedded Component and name it ShowpadWebTab_EC. Then, click Add.
   
3. Open the Embedded Component in the UI Designer, and check if the EC is locked (displayed in the tab at the top). If locked, click the pencil icon in the toolbar to change to edit mode.
4. From the Configuration tab in the bottom-right corner, find the Mashup under IDnumber_MAIN > SRC > Mashups > Pipes, and drag and drop it on the Embedded Component.
   
5. Then from the Controller tab in the bottom-left corner, create an outport as follows:
   • Select the Outports folder, then right-click on it and select Add OutPort
   • Select the PortType Package, then set the PortType Reference to Inport as shown below:
     
6. Create a Simple Navigation by doing the following:
   • Open the Designer tab in the bottom-left corner and click on Bind
   • Select the Navigations tab on the dialog box that appears, and right-click on Navigations. Then, choose 'Add Navigation'
   • Check if the parameters are mapped correctly at the bottom of the screen
   • Click OK to save your navigation
   • Your new entry should be under 'Simple Navigation' with Inport and Outport specified:
     
7. Save & Close

---

 

Add the Embedded Component to the Work Center View

1. Open the Work Center View by double-clicking on it.
2. Find your Embedded Component in the Configuration tab under IDnumber_Main > SRC > ShowpadWebTab, and drag and drop it in your Work Center View.
   
3. Save & close

At this point, these should be the components in your Solution:

 

---

 

Assign the Work Center / Work Center View to Business Roles

1. Ensure all your created components are saved and activated within Application Studio & UI Designer. To do so, right-click the solution and click Activate > All Items in the Project Explorer.
   
2. Log in to your SAP tenant as an admin and under Administrator > Business Roles, and assign this Work Center to all business roles that should have access to it.

---

 

See the final result

Your users will be able to access Showpad from their SAP Sales Cloud instance by clicking on the new Showpad tab. See some examples below. 

Note: Your users will need to log in with their Showpad account just as in the regular web app environment.