13
SharePoint 2010 User Interface Advancements

SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

Embed Size (px)

Citation preview

Page 1: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface

Advancements

Page 2: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Table of Contents

SharePoint 2010 User Interface Advancements ...................................................................... 1

Exercise 1 Managing a SharePoint 2010 List ................................................................................................................. 2

Exercise 2 Customizing the All Items view ..................................................................................................................... 5

Exercise 3 Creating InfoPath forms ............................................................................................................................... 7

Exercise 4 Creating a Ribbon enabled Web Part ........................................................................................................... 9

Page 3: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 1 of 11

SharePoint 2010 User Interface Advancements

Objectives After completing this lab, you will be better able to:

Create and customize SharePoint 2010 lists for storing ideas for new toys

Use various new features of SharePoint, SharePoint Designer and InfoPath

Scenario

In this lab you will create and customize SharePoint 2010 lists 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.

Estimated Time to Complete This Lab

45 Minutes

Computers used in this Lab demo2010a

The password for the Administrator account on all computers in this lab is: pass@word1

Page 4: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 2 of 11

Exercise 1 Managing a SharePoint 2010 List

Scenario In this exercise you will create a new SharePoint 2010 list using the new SharePoint Designer user interface. You will then add columns and items to the list using the AJAX capabilities of SharePoint 2010.

Tasks Detailed Steps

Complete the following tasks on:

demo2010a

1. Creating a SharePoint 2010 List in SharePoint Designer

Note: The project files for this lab are in the ‘C:\Student\Labs\04_SharePointUI’ folder

This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory.

The default working folder for this lab is ‘C:\Student\Labs\04_SharePointUI’.

Copying code samples from Word document

Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.:

Console.WriteLine("This is safe code!");

Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.:

Console.WriteLine(“This is NOT safe code !!”);

In the lab setup you will execute a batch file that will create a new SharePoint site collection at the location http://intranet.contoso.com/sites/Lab04

Start the Virtual Machine in Hyper-V.

Log on to the Virtual Machine as the local administrator with a user name of Contoso\Administrator and a password of pass@word1.

Open Windows Explorer and browse to the location C:\student\Labs\04_SharePointUI, in the folder double-click SetupLab04.bat.

Verify the site created successfully message and then press [Enter] to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location http://intranet.contoso.com/sites/Lab04 that you will use in the next exercises.

a. In this task you will use the SharePoint 2010 Designer to create a list that records new toy ideas for the Contoso organization.

b. Click Start | All Programs | SharePoint | SharePoint Designer 2010. Microsoft Office SharePoint Designer 2010 starts.

c. Click Cancel at the Microsoft Office Activation Wizard prompt, if shown in your environment

d. In the Open SharePoint Site section, click Open Site. The Open Site dialog appears.

e. In the Site name textbox, type http://intranet.contoso.com/sites/lab04

f. Click Open, and then click Cancel at the permission prompt (if shown).

g. The SharePoint Designer opens.

h. In the Navigation pane on the left side of the screen, click Lists and Libraries.

Page 5: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 3 of 11

Tasks Detailed Steps

i. On the ribbon, on the List and Libraries tab, click Custom List. The Create list or document library dialog appears.

j. In the Name textbox, type New Toy Ideas

k. In the Description textbox, type Stores information about possible new toys.

l. Click OK.

m. The New Toy Ideas list appears in the List and Libraries tab.

n. In the main window, in the List section, click New Toy Ideas.

o. The new Toy Ideas overview page appears.

p. In the Settings section, check the Require content approval for submitted items checkbox.

q. In the Settings section, uncheck the Allow Attachments checkbox. Click OK in the Disabling attachments warning dialog.

r. On the Quick Launch bar, available at the upper left portion of the ribbon, click Save.

s. On the Ribbon, on the Manage tab, click Preview in Browser and choose Windows Internet Explorer 8.0 (32 bit) with the (Default Size) option.

t. Internet Explorer opens the site and displays the empty list. Leave SharePoint Designer and Internet Explorer open, you will return to them both in later tasks.

2. Creating list columns in Internet Explorer

Note: In this task you will use the SharePoint 2010 Ribbon in Internet Explorer to create new columns for the New Toy Ideas list. Note the Ajax style refresh that takes place as new columns are added.

a. In the Internet Explorer window, on the ribbon, under List Tools, click List.

b. In the Settings group, click Create Column.

c. The SharePoint Create Column dialog appears.

d. In the Column Name textbox, type Age Group

e. In the Field Type option list, select Choice.

