Quite a while ago, I got a piece of very interesting work that required me to create user-friendly list forms for adding and editing coded class timetable data on SharePoint 2010.
The timetable data of a class is coded (including the day, time, and room info.) and stored in a field of a SharePoint list.
It is obviously that the default Sharepoint list forms are not user-friendly at all for end users, such as teachers or courses administrators, to input and edit the class timetables.
To provide end-users an easy way to manage the class timetables, I created custom Sharepoint list forms (New/Edit Forms) with GridView control integrated.
The blog post goes through the main steps for adding GridView control to Sharepoint 2010 list forms.
- In your Sharepoint project in Visual Studio 2010, add a “List Definition” and name it as “Classes”, and create a list instance namely ‘Classes_Temp’.
- Add two Application Pages, “CustomNewForm.aspx” and “CustomEditForm.aspx”, to your project (these two files are initially placed in the Layout folder. You need them into the “Classes” list definition.
- Deploy the list definition on the target Sharepoint site. Open SPD and navigate to the deployed “Classes_Temp” list instance. Create custom New/Edit list forms and copy the source code to the corresponding “CustomNewForm.aspx” and “CustomEditForm.aspx” files created in Visual Studio.
Create a user control which wraps a GridView control. The purpose to create this user control is to encapsulate all business logics and data access modules into a single user control which can be reused in anywhere.
- Create the business objects and utility classes (e.g. timetable parser and ULS Logging) .
- Insert the created GridView user control into the “CustomNewForm.aspx” and “CustomEditForm.aspx” (at the place where you want to show the Gridview).
- Now, the “CustomNewForm.aspx” and “CustomEditForm.aspx” application pages are created. We need set them as the default list forms . To do that, we open the “schema.xml” file of the “Classes” list definition, and point the “SetupPath” of the list forms to these two application pages :
After we deploy the list definition, we can see the GridView control appears on both New form and Edit form.