Skip to Content
Technical Articles

C4C Mashups: How to return data from a mashup

Note: This blog is based on SAP Cloud for Customer Release 1905.

Problem

You have set up a HTML Mashup in Cloud Application Studio (PDI), for instance according to one of these excellent blogs:

However, when you try to return data to your embedded component using the fireResultUpdate function, nothing happens. Coding example:

sap.byd.ui.mashup.fireResultUpdate({
  "<outport_parameter_name>" : <parameter_value>
});

(Note: in case you are wondering, the Mashup Coding is documented in the C4C Administrator Guide, not the C4C Development Guide!)

Solution

The blogs that I came across barely touched the transferring back, so they explained that when binding you mashup to your embedded component, you need to create a navigation from your embedded component to your mashup.

However, in order to transfer data back from your mashup, you need to create a second, reverse navigation, as in the following screenshot:

(Note: In cass you’re looking for the Add button: You need to right-click the “Navgiations” folder on the lefthand side.)

Now the transferring back of data should work.

Some more background

In case you’re still having problems, here are some more details regarding my configuration:

The goal here is to integrate an external product configuration tool (EasySelect) into C4C. This is implemented as a separate tab in the Sales Quote TI. The user creates a quote, goes to “Product Configuration”, configures the products, hits “OK” and the configuration (i.e. a list of products) is replicated back to C4C.

I won’t go into the basics, but the main steps are:

  1. In Cloud Application Studio, create a port type package (Add => New Item) and define the input and output types (one for inport, one for outport) and the parameters for each type
  2. Create a port binding (Add => New Item => Mashup Port Binding), select the port type package you just created for both inport and outport. As inport/outport references, select the port types you created.
  3. Create a new embedded component as usual:
    1. Parent Dependency: Yes
    2. On Data Model tab: Create Inport Structure (here Inport => QuoteID)
    3. On Data Model tab: Create field Root => QuoteID and bind to CustomerQuote BO => field ID
    4. On Controller tab: Create Read event (BOOperation => Read; BOModel: CustomerQuote; 1 Parameter: “Name” = “Parameter”, Type = “alternativeKey”, Bind = “/Root/Inport//QuoteID”, Path = “/Root/QuoteID”
    5. On Controller tab: Add Inport “FromSalesQuote” (ParameterName = “ObjectID”, Parameter Binding = “/Root/InPort/QuoteID”) – on the right-hand-side under “Properties”, set RequestFireOnInitialization = true and for OnFire select the Read event you just created.
    6. Add the EC to the Sales Quote TI as you would normally (Lazy Loading is a good idea in this case).
    7. Result: When Sales Quote TI loads the EC, the inport is fired, which assigns the quote ID to the Inport Structure and fires the Read event which reads the Sales Quote with the ID in the Inport Structure and binds it to the Root node of the EC.
  4. Now for the HTML-Mashup-specific settings:
    1. Add Outport ToEasySelect (ParameterName = QuoteID, ParameterBinding = /Root/QuoteID)
    2. Add Inport FromEasySelect (ParameterName = ProductsAsCSV, ParameterBinding = the target field to which you want the return value of the Mashup assigned (In my case, I created an unbound field in the UI and set the “OnValueChanged” event of that field to an event that executes an action so that I can process the return value using ABSL coding)).
  5. According to the DEV guide and the blogs above, you are supposed to create some anchors across your EC so your HTML Mashup will work. It was not quite clear to me why this should be necessary (we do not want to modify the screen in the KUT). So I just left all the anchors out and the screen still works fine (i.e. values are transferred back and forth).
  6. Finally, create your HTML mashup in the studio and insert your code. What you do here is up to you, but two things are important:
    1. If you want to access a value from the Inport (here QuoteID), you can only do so in JavaScript, e.g.
      <script>document.write(sap.byd.ui.mashup.context.inport.QuoteID);</script>​
    2. If you want to return a value to C4C (here the field ProductsAsCSV), you need to call the following JavaScript, in this example by clicking a button:
      <input type="button" 
                   name="result" 
                   value="Transfer Result" 
                   onclick="javascript:sap.byd.ui.mashup.fireResultUpdate({'ProductsAsCSV' : 'This is the result'});" />​

      Note that the fireResultUpdate function expects a JSON object, which you create as in the code above in the form { ‘parameter1’ : ‘value1’; ‘parameter2’ : ‘value2’ } etc.

    3. Example:
  7. Add your mashup to the EC by dragging and dropping it from the “Configuration Explorer” to the Designer tab:
  8. Click “Bind” and maintain the navigation from the EC to the Mashup and from the Mashup to the EC as described in the screenshot at the beginning of this post.

One more note, which applies to Mashups in general. In case you are privacy-concerned and have third-party cookies disabled and if your mashup includes functionality that requires cookies to be set (as would be the case with a configurator), the mashup will most likely not work.

3 Comments
You must be Logged on to comment or reply to a post.
  • I really like all the pictures.  I am on an on-premise server.   However I wonder if I could use this with cloud connectors.  Mmmmmm….   Perhaps parts of it.  When I get a project where this would work well – I’ll try it.  Then try to update my comment here.

  • Hi Stefan,

    Great blog, thank you!

    Anchors in EC are required if you’d like to add mashups created via “Mashup Authoring” via Master Layout changes. Then to enable your EC for Master Layout (KUT) changes you will need to provide the required anchors.