f. In the Require that this field contains information option list, Click Yes.

g. In the Type each choice on a separate line input box: On the first line type 1 to 3 On the second line type 3 to 6 On the third line type 6 to 9 On the fourth line type 9 and older

h. Leave all other fields with their default values and click OK. The new column appears in the headings for the list.

i. On the ribbon, in the Manage Views group, click Create Column.

j. In the Column Name textbox, type Required Investment

k. In the Field Type option list, select Single line of text.

l. In the Require that this field contains information option list, Click Yes.

m. Leave all other fields with their default values and click OK.

n. The new column appears in the headings for the list.

o. On the ribbon, in the Manage Views group, click Create Column.

p. In the Column Name textbox, type Existing Product

q. In the Field Type option list, select Yes/No.

r. Leave all other fields with their default values and click OK.

s. The new column appears in the headings for the list.

Page 6: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 4 of 11

Tasks Detailed Steps

t. On the ribbon, in the Manage Views group, click Create Column.

u. In the Column Name textbox, type Alternatives

v. In the Field Type option list, select Multiple lines of text.

w. Leave all other fields with their default values and click OK.

x. The new column appears in the headings for the list.

y. On the ribbon, in the Manage Views group, click Create Column.

z. In the Column Name textbox, type Due Date

aa. In the Field Type option list, select Date and Time.

bb. Leave all other fields with their default values and click OK.

cc. The new column appears in the headings for the list. You have finished creating columns for this list. Leave Internet Explorer open, you will use it in the next task.

3. Creating List items Note: In this task you will use the SharePoint 2010 Ribbon in Internet Explorer to create new list items.

a. On the ribbon, under List Tools, click Items and click the New Item dropdown.

b. Click New Item in the dropdown.

c. The New Item dialog appears.

d. In the Title textbox, type Nuclear powered action figure

e. In the Age Group option list, select 9 and older.

f. In the Required Investment textbox, type Miniaturized nuclear power plant.

g. Uncheck the Existing Product checkbox.

h. Leave all other fields with their default values, and on the ribbon, click Save.

i. The new item appears in the list, note the Ajax style refresh. Leave Internet Explorer open, you will use it in a later task.

Page 7: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 5 of 11

Exercise 2 Customizing the All Items view

Scenario In this exercise you will modify the default ‘All Items’ view of the list.

Tasks Detailed Steps

Complete the following tasks on:

demo2010a

1. Enabling inline editing

Note: In this task you will edit the Allitems.aspx page in SharePoint Designer to enable inline editing.

a. Switch to the SharePoint Designer that you have open from Exercise 1.

b. On the New Toy Ideas list overview page, in the Views group, click All Items.

c. The AllItems.aspx page is opened in the editor.

d. On the ribbon, click the View tab.

e. On the ribbon, in the Page Views group, notice the different view options on the editing

f. In the design view for the AllItems.aspx page select the central web part showing items from the Toy Idea list. When selected the WebPart XsltListViewWebPart is highlighted and the List View Tools Ribbon appears.

g. On the List View Tools ribbon, click the Options tab.

h. On the ribbon, in the Edit group, click Inline Editing.

i. This enables inline editing of the list from the Web browser.

j. On the ribbon in the Quick launch, click Save.

k. Leave SharePoint Designer open, and return to the Internet Explorer session that you left open after Task 3.

l. Refresh the browser window.

m. The changes made in SharePoint designer now appear on the page with the inline-editing control appearing after the last item in the list.

n. Click the New Item button that is displayed in the main window below the first item in the list.

o. The in-line editing is enabled.

p. In the Title textbox, type Rocket-fueled Buggy

q. In the Age Group option list, select 3 to 6

r. In the Required Investment textbox, type Rocket boosters and non-exploding fuel.

s. Uncheck the Existing Product checkbox.

t. Click the Save icon displayed on the left of the new list item.

u. Note the Ajax enabled refresh of the list items.

v. Point to the left of the Rocket-fueled Buggy list item, and click the pencil icon that appears.

w. The list item can be edited directly.

x. In the Title textbox, change the text to Rocket-fueled buggy with support wheels.

Page 8: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 6 of 11

Tasks Detailed Steps

y. To the left of the Title textbox, click the Save icon.

z. In the list of items, click Nuclear powered action figure.

aa. The New Toy Ideas dialog appears.

bb. On the ribbon, click Approve/Reject.

cc. On the Approve/Reject dialog, in the Approval Status option list, click Approved. This item will become visible to all users.

dd. Click OK.

ee. Leave Internet Explorer open, you will use it later in the task.

