Pivottable.js

Language

XPages

Tags

Author

John Dalsgaard

Submitted on

December 17, 2015 at 2:35 AM

Rating

Downloads

Notes

This is a pretty cool tool to give your users a drill-down/investigate data functionality in your XPage.

You can see more on: https://github.com/nicolaskruchten/pivottable.

However, you will find that it doesn't work if you have jQuery 2.x installed. And if you are using a relatively new version of the extension library (and/ bootstrap4xpages) then you have version 2.1.x.

The problem is the AMD loader of Dojo and jQuery that conflicts.

So you have two options:

1. Disable loading of Dojo. You can see the call in beforePageLoad event in the snippet (commented out)
2. Redefine the Dojo AMD loader (that is the working example)

If you use Dojo in your XPage - and you probably do (e.g. partial refreshes?) then you cannot use option 1. But option 2 solves it!

Thanks to David Leedy and Declan Lynch who provided the building blocks for option 2 :-)

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom" createForm="false">
    <xp:this.resources>
<!-- temporary redefine define.amd object  (Dojo AMD loader) -->
		<xp:script clientSide="true" type="text/javascript">
			<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
		</xp:script>
		
<!-- load jquery AMD enabled widgets -->
		<xp:script src="/.ibmxspres/.extlib/responsive/jquery/jquery-2.1.1/jquery-2.1.1.min.js" clientSide="true"></xp:script>
		<xp:script src="/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js" clientSide="true" />
        <xp:script src="/jquery-ui.min.js" clientSide="true"></xp:script>
        <xp:script src="/dist/pivot.js" clientSide="true"></xp:script>
<!-- restore define.amd object (Dojo AMD loader) -->
		<xp:script clientSide="true">
			<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
		</xp:script>
        <xp:styleSheet href="/dist/pivot.css"></xp:styleSheet>
    </xp:this.resources>
   <!-- 
    .... disabling the loading of Dojo libraries for this page will also work - instead of the redefines of Dojo.AMD above - but you may need dojo for your layout/partial refresh'es :-)
    <xp:this.beforePageLoad><![CDATA[#{javascript:facesContext.getRequestParameters().setJsLibrary(0);}]]></xp:this.beforePageLoad>
    -->

   <!-- 
    Obviously, you would probably want to use a JSON data source to provide the data :-)
    -->
    <xp:scriptBlock>
        <xp:this.value><![CDATA[$( function() {
    $("#output").pivotUI( [ {
        color : "blue",
        shape : "circle"
    }, {
        color : "red",
        shape : "triangle"
    } ], {
        rows : [ "color" ],
        cols : [ "shape" ]
    });
});]]></xp:this.value>
    </xp:scriptBlock>
    <div id="output"></div>
</xp:view>

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...