jQuery Forms Replacement In Sharepoint (Phase I)

In my intro post on this series, I tried to lay the ground work for my approach to replacing my forms with jQuery. I wanted to quickly discuss a few points about why I wanted to do this. I guess one of my main issues for the forms I have is maybe one of the no no's designers often speak of. Many of the forms in the tool that I am currently creating contains about 15 to 20 fields that a user has to fill in. The standard forms in SP render with a two column form that scrolls when the content gets too large. I hate scrolling! I really dislike it if I am filling out a form. This left me with a few choices to make that I would pose to the customer. Do they want a single form with all these fields or perhaps build a wizard-like form system that would break the form into smaller pieces so it could fit in a smaller space. I had also seen what the new SP 2010 forms looked like and thought they were better than before. They also popped up instead of redrawing the whole interface. This is what I want to achieve in this series. The customer was not picky about a single form or a series of smaller forms, and this was good because it leaves the options open a little more. So my first ideas were somewhat valid but then I had a few other ideas that I want to lay out to see what they might be able to do. 1: Create a custom form in an iframe contained in a hidden div. 2: Let Sharepoint create the form in an iframe contained in a hidden div. 3: Use jQuery's ajax functions to create the form and return the content to an iframe contained in a hidden div. 4: Use one of my earlier choices. I really had to think about this as to me it seems logical that I wanted to ensure that I could control everything and have some particular functionality that the customer wanted. WSS 3 does not support cascading dropdowns out of the box. I have seen some solutions that require setting up lists that the users use to support the drop downs. I did not have to do that on the .Net side so much as I was able to create cascading dropdowns in c sharp just fine. However, I really wanted to avoid as much of that as I could because in this version that requires postbacks which is what I want to avoid. Marc Andersons SPServices jQuery library I mentioned in the intro has a nice cascading dropdowns setup. I like this so I am going to see how it will work for the customer and which option it fits in best. So, my next phase I think is going to be to mix a few ideas together. I think that I will use SP Designer to draw the forms in a hidden frame and then use jQuery to provide the pieces that are needed to the user in a wizard like approach. This will hopefully allow me to use all of jQuery's tools and keep the choices available at one time to a minimum. I will let you know how this goes in a few days. If you have a better idea then please let me know!!

jQuery Forms Replacement In Sharepoint (Intro)

First off, let me tell you what this series of posts is going to cover. This first post will lay the ground work for my research on using jQuery to replace my Sharepoint forms. The follow ups will go into more details and hopefully a working example. I want to start with the thought that I am going to try to make my WSS 3 custom sites have a more 2010 like experience as much as I can. So far, it seems that the new version will be all Ajax based and there will be a lot fewer needs to redraw the whole page or do several postbacks to the server just to get stuff done. With that said, I do have VS 2008 and I can write custom webparts to replace the standard forms. This does work and I like it. However comma (ha ha) every time I want to get/send information to/from the server this required a postback and the whole page needs to be re-drawn. Now, I will honestly tell you that I have not really researched updatepanels so much and I will do that as part of this series. However, I still wanted to see what I can do with client side scripting and ajax to see if this is feasible for totally replacing a form. So, the first thing I wanted to find out was the quickest way to draw controls that had data from Sharepoint. Let's say I am creating a new item form. These are the questions that I had to answer: 1: Can I write an html file that had all the form controls? 2: Can I write an aspx page that had all the form controls? 3: Do I want to use asp form controls or basic html controls? 4: Do I need to write server side code or can I really do this completely with client side code? 5: How do I tell Sharepoint to use my new form? There are other things to consider but these were the ones that I thought of up front. So looking at each one: 1: Can I write an html file that had all the form controls? -- This really is a combination of 1 and 3 and this was hard to decide. I have a lot of coding experience but I have never tried to create some of the controls I knew I was going to need. Plus, Sharepoint and ASP.NET have a lot of nice controls that are not too hard to use. 2: Can I write an aspx page that had all the form controls? -- As I had stated earlier, I can create this type of page with the code behind needed to get data from SP. This made me wonder if creating an initial aspx page that provides the controls and initial data would be the best choice as I knew how to do that. More on this later. 3: Do I want to use asp form controls or basic html controls? See 1 and 2 4: Do I need to write server side code or can I really do this completely with client side code? -- Again, this is a combination of the previous points. Having the option of an initial form that is already populated with dropdowns and other things does make it easy to a point. Doing it completely with client side script is possible but is it really feasible to do so? Again, this is a matter of choice. So far, I have not had a lot of success getting that to work. However, thanks to jQuery this might actually be doable. I will get to more of that in just a bit. 5: How do I tell Sharepoint to use my new form? -- This is going to require custom coding no matter what I do. One idea I had for that was to use a dataview webpart so that I could add modify the links for the New option to go to my new form. This of course would not be feasible unless I did it for every way a user can get to view of that list. I know how to replace the form in the schema file, but that is really not going to work in this case (please let me know if you can get that to work). I am still researching this part. So, where have I gotten on my quest? Well, what I have tested so far is I have created an aspx page with code behind to draw asp and sharepoint controls on the page just to see if this would work. On a different aspx page I have an iframe inside a hidden div that uses this page as its source. I actually set the source with javascript but I am not sure if I need to or not. I just have a few dropdowns that get data from a few lists. On a click event from a menu I use a jQuery dialog from the jQueryUI library to popup the hidden div with the iframe. This worked! I also added a function to a button on this popup page to see if I can read the contents of a dropdown and this worked as well. The main stumbling point I have now is that I can not seem to use jQuery to attach a change event to the dropdown. Checking the source it has indeed converted the asp dropdown controls to select elements and I have tried different approaches to get a change event attached but it is not working yet. If you have any ideas please let me know! I am confident that I can get the data into sharepoint once I get the forms right. There is a great jQuery library that I plan to use for this. It can be found at http://spservices.codeplex.com The author Marc did a great job with this! I really want to get to the point where I can use it to get data into a list. I know I can also get data out and I am planning on doing that as a second test to compare against the asp form. Again, if you have any suggestions on attaching a change event to the dropdowns let me know. My plan as I just said is to also use the spservices library if this first test does not work. That is where I am at now and I will post again soon as I get more done (or not :) )

