SharePoint 2010 General Lab for developers (Part 3/5)

sergefacebook_thumb1

Starter files and solutions files can be found here.

 

In this lab we will work with Application pages

 

In this lab, we will update the CourseSiteFeature Project by updating the createcoursesite.aspx and admincoursesitecreators.aspx page.

With Visual Studio 2010, open the CourseSiteFeature in the starter file folder.

Open the createcoursite.aspx page and analyze the code. Remove it from the project.

Recreate the same page by using the Visual Studio Application Page SharePoint project item. Analyze the code. <TODO explain>; you will notice that the Page directive use the default web site master page and placeholders have been provided: our page can have the normal SharePoint look & feel.

You can also notice that the page is now inheriting from a class derived from Microsoft.SharePoint.WebControls.LayoutsPageBase which will provide the SharePoint context.

Update the following content placeholders as following:

clip_image002

Deploy your new project and check the createcoursite.aspx page.

clip_image004

In this page we want to be able to specify a course code and a primary trainer as illustrated in the following picture:

clip_image006

To achieve it, we need to use SharePoint controls provided in the Microsoft.SharePoint.WebControls namespace, which is already referenced in the application page. The controls are the InputFormSection.ascx, InputFormControl.ascx and ButtonSection.ascx user controls; you can reference these controls by adding the code from snippet1.txt.

<%@ Register TagPrefix="wssuc" TagName="InputFormSection" Src="/_controltemplates/InputFormSection.ascx" %>

<%@ Register TagPrefix="wssuc" TagName="InputFormControl" Src="/_controltemplates/InputFormControl.ascx" %>

<%@ Register TagPrefix="wssuc" TagName="ButtonSection" Src="/_controltemplates/ButtonSection.ascx" %>

In the PlaceHolderMain, add the code provided in snippet2.txt.

<Table CellSpacing="0" CellPadding="0" Border="0" Class="ms-propertysheet" >

<wssuc:InputFormSection Title="Course Information"

Description="Enter both the code for the course and the primary trainer."

runat="server">

<template_inputformcontrols>

<wssuc:InputFormControl runat="server" LabelText="">

<Template_Control>

<div>Enter the code for the course:

<SharePoint:InputFormTextBox

CssClass="ms-input" Width="400px" ID="textBoxCode" runat="server"/>

</div>

<div>Enter primary trainer:

<SharePoint:PeopleEditor id="pickerTrainer"

AllowEmpty="false" ValidatorEnabled="true"

MultiSelect="false" runat="server"

SelectionSet="User" width=’400px’

/>

</div>

</Template_Control>

</wssuc:InputFormControl>

</template_inputformcontrols>

</wssuc:InputFormSection>

<%– Submit and Cancel Buttons –%>

<wssuc:ButtonSection runat="server" ShowStandardCancelButton="false">

<template_buttons>

<asp:PlaceHolder runat="server">

<asp:Button UseSubmitBehavior="false" runat="server" class="ms-ButtonHeightWidth" Text="OK" id="buttonSubmit" OnClick="buttonSubmit_Click"/> &nbsp;

<asp:Button UseSubmitBehavior="false" runat="server" class="ms-ButtonHeightWidth" Text="Cancel" id="buttonCancel" causesvalidation=false />

</asp:PlaceHolder>

</template_buttons>

</wssuc:ButtonSection>

</Table>

The form will be organized in 2 sections: an Input form section and a button section as illustrated in the next picture:

clip_image008

Deploy and test the page.

Let add some code that will create the site.

Add an OnClick event handler to the buttonSubmit :

clip_image010

Go to the codebehind (in createcoursite.aspx.cs) and the corresponding buttonSubmit_Click function :

clip_image012

We also want a course code to be visible by default: let’s provide the following Page_Load implementation :

clip_image014

We can now implement the submit action : basically we want to be able to create a dedicated web site, associate a primary trainer to this web site and redirect the user to the newly created web site :

clip_image016

To check your code, deploy the solution and create a new course with the following data:

clip_image018

And you will be redirected to the newly created child site:

clip_image020

Let’s move to the second application page, admincoursesitecreators.aspx and implement the following look & feel:

clip_image022

We will now create a feature that will add an Edit Control Block feature in the Course Site Creators list; users should be able to navigate to the page created in the previous section (admincoursesitecreators.aspx) and will pass the current list item id as a querystring parameter : we want to achieve what is illustrated in the next picture :

clip_image024

When we click on Review Details, the item listID and itemID will be part of the url querystring :

clip_image026

To achieve this, create an empty SharePoint project Item (SPI) named CourseCreatorDetails with a custom action like this:

clip_image028

Add this SPI into a new (hidden) feature named CourseCreatorDetail.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s