Pages

Wednesday, 28 November 2012

SharePoint designer 2010, send and receive Data using Query string

SharePoint Designer is Great tool to Create Web parts , and you can easily understand its code behind and very easily you can change it according to your need/requirement.

i have created 2 web parts and they are placed on different pages, I have define the Students in one web part and in Other i need Filter its courses.

  1. Create 2 Lists (Students, Courses), In courses i have used Student as lookup column.
  2. Open SharePoint designer and open specific site .
Create First Web Part (Sender)


Step 1:
Create Page in Site Pages Library. Click on Design mode ,                                                                
From Menu Choose Insert - > Data  View  -> Empty Data View -> Select Data source (Student)   
  
Step 2:
 From right Side choose ->Insert Selected Fields -> Multiple item View .


Insert Item to Empty Data Source

Select Columns




Step 3:
 Select the Design mode of Web Part and From menu select Options -> Add/Remove Columns -> and choose items that you want to display.

Step 4: 
Also Add Created Date Column -> we can modify it into Hyperlink in next.

Step 5: 
Now Select Created Column from Design view -> and Check its Code Behind. and Replace             "<xsl:valueof >" with Hyper Link <a href="courses.aspx?SID={@ID}"> View Course</a>  In this Link SID is Query string value.







Second Web Part (Query string Receiver page)

Step 1:
Now Repeat these Steps for second Web part , you don't need step 5 in it.

Step 2:
Select Web part from design Mode -> Go to options -> Filter -> Create Parameter ( select the item from drop down which you have set as lookup).  and suppose i have set Student:ID as Lookup. and then comparison (Select According) , In Value Select Create new Parameter, -> It will open new Dialoug Box, from where you have to give same paramerter Name that you have set in hyperlink in First webpart and 
select type as Query string from Parameter Source and Press OK.



Every thing is Done you can test these page , Browse Page 1 - click at View Courses link. 

No comments:

Post a Comment