Custom sidebar: Pop up a modal dialog with content from static resource

Salesforce org’s sidebar can be customized by HTML so is often used for placing small components like a table or some hyperlinks to external web pages. Static resources can be used to host any type of files and easily referenced by Visualforce pages and apex classes. So this brings the idea of writing web widgets in pure HTML, CSS and JavaScript and popping them up from the org’s sidebar links. Here is an example and the HowTo:

We developed a utility tool in HTML5, CSS and JavaScript. This tool does not depend on any Salesforce technologies or resources. But we want to incorporate this tool in our Salesforce managed package so that any orgs installing our package can choose to use the tool. Since it is a utility tool, a good place to host it is sidebar component. Let’s call this tool AbcTool.

The AbcTool only has three source files: abc-tool.html, abc-tool.js, abc-tool.css. These files are  packaged in a zip file which is then uploaded as a Salesforce static resource called WebWidgets. The following code shows how to display the AbcTool in a dialog. The code is in the home page component’s custom HTML area. It uses JQueryUI to create a dialog and binds it to the onClick event of “Abc Tool” link.

<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css">
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<table>
	<tbody>
		<tr>
			<td><a href="javascript:void(0)" id="abcTool">ABC
			Tool</a></td>
		</tr>
	</tbody>
</table>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
	var iframe_url = '/apex/cve__AbcTool';
	$j('#abcTool').click(function() {
		var j$modalDialog = $j('<div></div>')
			.html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no"/>')
			.dialog({
				autoOpen: false,
				title: 'ABC Tool',
				resizable: false,
				width: 550,
				height: 450,
				autoResize: true,
				modal: true,
				draggable: false});
		j$modalDialog.dialog('open');
	});
});
</script>

The actual content of the dialog is in Visualforce page AbcTool.page as you can see it is referenced by “/apex/cve__AbcTool”. This is the Visualforce page that bridges the sidebar component and static resource which is a zip file. It just redirects the request to the HTML page in the static resource. The following is the AbcTool page:

<apex:page showHeader="false"
    sidebar="false"
    standardStylesheets="false"
    action="{!URLFOR($Resource.WebWidgets, '/abc-tool.html')}" />