jQuery Forms Replacement In Sharepoint (Phase II)

Okay, so in my last piece on this topic I tried to layout several options or paths I could take to accomplish my end goal. At the time, my end goal was to replace my Sharepoint forms with jQuery forms. Over the past few days I have done a lot of experimenting with those options that I had laid out in the previous posts. I will now discuss what I have tried first and then what I think I will try next as another approach. I think I will mainly point out here two things. The main purpose of doing this at all is to avoid all of the postbacks to the server and this particular approach requires replacing the forms with custom forms. With that being said let me begin. For my first test, I wanted to replace the form that users get to when they go to the My Settings section of SP. This is usually found at the top left where it says Welcome (whomever). This dropdown allows you to get to that option which will take users to the userdisp.aspx page if they have the correct permissions. We decided that users should be allowed to change certain options here and we also had a lot more fields for them to fill out. The two main issues were the fields we did not want them to touch and the annoying normal 2 column format of the form which leads to scrolling. So I needed to replace the form or do a lot of other things to make this happen. I chose to replace the form with a custom form. I did not however replace the application pages, I just made a new page and make the users go to that page instead. Here is how I did that. (Remember from the earlier post that I have to make this as a solution package in Visual Studio (VS) as that is a requirement for portability to other locations from the customer.) First, I copied the default.aspx page to a new page called Employees.aspx. I did this mainly because I needed a webpart page to hold my form. This means that I am not solving my popup idea at this time but I am choosing to utilize the real estate of the PlaceHolderMain section of the masterpage. So now I have a page to put my form on. Now, there were basically at this point 2 options I could take here. One option was to build a custom webpart form and drop it on the page and the other was to create a custom webpart form on the page. I know those seem like the same thing, but the difference is how I create the webpart forms. I can build a .Net webpart in VS which allows an easy path for a code-behind page, or I could create a dataform webpart in Sharepoint Designer (SD). I know how to do both of those options but the first choice I made was to go with the VS option first to see what all I could accomplish with that. So, yes, this does not sound like jQuery and I do plan on getting to that but I wanted to show you how I get there and what I was able to do. So, I firstly created my aspx page and now I need a form with controls on it. I did this by creating an ascx user control page that just had a table and the form controls laid out the way I wanted them to be. This meant I could design the form with more columns and make it wider so there was no need to scroll. I also had to provide a cascading dropdown option for the customer so that users could select their organizational structure based on where they worked. This is like a Department, Division, and SubDivision rollup. I decided that this rollup could be done in a single list with the 3 fields tied together. Basically this means that you have an entry for each subdivision including its primary division and department. Now I have my controls so I needed to have a webpart to put them in. In VS I just added a new webpart to my project and this creates the code-behind class file that I need. I used this file to call the ascx page which is placed into the controltemplates folder of the 12 hive in a subfolder. I now have a form with controls that I can use. This is where the fun starts I hope! If you are following along this far you may be thinking that I have taken a long approach to this and it does indeed seem to be that way. I just had a feeling that I could do something with this that would be cool. I was right so lets press on. I purposely ensured that I did not have the autopostback option turned on for any of the controls on the form. Using c# I also added onchange events to a couple of dropdown (select) boxes. When an asp dropdown control is rendered in this case, it is rendered as a select html control. The onchange events are stored in the additionalpagehead content section of the Employees.aspx page. The codebehind page will prefill the options from the UserInfo list if they are there. It is already drawing the form so this is a good thing in this case. The Department dropdown box is filled with just the departments and it has the client-side onchange event attached! The event utilizes the SPServices jQuery library to to fill the second dropdown box with the divisions of whatever department is chosen in the first one. This second one also has an event to drive the 3rd select box. The form has a button that also uses the SPServices library to save the data back to the UserInfo list! This is pretty cool and very fast and the page does not refresh! Eureka I say! One note here is that the SPServices library does have cascade dropdown support that I may utilize in the second approach which I will try next. This means that my next approach will be to user Designer to create my forms to add to the Employees.aspx page. This means that I will get to utilize SP controls and see what I can do with them!