In my previous blog http://scn.sap.com/community/business-bydesign/studio/blog/2014/02/24/html-script-mashup–launched-from-an-embedded-component I talked about creating an HTML script mashup that was being launched from an embedded component of a standard SAP Screen.

In this blog, I talk about having a URL mashup that is launched from the Embedded Component. Please refer to Part A of the blog http://scn.sap.com/community/business-bydesign/studio/blog/2014/02/24/html-script-mashup–launched-from-an-embedded-component for the Use Case and Creating the Embedded Component

Part B is essentially different, and is highlighted below.

Creating a URL mashup

Step 1: To create a mashup, you first define a Port Type Package which consists of a Port Type and the parameters you want the binding to be done for…

/wp-content/uploads/2014/02/1_395525.png

Step 2: Define the Port Binding. Choose a Category that you would also use in the third step of creating a URL mashup. For the Package, choose the one created in the step above

/wp-content/uploads/2014/02/2_395526.png

Step 3: Create an Outport for your embedded Component.

This is where you control what parameters you want to pass to the mashup. Recall, that the Opportunity TI’s /OIF Outport cannot be enhanced, and for our usecase we needed more parameters. By introducing the Outport in our Embedded Component, we are able to achieve that.

Add parameters and bind them to the custom BO’s fields (recall that we had adjusted these fields in the action fillparams()

/wp-content/uploads/2014/02/3_395527.png

Step 4: Create a URL mashup.

–          Choose the same Mashup Category as in step 2 above and the related Port Binding

–          Bind the parameters to the parameters of the Outport defined in step 3 above. By doing this, we are ultimately passing values to the mashup from the values that are bound to the Outport of the EC, hence:

/wp-content/uploads/2014/02/4_395531.png/wp-content/uploads/2014/02/5_395532.png

Step 5: We now need to specify the relation between the Outport of the EC and the Mashup.

–     Go to the Configuration Explorer and Open your mashup. On the Controller tab of the mashup, edit it and create an Inport – with the same Package and Port type as we defined earlier. This step is required to be able to bind the Outport of the EC and the Inport of the mashup. Save and activate it.

/wp-content/uploads/2014/02/6_395533.png

–          On the EC, right click on the Mashup Components and add the mashup.

/wp-content/uploads/2014/02/7_395534.png

–          Double click on the mashup just added and go the Simple Navigation tab. Add a new navigation item and define the Outport – Inport mapping.

/wp-content/uploads/2014/02/8_395535.png

–          Now, all that we need to do is to be able to call the mashup. We can create a Link for launching the mashup -> for each line item of the products facet containing the Travel product. Once in the Design tab in the UI Designer, using the toolbox, add a Link to the screen

/wp-content/uploads/2014/02/9_395536.png

–          Now configure the link:

o   In the properties of the Link, go to Event Arguments and create a new Argument with Argument name “$MashupPipeID” and constant: your mashup ID. You can get the mashup id by clicking on your mashup from your solution

/wp-content/uploads/2014/02/10_395537.png

/wp-content/uploads/2014/02/11_395538.png

o   Define a new event handler for the OnCLick event

/wp-content/uploads/2014/02/12_395539.png

o   Define this new Event Handler with 2 Operations: SyncDataContainer and FireOutport

/wp-content/uploads/2014/02/13_395540.png

FireOutport -> Specify the Outport that we created for the EC

/wp-content/uploads/2014/02/14_395541.png

When the link is created, the event Handler basically launches the Outport. This is bound to the Inport of the Mashup which ultimately receives values that we have passed from the Outport and hence the URL is launched with the values in these parameters !

Done !! Now save and activate your solution and test it…

/wp-content/uploads/2014/02/15_395542.png

/wp-content/uploads/2014/02/16_395543.png

Mash it up !!

Cheers !

Vinita

To report this post you need to login first.

19 Comments

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

  1. Sangeeta Roy

    Hello Vinita,

    Is it possible to see this URL Mashup called through embedded component in an IPad. I tried adding the tag: Tablet into the url mashup and embedded component in the Cloud Application Studio, but it fails.

    (0) 
    1. Manoj Kumar

      Dear Sangeeta,

      Yes it is possible.

      There are two type of screen available in Cloud Application Studio

      1. Desktop Screen

      2. Mobile Screen

      you should add your EC with mobile Screen.

      Thanks,

      Manoj Kannaujiya.

      (0) 
    2. Vinita Sinha Post author

      Hi Sangeeta,

      Nice to hear from you 🙂

      There are 2 things:

      Embedded components don’t work on the Native iPad App. But it would work if you launched C4C on the Browser in the iPad.

      Next, Mashups within EC don’t work – as per my findings at least

      You could try it too but basically you’re not allowed to tag mashups if they are within an EC

      Cheers !

      Vinita

      (0) 
      1. Krish Gopalan

        Hi Vinita,

        If we build SAP UI5 screens on ECC, would we able to call them through C4C mashups? and would such an app be supported on mobile platforms?    

        Krish

        (0) 
    1. Vinita Sinha Post author

      Hi Srinivasan,

      If you want to display the mashup embedded into the screen, you should use the HTML mashup… HTML mashups can be HTML Code mashups or HTML URL mashups..

      You’ll find the details in the admin guide as well

      Regards

      Vinita

      (0) 
  2. Srinivasan S

    Hi Vinita,

    Another clarification regarding Mashups. Is it possible to create a mashup using extension field.

    Say I have an extension field in my OpportunityTI screen and making it as an link I want to open my ECC system login screen.

    Is this possible. Please provide your suggestions.

    Thanks,

    Srinivasan

    (0) 
  3. Praveen Manjappa

    Hi Vinita,

           Is it possible to do some validation  after the user clicks on the “Test Link2” and before redirecting to the actual URL.

              what I needed is-  On click on the Link I need to validate something . Say  need to interact with SAP ECC through service , get some data. On this result data I need to decide if I have to redirect to the  URL (Test Link2)  or show him Alert Message and stop redirecting to the URL.

    Is this feasible?

    Thanks

    Praveen

    (0) 
    1. Vinita Sinha Post author

      Hi Praveen

      I havent tried this myself, but perhaps you could check with the Event Handler operations.. ie, before really calling the Outport, check if you could club other operations to get the values you need, validate and based on the results Fire Outport or not

      Regards

      Vinita

      (0) 
      1. Praveen Manjappa

        Thanks  Vinita,

                  I was also thinking on the event handlers . but not sure how to implement it exactly. Will try this out  .

        Thanks again

        Praveen

        (0) 
  4. Muriel Poos

    Hi Vinita,

    I have 4 URL Mashup in an embedded component. In HTML5, it is working fine but in Silverlight, only the first URL is working. When I click on the 3 others, nothing happens.

    Do you have any idea ?

    Thanks

    Muriel

    (0) 
  5. Rudhra Udayakumar

    Dear Vinita,

    I have created the URL mashup working fine,

    i have a link field in the screen, by clicking the link it navigates to website.

    this is working perfectly fine.

    Now we need to have this website in the SAP – Byd screen it self.

    can you guide me on this.

    Regards

    Rudhra

    (0) 
    1. Srinivasan S

      Hi Rudhra,

      Try Creating HTML mashup. You can add an embedded component and add the html mashup inside it. Refer to Vinita’s blog for creating HTML mashups.

      Regards,

      Srinivasan

      (0) 
        1. Vinita Sinha Post author

          Hi Rudhra

          Srinivasan is right… a URL mashup is meant to open as a separate window. If you want this embedded in your ByD screen, you should use HTML mashups. It would be very similar to the url mashup if you are not using an HTML coded one instead usng HTML Url mashup. You can refer to my blog on that too

          Regards

          Vinita

          (0) 
          1. mani kanta

            Hi Vinita,

            Had creted URL mashup for embedded component by following the same steps that you had provided but not able to get the output when clicks on the link.

            the only difference with your solution is different parameters.

            Do you have any idea about this?

            Regards,

            mani

            (0) 

Leave a Reply