Hands-On LabLab 03: SharePoint 2010 User Interface AdvancementsLab version: 1.0.0

Last updated: 5/19/2023

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: CREATING THE NEW TOY IDEAS LIST............................................................................3

EXERCISE 2: CUSTOMIZING THE ALL ITEMS VIEW..............................................................................6

EXERCISE 3: CREATING INFOPATH FORMS.......................................................................................11

EXERCISE 4: CREATING A RIBBON ENABLED WEB PART................................................................14

Overview

Lab Time: 45 Minutes

Lab Folder: C:\Student\Labs\03_SharePointUI

Lab Overview: In this lab you will create and customize a list for storing ideas for new toys that Contoso can manufacture. While creating and using this list you will use various new features of SharePoint, SharePoint Designer and InfoPath.

Lab Setup Requirements

Before you begin this lab, you must run the batch file named SetupLab03.bat. This batch file creates a new SharePoint site collection at the location http://intranet.contoso.com/sites/Lab03.

Exercise 1: Creating the New Toy Ideas list

The first task is to create the list and add columns to it. You will create the list using the new SharePoint Designer user interface. Next you will add new columns and items to the list using the new AJAX capabilities of the browser interface.

1. If you haven’t already done so, run the batch file named SetupLab03.bat, found in the c:\Student\Labs\03_SharePointUI\ folder, to create the new site collection that will be used to test and debug the code you will be writing in this lab. This batch file creates a new site collection at an URL of http://intranet.contoso.com/sites/Lab03.

2. Open SharePoint Designer 2010 and open the http://intranet.contoso.com/sites/lab03 site. To open a site in SharePoint Designer 2010:

a. In SharePoint Designer 2010 Click on Open Site .

b. In the Open Site dialog box enter http://intranet.contoso.com/sites/lab03 in the Site name: text box and click Open.(Note: If you are prompted by the Windows Security dialog box to Enter your credentials click the Cancel button to ignore this.)

3. Examine the new overview page that appears.

4. In the left-hand navigation pane select Lists and Libraries.

5. On the ribbon, in the Lists and Libraries tab, choose Custom List.

Figure 1Click the Custom List button on the List and Libraries tab

6. Complete the dialog that appears with the following information.

a. Name: New Toy Ideas

b. Description: Stores information about possible new toys.

Figure 2The create list or document library dialog

7. Within SharePoint Designer 2010, navigate to the New Toy Ideas list by selecting it from the Lists and Libraries tab site.

Figure 3The Lists and Libraries overview

8. Examine the overview page.

Figure 4The overview page of the new list

9. On the New Toy Ideas list overview page, in the Settings section, do the following:

a. Check Require content approval for submitted items to enable content approval for the list.

b. Uncheck the Allow Attachments option to disallow attachments for list items. In the dialog box that appears choose OK to confirm this modification.

10. On the Quick Access Toolbar section of the ribbon (upper-left corner above the Office 2010 application logo button), choose Save.

Figure 5The Quick Access Toolbar

11. On the ribbon, in the Lists Settings tab, expand Preview in Browser (using the drop down arrow on the bottom right edge of this toolbar item)and choose Windows Internet Explorer 8.0 (32 bit) with the Default Size option. Keep SharePoint Designer open as you will return to it in a later point in this exercise.

12. Perform the following tasks in the browser window that opens.

