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.