ChartIQ Blog

Posted on by Sidd

Automatically Generating Context Sensitive Widgets and Portal Pages

In my last blog post about the creation of our financial Portal and Widgets demo website, I mentioned that you can easily and automatically generate portal pages and widgets with custom tickers with just a few lines of javascript. In this post, I dig deeper with a step-by-step how to guide. Read on and learn how to automatically generate context sensitive Widgets and Portal pages.

Sidebar and Carousel Widgets:

With the sidebar and carousel widgets, all you need to do is pass a set of custom tickers to the custom settings parameter in the URL of the frame. You can either do this on the server side while generating the page (much easier) or client side in javascript. Here is the general idea on how we did it client side for our setup tools:

The settings object passed to the URL is base64 encoded, so we need a base64 library first. In this example, I have used the library from here:

<script src="js/jquery.base64.js"></script>

Next, let's create the iframe for the widget:

<iframe id="widget1" class="ciq-widget" style="width:250px;" frameborder="0" allowtransparency="true"></iframe>

The next step is creating the url for the iframe with the settings. For the sidebar widget, you need a list of tabs with a tab header, followed by an object that contains the tickers. For example, if an article is about Facebook, Amazon, Netflix and Google:

<script>
	var settings = {
		"tabs": [
			["In This Article", {
				"Facebook": "FB",
				"Amazon": "AMZN",
				"Netflix": "NFLX",
				"Google": "GOOG"
			}],
            ["Markets", {
                "S&P 500": "SPX.INDCBSX",
                "Nasdaq": "NDX.IND_GIDS",
                "DJIA": "DJI.IND_DJI"
            }]
        ]
    }
</script>

For the carousel, you need a list of tickers:

	
<script>    
    var settings = {
		"quotes": {
			"Facebook": "FB",
			"Amazon": "AMZN",
			"Netflix": "NFLX",
			"Google": "GOOG"
		}
	}
</script>

Next, you need to base64 encode the settings object and append it to the url for the widget

<script>
	var settingsText = $.base64.btoa(JSON.stringify(settings));
	$('#widget1').attr('src', 'https://YOUR_CUSTOM_WIDGET_URL/sidebar.html?customsettings=' + settingsText;
</script>

That's it!

Note that only code relevant to the customization is shown above. You still need to keep the rest of the code from our setup tool for the automatic resizing of the widget frame. This functionality is currently in beta and may change at any time. In addition to the ticker list, many other settings are available. Detailed technical documentation is in the works and I will update this blog post with a link when ready.

Here is a quick demo page created using this code:

Screen Shot 2016-08-05 at 9.47.55 AM

Portal Pages

With portal pages, we are dealing with information generally about a single ticker. That can be directly passed to the page as the "sym" parameter. For example for the chart page:

<iframe src="https://YOUR_CUSTOM_WIDGET_URL/chart.html?sym=GOOG"></iframe>

Also visit our previous portals and widgets blog post for more code on using more customized portal pages.