Hey All,

Mashups are kind of easiest way to integrate external systems in Cloud Solutions but getting to the know their functionality is very much important even before starting to work on them. So, before I forget what I did on mashups( 😛 ), I would like to document it here and let you know the same so that it will stay as a reference to everyone.

I will take a simple example but will try to use a complex scenario so that you all will know in and out of mashup and how it works.

Tenant: C4C 1311.

Example: URL Mashup (with Params)

Scenario: Completely Custom approach so that it will be easier for you when you deal with std. Mashups.

Let’s start then !!!

Step 1:

  • Create a custom Business Object ZMashupTest
  • Define two elements with some String datatype (I am going with Name) as shown in the below screenshot.
  • SnA (Save and Activate). Our custom BO is ready!

     1.PNG


Step 2:

  • Create screens for the Custom BO.
  • Create a PTP Package with one PortType Input and two parameters, FirstName and LastName as shown in the below screenshot. SnA.

     Capture.PNG

  • Your solution should look something like in the below screenshot.

     Capture.PNG

Step 3:

  • Create a Mashup Port Binding.

          Capture.PNG

  • Open the created PortBinding in UI Designer and set all fields like…
    • Description
    • Categroy (of your choice)
    • Inport Type Package which you’ve created in Step 2
    • Input Type Reference as Input and leave the rest blank.

     Capture.PNG


Step 4:

  • Create an URL Mashup as shown below.

     Untitled.png

  • If any window pops up asking you to turn ON Admin Mode, click “Yes”. Doing so, you are making this mashup as a part of your solution.

     Untitled.png

  • QAF Builder pops up asking you to enter details of URL Mashup.
    • Select the same category which you used in 2nd bullet of Step 3.
    • In the OVS of Port Binding, you will now be able to see your PTP Package. Select it.
    • Type in some name and Description (optional).
    • Enter the “URL” of the external application. (For time being I created a test page where it accepts two parameters: first and last. I will keep this page open in case you wanna tryout. It is http://vatsav.co.nr/paramtest.php )
    • HTTP Method: GET
    • In the table below URL Information section, click “Add” twice and enter first and last as params and click on Parameter Binding OVS. You should now be able to see the parameters you created in Step 3 as shown in below screenshot.

            Untitled.png

    • Select FirstName in first URL Parameter and LastName in last URL Parameter.
    • Save and Close.


Step 5:

  • Now that our Mashup’s ready, lets proceed with adding it on our screen.
  • Open our CustomBO’s TI screen.
  • Now, you should understand on which part of screen would the mashup appear? In URL Mashup’s case, it would appear as a button on top right of the TI screen. i.e, not on any specific section group but on main floorplan itself which means that the TI Floorplan should be extensible for user to bring our mashup on the screen. So, create an anchor for floorplan as shown in the below screenshot.

     Capture.PNG

  • We need the screen to communicate with Mashup which is the prime reason to create URL Mashup with params. So, we need a way to send out data from our BO instance to Mashup. For this we need an outport to be configured as shown in the below screenshot.
    • Select the same PTP Package which you created in Step 2 and bind the parameters with your data model structure.
    • Now, Outport needs to know to which part of screen it should communicate to. So, Outport itself needs to be identified first.
    • We need to create an anchor for Outport by selecting Anchor from its Extensibility properties. Outport now has an identity of its own. You can now refer floorplan anchor created in the previous bullet in the Referenced Anchors section so that Outport knows where to populate data. SnA.

     Capture.PNG


Step 6:

  • Assign this Custom BO wc to any KeyUser. Login as KeyUser and open the TI by creating a custom BO instance.
  • Click on “Adapt” and then on “Enter Adaptation Mode” on top contextual menu and then on “Edit Screen” from the same menu.
  • Click on “Mashups and Web Services”. You should be able to see your Mashup in the list as shown in the below screenshot. Enable it.

     Capture.PNG

  • Save and Publish the changes. Leave Adaptation Mode.


Step 7:

  • You should now be able to see a new button “Web Services” on the top right of the TI screen.
  • Make sure you fill first and last of your BO instance and click on the Web Services button as shown in the below screenshot.

     Untitled.png

  • A window showing Full Name should be popped as shown in the below screenshot.

     Capture.PNG


    

Points to Note:

  • From the above example, it is understood that if you want to add a mashup to a particular screen, the screen should be running on the same PTP Package as on which the Mashup’s been developed as well as the screen should have anchors defined on its UI elements to let know Mashup about where it should appear.
  • You can also check the same thing with standard Mashups. Here goes one example with std. Mashup.
    • Navigate to Administrator –> Mashup Authoring –> (New HTML Mashup)
    • Select “Business & Finance” in the Mashup Category and “Additional Account Information” in the Port Binding.
    • You will see that there are now two parameters that came up based on your selection.
      • AccountID
      • AccountName
    • Now, open your UI Deisgner and bring on “Configuration Explorer” and load the Account TI screen from path Repository Content –> BYD_COD –> SalesOnDemand –> Account –> UI –> COD_Account_TI
    • Select the “Controller” tab and expand its Outports and then select BIMashup. You will see the same parameters being exposed here.
    • Whatever we did for our custom screen till now are already done for this Account_TI screen to export its AccountID and AccountName through BIMashup Outport.
    • Keypoint to take away here is the Global PTP Package. Yes! SAP has made everything easier for you to access these contents by a global PTP Package. You can also find these globalmashup_PTPs when you are creating PortBinding in Step 3.
    • So, imagine what all you can do with such a package which works on every standard screen? You can create your own mashup using these PTPs and include them in standard screens as you like provided you will have to make sure that target std. screen has supporteed outport which porvides the data OUT.

Troubleshooting:

  • For URL Mashups, make sure that you disable popup blocker (at least temporarily).
  • For HTML Mashups, you might face such a situation where mashup may not get displayed sometimes. You should understand the concept of MixedMode display which modern browsers consider as security risk. SAP Cloud sites run on https but when you try to bring in mashups which fetch content from http, they will be blocked by browsers. You can notice small exclamatory blips on any of its corners (depending on browser you use) by browsers indicating that they blocked some content from being displayed. You should know how to enable MixedMode for browsers in this case for your browser. Please do Google it.
  • As soon as you assign your BO wcview to KeyUser and when you try to viee your screens by logging in as KeyUser then after, you might get an error message at OWL saying that “User not authorized to view OWL blah blah…”. Just clear the silverlight cache and re-login. It should work.


That’s all I have to share as of now. Thanks for going through. 🙂

cheers,

Vatsav

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

      1. Hanumath Kanama

        Hi Sri,

         

        I am unable to find the URL Mashup in Adaptation mode which got created. Can u help me out in this. I am trying to do it in ByD.

         

        Regards..

        Hanu K

        (0) 
  1. Mohan Babu Kutuvan Janakiraman

    Hello Sri,

     

    Nice blog. I’ve few queries related to Mashups. I want to assign the Mashup to Account SOWL screen. It should be available as part of toolbar next to New button in Account SOWL. I do not want to send any data. By clicking on the link, an URL should launch.

     

    I’ve created Mashup in PDI. Not sure how can I assign the mashup to Account SOWL screen.

     

    Any input on this is greatly appreciated.

     

    Thanks.

     

    Regards,

    Mohan Babu

    (0) 
  2. Johannes Schneider

    Thanks for sharing that information sri!

     

    I juts want to ask if there is any way of working with the “body” (in this scenario  Srivatsava Janaswamy) from the called URL?

     

    Thanks,

    Johannes

    (0) 

Leave a Reply