In my last article we looked at a quick way of including mapping information by creating a dynamic link to a live maps web page. This time we are going to be much more fancy and will look at embedding an interactive map right inside a list view.
Much of the work of this example was first done here but this article is now a little out of date. This example uses the most recent Live Maps SDK and is localised for the UK (although it will work for any location). Full details of the SDK are available here.
Building a list to work with
Firstly we need to create a list to work with. From your SharePoint site go to Create à Lists and choose the list type of Contacts. From this list you can either enter some test contacts ensuring that you enter a PostCode / Zip for each entry or you can import some of your contacts from Outlook (from the list view screen select Actions à Connect to Outlook).
Creating the page
In this example we are going to modify the default view of the list item. Open up your site in SharePoint designer and then expand the List folder and then expand the name of the list you have just created. Finally open the file DispForm.ASPX
Currently you will see the List Form Web Part. We don’t want this part for this example so we need to hide it. To hide the web part, highlight it and then in the code view change the <isVisible> tag to false.
Add a Data View Web Part
Below the hidden web part we want to add a Data View Web Part. To do this, click into some space below and then:
(1) From the menu : Data View | Insert Data View
(2) In the top right Data Source pane select your list and click “Show Data”
(3) Click on the ID field
(4) Click “Insert selected fields as...” and choose “Single Item View”
Next we want to only show the Item that the user has selected, we are going to add a filter to show only the item that matches the ID variable in the query string. To do this:
(1) Click on the data view, right click to show the Data view tasks
(2) Select "Filter"
(3) Add a new clause
(4) Field name = ID, comparison is 'Equals'
(5) Value = Create a new parameter
Name = ID
Type = Query String
Variable = ID
Default = 1
Add the Map
In your Data View Web Part, click into the left hand cell containing the text "ID" and add a Row below (right click “Insert Row Below).
Click into the empty row and switch to the code view. Insert the following HTML:
<div id="Map" style="position:relative; width:400px; height:400px; left: 0px; top: 0px;"><br /></div>
This is where our map will be contained. Next we need to include the Virtual Earth SDK. Scroll down to the end of your HTML. You will see a number of <asp:content> tags, add the following inside the first tag:
<script charset="UTF-8" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-GB"></script>
Important note on localisation: The above link is localised for the UK (which means we can search on UK Postcodes). The localisation is the ‘mkt=en=GB’ portion of the query string. Please see here for the code for other countries.
Update the Stylesheet
The current Data View web part has a number of templates that are used to display the table. We don’t need them for this simple example and so we are going to replace the lot with a simple sheet.
Highlight the Data View web part and then switch to code view. Locate the start of the DVT_1 template by finding the following line.
<xsl:template name="dvt_1">
Now scroll down (lots of lines) to the end of all the templates by finding the following lines
</xsl:template>
</xsl:stylesheet></XSL>
Highlight all of the HTML and replace with this:
|
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">RepForm3</xsl:variable>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push('GetMap');
function GetMap()
{
map = new VEMap('Map');
map.LoadMap();
map.Find(null, '<xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkZip" />', null, null,null,null,true,true,true,true,AddPin);
}
function AddPin()
{
var center = map.GetCenter();
var pin = map.AddPushpin(center);
pin.SetTitle('<xsl:value-of select="/dsQueryResponse/Rows/Row/@Company" />');
pin.SetDescription('<xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkAddress" />, <xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkCity" />');
}
</script>
<table border="0" width="100%"><tr>
<td width="75%" class="ms-vb"> <strong><xsl:value-of select="/dsQueryResponse/Rows/Row/@Company" /></strong></td></tr>
<tr><td width="75%" class="ms-vb" ><xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkAddress" />, <xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkCity" />, <xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkState" />, <xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkZip" /></td></tr><tr><td width="75%" class="ms-vb"><xsl:value-of select="/dsQueryResponse/Rows/Row/@WorkPhone" />
</td></tr><tr><td width="25%" class="ms-vb">
</td><td width="75%" class="ms-vb"> </td></tr><tr><td width="25%" class="ms-vb" colspan="2" style="width: 100%"><div id="Map" style="position:relative; width:400px; height:400px; left: 0px; top: 0px;"><br /></div></td></tr></table>
</xsl:template>
</xsl:stylesheet></XSL>
|
Thats it! Take a look in SharePoint and you should have a fully interactive map based on the PostCode/Zip field of your list item.
How does it Work?
At the bottom of our page we have linked into the SDK for virtual earth so we can use the mapping functions. We created a couple of JavaScript functions the first GetMap loads the map by using the value of the postcode field (and places it inside the <div> tags for our Map object). The second function AddPin places a pushpin at the postcode location and will add some details for the description from further SharePoint fields.
Here is a neat trick to provide a link to a map (and weather and travel information) using a postcode field in a list item. We aren’t doing any fancy embedding here, just creating a dynamic link to the information. This technique would be perfect for any list that contains lots of addresses, in this example I am using the UK but it should work for anywhere in the world.
Setup
Firstly create a Custom SharePoint list called “Locations” that includes a field “Postcode” and add few entries into the list.
Next, open your site in SharePoint designer. Expand the Locations list and open the DisplayItem.ASPX page.
In this example we are going to change the default page that displays the list item (DispForm.ASPX).
Create the page
The DispForm.ASPX page currently contains a List Form Web Part, this item is pretty much locked down (i.e. we can’t interact with it too well). Instead we want to use the Data View Web Part which will still display the information but allows us many more options.
|
Important note regarding all default List view pages: DO NOT remove any web parts that are contained in these pages, if you do they will not function correctly. Instead hide any parts that you don’t want to use. |
Switch your view in SharePoint designer to “split” so that you can see both the design and code panes. Next, highlight the List View Web Part. In the code section find the following line:
<IsVisible>true</IsVisible>
And change it to:
<IsVisible>false</IsVisible>
Note, that the tag is case sensitive. This hides the component when the page is viewed (and ensures that SharePoint is happy).
Add a Data View Web Part
Directly below the List Form that we have hidden we are going to add a Data View Web Part that will display the list item.
To Add the DVWP, follow these steps:
1. From the top menu go Data View | Insert Data View
2. Click on the new Data View on your page
3. On the top right pane, go to “Data Source Library”
4. Click on the “Locations” List and select “Show Data”
5. Using Control and Click select the fields you wish to display
6. Hit the “Insert selected fields as...” and choose “Single Item View”
We now have a Data View Web Part that will display the first item in our Locations list. Next we want to ensure that the list item displayed is the Item that was selected by the user. We will do this the same way that the standard SharePoint pages do this, by using the ID parameter.
Filter the view
Hover over the Data View web part so that the On Object User interface button appears [>]. Click on the button so that the Common Data View tasks menu appears.
Follow these steps to add in the filter to show the correct list item:
1. Click on “Filter”
2. Click on the bar “Click here to add a new clause...”
3. Field name = ID
4. On the value drop down select “Create a new parameter”
5. Name = ID
6. Source = Query String
7. Query String Variable = ID
8. Default value = 1
9. OK
What did we just do? When SharePoint displays all the items in a list (using thAllItems.ASPX page) each item is identified by its ID field. When a user clicks on an item the ID field is passed in the query string to the page to display the item (DispForm.ASPX). We are filtering the Data View to show only the item that corresponds to the ID.
Add the link
Here comes the sneaky part. Adding a link to our address is very easy thanks to the good people at Live Maps. They provide a service that will receive a postcode in the query string and display the corresponding map – very cool indeed.
Firstly we want to add another row into our table where our link will appear. Click on the last row of your table that displays a field (for example “Postcode”) this should be the last row before the footer of the table. Next Right click, select Insert and then insert Row below.
|
Import note: It’s very important that you create the new row exactly as detailed above. The value of the Postcode is only in scope within the body of the table. If you add the row anywhere else it will be blank and the link will not work. |
You should now have a blank row below your last field. Enter the word “Map” into this row.
Follow these steps to create the Hyperlink:
1. Highlight the word “Map” , right click and select Hyperlink
2. In the Address line paste the following:
http://www.multimap.com/maps/?hloc=GB|&zoom=16
3. Hit the Parameters button.
4. Select the “hloc” parameter and hit Modify
5. In the value drop down, select your Postcode Field
The name and value will now have changed to read @postcode , make the following changes:
6. Change the name back to “hloc”
7. Edit the value to read “GB|{postcode}”
8. OK, OK
What did we just do? The Multimap website allows us to pass a postcode value as a query string variable “hloc”. We have passed the value of our postcode field as a parameter into the hyperlink.
Final thoughts and improvements
Although this has been UK example you should be able to make this work for any location and you can change the value of the Zoom parameter depending on the scale of the map you would like.
You may wish for the map to pop up in a new window, to do this you need to add a target value to the hyperlink. Locate the link HTML, it will look like this:
<a href="http://www.multimap.com/maps/?hloc=GB|{@postcode}&zoom=16" >Map</a>
Change it to:
<a href="http://www.multimap.com/maps/?hloc=GB|{@postcode}&zoom=16" target="_blank">Map</a>
If you are looking to embedd mapping within a page, take a look at this blog. I hope you enjoyed this, some more SharePoint designer articles coming soon as well as some tips and tricks around search federation.
Here is a quick tip to achive the highlighing effect below (if the user hovers over a row of the table it is highlighted) which is very easy to achive. This works well to help users read data in SharePoint lists.
| One |
Two |
| Three |
Four |
| Five |
Six |
| Seven |
Eight |
To use this effect you should first remove the alternate shading of list view cells, in the HTML for your table remove the following lines:
<xsl:if test="position() mod 2 = 1">
<xsl:attribute name="class">ms-alternating</xsl:attribute>
</xsl:if>
These lines apply the "ms-alternating" style to alternating rows of the a table, you can of course define and apply your own style if you want to create alternating colours in your table but for this example we will remove the effect. All you need to do now to apply our highlighting effect is add the following inside each table row <TR> tag:
onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';"
For example, the source code for the above table is:
<table width="80%" border="2px">
<tr onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';"><td style="width: 155px">One</td><td>Two</td></tr>
...
</table>
We are using the JAVA OnMouseOver event handler embedded directly into the HTML itself.
Creating Word documents containing List fields
I haven’t seen much information on the web regarding how to automatically create Word documents in SharePoint and how to pass list item fields directly into a document.
It’s fairly straightforward to get this working (certainly no code is required, just SharePoint designer) and the technique could be used to automate all manner of business processes. For example, you could create an ASPX page containing drop down fields and calculated fields that automatically creates a quotation document or you could have a form that captures all the details for a job vacancy that would create a standard looking job advert.
In this exercise I will keep things simple and create an application that creates a certificate with an exam name, user name and pass mark passed into the Word documents from a list item. This would make a nice addition to the Quiz Web Application exam. This example requires Word 2007.
Here is an example of the created document with fields (the name, the exam title and mark – shown below in bold, being variables stored in a SharePoint list.
The example has the following components:
· A document library which has a Word document associated which is used as the basis for all new documents
· A list containing the fields that we want to pass into a new document
· A workflow which creates a new Word document and copies the fields from the list into the document
Creating the document library
A document library is really just a special type of list. There are some differences in functionality but many of the features remain the same.
First we need to create a new document library, in your browser:
· (Top right) Site Actions > Create
· Select “Document Library”
· Name: Certificates
· Ensure the “Document template” is set to “Word document”
Next we want to add some columns to our document library for our variables to be added to
1. Click on the “Settings” button in the list view
2. Click on “Document library settings”
3. Click on “Create Column
Add the following columns:
|
Name |
Type |
|
YourName |
Single line of text |
|
Score |
Number |
By default, the Title column has already been created in the list so we will use that to store our Exam title field. There are some other columns in that are created for a document library that we will not need to use.
Creating a Word document to use as a template
Next we want to create our word document which will act as a template for all newly created documents in this library. I am a little reticent to use the word template as we will actually just create a normal document (DOT / DOTX) rather than a Word template (DOT / DOTX).
In the settings screen of the document library:
1. Click “Advanced Settings”
2. Click “(Edit Template”)
Word will open the file template.dot which is located in the forms library of your document library.
3. Save the file as a “Word document” (click okay if you are asked to confirm)
This saves the template document from Word 97-2003 format (compatibility mode) to Word 2007 format which is a DOTX file. This allows use the document property field. Note we are also saving the file as DOCX and not DOTX (which is a word template file and will not work).
We need to associate our document library with the new file, to do this:
1. Document library > List settings > Advanced settings
2. Change the template name to “template.docx”
3. OK
Now we are ready to create the template for our certificate, go back into the Document Library > List Settings > Advanced settings and click on the Edit Template link.
You can create a nice looking document leaving space for where our list fields will go. When you are ready to insert our fields, do the following:
1. From the main menu select “Insert”
2. Click “Quick Parts” > “Document Properties”
3. You will see a list of the document properties including the columns we added (Score and YourName)
You can select each of our fields and place them in our document – YourName, Score and Title are the three fields we will insert.
4. Insert each of the fields into your document, they will display like this:
Here is an example of the basic layout:
And here is something a little fancier.
That completes the creation of the document library and the associated word document.
Creating a list to store our fields
We need to create a list to store our values that will be inserted into the document template.
As you can imagine, this is very straightforward:
· Site Actions > Create
· Custom List
· Name: Documents
· Click Create
Then add our two fields into (Title will already exist)
Add the following fields to the Documents list Add the following columns:
|
Name |
Type |
|
YourName |
Single line of text |
|
Score |
Number |
You will notice this is exactly the same as what we did for the document library fields. Our final step is to create a workflow that copies the fields from the Documents list into a new document in the Certificates document library.
Writing our workflow to create new documents in the certificates library
We are going to create a simple workflow that does the following
· When a new item is added to the Documents list create a new Item in the Certificates library
· Copy the title, YourName and Score fields from the Documents item into the Certificates item
This will in effect create a new document in the Certificates library that has the fields automatically populated with the values from our Documents list. Here is how:
1. Open SharePoint designer and connect to your site
2. File | New | Workflow
-
Give the name as “Make a new certificate”
-
Attach “Documents” list to this workflow.
-
Select “Automatically start this workflow when a new item is created”
We are saying here, each time a new item is added to the Documents list then run the workflow.
3. Click “Next”
4. Click “Actions” > “Create List Item”
5. Click on the “this list” link
6. On the list selector choose “Certificates”
7. Click on the “Name (for use in forms) ...” entry and click “Modify”
8. In the value box, click the “Fx” button
9. Keep the source as “Current Item” and change the field to “YourName”
10. Click OK, OK
The above steps mean that when a item is added to the list Document then a new document will be created in the Certificates document library and the name of the item will be set to YourName feild.
If more than one item is created with the same name then a unique identifier will be automatically added to the title.
Next we need to add our three fields to the Create List Item action. To do this:
1. Click the “Add” button
2. Set this field: Score
3. To this value: Click the “Fx” button
4. Source: Current Item
5. Field: YourName
Do the same for the Title and YourName values. Your completed List Item dialogue should look like this:
You can now click “OK” and you will see SharePoint designer create the new Workflow and assign it to your list.
We are now all ready to test our new solution!
Putting it all together – testing our solution
Go back to our website and select the “Documents” list and click “New” and complete the fields and click “OK”
Back in the list of items in the Documents list you will notice a new column “Make a new Certificate” has appeared. This column shows the status of the workflow that we created.
Currently it will be showing “In Progress” whilst the workflow kicks and begins to run (creating the new word document in the Certificates library). Wait for a few seconds and then refresh the page (F5). You should see the status has changed to “Completed”
Finally, switch to the Certificates document library. You will see our new document has been created. When you open the document you will see that values that we passed are now contained in the Word document.
Building our results page – a journey into XSLT formatting!
So far we have built a page to display our available Quizzes (default.aspx) and passed variables from that page via a query string. The receiving page is ShowQuestion.aspx which displayed the question and allowed the user to give the answer, which in turn created a new Answer list item and then moved onto the next question.
Once the final question has been answered the user is directed to the ShowResults.aspx page. Here will we show the final mark and if the user has passed or failed (depending on the PassMark variable that is in each Quiz list item, seems like a long time ago since we built those tables doesn’t it?)
We passed two variables across into our final page, Title and Session.
We want the ShowResults.aspx page to show the details of the Quiz and let the user know their score (expressed as a percentage) and if they have passed or failed. In time honoured tradition we will also graphically show how the final score compares with the required score.
Here is how it will look when completed.
Setting up the page layout
Just like our ShowQuestion.aspx page we are going to use two web part zones for our results page (this page is going to be much more straightforward to build however).
Let’s get started. Open up our blank ShowResults.aspx page and click inside the form and press return a few times to make some space. Now we need to add two web part zones and put two data views in them, like this.
1. From the menu Insert | SharePoint controls | Web Part Zone
2. Insert | SharePoint controls | Data View
We will separate the two zones with a horizontal line. To add the line go to the top right task pane, click on the ToolBox tab and then Drag a “Horizonal line” into the form below the Web Part zone.
Finally, insert a second Web Part Zone below the line (don’t add a data view of the moment).
You should now have two web part zones inside separated by a horizontal line. The top zone is ready to be configured as a Data View.
Show the Quiz information
Our top section will display the Quiz title and pass mark. To do this we need to link the data view web part with the Question list and then filter it to show the correct Quiz using the Title value that we passed in the query string.
Follow these steps:
1. Click on the uppermost web part
2. In the top right task pane click on the “Data Source Library” tab
3. Click on “Questions” and “Show data”
4. Control and Click on “Title” and “Pass Mark”
5. Select “Insert selected fields as...” and choose “Single item view”
You should now see the Quiz and Pass mark displayed. Again we need to filter this view to only show the Quiz that matches the Title parameter. Follow these steps:
1. Select the uppermost web part and click on the OUUI
2. Click on “Parameters
3. Click “New parameter”
4. Name=Quiz
5. Source=Query String
6. Variable=Title
7. Default=Enter the name a test Quiz here so that you will see some data in the view
8. OK
9. Click on “Filter”
10. Click “Add new.....”
11. Make a criteria where the Field name is “Title” is equal to [Quiz]
You will need to change the format of the Pass Mark field to show as a percentage (Right click, format as Number, percentage)
Build the Answers Section
Now we have the Quiz information displayed correctly we need to build our second Web Part which will contain information taken from the Answers list.
We will pass some information from the Quiz table (the pass mark and the number of Questions) so that we can calculate the final score for the user. and will filter our view of the answers to only include information from the current session (using the Session= parameter from the query string.
Firstly let’s insert our second Data View Web Part:
1. Highlight the second empty Web Part Zone
2. From the menu select Insert | SharePoint Controls | DataView
3. In the Data Source pane (top right) select the “Answers” list and click “Show Data”
4. Insert the “MarkAnswer” feild into the Data View as a “Multiple item View”
Currently the DVWP will be showing all of the items in the Answers table. We need to filter for our current session only.
1. Click on the OOUI for the Web Part and select “Parameters”
2. Click “New Parameter” with a name of “Session”
3. Source=Query String
4. Variable=Session
5. Leave the default value blank
6. OK
7. Click on Filter then select “Click here to add a new ...”
8. Make a clause than the field name “SessionID” equals [Session]
9. OK
Try taking a Quiz and see how the ShowResults.aspx page currently looks. You should have the Quiz information shown at the top and below a list of 1’s and 0’s corresponding each question you took (and depending if you got it right or not).
In a moment we are going to transform those ugly 1’s and 0’s to a nice looking chart. Before we do we just need to make a couple more values available to our second web part. We need to pass values of the number of questions and pass mark from our Quiz part. Here is how:
1. Click on the OUUI of our Quiz (uppermost) web part
2. Click Web Part Connections
3. “Send row of Data to”
4. “Connect to a web part on this page”
5. Target Web Part: Answers
6. Target action: Get parameters from
7. Click on the “inputs to Answers” column and create a parameter called “NumberOfQuestions”
8. Click on the Columns in Quiz column next to “NumberOfQuestions” and choose the field “Number of Questions”
9. Click on the “inputs to Answers” column and create a parameter called “PassMark”
10. Click on the Columns in Quiz column next to “PassMark” and choose the field “PassMark”
This has sent our two extra parameters across ready for use in the Answers data view web part.
Fun with XSLT (or how to build display SharePoint data in interesting ways)
I have tied to avoid talking too much about XSLT and XSL (mainly because I don’t know enough about it!) but we can’t avoid it any longer.
SharePoint stores pretty much everything in SQL database tables, when we query the data it is returned as XML and finally displayed in HTML. SharePoint uses XSTL (eXtensible Stylesheet Transformation Language) to transform the XML to HTML. A much better explanation of XSLT is available here.
SharePoint designer knows all there is to know about XSLT and has helpers to assist you in building statements. A great way to get familiar with the power of XSLT is to look how the designer itself inserts it (for example take a look at the code behind conditional formatting clauses or how Data View tables are rendered).
To add our final part to the ShowResults.asp we are going to cut and paste some code rather than have a step by step guide. The reason for this is that much of code below was created manually rather than using the designer – I will however explain the key elements.
Cut and Paste time
A standard Data View Web Part uses a number of XSLT templates in order to render a table full of data. There is a seperate XSL template for the table header, the body, the row and the footer. Our table can be much more simple as we only want to display three lines of information: The required score, the user’s score and the grade.
Highlight the Answers DVWP and take a look at the code. You will be able to see the associated <xsl:template> sections for the table.
Delete them all, and replace with the following code:
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<xsl:variable name="HowManyCorrect"
select="count(/dsQueryResponse/Rows/Row[normalize-space(@MarkAnswer)='1'])" />
<xsl:variable name="PercentMark" select="(100 div $NumberOfQuestions) * $HowManyCorrect"></xsl:variable>
<xsl:variable name="RequiredScore" select="$PassMark * 400"></xsl:variable>
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr valign="top">
<th class="ms-alignleft" nowrap="" style="width: 143px">Your Score</th><th
nowrap="" width ="{($PercentMark*4)+1}px" >
<xsl:attribute name="style">
<xsl:if test="$PercentMark >= ($PassMark*100)">background-color: #008000;</xsl:if>
<xsl:if test="$PercentMark < ($PassMark*100)">background-color: #FF0000;</xsl:if>
</xsl:attribute>
<strong><xsl:value-of select="$PercentMark" />%</strong>
</th>
<th nowrap="">
</th></tr>
</table>
<table border="0" width="100%" cellpadding="2" cellspacing="0"><tr valign="top"><th class="ms-alignleft" nowrap="" style="width: 143px">Required Score</th><th nowrap="" width="{$RequiredScore}px" bgcolor ="teal">
<strong><xsl:value-of select="$PassMark*100" />%</strong>
</th><th nowrap="" ></th></tr></table>
<table border="0" width="100%" cellpadding="2" cellspacing="0"><tr valign="top"><th class="ms-alignleft" nowrap=""><strong><br />Grade:
<xsl:if test="$PercentMark >= ($PassMark*100)">PASS</xsl:if>
<xsl:if test="not($PercentMark >= ($PassMark*100))">FAIL</xsl:if>
</strong></th></tr></table>
</xsl:template>
That’s looking a bit smarter isn’t it (although I will leave it up to you to get the formatting just right).
Let’s take a look at what we just did.
Counting matching list values and display charts in XSLT
Firstly we removed the all XSTL templates in the data view and added just one back in: dvt_1
We have already defined many parameters (getting them from the Query string and from the Quiz list) and so we just need to create a couple more working variables.
First off we need to run through all the list items in our set (the ones matching our Session value in the Answers list) and count how many of them have the MarkAnswer field set to a ‘1’. In other words we need to count have many questions the user got right. Here is the line that does this:
<xsl:variable name="HowManyCorrect" select="count(/dsQueryResponse/Rows/Row[normalize-space(@MarkAnswer)='1'])" />
Next we want to convert the number correct into a percentage. To do this we need to know the total amount of questions in the Quiz which we passed across from the Quiz list.
<xsl:variable name="PercentMark" select="(100 div $NumberOfQuestions) * $HowManyCorrect"></xsl:variable>
We use this variable to decide how long the score bar will appear. I decided to used a fixed bar with 100% being 400 pixels wide. We change the width value of the cell depending on the value of the score like this:
<th class="ms-alignleft" nowrap="" style="width: 143px">Your Score</th><th nowrap="" width ="{($PercentMark*4)+1}px" >
I added the “+1” to the value so that if the user gets a zero score then the bar is still displayed.
There is also some conditional formatting applied to the colour of the score bar. If the user has passed it is green, if not it is red. This is done by comparing the score with the pass mark for the exam and setting the cell background colour value like this:
<xsl:attribute name="style">
<xsl:if test="$PercentMark >= ($PassMark*100)">background-color: #008000;</xsl:if>
<xsl:if test="$PercentMark < ($PassMark*100)">background-color: #FF0000;</xsl:if>
</xsl:attribute>
Next we want to create a bar showing the % value required to pass the exam. I decided to have 100% equal a fixed length of 400 pixels. To determine the length of the bar I used this formula:
<xsl:variable name="RequiredScore" select="$PassMark * 400"></xsl:variable>
For a more complex example of XSLT formatting of SharePoint data, there is a good aticle here a full tutorial of XSLT laguage is available here.
One last thing...
To give our users a route back to main menu where they can select another Quiz add the following:
Click below your second web part and from the menu Insert | Hyperlink
Text to display: Back to the main menu
Address: default.aspx
And finally, don’t forget to link the ShowResults.aspx to your master page (from the menu, Format, Master Page, Attach Master Page).
It’ all over – some final thoughts, tips and possible modifications
I really hope you have enjoyed building this web application. Currently it is fairly basic but there are a number of simple modifications that could be added, such as:
· A link on the results page for the User to review the questions and Answers
· Adding an “explanation” field into the Questions list
· Allowing multiple section answers
If you have a lot of users running your Quizzes you will find a large amount of entries in the Answers list. Storing each answer separately can in fact be very useful as you can analyse the responses to particular questions at a very granular level.
[Part 1][Part 2][Part 3][Part 4][Part 5]
Welcome to part 4 where we will complete the creation of our ShowQuestion.aspx page. In this part we will add a custom list form to capture the input from the user. We are going to populate our Answers list with values taken from the user, the Questions list (as well as Query string and system variables!). We are also going customise the 'Submit' botton of our form.
Adding in our Answers custom list form
We now have our Question displaying nicely on our ShowQuestion.aspx page and we are ready to ask the user to choose their answer. We are going to use our second Web Part Zone which we named “Answers”.
This time we aren’t displaying information, rather we are asking the user for input. To achieve this we are going to use another Part, a custom list form.
The user will add a value into the Answers table (into the ChosenAnswer field) and we will also pass some of the values from the Question table into the Answers table so that we can determine if the answer is correct or not. We will also pass the query string value Session into each answer so that all the answers will form a set so we can display a final mark for the whole exam.
Firstly, let’s add in our custom list form:
· Highlight the “Answers” Web Part Zone
· From the menu select Insert | SharePoint Controls | Custom list form
The list to use will be “Answers”, content type is “Item”. Make sure the form is set to “New Item Form” and de-select “Show Standard toolbar”
· Click “Ok”
A big and ugly form appears in our second Web Part Zone. The only field the user can change (and actually the only one we will let them see) is the AnswerGiven filed. All the others are used in the background to make the application work. Here is an explanation of how we will use them:
|
Field Name |
Type |
|
Title |
We will store the User ID in here ($UserID system variable) |
|
AnswerGiven |
The user will choose either A,B, C, or D from a dropdown box |
|
CorrectAnswer |
We pass the correct answer from the Question DVWP into here |
|
Exam |
We pass Exam title from the Title query string parameter |
|
QuestionNumber |
We pass Question number from the Question query string parameter |
|
SessionID |
We pass Session ID from the session query string parameter |
|
MarkAnswer |
When the item is saved this calculated field will become a ‘1’ if the answer given matches correct answer , otherwise it is set to zero |
So, the plan is to load the form with values that actually come from no less than four different sources: The user input, Query string values, server values and also values from another web part (the Questions DVWP). For the time being we will leave all these fields visible so we can see what is going on.
Pre-loading form fields from Query string variables
As I mentioned we are going to load three of our form fields from query string variables, title, question and session.
The first thing we need to do is define the parameters so the form can use them. To do this:
1. Click on the OOUI button 
of the Custom list form web part and click on “Parameters”
2. Hit “New Parameter”
3. Name=Quiz
4. Source=Query String
5. Query string value = Title
6. Default value =*Quiz* (you don’t need to add a default value but it is useful to see it in the form)
Next the question number
1. Hit “New Parameter”
2. Name=Question
3. Source=Query String
4. Query string value = Question
5. Default value =*Question*
Then the “Of” parameter which stores the total number of questions in the Quiz. We will not be passing this value into any of the form fields but we will be using it at the end of this section.
1. Hit “New Parameter”
2. Name=Of
3. Source=Query String
4. Query string value = Of
5. Default value =*Of*
And finally the session ID
1. Hit “New Parameter”
2. Name=Session
3. Source=Query String
4. Query string value = Session
5. Default value =*Session*
We will now be able to reference these parameters in our custom list form. Here is how to load the value of a parameter into a field.
In the form find the QuestionNumber field and click on the input box. You will see a OOUI button appear, follow these steps:
1. Click on the OOUI for the input box
2. You will see the following dialog box appear
At the moment the field type is formatted as a “List Form Field” which means it cannot be manipulated. Click on the drop down selector and change to “Text Box”
This simple action is the key to opening up a lot of things you can do with forms and data views – it allows us to ASP.NET so we can create values and apply validation amongst other things.
1. Click again on the input box associated with the Question Number
2. On the bottom left hand task pane (Tag Properties) find the Text Value
3. Enter the following value into the Text property {$Question}
What did we just do? Firstly we created some parameters (Question, Quiz and Session) by grabbing them from the query string. We then changed one of the fields in our form so that it was a TextBox. This allows us to pass parameter values into the field. By enclosing the text in” { }” the designer knows it’s a value and a “$” means it’s a parameter.
If you like at this point you can save your page and take a look at it in the browser. You should see the value of the Question parameter in the query string be passing into your form.
We now need to do the same with the session and Quiz parameters.
Change the format on the input boxes on the SessionID and Exam fields to be TextBox. Then, for the Text value of session add {$Session} and for the Text value of Exam add {$Quiz}.
All three query string values should now be added into your form (you can check in your browser to see them all setting there ready to go).
Pre-loading form fields from values in another web part
We now have the values from the Query string placed into our form and now we are going to load some of the fields by passing a value from the Questions data view web part.
We need to send the data we want from the Questions web part to the Answers web part. Here is how:
1. Select the OOUI of the top, Questions, web part.
2. Select “Web Part Connections...”
3. Action: Send row of data To
4. Connect to a Web part of this page
5. Target: Answers
6. Action: Get Parameters from
We have specified that we are going to send some of the fields from the Questions part in to the Answers part. We have also said that when they are sent into the Answers part, they will be available as parameters.
Scroll down the list until you see the <Create a new parameter> section.
Here is how to create our two new parameters:
1. Click on the <none> section next to the <Create a new parameter>
2. This opens the Parameters box, call the first parameter “CorrectAnswer” and click OK
Now we need to link the fields in the Questions list to our new parameters. Here is how.
1. Click on the <none> column next to the “CorrectAnswer” column that you created
2. From the dropdown select the field CorrectAnswer
Click, Next, Next then finish and we are ready to load these values into our custom list form.
First we need to change the format of CorrectAnswer input box from a form field to Text Box. To do this click on the input box and click the OOUI button, from the format drop down, select Text Box, like this:
Secondly we need to place the parameter values into the next box fields. This is done the same way as we loaded the query string values.
Click in the CorrectAnswer text box and change the Text value (in the properties task pane on the left hand side) to {$CorrectAnswer}
What did we just do? We connected the Questions web part to the Answers web part so that we could send some of the fields across as parameters. We then loaded the values of a the passed parameter into a textbox by using {$parameter-name} as the format.
Take a look at the form in your browser and you will see all our new variables populated into our list form.
Loading a system variable (current user name) into a custom form
Finally, we have one more field that we are going to load into the form. This will be the system variable for the current user name. You will recall how we get this variable from earlier in the article, this time we are going to chop our the domain and then store it in our Title field.
This field is useful if you want to store or sort the Quiz results or answers by a particular user.
Firstly we need to add a couple of lines of code at the top of the XSL style sheet. Find the start of the style sheet for the Answers web part . You should see all the <xsl:param name=...> definitions for the parameters we have created.
Add the following lines:
<xsl:param name="UserId"></xsl:param>
<xsl:param name="UserName" select="substring-after($UserId,'\')"></xsl:param>
The first line makes the UserID system variable available. The second line created a new parameter UserName which has the domain removed.
We are now ready to load this value into the Title input field. Convert the field format from a list field type to a Text Box then load {$UserName} into the Text properly of the field.
Take one final look at your form in the browser – all our fields are now loaded into the form correctly. We are nearly there! Obviously we will hide the fields a little later but for the moment let’s think what we need to happen for this page to function as a real quiz application.
So far we have displayed the first question correctly, we now want to get the answer from the user and let them submit it. When the answer is submitted we need a few things to happen automatically:
· A new Answer list item has to be created with to store the User’s response
· The IsCorrect field to be set to a ‘1’ if the answer is correct
· We then need to display the next question OR if we have just completed the last question in the Quiz then show the final results
All of the above is actually very easy indeed thanks to SharePoint designer. In fact as our custom list form is already linked to the Answers list a new list item will automatically be created and the IsCorrect field will be populated using the formula you entered when you created the list – so the first two bullets are already completed!
In order to get full control over what happens when we submit the form we are going to build our own “Submit” button. Here is how:
1. On your current form, delete the existing “OK” and “Cancel” buttons at the top and bottom of the form
2. In the top right task pane, choose the “Toolbox” Tab
3. Scroll down to the “Form Controls” section
4. Drag a “Input (Submit)” button in to your form
We now have a new Submit button in our form, next we need to associate some actions to the form “Submit” button. Namely we want to submit the data and then redirect the page to show the next Question (or results page). Here is how:
1. Right click on the button and select “Form actions”
2. Highlight “commit” and then click “Add”
3. Highlight “Navigate to a page” and then click “Add”
4. With “Navigate to page” highlighted, hit “Settings”
5. Hit the “Browse” button and select our ShowQuestion.aspx page
At this point our button will submit the data to the form and then redirect us back to the ShowQuestion form. That is all good but we need to display the next question rathen than returning to the current one. To do so, we need to pass on all the parameters (The quiz title, the Session and the amount of questions in the quiz) and we also need to show the next question in the Quiz by incrementing the Questions parameter.
You may have noticed a “Parameters” button available to use as part of the settings on the "Navigate to a page" action – unfortunately this is one example where try as it might, SharePoint designer can’t help us.
If you take a look the code behind the button you will see the following:
<input name="Submit1" type="submit" value="submit" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={ShowQuestion.aspx}')}"
The button is using Javascript and the redirect is a part of the string. If we let SharePoint designer try and insert our parameters they will be passed as literal values (i.e. Question will not show as ‘1’ it will show as @Question) and our query string will break.
In order to overcome this we need to get down into the code and build our string for a custom redirect.
Building a custom string to pass multiple parameters into form re-direct
We are going to build a string containing all our parameters that can be used in the JavaScript.
First locate the XSL style sheet section for the Answers section. It should look something like this:
<xsl:stylesheet
...
<xsl:param name="dvt_apos">'</xsl:param>
<xsl:param name="ListItemId">0</xsl:param>
<xsl:param name="ListID">{BF902FA5-F0D4-4A51-BA62-C08AB807F4DA}</xsl:param>
<xsl:param name="Quiz">*Quiz*</xsl:param>
<xsl:param name="Question">*Question*</xsl:param>
...
<xsl:variable name="dvt_1_automode">0</xsl:variable>
At the bottom of this section add the following lines:
<xsl:variable name="URL1"><xsl:value-of select="$Quiz"></xsl:value-of></xsl:variable>
<xsl:variable name="URL2"><xsl:value-of select="$Of"></xsl:value-of></xsl:variable>
<xsl:variable name="URL3"><xsl:value-of select="$Session"></xsl:value-of></xsl:variable>
This passes the values of our query string values into XSL variables so they can be passed into the Java script. You may have noticed that we haven’t dealt with the $Question parameter – this is because we are going to do something a little extra with this value.
We want to take the $Question query string parameter and increment the value so that when we direct our page the next question in the sequence will be displayed (remember that the Question Data View Web part is set to filter all but the current Question value).
Fortunately XSL has maths functions available so we just need to create one last XSL variable and add one to it. We need to place this variable inside the body of the form so that it is in scope. Follow these steps:
Locate the XSL template for the main body of the table, it will begin with:
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
...
Add the following line which increments that value of the $Question query string parameter and places the value in the XSL variable called NextQNumber
<xsl:variable name ="NextQNumber" select="$Question +1"></xsl:variable>
That is all our variables created, we can add them all together into a string so they can be used to make our submit form button re-direct to our ShowQuestions.apsx page which multiple parameters.
Build our button
To do this click on the submit button so that it’s code is highlighted. Currently it’s associated code will be:
<td width="99%" class="ms-toolbar" nowrap=""><IMG src="http://blogs.technet.com/_layouts/images/blank.gif" width="1" height="18"/><input name="Submit1" type="submit" value="submit" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={ShowQuestion.aspx}')}" /></td>
It is the __redirect= section that I have highlighted that we are interested in, we want to insert our string here so that we can pass our parameters.
Change the whole string to be as follows (I have highlighted the new section).
input name="Submit1" type="submit" value="submit" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__commit;__redirect={ShowQuestion.aspx?Title=',$URL1,'&Question='
,$NextQNumber,'&Of=',$URL2,'&Session=',$URL3,'}'))}"/>
What have we done here? It looks complex (and admittedly it is a little fiddly) but actually all we have done is pass the query strings into XSL variables and use the concat function to build a string that the Javascript function is happy with.
Try testing this in your browser – you will see that when you submit the answer to a question then the next question in the quiz is automatically shown(and we have preserved all our query string variables).
By the way, take a look (in your browser) at the contents of the Answers list. You will see a new list item for each answer that has been submitted. We will tidy up this view later.
What happens when we get to the last Question?
With the code so far we can select a Quiz from our default.aspx page and then answer each question in turn.
However, currently when we run out of questions our quiz will just keep running. We want the form to re-direct to show the results when the final answer is submitted by the user. Luckily there is a nice easy way of doing this.
We will use conditional formatting to compare the current question number (stored in the query string $Question) to the number of questions in the quiz (stored in the query sting $Of ).
Here is how to do it:
1. Right click on the “Submit” button and select “Conditional formatting”
2. The Conditional formatting task pane will appear at the top right
3. Click “Create” and “Hide Content”
4. Click the “Advanced” Button
5. Enter the following expression “$Question = $Of” (without the quotes)
6. Click Ok, Ok.
So when our $Of value is the same as our $Question value Ii.e. we are on the last question) the button will disappear!
In order to get the user to see the results of the Quiz (i.e. the score and pass / fail) we want to jump to our ShowResults.aspx page when they have submitted the final answer. To do this we will add another submit button that will only appear when it is the final question in the Quiz. As far as the user is concerned it looks like the same button.
Here is how:
1. Click in the space to the right of your existing “Submit” Button
2. Located the Toolbox task pane from the tabs in the top right
3. Drag a “Input (Submit)” button to sit next to your existing button, like this
4. Create a blank results page by File | New | ASPX Page and save it as “ShowResults.Aspx”
5. Switch back to your ShowQuestion.aspx page and right click on your second button
6. Select Form actions
7. Select “Commit” and Click Add
8. Select “Navigate to a page” and click Add
9. Hit “Settings”
10. Browse to your new ShowResults.aspx page
11. Ok, Ok, Ok.
We are nearly done, we just need to add a couple of parameters to our second button. This is much more straightforward this time as the variables have already been created and we only need to pass the Quiz and Session values across this time as we no longer care about the question number.
Click on your second button so that the code is highlighted and change the following string from
<input name="Submit2" type="submit" value="submit" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={ShowResults.aspx}')}" /></td>
To this
<input name="Submit2" type="submit" value="submit" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__commit
;__redirect={ShowResults.aspx?Title=',$URL1,'&Session=',$URL3,'}'))}" />
The above change passes the Quiz Title and the Session parameters to our ShowResults.ASPX page. Finally we only want this button to show on the last question in the Quiz (and when the other button is hidden). To do this we need to add another conditional formatting clause. I’m sure you can guess how this will look:
1. Right click on your second button and select “Conditional formatting”
2. In the top right task pane, select “Create” and “Hide content”
3. Enter “$Question != $Of”
4. Ok, Ok.
(The above clause says hide the second button if the Question isn’t the last question in the Quiz)
Congratulations – all the hard work is now done! Have a play around in the browser to make sure everything works correctly. You should be able to choose a Quiz, complete all the questions and then be re-directly to the current blank ShowResults.aspx page.
A note about formatting
Although (hopefully!) you page works beautifully it’s not currently the best looking web page in the world.
One step you will almost certainly want for your to have your new page inherit the design of your master page. To do this, from the top menu simply go Format | Master Page | Attach Master page
There – looking better already! Save everything (and I would recommend saving a backup of all your pages too) and then play around with making the page look exactly how you would like it.
[Part 1][Part 2][Part 3][Part 4][Part 5]
Welcome to part 3 of this article. We will now begin to build our ShowQuestion.ASPX page, as this is where most of the hard work is done I have split this into two sections. We will be working with the parameters passed from our Default.ASPX page to display the correct question from the correct quiz.
Creating the ShowQuestion.aspx
We now have our default.aspx page that displays a list of available Quizzes. When the user clicks on the title of a Quiz we jump to the ShowQuestion.aspx page and we pass three parameters via a query string.
Here is an example of the whole URL the default.aspx creates:
http:/server/quiz/ShowQuestion.aspx?Title=Capital%20cities&Question=1&of=3&Session=2009-04-08T01:32:24ZUsername
And here is a reminder of the values we are passing in that string
|
Paramter |
Description |
|
Title |
Exam Title |
|
Question |
The number of the question to display |
|
Of |
The total number of questions in the exam |
|
Session |
Unique session ID for the attempt at the quiz |
The ShowAnswer.aspx page is where most of the work for the application is done. The page will display the question itself (fields taken from the Questions list) and populate fields in the Answers DVWP. It will also accept an answer from the user and create items in the Answers list.
Our ShowQuestion.aspx page will consist of two Data View Web Parts (DVWP) one with the Question list as its data source and one with the Answers list as its data source. We will pass values from the query string into the data views and will also pass values from one web part to another (taking fields from the Question table and loading them into the Answers table) – lots to get stuck into here!
In SharePoint designer open up your site and then open your ShowQuestion.aspx page (which we created earlier but is currently blank). You should see a blank form in front of you. To give yourself some room to work click into the form and press return several times to make some space.
Next we are going to create two Web Part Zones, effectively two placeholders for where our DVWP’s will be dropped. To do this, from the top menu select: Insert | SharePoint Controls | Web part Zone.
Do this twice so that you have two Zones on your screen. Currently they will be shown as “Zone1” and “Zone2” so let’s give them more friendly names.
Right click on the Zone and select Web Zone Properties
· Change the name of the First web part to “Questions”
· De-select the three checkboxes to disable users from interacting with the web part
· Do the same for the second Web Zone calling it “Answers”
You should now have two rectangular Web Part Zones, one on top of the other.
Configuring the Questions DVWP
The uppermost Web Part Zone will display our Question using a Data View Web Part (DVWP). Click on the Web Part Zone and from the top menu select Data View | Insert a Data view.
You r Web Part Zone will change to reflect that it contains the beginnings of a DVWP (it will show “Click a data source...”). We need to link this to the Questions table and select our fields, to do this:
1. In the top right task pane Click on the Data Source Library tab
2. You will see our three SharePoint lists available (Quiz, Questions and Answers)
3. Click on the Questions list and select Show Data
4. You should now be able to see all the fields available in the Questions list
5. Using Control & Click select the following fields from the list: QuestionNumber, Question, AnswerA, AnswerB, AnswerC, AnswerD
6. Click on the Insert Selected Fields button and select Single Item View
You should now see your DVWP populated with the Question number, the Question and the four possible answers. Like this:
This all looks great but at the moment it is just showing the very first question available in the Questions list. We want the view to know which Quiz it is running and also display the correct question number.
To do this we are going to use the Title and Question values that we passed across in the query string.
Passing values from our Query string into our web part
To make our DVWP display the correct Quiz and Question number, do the following:
1. Click on the On Object User Interface (OOUI) button for the web part
You will see a whole lot of options for configuring the DVWP – this web part is very powerful. The DVWP can connect to all manner of data sources (not just lists) and has powerful functionality to display the data in many ways.
2. Click the Filter option
3. Click on the shaded bar entitled Click here to add a new Clause
4. In the Field name drop down box, scroll down and select Quiz
5. In the Values column, select Create a new parameter
6. For the name, enter “Quiz”
7. For the parameter source, choose “Query String”
8. For the Query String Variable enter “Title”
9. For the default value enter the name of your test quiz*
*If you have created a Quiz list item for testing put the name of it as the default value so that you will be able to see data in the SharePoint designer view
You don’t need to enter a default value but if you don’t then when you are working in the designer you may not see any data displayed as the Quiz Title is only created when you click on the hyperlink.
The above steps have filtered the DVWP to only show questions from the Quiz whose title was passed in the Query string. We passed the value of Title from the query string into a parameter of the DVWP called Quiz.
So, we have the name of the Quiz in the Query string stored as title=Quiz Name and each Question has a field with the name of the Quiz it belongs to (Quiz). We just set up a filter to only display questions where the two fields match. I.e. only show questions from the Quiz we have chosen.
Next we want to add another filter to show the Question number that matches the Question number contained in the Query string.
In the Query string we have a value question=1 and in the Questions table we have a field name Question number. We want to add another filter so that only the Question that corresponds to the question number will be showed. I.e. If in the query string we have question=18 then show the Question list item where the Question number field is 18.
Hopefully, you can guess the steps we need to do this:
1. In the Filter section of the Web Part parameters click the “Click here to add an new clause...”
2. Set the “Field name” to QuestionNumber
3. In the value section, select “Create a new parameter”
4. Give the name as “QuestionNumber”
5. Set the source as “Query” string
6. Set the Query string variable as “Question”
7. Set the default value as “1”
This gives us a new Parameter QuestionNumber which holds the value of the Question from the query string.
With both your filters configured it should look like this:
We are passing the query string parameters Title and Question and filtering the view of the Questions table depending on their value.
Save the page and let’s go and test everything works okay.
To test, try this:
1. Go your default.aspx in your browser
2. Hover over each of the Quiz titles (hopefully you have added a couple of Quizzes for testing) and notice how the hyperlink changes to reflect the change in the Title parameter
3. Click on one of the Quiz titles
4. Your ShowQuestion.aspx should now display the first question from the correct Quiz
5. Manually edit the URL in your browser and change the value of Question=1 to Question=2
6. Your page should now display the next question
7. Hit “back” a couple of times on your browser to get back to your default.aspx page
8. Choose another quiz and make sure that the Question shows up correctly
Quick summary
In part two we built a customised hyperlink that passes parameters via a query string to the ShowQuestion.ASPX page. The page then filters a Data View Web Part depending on those values.
[Part 1][Part 2][Part 3][Part 4][Part 5]
Welcome to Part two of this article. In part one we created the three lists that our application will use. In this part we we are going to build a page which shows a list of the available Quizzes and allows the user to click on one of them and begin the quiz.
We will use the Data View Web Part (DVWP) and work with paramters and system variables. Will will also be building a customised hyperlink to pass query string varibles to another web page depending on the user selection.
Modifying Defult.aspx (the page to list our available Quizzes)
We will use our default.aspx page as the page to display our available Quizzes. Open the defult.aspx page in SharePoint designer. I would recommend you switch the view to 'Split' - that way you can see the code and the design which makes for a great way of seeing the code as it is being created.
Inserting our Data View
Our default page will contain a single Data View Web Part that lists all the available Quizzes and provide a hyperlink for each to begin the Quiz. Effectively we are just listing all the list items contained in the Quiz list.
Follow these steps to insert the Data View Web part:
1. Select the area on the page where you want to insert the view (there may a “click here to insert a Web Part” showing on the screen already)
2. On the top menu go Data View | Insert Data View
3. In the top right task pane, select the Data Source Library tab
4. Select the Quiz list and select Show Data
You can now see a list of all the available data fields that you created (and some system created) in the Quiz list.
5. Using Control & Click select: Title, Description, Pass Mark and NumberOfQuestions
6. Click “Insert selected Feilds as...” button (just above the list of fields” and choose “Multiple item view”
This gives us a DVWP showing all our available Quizzes.
What is an OOUI?
You will notice if you click on a table area or entry you get a button – this has the friendly title of a On Object User Interface (OOUI) but is actually an incredibly useful helper in everything you want to do in SharePoint.
For example, to change the Pass Mark cells to show as formatted percentage values, click on the first value and then click the button. If you then select “Number formatting options” you can select “Percentage %”.
The Data View Web Part has its own mega-OOUI at the top right of the table which allows you to control all its functions (we will get right into this later).
Grabbing System Variables
In this application we are going to require the name of the currently logged in user and also the current system time and date. Both these variables are system variables and can be easily accessed in SharePoint. Most of the work is already done for us as they are actually almost available. Switch to the code view and find the <ParameterBindings> section near the top of the page.
You should see something like this:
<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
UserID and CurrentTime are already there for us to use. We just need to add a couple of extra lines so that we can use them in our form.
Click on the DVWP so that the whole part is highlighted, in the code view all of the associated code should also be highlighted. Towards the top of the highlighted code you will a line containing the following:
<xsl:param name = “dvp_apos”>'</xsl:param>
Directly below this add the following two lines
<param name = "UserID">
<param name = "Today">
Note: We are using XSLT here which is case-sensitive! (There is much more on XSLT to come later).
This makes the current user information (for example ‘DOMAIN\Username) available to use and also the current date and time both passed as parameters into the form. These are pretty useful for lots of application work.
Creating a Unique session ID
The Answers list will contain every answer given for every exam for each time it is taken. When a new Quiz is started by clicking its title off the default.aspx page we want to create a unique identifier for the set of answers. This session ID will allow us to group together the answers.
I tried a few options and decided on adding the current date and time together with the Username to form a string. Although this isn’t a true GUID it should work well as an identifier for our needs.
We already have the UserID and Today parameters available to us so all we need to do is to create another parameter to store our Session Parameter.
Add the following line directly below the other two lines you just added:
<xsl:param name="Session" select="concat($Today,substring-after($UserID,'\'))"></xsl:param>
Let’s break down the line below:
|
Section |
Explaination |
|
xsl:param name="Session” |
In our XSL style sheet, create a new Variable called session. This can be referenced by calling $Session |
|
Concat( |
Concatenate (join) two strings to form a single string. |
|
$Today |
The current time and date parameter stored as $Today |
|
substring-after($UserID,'\') |
The substring-after function chops the $UserID variable at the ‘\’ which removes the domain name from the $UserID string.
|
Our session variable will end up looking something like this ‘2009-04-06T05:13:05ZUserName’
Creating a custom Hyperlink with parameters
We have now created our Session parameter and we are ready to create our hyperlink that will initiate the quiz.
Before we create the link let’s quickly create the new ASPX page that we are going to link to:
-
From the main menu select File | New and choose ASPX page.
-
Then File | Save As and save the page as “ShowQuestion.aspx”
-
Close the page
We are going to create our hyperlink linked to the title of each quiz in the list, and we are going to pass the following variables via a query string into the ShowQuestion.aspx page:
|
Paramter |
Description |
|
Title |
Exam Title |
|
Question |
The number of the question to display |
|
Of |
The total number of questions in the quiz |
|
Session |
Unique session ID for the attempt at the quiz |
Here are the steps to create our hand-built hyperlink with parameters:
1. Click on the title of the Quiz in your Data view Web Part table
2. Click of OOUI button
3. Change the Format as: to Hyperlink
4. Select Hyperlink options
1. For the Address: Browse to our newly created ShowQuestion.aspx page
2. Hit the Parameters button
3. Hit the Add Button
The Add Parameter box will pop up asking for a name and value. To add our “Title” parameter give the name as “Title” and then scroll down the list of values and find the Title field like this:
Important note: Check that SharePoint designer hasn’t added a @ at the start of the name of your parameter – if it has just delete it so that the name is “Title”.
To add our “Question” parameter, click add again. This time give the title as “Question” and type the value as “1” (without the quotes).
Then Add our “Of” parameter (which is the total number of questions) by giving the title as “Of” and the selecting the value from the drop down list as “NumbeOfQuestions”)
Our final parameter is the Session ID we created earlier, although this isn’t available from the drop down list we can still reference it. Hit add one more time and give the title as “Session”. For the value enter {$Session}
SharePoint Designer knows that anything enclosed in {} is a system field. A “$” means a parameter and “@” maps to a node variable. We will be getting lots of practice in using {$variables} on our next ASPX page!
You should now have all your parameters added and the screen will look like this:
What did we just do? We have added a number of paramters to our hyperlink which will be added at the end of the link as a query string. The Title variable was assigned to a node value, identified as {@Title}. The Question number was set to equal '1' as we always want to start with the first question. The Of value was set to the node value of the NumberOfQuestion. Finally the Session value was assigned the value of a paramter, idenfitied by {$parameter-name}.
If you save your default.aspx and then view it in your website when you hover of the title of an exam you should now be able to see your link. If you click the link you will be taken to our blank ShowQuestion.aspx page and you can see all four variables have been passed across in the query string.
In part three of this article we will build the ShowQuestion.ASPX page which will show each Question and get an answer from the user (and mark the question).
[Part 1][Part 2][Part 3][Part 4][Part 5]
Hi, my name is Brendan Clarke and I work as a partner technical specialist in SharePoint. In this five part article I will provide a step by step guide to build a simple Quiz web application using SharePoint designer.
It’s perfectly possible to build web applications without writing any custom code (as the fabulous forty application templates illustrate well) and now that SharePoint Designer is available as a free download combined with launch of SharePoint Online (BPOS) around the world it’s possible to deliver business solutions very rapidly.
Here's is a preview of the three pages that will form our completed application:
The above picture shows the Default.aspx page, the ShowQuestion.aspx and the ShowResults.aspx page
Overview
We mostly use the very powerful Data View Web Part (DVWP) to build our application and we will cover some great ways of manipulating list data, such as:
· Passing parameters from one web page to another via a query string
· Passing values from one web part to another
· Removing the (usually mandatory) Title field from list forms and views
· Using useful system variables (such as the logged in user and current date)
· Pre-loading form fields with values
· Creating a persistent session identifier to link multiple list items
· Creating custom forms and passing multiple parameters in a redirected form
· Manipulation of the HTML presentation using XSLT
The application uses three custom lists (Quiz, Questions and Answers) and three ASPX pages (default, ShowQuestion, ShowResults)
So, let’s jump in and get started. I am assuming a general knowledge of SharePoint and SharePoint Designer so I will not describe in detail the more basic steps.
Create the lists
Firstly create a new site (or sub site) for your application (a team site or blank site template should be fine).
You then need to create three new custom lists either via the web interface (Site actions > create > lists > Custom list) or by using SharePoint designer (File | New | SharePoint Content | Custom list).
The three custom lists for the application are:
|
Name of List |
Used for |
Used by |
|
Quiz |
Stores details of the Quiz itself (Title, pass mark, number of questions) |
Default.aspx |
|
Questions |
Stores each question, its multiple choice options and the correct answer |
ShowQuestion.aspx |
|
Answers |
The application uses this list to store the answer the user chooses |
ShowQuestion.aspx
ShowResults.aspx |
Below are the steps to create the fields for each list.
Create the Quiz list
You will already have a field created called "Title" which we will store the name of each Quiz, you then need to create the following additional fields in your list:
Create the Questions list
|
Field Name |
Type |
|
Quiz |
Lookup; Link the lookup field to the Title of the Quiz list. |
|
QuesionNumber |
Number |
|
Question |
Multiple lines of text – enhanced text* |
|
AnswerA |
Multiple lines of text – enhanced text* |
|
AnswerB |
Multiple lines of text – enhanced text* |
|
AnswerC |
Multiple lines of text – enhanced text* |
|
AnswerD |
Multiple lines of text – enhanced text* |
|
CorrectAnswer |
Choice- Add “Select”, “A”,”B”,”C” and “D” on separate lines (without the quotes)
Enter “Select” as the default value. |
*By selecting these fields as “enhanced text” we can include pictures and advanced formatting in our question and answer text.
A Quick diversion: Getting rid of the Title field from our forms and views
As you can see from the table above, in this instance we don’t have any use for the Title field, which is created by default in every list. We can edit the Field name (not recommend) and change it so that is doesn’t require any information and also remove it from the default view but it still shows up in our form.
As it’s likely that other people will be creating new entries so it would be good to remove it from the form completely (note: the field will still exist which is a good thing, users just won’t see it).
Here is how to remove the Title field from our forms and the default view:
To remove the title field from our form:
1. Go to the list and choose Settings | List Settings
2. Click "Advanced settings"
3. Change the first entry, "Allow management of content types?" to Yes
4. In the “Content Types” section that has just appeared, click the "Item" link
5. Click the "Title" field and select “Hidden (will not appear on forms)”
6. Change the management of content types back to “No” (steps 1-2)
To remove the title field from our list view:
1. Go to the default view for the list by clicking the list name (the page will be /lists/Questions.AllItems.aspx)
2. In the view selector box click and select Modify this view
1. Un-tick the Title field in the display section
2. Don’t click OK yet!
Modifying the default view to group and sort our questions
Whist we are here it will be useful to make the default view of the Questions friendlier. As we may end up with several sets of questions shown in one long list it would make it hard work to manage. Let’s group each set of Questions into the Quiz they belong to and also list the questions in the correct order. To do this:
1. In the “Sort” section change the “First sort by...” column to “QuestionNumber”
2. Expand the “Group by” section and choose to group by the “Quiz” column
The view will now group each set of questions correctly, like this
Create the Answers list
As you can see, the MarkAnswer uses a very simple formula, if the User’s answer matches the answer to the question (stored in the CorrectAnswer field, which is passed from the Question table) then the field is set to a ‘1’, otherwise it’s a ‘0’.
You have now created all the lists that you need. Before we move on it is worth adding a little data into the Quiz and Questions lists, so that you can make sure they are all working okay and it also gives us some data to work with when we create and test our application.
Create at least one Quiz list item and then add some Questions list items - in the next part we will start to build our ASPX pages which will work with the lists you have just created.
[Part 1][Part 2][Part 3][Part 4][Part 5]
