Skip to main content

 

MindTouch Success Center

SAP Cloud for Customer (C4C) set up

This article contains instructions for integrating a MindTouch Touchpoint into SAP Customer for Cloud (C4C).
 

Overview


This page explains how to create a MindTouch integration inside SAP C4C. Using the MindTouch generic HTML integrations, customers can search for articles, publish articles, or view customer history from within C4C. 
 

SAP Setup


The integration is typically embedded in the "Ticket Overview" section inside Cloud for Customer.

Step 1: Create the Mashup

  1. Log in to your SAP system.
  2. Go to the Administration tab (hover over) and select Mashup Authoring.

    File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/Integrations/SAP/mashup_authoring.png
     
  3. Create a New HTML Mashup
  4. Enter the information
    • General Information
      • Mashup Category: Productivity & Tools
      • Port Binding: Ticket Information
      • Mashup name: MindTouch Touchpoint
      • Description: Search MindTouch for related articles. Look at a users history. Request article creation.
      • Status: Active
    • Configuration Information
      • Type: HTML
      • Height: 350
         
  5. In the HTML code editor, paste the code sample for the generic integration you want to integrate, such as MindTouch Search.
  6. In the HTML code editor, update the code to use your configuration and the SAP environment variables.
    
    <script type="text/javascript">
      var MindTouch = {};
      MindTouch.SITE_URL = "https://yoursite.mindtouch.us";
      MindTouch.WIDGET_SOURCE = 'MT-custom-search';
      MindTouch.DEFAULT_SEARCH = "";
      
      // The SAP context loads asynchronously. Populate settings when ready.
      sap.byd.ui.mashup.onContextUpdate = function() {
        // use ticket description for search
        MindTouch.DEFAULT_SEARCH = sap.byd.ui.mashup.context.inport.TicketDescription;
        
        // populate input field and submit form
        j$('#mt-solution-finder-input').val(MindTouch.DEFAULT_SEARCH);
        j$('#mt-search-form').trigger('submit');
      }
    </script>
  7. Click Save and Close.

Step 2: Add the Mashup to the ticket overview

  1. In the upper right of the screen, click Adapt, then select adaptation mode.

    File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/Integrations/SAP/adaptation.png
     
  2. Once in Adaptation Mode, go to CUSTOMER SERVICE then select any ticket available (you may have to view all tickets by changing the options in the drop down box)
  3. Once a ticket is loaded, and the ticket overview is displayed, click Adapt again, then select Edit Screen.

    File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/Integrations/SAP/enter_adaptation.png
     
  4. Select Mashups and Web Services.
  5. In Mashups and Web Services, check MindTouch Touchpoint, the set the properties accordingly.
    • Set Appearance to "New Screen Section" or "Embedded Near Solution Finder."
    • Check the Full Width checkbox.
  6. Click Save, then click on Publish.

Step 3: Remove Solution Finder

Some instances may have the "old" integration (Solution Finder) set up which we will now remove: 

  1. Click Edit Screen
  2. In the Screen layout section, uncheck Solution Finder.
  3. Exit Adaptation Mode. Once complete, you have successfully added the MindTouch Touchpoint to SAP.

Step 3: Customize the SAP widget

The HTML mashup in SAP has two modes:

  • HTML mode, which allows users to create mashups that contain HTML, JavaScript and CSS. 
  • URL mode, which allows users to input a URL to a mashup they might want to load.

With MindTouch, most integrations will be in HTML mode where you are using MindTouch HTML code samples.

Fetch values from SAP

When using HTML mode, you fetch variables from the environment using JavaScript. All available ticket values can be fetched from:

sap.byd.ui.mashup.context.inport

This fetches values that are assigned in the sap object. You might want to assign this to a JavaScript variable, like:

sapApp = sap.byd.ui.mashup.context.inport;

Values that can be fetched from this object include

  • sapApp.TicketDescription
  • sapApp.TicketID
  • sapApp.ProductName
  • sapApp.UserEmail

You can get a full list of the available values by logging the sapApp object in your developer tools, or viewing the list of available port values and ports when creating a mashup.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/Integrations/SAP/port_bindings.png

 

  • Was this article helpful?