Embedding gadgets in a microsite in UES

WSO2 User Engagement Server helps you create any of your complex dashboards easily. It has a build-in dashboard designer where you can create dynamic layouts and embed gadgets. However, there might be instances when you need to embed gadgets manually to a dashboard. The following sample will help you understand how this can be done.

Scenario

The following three gadgets will be manually add into a microsite.

Bar chart
This is a UES gadget that is rendered from the bar-chart.xml file, which is in the <UES_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets/bar-chart/ directory.
Pie chart
This is a UES gadget that is rendered from the pie-chart.xml file, which is in the <UES_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets/pie-chart/ directory. This gadget will be added by embedding the gadget URL.
Google Currency Converter
This is an external gadget that will be added by embedding the gadget URL.

Follow the instructions below to embed gadgets in a microsite:

Step 1: Create a microsite

Create a microsite named embed. For more information, see Creating and Publishing a Microsite.

Step 2: Create a dashboard in the microsite

Create a file named Test.html with the following code. If preferred this file can also be a JAG file. Please see the code comments inline for code descriptions.

Test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/portal/themes/portal/js/shindig.js"></script>
    <script src="/portal/themes/portal/js/UESContainer.js"></script>
<!-- This defines the size of all the three gadgets -->
    <style type="text/css">
        #gadget-1, #gadget-2, #gadget-3 {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="gadget-1"></div>
<div id="gadget-2"></div>
<!-- Embedding gadget via url -->
<iframe id="gadget-3"
        src="http://localhost:9763/gadgets/ifr?url=http://localhost:9763/portal/gadgets/pie-chart/pie-chart.xml">
</iframe>
<script>
    //UES gadget
    UESContainer.renderGadget('gadget-1', 'http://localhost:9763/portal/gadgets/bar-chart/bar-chart.xml');
    //External gadget
    UESContainer.renderGadget('gadget-2', 'http://hosting.gmodules.com/ig/gadgets/file/103035663984448200053/Google_Currency_Converter.xml');
</script>
</body>
</html>

Step 3: Publish the microsite

For more information, see Publishing a microsite to the store.

Step 4: Access the microsite

Access the microsite via the following URL:

http://localhost:9763/embed/Test.html

The gadgets will appear as follows:

The microsite URL that appears in the UES portal, will always open in HTTPS by default. Therefore, if you have used HTTP to render your gadgets, you need to use the following HTTP URL format: http://localhost:9763/<MICROSITE-NAME>/<FILE_NAME>