Workdays Late/Due Counter Excluding Holidays Part 1

This is the first part of a site I had to design in Sharepoint. The customer was in need of a commitment tracking system with a due status that would display the amount of workdays that an item had left until it was due and also would display the amount of workdays it was late based on the original ECD. They also threw a curve ball by wanting to exclude holidays. I had to think about this and I asked them if the holidays would be location/project based as well. This is mainly because we have work all over the world and different holidays may apply. This was indeed what they had hoped to achieve and I felt good knowing that I understood what they wanted. I was a little hesitant to commit that I could do it, but I really thought it should be possible. I came up with the following solution. Keep in mind there may be a different way to do this but this is what I thought would do the job in the time I had to do it in. Step 1 was to create a blank site definition Sharepoint solution in VS 2008 ( I used VSeWSS 1.3 ) Step 2 was to create the list and add the requested fields including the ECD and Due Status fields. Step 3 was to add another field that would help me do this. I decided to create a computed field that would just be an empty div element with an id based on the ListItem ID and a small token like dsf. This would make a unique empty div for each item on the page. Step 4 was to create a calendar list that would be a holiday calendar. I just added a field for project so that the holidays could either be set to a project or all projects. The customer would then be able to add the holidays as normal events and this will be taken into account later. Step 5 was to actually put all the pieces together. I decided to write a page load event on the pages that displayed this field. Again this is just what I chose to do at the time and I also chose C# as the language. The event basically loops through all the open commitments and checks the current date with the ECD. It determines if the date is before or after today and also checks the project and holiday calendar to see if it needs to remove any days. It also removes weekends! So the loop creates a hidden div with another custom id based on the item and places the divs on the page. This so far does not seem to slow down the system at all. So far so good. Step 6 was to actually display the data to the users. Again I chose to use script for this but I used javascript in this case. The _SPBodyOnLoad function comes in handy here and I used it to loop through all the divs on the page and move the content from the hidden divs to the empty divs based on the unique divs. Well, that is the description of my approach. In part 2 I will bring some code to the table so I can show you the real good stuff! (Well, it works at least!)

Get the first one out of the way.

As this is my first blog post on Sharepoint, I thought I would just get the introduction and other tidbits like that out of the way. My name is Dan and I have been doing something with computers since the Tandy 1000 days! I currently develop Sharepoint solutions for an intranet where I work. We are using WSS 3. I primarily use VS 2008 as my development tool as I am building solutions. I also have a development environment where I can also use Designer. Unfortunately no Designer on our production environment so that is good and bad at the same time. Oh well, enough about all that and on to the good stuff.