Portlets that embed web pages into DeepSee dashboards

In the previous part of this series, we saw how to define a basic portlet. Now we will look into making this portlet reference a web page that will enhance our dashboard experience.

In this example, we will be embedding a Developer Community article along side a couple of widgets displaying information related to the number of views on the Developer Community articles. This example is not hosted on the Community Analytics server, but if it was we could see the view counts going up as we interacted with the page.

Why use this?

In a real case, perhaps you have an embedded page from an external web site showing the current Emergency Room wait times for Hospitals in your area. This portlet can be used along side widgets from your Emergency Room showing how many people are waiting, how many doctors are active, and how many people are being treated. As other Emergency Room wait times grow, you can possibly expect your volume to increase as well. This can help you make decisions on how to allocate resources.

What will we learn?

This example will demonstrate how to use HTML elements other than plain text as well as calling out to a different method.

Implementing these features

We will start with the portlet code from Part 1.

1) We are going to modify our renderContents method in our portlet. Start with removing the following line

html[html.length]="Testing"

2) We will now add a call out to another Object Script method on our page:

var article=this.GetRandomArticle()

3) We need to define this method, so we will add it to our class

Method GetRandomArticle() As %String [ ZenMethod ]
{
}

4) We will add Object Script to get a random Developer Community Article URL. Our method will look like

Method GetRandomArticle() As %String [ ZenMethod ]
{
    Set tArticle=""
    Set tRandom=$Random(4)
    If tRandom=0 {
        Set tArticle="https://community.intersystems.com/post/iterating-through-all-properties-object"
    } ElseIf tRandom=1 {
        Set tArticle="https://community.intersystems.com/post/accessing-new-deepsee-namespace-first-time"
    } ElseIf tRandom=2 {
        Set tArticle="https://community.intersystems.com/post/deepsee-tips-tricks-auto-execute"
    } Else {
        Set tArticle="https://community.intersystems.com/post/analyzethis-%E2%80%93-quick-start-intersystems-bi"
    }
    Quit tArticle
}

5) Now we will update the renderContents method to use this URL. After our call to GetRandomArticle(), add the following

html[html.length]="<iframe src='"+article+"' width='100%' height='100%'/>"

6) We now have a portlet with an iframe element pointing to a random Developer Community Article. My renderContents method is now

ClientMethod renderContents() [ Language = javascript ]
{
    var html=[]
    var article=this.GetRandomArticle()
    html[html.length]="<iframe src='"+article+"' width='100%' height='100%'/>"
    this.getEnclosingDiv().innerHTML = html.join('');
}

7) We can view this in the Dashboard to see how it looks

As you can see, I added some other charts on my dashboard to display next to my portlet. Instead of making my portlet just a static page, I could also embed part of my application that would allow me to take action based on what the data in my charts is telling me.

What if the data I want is not a web page?

Please see Part 3 and Part 4 to learn how to use portlets to display data in a custom way from both within and external to DeepSee

Other Articles in this series

Part 1 - Creating Portlets in DeepSee

Part 3 - Using data from DeepSee

Part 4 - Using data outside of DeepSee

Part 5 - Using third party charting libraries

The code for this example can be found on Open Exchange.