13. On the ribbon, click on the List tab, choose Create Column available in the Settings group. (Note: you may have to maximize the Internet Explorer window to see this item on the ribbon.

Figure 6Click the Create Column button on the List tab

14. Use this approach to add the following fields to the list.

Take note of the Ajax style refresh when adding new list columns

15. On the ribbon, click on the Items tab, click on the New Item toolbar button. Use the following information to complete the dialog and click Save when finished.

a. Title: Nuclear powered action figure

b. Age Group: older than 9

c. Required Investment: Miniaturized nuclear power plant.

d. Existing Product: No

Take note of the Ajax style refresh when adding new list items

16. Switch back to SharePoint Designer and keep the browser window open.

In this exercise you created & modified a list using SharePoint Designer 2010. As well, you added columns using the new ribbon in the browser. Finally, you interacted with the list by adding a new list item.

Exercise 2: Customizing the All Items view

Now that the list is in place and has some data in it, the second step is to modify the default ‘All Items’ view of the list. SharePoint 2010 list views use a new Web Part called the XsltListViewWebPart which is list agnostic and provides AJAX enabled rendering.

1. If it is not open, launch SharePoint Designer 2010 and open the http://intranet.contoso.com/sites/lab03 site.

2. On the New Toy Ideas list overview page, in the Views group open the All Items view by selecting it.

On the AllItems.aspx tab that appears, click on the Split view option near the bottom of the screen to expose both code and design views. Take note of the XsltListViewWebPart on the page. (Note: you may need to hover your mouse pointed just over the Title column and left click to select the PlaceHolderMain (Custom) area and the webPartPages:XsltListViewWebPart control inside of this section)

Figure 7The AllItems.aspx page

3. On the ribbon, in the View tab, choose Design in order to switch to the design view of the AllItems.aspx page.

4. In the design view for the AllItems.aspx page select the XsltListViewWebPart.

Figure 8The XsltListViewWebPart in Design View

5. In the browser, navigate to the New Toys Ideas list in the http://intranet.contoso.com/sites/lab03 site. Take note of the green plus sign appearing on the AllItems.aspx page. Click on the Add new item hyperlink and note how a dialog box appears for the new item entry. Click Cancel.

6. On the ribbon, in the Options tab choose Inline Editing to enable inline editing for the list.

Figure 9The Options tab for the AllItems.aspx page

7. On the ribbon in the Quick Access Toolbar, choose Save in order to save the page.

8. In the browser, navigate to the New Toys Ideas list in the http://intranet.contoso.com/sites/lab03 site. Take note of the green plus sign appearing on the AllItems.aspx page. Notice how the Add new item hyperlink is no longer available to the right of the green plus sign.

9. Inside the list view, select the + button displayed below the first list item. Take note of the new inline-editing controls appearing on the AllItems.aspx page.

Figure 10The inline editing controls on the AllItems.aspx

10. Use the following information as data for the new list item.

a. Title: Rocket-fueled Buggy

b. Age Group: over 3 to 6

c. Required Investment: Safe rocket boosters and non-exploding fuel

d. Existing Product: No

11. Use the Save button displayed on the left-hand side of the new list item to save the item. Note the AJAX refresh of the page.

Figure 11The inline editing control on the AllItems.aspx

12. Use your mouse pointed to point to the list item that you have just added. On the left-hand side of the item choose the Edit icon. Change the Title of the item to Rocket-fueled buggy with support wheels and click the Save button.

13. Select the first list item in the list. On the dialog box that appears on the view tab choose Approve / Reject in order to approve the item. Perform the following tasks in the dialog that appears.

a. Select the Approved option

b. Choose Ok to close the dialog.

14. Switch back to SharePoint Designer 2010 and keep the browser window open.

15. Ensure that the AllItems.aspx page is open and the XsltListViewWebPart is selected.

16. On the ribbon, in the Options tab, choose Sort & Group from the Filter, Sort & Group section in order to show the Sort and Group dialog.

17. In the Sort and Group dialog, perform the following tasks.

a. In the Sort order list, remove the ID field.

b. In the list of available fields, select Age Group.

c. Choose Add to add the field to the sort order

d. Choose Show group header to group items based on the Age Group field.

e. Choose OK to commit the changes.

18. Select the first data row in the list (specifically the <tr> tag) to add conditional formatting. To accomplish this, Click in the first cell of the row that has the Nuclear powered action figure in it and then use the tag selector at the bottom of the screen to click on the <tr> tag:

Figure 12Select the first row

19. On the ribbon, in the Options tab expand Conditional Formatting and choose Format Row.

20. In the Condition Criteria dialog that appears perform the following tasks:

a. Add a new clause with the following values;

i. Field: Approval Status

ii. Comparison: Equals

iii. Value: Approved

Figure 13The Condition Criteria dialog

b. Select Set Style to commit the changes.

21. In the Modify Style dialog that appears perform the following tasks:

a. Category: Background

b. Background-color: Green

c. Choose OK to dismiss the dialog.

d. Save your changes

22. Go back to the browser and refresh the view to see the conditional formatting applied.

Figure 14The conditional formatting

In this exercise you used SharePoint Designer 2010 to modify the XsltListViewWebPart control to apply custom formatting and grouping.

Exercise 3: Creating InfoPath forms

The last task that you will perform is modifying the edit and display forms used by the New Toy Ideas list. SharePoint 2010 allows forms to be easily customized by Information Workers using InfoPath.

1. In SharePoint Designer 2010, navigate to the list overview page for the New Toy Ideas list by selecting the Lists and Libraries choice in the Site Objects List box (on the left side of the screen). Next select the New Toy Ideas hyperlink located under the Lists heading on the center of the screen.

2. On the ribbon, in List Settings tab, expand Design Forms in InfoPath and choose Item. InfoPath will open with a generated form.

3. Modify the labels to display descriptive texts instead of just the field name. You will do this by replacing the existing labels (on the left side of the list below) with the text on the right side (after the colon).

a. Title: Please describe your idea for a new toy:

b. Age Group: Which age group is the new toy meant for:

c. Required Investment: Are there any new investments Contoso needs to make?

d. Existing Product: Are there existing vendors for this type of product?

e. Alternatives: What are the current alternatives to this product?

Figure 15The Edit form in InfoPath

4. Next add some fill color shading to the table cells on the right hand side of the form:

a. Select all of the cells to the right of the titles (i.e. in the second column). Note: you can do this by using the mouse pointed and clicking and dragging vertically across all of the cells in column 2. Be sure you are selecting the background cells and not the text entry areas in column two.

b. Right click inside of the background area that is highlighted (again taking care not to do this on a control used for user input). Next on the shortcut toolbar that appears click on the Fill Color button’s drop down arrow (e.g. the paint can tipping over) and choose a color of light blue.

5. In the forms designer, select the Title textbox. On the ribbon, on the Properties contextual tab, expand Shading and choose a shade of orange.

6. In the forms designer, select the Age Group control. On the ribbon, on the Properties contextual tab, expand Shading and choose a shade of orange.

7. In the forms designer, select the Required Investment control. Perform the following tasks with this control selected:

a. On the ribbon, on the Properties contextual tab, choose Control Properties in order to show the Text Box Properties dialog.

b. In the Text Box Properties dialog, on the Display tab, check Multi-line.

c. In the Text Box Properties dialog, on the Size tab, set the Height to 75px and the Width to 100%.

d. Choose OK to commit the changes.

8. In the forms designer, select the Alternatives control. Perform the following tasks with this control selected

a. On the ribbon, on the Properties contextual tab, choose Manage Rules in order to show the Rules task pane.

b. On the Rules task pane, expand New and choose Formatting in order to add a new formatting rule to the control.

c. In the Details for: text box enter “Disable when no existing product.”

d. In Condition: click the None hyperlink.

i. On the Condition dialog box set the Run the rule when this condition is true = Existing Product | is equal to | FALSE (Note: the vertical lines separate the data contained in the three drop down boxes in succession).

ii. Click OK

e. Under Formatting put a check in the Disable this control checkbox

Figure 16The Rules task pane

f. Close the Rules task pane using the close [x] button in the upper-right corner of the task pane.

9. Ensure that your form is similar to the following figure:

Figure 17The modified Edit form in InfoPath

10. On the top toolbar in the ribbon, choose Quick Publish to publish the form to SharePoint.

Figure 18The Quick Publish button

11. Go back to your browser, and select the New Item button from the Items ribbon tab to add a new list item to the New Toy Ideas list using the new InfoPath form:

Figure 19The modified Edit Form in action

In this exercise you modified the editing form of a SharePoint list using an InfoPath form.

Exercise 4: Creating a Ribbon Addition and a Web Part

In this last exercise you will create a Web Part Solution which adds a command to the ribbon and a new Web Part.

1. Open Visual Studio 2010 and choose to create a new project. Complete the dialog that appears using the following information.

a. Pick the Empty SharePoint Project template that you can find in the Visual C# / Visual Basic » SharePoint » 2010 template group.

b. Name the project MyRibbonizedWebPart

c. Complete the dialog using the OK button.

2. Complete the wizard that appears using the following information.

a. Ensure that you will be debugging the project on the http://intranet.contoso.com/sites/Lab03 site.

b. Select Deploy as a farm solution.

3. Add a new Web Part to your project by doing the following:

a. Right-click the MyRibbonizedWebPart project in the Solution Explorer, expand Add and choose New item.

b. Pick the Web Part template and let it use the default name of WebPart1. Click Add.

Figure 20The web part in Solution Explorer

4. A web part needs to be deployed at site collection level. Verify that the feature scope is set to Site:

a. In the Solution Explorer expand Features.

b. Right-click Feature1 and choose View Designer in order to open the designer for this feature.

c. In the designer that appears, check the Scope, which should be set to Site.

5. Open the file named WebPart1.cs/vb . Add the RenderContents method and the line of code inside it shown below. This will render a simple message within the web part.

C#

protected override void RenderContents(HtmlTextWriter writer){ writer.Write("Hello World");}

VB.NET

Protected Overrides Sub RenderContents( _ByVal writer As System.Web.UI.HtmlTextWriter)writer.Write("Hello World")

End Sub

6. Open the file named WebPart1.webpart, and make the following modifications.

a. Find the element for the Title property and change its value to My Ribbonized Web Part.

b. Find the element for the Description property and change its value to something else.

XML

<?xml version="1.0" encoding="utf-8"?><webParts> <webPart xmlns="http://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="MyRibbonizedWebPart.WebPart1, $SharePoint.Project.AssemblyFullName$" /> <importErrorMessage> $Resources:core,ImportErrorMessage;</importErrorMessage> </metaData> <data> <properties> <property name="Title" type="string"> My Greetings Web Part </property> <property name="Description" type="string"> This Web Part displays a greeting </property> </properties> </data> </webPart></webParts>

7. Using the Solution Explorer, add a new item to the MyRibbonizedWebPart project. Choose the Empty Element template, which you can find in the Visual C#/Visual Basic » SharePoint » 2010 template group. Name the element RibbonActions.

8. In the editor for the Elements.xml file that has opened automatically add a new <CustomAction> element right inside the <Elements> node and add the following markup:

XML

<Elements xmlns=”http://schemas.microsoft.com/sharepoint”> <CustomAction Id="MyRibbonCustomization" Location="CommandUI.Ribbon"> </CustomAction></Elements>

9. Next you will need to create the ribbon XML markup within the <CustomAction> element. A new child element for CustomAction is now available named <CommandUIExtension>. You will create a new group and add a button to this group. Add the following XML into the <CustomAction> element. Take special care to name the Template, TemplateAlias and Command attributes correctly as these reference elements outside of the XML markup.

XML

<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="MyRibbonCustomization" Location="CommandUI.Ribbon"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.WebPartPage.Groups._children"> <Group Id="Ribbon.WebPartPage.MyRibbonWebPart" Sequence="20" Description="Custom ribbon group" Title="Ribbon Addition" Template="Ribbon.Templates.Flexible2"> <Controls Id="Ribbon.WebPartPage.MyRibbonWebPart.Controls"> <Button Id="Ribbon.WebPartPage.MyRibbonWebPart.DemoButton" Command="demoAction" Description="a demo action" Image16by16="/_layouts/images/edit.gif" Image32by32="/_layouts/images/placeholder32x32.png" LabelText="Demo Action" TemplateAlias="o2" Sequence="10" /> </Controls> </Group> </CommandUIDefinition> <!-- Here comes another custom action --> </CommandUIDefinitions> <!-- Here comes the UI handler --> </CommandUIExtension> </CustomAction></Elements>

10. Add 3 other <CommandUIDefinition> elements directly under the comment below the first <CommandUIDefinition>. These will take care of the sizing of the new group and button. The Location attribute needs to be set to Ribbon.WebPartPage.Scaling._children:

XML

<!—Here comes another custom action --> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <MaxSize Id="Ribbon.WebPartPage.MyRibbonWebPart.MaxSize" Sequence="20" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="LargeLarge" /> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children">

<Scale Id="Ribbon.WebPartPage.MyRibbonWebPart.MediumMedium" Sequence="30" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="MediumMedium" /> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <Scale Id="Ribbon.WebPartPage.MyRibbonWebPart.Popup" Sequence="50" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="Popup" /> </CommandUIDefinition> </CommandUIDefinitions> <!—Here comes the UI handler --> </CommandUIExtension> </CustomAction></Elements>

11. When the user clicks the new ribbon button, a message will be displayed using Javascript. Locate the comment Here comes the UI Handler and place following code right below it. The Command attribute must be the same as the one specified in the button definition. The CommandAction contains the javascript to be executed.

XML

<!—Here comes the UI handler --> <CommandUIHandlers> <CommandUIHandler Command="demoAction" CommandAction="javascript:alert('hello');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction></Elements>

12. Build the project. Correct any errors that occur before moving on to the next step.

13. In the Solution Explorer, right-click the MyRibbonizedWebPart project and choose Deploy. This will deploy and activate the Web Part feature.

14. Navigate to http://intranet.contoso.com/sites/lab03/default.aspx in order to test the Web Part.

15. On the Site Actions menu, select Edit Page in order to transition into the page editing mode.

16. In the Left Web Part Zone on the default.aspx page click on Add a Web Part.

17. In the Categories group, select Custom and then select the My Ribbonized WebPart. Click the Add button to add the Web Part to the Left Web Part Zone on the page.Your simple web part should now be visible on the page.

18. Select the Page tab on the ribbon. There you will find the new Demo Action button. Clicking the button will display an alert box with the message.

Figure 21The Demo Action button on the Page tab of the ribbon

In this exercise you created a new Web Part and added a custom button to the ribbon.