Creating a HTML Mashup with a Dynamic URL

[Richie]

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.

Notes:

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!!