2. Configuring Sort and Group and Conditional Formatting

Note: In this task you will group the items by age group and then format the approved items in a contrasting color.

a. Switch to SharePoint Designer that you left open earlier in the Exercise.

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

c. On the List View Tools ribbon, click the Options tab.

d. On the ribbon, in the Filter, Sort and Group section, click Sort and Group.

e. The Sort and Group dialog appears.

f. In the Sort Order list, click ID and click <<Remove

g. In the Available fields list, click Age Group and click Add>>

h. In the Group Properties section, check the Show group header checkbox.

i. Click OK. The design screen refreshes with the new grouping.

j. In the editor window, select the first data row by clicking and dragging across the row.

k. Click cursor to any column on the first content row

l. On the ribbon, in the Filter, Sort and Group group, click Conditional Formatting, choose Format Row. The Condition Criteria dialog appears.

m. In the Field Name dropdown list, select Approval Status.

n. In the Comparison dropdown list, select Equals.

o. In the Value dropdown list, select ‘Approved’.

p. Click Set Style.

q. The Modify Style dialog appears.

r. In the Category list, click Background.

s. In the Background-color box, type Green (or choose from the color palette).

t. Click OK.

u. Click Save in the Quick Launch toolbar.

v. Return to the Internet Explorer window you opened earlier and refresh the page. Leave SharePoint Designer and Internet Explorer open, you will return to them both in the nest exercise.

Page 9: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 7 of 11

Exercise 3 Creating InfoPath forms

Scenario In this exercise you will modify the edit and display forms used by the New Toy Ideas list. In previous versions of SharePoint the forms needed to be designed and deployed by developers and system administrators. SharePoint 2010 allows forms to be customized by Information Workers using InfoPath.

Tasks Detailed Steps

Complete the following task on:

demo2010a

1. Creating InfoPath forms

a. Switch to SharePoint Designer.

b. In the left hand navigation menu, click Lists and Libraries.

c. In the main window, in the List section, click New Toy Ideas. The new Toy Ideas overview page appears.

d. On the ribbon, in the List Settings tab, click Design Forms in InfoPath and choose Item.

e. InfoPath will open with a generated form.

f. Select the text Title, replace with the text Please describe your idea for a new toy.

g. Select the text Age Group, replace with the text Which age group is the new toy meant for?

h. Select the text Required Investment, replace with the text Are there any new investments Contoso needs to make?

i. Select the text Existing Product, replace with the text Are there existing vendors for this type of product?

j. Select the text Alternatives, replace with the text What are the current alternatives to this product?

k. Select the Title Textbox.

l. On the ribbon, on the Properties contextual tab, expand Shading and choose Light Orange.

m. Select the Age Group dropdown list.

n. On the ribbon, expand Shading and choose Light Orange.

o. Select the Required Investment control.

p. On the ribbon, click Control Properties.

q. The Text Box Properties dialog appears.

r. On the Text Box Properties dialog, click the Display tab.

s. Check the Multi-line checkbox and press OK.

t. Stretch the text box to be as multiline text box

u. Select the Alternatives control.

v. In the ribbon, in the Rules section, click Add Rule and select manage rules.

w. The Rules task pane appears.

x. On the Rules task pane, expand New and choose Formatting.

y. On the Rules task pane, in the Details for textbox, type Disable when no existing product.

z. In the Condition section, click None.

Page 10: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 8 of 11

Tasks Detailed Steps

aa. In the Condition dialog, Select Existing product, Is equal to, FALSE and click OK.

bb. On the Rules task pane, in the Formatting section, check the Disable this control checkbox.

cc. Click the top right close control on the Rules task pane to close it

dd. Click the File menu at the top left of the screen.

ee. Choose Quick Publish

ff. Your form is published to your SharePoint site.

gg. Switch to Internet Explorer.

hh. On the ribbon, in the Items tab, click New Item.

ii. The InfoPath form appears.

jj. Close SharePoint Designer and Internet Explorer.

Page 11: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 9 of 11

Exercise 4 Creating a Ribbon enabled Web Part

Scenario In this exercise you will create a Web Part which adds a command to the ribbon. The command will be enabled when the Web Part is selected.

Tasks Detailed Steps

Complete the following tasks on:

demo2010a

1. Creating the Visual Studio Solution

Note: In this exercise you will edit XML documents.

It is important to case all the characters correctly.

Editing in an incorrect location will result in the either the controls not being visible or result in runtime errors.

In this task you will create the Visual Studio project.

