Hands On Table Usage on Domino Xpages IBM

handsontableLotusDomino.jsp

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.data>
		<xp:dominoDocument var="currentDocument"></xp:dominoDocument>
	</xp:this.data>
	
	<xp:this.resources>
		<xp:styleSheet
			href="http://handsontable.com/dist/handsontable.full.css">
		</xp:styleSheet>
		<xp:script src="/json2.jss" clientSide="false"></xp:script>
		<!--copy/paste the json2.js code to an SSJS library https://github.com/douglascrockford/JSON-js/blob/master/json2.js -->
		<!-- https://xomino.com/2013/12/18/safe-json-parsing-in-xpages-ssjs/ -->
	</xp:this.resources>
	
	
	
	<div id="example1" class="handsontable"></div>




	
	<xp:button id="import" >
		<xp:this.value><![CDATA[Import --->]]></xp:this.value>
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete">

			<xp:this.script><![CDATA[XSP.getElementById("#{id:inputText1}").value = JSON.stringify(hot1.getData());]]></xp:this.script>
			<xp:this.action><![CDATA[#{javascript:var jData = currentDocument.getItemValueString("inputText1");
var parsedData = JSON.parse(jData);



for (i = 0; i < parsedData.length-1; i++) { 
   print("id" + parsedData[i][0] );
   
   
var personDoc:NotesDocument = database.createDocument();
personDoc.replaceItemValue("Form", "person");
personDoc.replaceItemValue("entryType","import");


personDoc.replaceItemValue("id", parsedData[i][0] );
personDoc.replaceItemValue("name", parsedData[i][1] );
personDoc.replaceItemValue("surname", parsedData[i][2] );
personDoc.replaceItemValue("year", parsedData[i][3] );
personDoc.replaceItemValue("month", parsedData[i][4] );

personDoc.save();



   
}

}]]></xp:this.action>
		</xp:eventHandler>
	</xp:button>
	
<!--	<div  style="visibility: hidden">--> <!-- to hide input box -->
	<xp:inputTextarea id="inputText1" style="height:150px;width:600px" value="#{currentDocument.inputText1}"></xp:inputTextarea>
<!--	</div>-->





	

	<xp:scriptBlock><!-- amd issues... -->
		<xp:this.value><![CDATA[if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}]]></xp:this.value>
	</xp:scriptBlock>

	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://handsontable.com/dist/handsontable.full.js"></script>


	<xp:scriptBlock>
		<xp:this.value><![CDATA[if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}
]]></xp:this.value>
	</xp:scriptBlock>


	<xp:scriptBlock>
		<xp:this.value><![CDATA[
 var dt = new Date();
var curYear = dt.getFullYear();
var nextYear = curYear+1;
var lastYear = curYear-1;
         

 var data = [{
        id: '0001',
        name: 'Yunus',
        surname:'Yilmaz',
        month: '11',
        year: 1987
    }, {
        id: '0002',
        name: 'Alp',
        surname:'Uzay',
        month: '11',
        year: 2017
    }],
        container = document.getElementById('example1'),
        hot1,
        greenRenderer;

    greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.backgroundColor = 'green';

    };
   hot1 = new Handsontable(container, {
        data: data,
        startRows: 5,
        colHeaders: ["ID", "Name", "Surname", "Year", "Month"],
        minSpareRows: 1,
        columns: [{
            data: "id",
            type: 'text'
        }, {
            data: "name",
       type: 'text' ,
      // language :'tr-TR',
       format: '0,0.00'
      
        }, {
            data: "surname",
            type: 'text' ,
      // language :'tr-TR',
       format: '0,0.00'
        }, {
            data: "year",
            type: 'dropdown',
             source: [String(lastYear), String(curYear), String(nextYear)]
        }, {
            data: "month",
            type: 'dropdown',
            strict: true,
            source: ["1", "2", "3", "4", "5", "6", "7", "8","9","10","11","12"]
        }]
    })


]]></xp:this.value>
	</xp:scriptBlock>




</xp:view>