Introduction
Although this template does not yet display native excel files within a page you can export those excel files to csv text files and have them shown with this template. I am still working out some of the options (the original documentation is in japanese) but it works rather well right now so I decided to release it.
History
| Version | Date | Author | Description |
| 1.0 | 09/23/2009 | rberinger | Initial Release |
Requirements
- This template requires MindTouch version: This has only been tested on MindTouch Core (Lyons)
How do I install it?
- Create a template, call it "Template:TemplateName" (or rename as you desire). You must have UNSAFECONTENT permission for this to work.
- Create a "DekiScript" block on the template page (use the "Style" menu in the editor")
- Copy the code from the end of this page and paste it into the DekiScript block. To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button. This will pop up a window with the source code. Select all, then copy to clipboard.
- Make sure there isn't an extra blank paragraph after the DekiScript block! Do this every time you edit!!!
- Save.
- Download the .js and image files from this page and save on a page in your wiki.
- Prior to uploading the .js file on your wiki open it up in a text editor and update the image icon links.
Find these lines in the .js file:
loadImg : (new Image()).src='http://192.168.10.102/@api/deki/file...n-loadinfo.gif', //Dafault loading IMG
sortNImg : (new Image()).src='http://192.168.10.102/@api/deki/files/16/=icon-n.gif', //Dafault sort IMG N
sortDImg : (new Image()).src='http://192.168.10.102/@api/deki/file...on-d-green.gif', //Dafault sort IMG D
sortAImg : (new Image()).src='http://192.168.10.102/@api/deki/file...on-a-green.gif', //Dafault sort IMG A
And update the uri's to point to your image icon files.
Then upload to your wiki. You can continue to reference the ones on this page but it could be moved or deleted at anytime. Its usually safer and faster from your own.
A quick note about the examples on this page
For all the examples on this page, the code is shown before the working example. The code is shown with the syntax extension, and looks like this:
csv2Table{fileuri: str, maxheight: str, maxwidth: str, sortable: bool};
This means that the actual code on the page should be enclosed in a DekiScript block. If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above.
How do I use it?
See Examples:
Arguments
Name
| Type
| Default
| Description
|
| fileuri | str | n/a | URI to the csv file to display as a table |
| maxheight | str | n/a | Max height before Horizontal Scroll bars are used |
| maxwidth | str | 100% | Max width before Vertical Scroll bars are used |
| sortable | bool | true | Enable or disable sorting (recommended if using another table formating template) |
Examples
In a DekiScript Block: This will load the selected file into a table on this page, sorting is enabled by default.
csv2Table{fileuri: 'http://developer.mindtouch.com/@api/deki/files/4826/=Export_Sales_Info-demo.csv', maxheight: '400px' };
In a DekiScript Block: This will load the selected file into a table on this page, sorting is not enabled for this file.
csv2Table{fileuri: 'http://developer.mindtouch.com/@api/deki/files/4827/=DMI_house_09-23-2009.csv', maxheight: '400px', sortable: false };
Reference(s)
Direct all questions, comments, or discussion to this forum thread.
Credits/Special Thanks
Special thanks to the original author of the csv2Table jQuery function: 'Toshiro Takahashi'
Template/Extension Source Code
var id = string.replace(json.emit(@id),'\"','');
var fileuri = ($fileuri ?? $0 ?? '');
var maxheight = ($maxheight ?? $1 ?? '');
var maxwidth = ($maxwidth ?? $2 ?? '100%');
var sortable = ($sortable ?? $3 ?? true);
let sortable = {sortable: (sortable) };
<html><head>
<script type="text/javascript" src="http://developer.mindtouch.com/@api/deki/files/4825/=jquery.csv2table-0.02-b-2.8.js" />
<script>"
$(document).ready(function(){
$('#"..id.."').csv2table('"..fileuri.."', "..json.emit(sortable)..");
});
"</script>
<style type="text/css">"
#"..id.." {width:"..maxwidth..";height:"..maxheight..";overflow:auto;white-space:nowrap;}
"</style>
</head>
</html>
<div id=(id)></div>
Disclaimers
Release under public domain.
(unable to fetch text document from uri [status: 401 (Unauthorized)])
My csv is there, the script and the images are in place, and I have unsafe content allowed.
Do I need to send login creds with my request? and if so, how?
thanks!
var uri = 'http://dev.ii4sm.zz:8989/@api/deki/files/2094/=Book1.csv';
var csv = string.splitcsv(web.text(uri)).values;
TsTable { columns:csv[0], data:list.splice(csv,0,1) };
</div>
results an empty table being rendered with the following in the header and first row:
(unable to fetch text document from uri [status: 401 (Unauthorized)])
(no data)
Work Item:,Cumulative amount @ end of this RC†,Target portion to be compl this RC†,% Complete for this RC (actual),Owner,As at:
UC/Component/Service/other,,,,,
UC x,0.4,0.2,100,MBB,dd-mon-yyyy
UC y,0.1,0.1,60,PN,† dd-mon-yyyy
SVC a,0.7,0.5,80,AH,dd-mon-yyyy
CM k,1,0.2,90†,JH,dd-mon-yyyy
,,,,,
,,,,,
,,,,,
,,,,,
Thanks