a. Click Start | All Programs | Microsoft Visual Studio 2010| Microsoft Visual Studio 2010.

b. On the Start page, in the Projects section, click New Project.

c. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010. Then click Empty SharePoint Project.

d. In the Name textbox, type MyRibbonButton

e. In the Location textbox, type C:\student\labs\04_SharePointUI.

f. Leave other fields with their default values and click OK. The SharePoint Customization Wizard appears.

g. In the What local site do you want to use for debugging? combo box, type http://intranet.contoso.com/sites/lab04

h. Click the Deploy as a farm solution option box.

i. Click Finish.

j. In the Solution Explorer window, right click Features and choose Add Feature

k. Right-click Feature1 and click View Designer.

l. In the Designer window, click the Scope dropdown list and click Site.

m. Right click MyRibbonButton in solution explorer and choose Add - New

n. In the Installed Templates section, in the SharePoint group, with 2010 selected, click Empty Element.

o. In the Name textbox, type RibbonActions.

p. Click Add.

2. Adding a <CustomAction> element

Note: In this task you will edit the Elements.xml document to prepare it for a custom action by adding the <CustomAction> element.

a. Ensure you are in the editor for the Elements.xml file of the RibbonActions

b. Place the cursor before the closing </Elements> tag in the file and press [Enter].

c. In the space you have just created, paste the following code:

<CustomAction Id="MyRibbonCustomization"

Location="CommandUI.Ribbon">

Page 12: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 10 of 11

Tasks Detailed Steps

</CustomAction>

3. Adding the Ribbon XML to the Custom Action element

Note: In this task you will create the Ribbon XML markup within the <CustomAction> element. You will:

Create a child element named <CommandUIExtension>.

Create a new group and add a button to this group.

Past the new code into the <CustomAction> emlement

Note Take special care to name the Template, TemplateAlias and Command attributes correctly as these reference elements outside of the XML markup.

a. Ensure you are in the editor for the Elements.xml file.

b. Place the cursor before the closing </CustomAction> tag in the file and press [Enter]

c. In the space you have just created, paste the following code:

<CommandUIExtension>

<CommandUIDefinitions>

<CommandUIDefinition

Location="Ribbon.WikiPageTab.Groups._children">

<Group Id="Ribbon.WikiPageTab.MyRibbonWebPart"

Sequence="20"

Description="Custom ribbon group"

Title="Ribbon WebPart"

Template="Ribbon.Templates.Flexible2">

<Controls

Id="Ribbon.WikiPageTab.MyRibbonWebPart.Controls">

<Button

Id="Ribbon.WikiPageTab.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>

d. 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. Locate the text Here comes another custom action and replace that line with the following xml element. The Location attribute needs to be set to Ribbon.WikiPageTab.Groups._children

Page 13: SharePoint 2010 User Interface Advancements - Danysoft · SharePoint 2010 User Interface Advancements ... Exercise 3 Creating InfoPath forms ... Conditional Formatting

SharePoint 2010 User Interface Advancements

Page 11 of 11

Tasks Detailed Steps

<!-- Here comes another custom action -->

<CommandUIDefinition

Location="Ribbon.WikiPageTab.Scaling._children">

<MaxSize

Id="Ribbon.WikiPageTab.MyRibbonWebPart.MaxSize" Sequence="20"

GroupId="Ribbon.WikiPageTab.MyRibbonWebPart"

Size="LargeLarge" />

</CommandUIDefinition>

<CommandUIDefinition

Location="Ribbon.WikiPageTab.Scaling._children">

<Scale

Id="Ribbon.WikiPageTab.MyRibbonWebPart.MediumMedium"

Sequence="30"

GroupId="Ribbon.WikiPageTab.MyRibbonWebPart"

Size="MediumMedium" />

</CommandUIDefinition>

<CommandUIDefinition

Location="Ribbon.WikiPageTab.Scaling._children">

<Scale

Id="Ribbon.WikiPageTab.MyRibbonWebPart.Popup" Sequence="50"

GroupId="Ribbon.WikiPageTab.MyRibbonWebPart" Size="Popup" />

</CommandUIDefinition>

e. 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.

<!-- Here comes the UI handler -->

<CommandUIHandlers>

<CommandUIHandler Command="demoAction"

CommandAction="javascript:alert('hello');" />

</CommandUIHandlers>

f. Let’s test the progress. Right click the MyRibbonButton project and choose Deploy

g. Switch to Internet Explorer side and browse to http://intranet.contoso.com/sites/lab04

h. Click Page tab in the ribbon

i. Notice the new button shown