Thursday, 28 October 2010

Building a Document Management System with Sharepoint 2010 - Part 6 - User Interfaces for DMS-Clients ( Client-Side Forms )

In this part I am going to cover the last part of how to build a web User Interfaces for the Document Management System. The next chapters will be focused in the pure client-side of a document management system, that means how to get a good interaction between some of the Microsoft Office products and Sharepoint.

Some times we will need to develop very efficient forms for Sharepoint 2010, at the moment we have seen we can build Web parts and Visual we parts. Both approaches are quite reliable, but we have another player on the pitch that can strike much better than the other two. It basically combines both but adds JavaScript.
As you probably know JavaScript is the fastest way of providing access to the web, especially when is run it in the client-side. Because is built in the browser the actions accomplish on the fly, so if we have a form and we click a button we can hide/show the form without any delays, without waiting for the server to reply. The AJAX approach communication does not require page post-backs.

Sharepoint 2010 provides a new client-side dialog platform that enables information workers can work with Sharepoint objects and data efficiently. You can create your own dialogs that allow information workers to interact with your solutions by using Visual Studio 2010.

Many operations in Sharepoint 2010 sites are now performed by built-in client-side dialogs. For example, the New and Edit forms for list data are rendered as modal client-side dialogs with HTTP interface.

Microsoft provides something called ECMAScript, what is basically a type of javascript. This language gives you the option to write anything with the fastest client-side interface for web, javascript.

ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.

You will be able to find the documentation for ECMAScript in this link . If you do not anything about ECMAScript you should know that properties are refer by get_xxx() and set_xxx() so it uses a mix of C# with javascript, but with round brackets at the end. This is very important to UNDERSTAND microsoft documentation. Why?

Well if you have this property:
web.set_title(Title);

You will assume that it is a method called set_title() from the web class... NO!! you wrong, this is a property called title from the class web , and what you are doing here is setting up the title.

ECMAScript
web.set_title(Title);

C#
web.title=Title;

If you go to the documentation, Microsoft will refer this property like title , so by reading the description you should assume you have a set_xxx() or get_xxx() or both.

These classes are similar in functionality than the C# client-side ones.

After all this theory I assume you will want to program something and see how it works. We are going step by step so you will be able to start building high-speed client-side forms.

We are going to create a simple visual web part where we will be able to see the URL of the site, the name/title of the web and we will set the web title. The web part will be developed in JavaScript with Asyncronous events.

7- A new folder will be added. This folder contains all the scripts we need to comunicate with Sharepoint.

8- In the file DocumentTypeVisualWebPartUserControl.ascx we will need to copy the following lines, they will allow us to debug our code under JavaScript. They will also give us the availability of having Intellisense.

9- In this file we will include all the back-end of the Visual Web Part. Everything in JavaScript and Sharepoint SP.js will work asyncrosnuly, so we have to declare some events when we commit some operations. A line like this will call the event:

12- We can build and deploy the visual web part by doing a right click into the project and deploying it.

13- We can go now to a Sharepoint page and go to Site Actions->Edit Page-> Insert->Web part -> Custom and select DocumentTypeVisualWebPart . The web part will be added it automatically.

14- It should look something like this:

Conclusion:
This is the fastest way for a web part to perform. You can avoid using ASP.NET controls, what it will do the web part much faster (you can use HTML) . You can develop all the events in JavaScript and nice effects in JavaScript avoiding getting into Silverlight.

About Me

I am a dedicated software developer who has been programming since I was 9 years old, when I made my first game in an Amstrad 128kb... after 25 years I keep doing the same stuff with different systems... If you have any problems or you want to contribute to this blog please email me to gabrielrenom@gmail.com

I have been Developing applications for mobile devices since late 90's I am keep dedicated to mobile development working with iPhone, iPad, iTouch , Windows Mobile and Android platforms having my own column in the US magazine i.Business. www.ibusinessmag.com.
Currently working in the legal industry for DWF LLP.