Skip to Content
Author's profile photo Richie Feeney

Creating a HTML Mashup with a Dynamic URL

In this tutorial, I will explain how to create an Embedded Component (EC) that takes a dynamic URL as a parameter and display it on a mashup within the EC. This means the same Mashup can potentially be used to display a number of different web pages as the dynamic URL can be generated using ABSL, retrieved from another BO, etc.

Create your solution and add a Port Type Package (PTP).


I will add it to the Customer Business Object for this example. (Displays from 1605 onwards)


The PTP will act as the ‘middle man’ between the Floorplan that will contain the EC and the Mashup itself.

Open the PTP in the UI designer and set it up as below.


Add a Port type and a Parameter called DynamicURL as shown above.

Next we add a Port Binding to our solution.


It will appear in the Project Explorer window.


Open the PortBinding and change the settings as below.



You can select whatever Category you wish.

The Inport Type Package we have used is the PTP we created in the previous steps. Our Inport Type Reference is the parameter we added to this PTP.

Next we add a HTML Mashup.



It will open the following screen


Select the Mashup Category we assigned to the PortBinding in the previous steps. Our custom PortBinding should then appear.


Here is the trick to use a dynamic URL. We then enter the URL as http://{DynamicURL}. The {} denotes a variable and once you click on extract parameters the table below is populated. You could potentially have as many of these as you like (maybe for URL parameters), but for this example one will be fine. You can also adjust the height(in pixels) of the Mashup here. Save the Mashup once complete.

Note that I am using http here for display purposes. You will need to use https url’s for live projects as most Web Browsers will not allow http content in a https page (e.g. C4C) for security reasons.

Now the Project Explorer window should look something like the following.


Now that the Mashup is setup, we will proceed to building our EC and adding it to the Customer TI. You can also add the EC to whatever BO you wish even custom ones.


Add the EC like above and open it in UI designer.

Find your Mashup from the Configuration Explorer.


Drag it to your EC.


Create an InPort Stucture on the Data Model with a parameter for DynamicURL on the EC as below.


For testing purposes, we will give the parameter an initial value.


Create the InPort


Create an Outport for the Mashup and select our PTP created earlier.


Assign our DataModel InPort as the Parameter Binding.


Next we need to set the binding on our Mashup from the EC.


Click Bind and create a Navigation Configuration as below.


Bind the Ouport field DynamicURL of the EC with the Inport DynamicURL of the Mashup.

Add the EC to a Standard or Custom BO, and you can bind the Inport (DynamicURL) of the EC to the Outport of your BO that contains your url.

Once you fire it, we should see something like the following.


Hope this helps somebody!!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks for sharing this documentation ...... 🙂



      Author's profile photo Agostin Montes Diaz
      Agostin Montes Diaz

      Thanks for sharing!



      Author's profile photo Former Member
      Former Member

      thank you for sharing this!
      Unfortunatelly it doesn't work in my solution. I made all the steps like shown here but the mashup doesn't show the website but shows just a white screen. Maybe the problem is that I can only select the PortType itself and not its parameter "DynamicURL" for the InPort Type Reference.

      Do you know what else could be the problem?
      The preview of my final Embedded Component with the Mashup looks like this:

      I also tried this for other websites and set a fixed URL in the Mashup Setup but I always get the same result.


      Author's profile photo Former Member
      Former Member

      Hi Tobias,

      It is a little bit late, but I hope this would help!

      I had the same issue with a fixed URL for an HTML mashup. Indeed, my HTML mashup (which is a calculator) did not appear, this is why you see a blank space under the two fields “first” and “two”.

      Actually, I was using “Mozilla Firefox” as a web browser and it is by default secured (as you can see in the image below).

      So the solution was to first click on the “i” icon and then to click on the arrow :

      After that, you just have to click on this button :

      That way, your HTML mashup appears and the security lock is crossed out :



      Author's profile photo Rafael Huapaya
      Rafael Huapaya

      Awesome, thank you.

      Author's profile photo Hanumath Kanamarlapudi
      Hanumath Kanamarlapudi

      Hello Richie Feeney,

      Thank you, informative and veryuseful.!

      I had a very similar requirement but with a slight change that the Dynamic URL on the EC should get passed on an action triggered by the user. How can I do that.

      How should I pass the dynamic URL to the mashup with in the EC with the help of a action button but not through autofiring the outport or some thing like you mentioned above.

      In my case EC attached to a standard UI (for ex Supplier Invoice) and as soon as user access the EC tab, supplier invoice ID will be available (autofire even on EC inport) with some other required information on  the UI for to process. Now the supplier invoice ID i have to pass to one other 3rd party services and will get a site information (URL) whcih I have to display on the EC using mashup. This URL I will get it using a action button where I will be passing required infromation and will get back the URL as response and this response is something I have to pass on to the Mashup.

      Will this be possible and if possibel can you please let me know the steps for doing this as I tried of doing it but failed in gettign it passed to the mashup.


      Hanu K