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).

/wp-content/uploads/2016/08/image001_1007946.jpg

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

/wp-content/uploads/2016/08/image002_1007947.png

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.

/wp-content/uploads/2016/08/image003_1008107.jpg

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

Next we add a Port Binding to our solution.

/wp-content/uploads/2016/08/image004_1008108.jpg

It will appear in the Project Explorer window.

/wp-content/uploads/2016/08/image005_1008117.jpg

Open the PortBinding and change the settings as below.

/wp-content/uploads/2016/08/image006_1008118.jpg

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.

/wp-content/uploads/2016/08/image007_1008128.jpg

/wp-content/uploads/2016/08/image008_1008129.jpg

It will open the following screen

/wp-content/uploads/2016/08/image009_1008178.jpg

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

/wp-content/uploads/2016/08/image010_1008191.jpg

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.

/wp-content/uploads/2016/08/image011_1008192.png

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.

/wp-content/uploads/2016/08/image012_1008193.png

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

Find your Mashup from the Configuration Explorer.

/wp-content/uploads/2016/08/image013_1008200.png

Drag it to your EC.

/wp-content/uploads/2016/08/image014_1008201.jpg

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

/wp-content/uploads/2016/08/image015_1008202.png

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

/wp-content/uploads/2016/08/image016_1008203.png

Create the InPort

/wp-content/uploads/2016/08/image017_1008204.jpg

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

/wp-content/uploads/2016/08/image018_1008205.jpg

Assign our DataModel InPort as the Parameter Binding.

/wp-content/uploads/2016/08/image019_1008212.jpg

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

/wp-content/uploads/2016/08/image020_1008213.jpg

Click Bind and create a Navigation Configuration as below.

/wp-content/uploads/2016/08/image021_1008214.jpg

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.

/wp-content/uploads/2016/08/image022_1008221.jpg

Hope this helps somebody!!

To report this post you need to login first.

3 Comments

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

  1. Tobias Prohaska

    Hi,
    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.

    Thanks,
    Tobias

    (0) 

Leave a Reply