Revision #8

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.


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 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 sohuld 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 common testing environment. For the sake of this article, 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 uses the internal columns names based upon creation time. Even  if you rename them. So if you made a typo delete column and recreate.

Useful script parts for SharePoint

Instead of writing a 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 yo your own situation. So i will keep my script  parts relatively small, for sake of understanding and simplicity.

reading 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.