Revision #11

SharePoint 2010: Improve with Graphics and Full Table Calculations

You are currently reviewing an older revision of this page.

Let us improve SharePoint 2010.. i will be your party starter..
SharePoint2010 is a powerful product, but there are times one feels its limited. That's a bold saying, but when you've worked with SharePoint I'm sure you wished there where options to sum a table your way. Or that you wanted to have more control on how things graphically where shown. You know all the data is in it but sometimes its hard to display it.

What i will write down here in this article is how to summarize a table, and create a graphic based on it. I will also explain how to do it, we're going to break open SharePoint so you can do finally what you want to do with it. While we wont need more access then well basically SharePoint Designer, or using only the web browser is possible too!. But with SPD (SharePoint designer) we could do a bit more.

I will keep in mind that most of you don't code, or are new to SharePoint, JavaScript CAML Jquery etc etc.
You should know HTML tags, i am not going to explain those. Code will be briefly explained.

I would advice to use some kind of editor to write Jscript in, for example Notepad++ / Editra / ... etc
Also to test locally jscript its handy to have locally on your client pc a webserver
A real small one can be downloaded here Tinyweb also read its small manual. It is less then 1 Mb.
It installs without GUI, its simply active once started and that's enough if you want to play with scripting.

Our client interaction.

A thing to note is that we will work user interaction based; or better name it "triggered by user interaction". We are not going to make something that will keep running like an extra service even if you logoff. Also we would like to use only a part on a standard SharePoint webpage. And we would like to update preferably only our part of our applet. We wouldn't like to reload the whole page if you click on something. As that makes pages slow. So we need a trick to update a part of a page. So lets make a little webpage called index.html and place it in the c:\www\root\ folder from Tinyweb; Tinyweb uses this folder hard coded see its manual.

01.<html><head></head><body

02.<div id="MyStuff">

03.You will see me <br>

04.When nothing has been pressed

05.</div>

06.

07.<script type="text/javascript">

08.function

changeText(){

09. document.getElementById('MyStuff').innerHTML='<b>WOW you changed me !</b>';

10.}

11.</script>

12.<input type='button' onclick='changeText()' value='Change Text'/>

13.</body></html>

Note that instead of having the <div id="mystuff"> tag, also <from id=title> could be used. However the webparts for customized HTML in SharePoint wont accept that so.. so that's why we use <div title=....> instead. a <Div> is just like a section placeholder.
Well saved it in c:\www\root\ ? Then try it locally, browse to http://127.0.0.1/index.html if you installed tinyweb.

We just learned to change a part of a html page, by user action. And well basically this new text was created by some JavaScript function that changed the DOM parts of a HTML page. It was simple text display, but could have been an image or calculation.. from the moment you clicked it!
Hmm calculations too.... remind that we will use it soon.

Placing your JavaScript on SharePoint

Although its maybe a bit silly the previous page we made we could put its script part on SharePoint to. Note that it would be a fragment for a normal .aspx based page. .aspx is a complex HTML type on which SharePoint is based, if your interested some informative information can be found

here Well our code only will go inside another aspx page.. kinda cool huh ?...
Let us simply just copy from <div id="MyStuff"> ... to ... <input type='button' onclick='changeText()' value='Change Text'/>
And save that as a new file myfirst.js
Notice that is actually a bit more then only <script> code since some text before and after the <script...> tags is also used, but that's OK, Sharepoint wont complain about it. As SharePoint wil just thread it like a part of its own page.

I'm a lazy writer, so to add our peace of code to a page follow this guys article, but note that your file is not text.txt like in his example. Also note that he uses the "Site Assets library" to store the script. Well it could be anywhere but be sure normal users can only read it.. ! (If your unfamiliar with permissions then read about SharePoint permissions here). Permissions should be properly set as Scripts are powerful and you wouldn't want, someone meshing up your script to create havoc !.

Our SharePoint list setup

Before we go on lets create some a common testing environment. Lets create two lists on sharepoint.
One calendar list named Rent.
And another list named Socks.

With the Rent list add an exra column named SockType of the type lookup and point to the Socks list.
So we can start our Sock renting emperium. With the Socks list add a column Price. When done create some items in the Socks use the Title colomn to describe each sock for example Red Socks / Black Socks / White Socks etc and decide a rental price for them.
Note sharepoint keeps the internally the columns names based upon creation time. So if you rename them, you have to dig into webpage to find original names back. As we will need the internal names to script against.

Now for the Rent list, change a view to include also the socks column, it might be more handy for the moment to not show it as a calendar view.
Just a plain list, with created by, title, socktype and price. Now add about 10 calendar items. Try to use different sock bookings for the Rent list title just enter some imagiairy names of people who rent your socks.

Useful script parts for SharePoint

Instead of writing a single huge script where i will combine everything, i think its better for your understanding. To start thinking in scripts as functions you need to combine, and to adjust to your own situation. So i will keep my script parts relatively small, for sake of understanding and simplicity. But provide some good starting points for you to learn from.

First we need to be able to read from a list

I will continue writing this article later make it a favorite if you wish
I hope to finish it soon (so i have a good reminder of all i did the past days).
This will cost me a few evenings to write, for now its time to sleep for me.