DVWP Hyperlinks

When it is time to create a DVWP, it can be created in a temporary location. This allows you to make changes and mistakes without affecting any web pages that are currently in use.

This first series of steps shows you how to create the web part page library, which can be used as the general location where DVWPs are developed and tested.

1. On your site, click Site Actions and choose New Document Library. This will be the location for creating your temporary web part pages.

2. In the Name box, type Web Part Pages.

3. In the Navigation section, select No so that this library is not displayed in the QuickLaunch. The simple reason is that this location is for temporary pages, and end users do not need to be confused by seeing an extra link in their navigation.

4. For the Document Template, choose Web Part page in the drop-down box.

5. Click Create.

   Note

   In addition to hiding the library from the QuickLaunch, you may want to change the permissions on this web part library so that only you can see your works in progress.

6. In the new Web Part Pages library, on the Documents tab in the ribbon, click New Document.

7. As shown in Figure 5-11, name the new file TestListDVWP and click Create.

   

   Figure 5-11. Create a new web part page

8. Click Stop Editing.

9. Repeat the last two steps to create another file called TestLibraryDVWP.aspx.

10. Click Stop Editing and close the browser.

Now that the two web part pages have been created, the web parts can be created on them. Remember that since this location is temporary, these web part pages can be deleted after the .webpart files have been put in production.

SharePoint List—DVWP

First, the Contacts list will be used as the basis of a new DVWP. Inherently, a DVWP will never automatically have any hyperlinks included, so it is important to understand how to create a hyperlink. If there is no link, people will be able to see your list of information, but will not be able to click on anything to see more details.

1. Open your Chapter 5 Test site in SharePoint Designer 2010.

2. In the list of Site Objects on the left, click the little pin (shown in Figure 5-12) next to All Files to expand it.

   

   Figure 5-12. View the site file structure

3. Click the + (plus) next to the new Web Part Pages library to expand it.

4. Double-click TestListDVWP.aspx.

5. In the Customization section in the middle of the page, click Edit file.

6. Put your cursor in one of the blue rectangles on the page. These are the web part zones. Click the Insert tab in the ribbon.

7. Click Empty Data View, as shown in Figure 5-13.

   

   Figure 5-13. Insert a DVWP

8. As shown in Figure 5-14, click the text that says Click here to select a data source.

   

   Figure 5-14. Select a data source

9. Select the Contacts list and click OK.

10. In the Data Source Details pane on the right, select the Full Name field. Hold down the Ctrl button and select the Email Address, Job Title, and Company fields, in that order.

11. Click the Insert Selected Fields As button at the top of the Data Source Details pane and choose Multiple Item View.

12. Click the Save button at the top left. Use the F12 shortcut key to quickly preview your page in the browser.

Now that this simple Contacts list has been inserted on the page, there are a few things to notice about this list compared to the default List view in SharePoint. There is no hyperlink to open or edit each contact, and the email address for each contact is not a hyperlink.

The next set of steps will teach you how to structure and create hyperlinks on this new DVWP.

1. In SharePoint Designer, click to select the first person’s full name in the list of people.

2. On the Insert tab in the ribbon, click Hyperlink. Another way to accomplish the same thing is to right-click the first person’s full name, choose Format As, and choose Hyperlink.

3. Click the fx button next to the Address box, shown in Figure 5-15.

   

   Figure 5-15. Insert a hyperlink

4. Check the box next to Show data values. With the data values shown, the screen will look similar to Figure 5-16.

   

   Figure 5-16. More fields

5. Scroll down and select the Path field. Click OK.

6. Put the cursor after the last } in the Address box.

7. Type the following:

   /DispForm.aspx?ID=

8. Click the fx button again. This time, select the ID field and click OK.

9. When the new hyperlink looks like Figure 5-17, click OK. Click the Save button at the top left.

   

   Figure 5-17. The completed hyperlink

The link to the display form is now complete! Now it’s time to replicate the functionality of the Edit column that exists in regular List views. This entails adding a new column and inserting the Edit icon, then creating the hyperlink.

1. Put the cursor in the Full Name column of the DVWP

2. On the Table tab in the ribbon, click the Insert Left button.

3. In the header row of the new column, type the word Edit.

4. Put the cursor in the new column, in the second row in the Contact List table. On the Insert tab in the ribbon, click the Picture button.

5. For the filename, type the following (with your own site URL before the _): http://portal.contoso.com/_layouts/images/edititem.gif.

   Note

   The SharePoint Edit icon is being used here, but this can be any image at all, as long as you have the image URL.

6. Click the Open button.

7. On the Accessibility Properties dialog that pops up, type Edit Item in the Alternate Text box. Click OK.

8. At the bottom of the screen, click the Split button to see a partial Code view.

9. In the bottom half of the split screen, click to select the icon that you just inserted. In the Code view at the top, remove the “..” from the URL so that it looks like Figure 5-18.

   

   Figure 5-18. Edit icon relative URL

10. At the bottom of the screen, click the Design button so that the page is not in Split mode anymore.

11. Next, the hyperlink on the Full Name field will be copied to create a similar hyperlink for the Edit button. Click to select the first person’s full name in the Full Name column. On the Insert tab, click Hyperlink. Select all of the text in the Address box and copy it to the clipboard. Click Cancel.

12. Click to select the Edit icon in the far left column. On the Insert tab in the ribbon, click Hyperlink.

13. In the Address box, paste the contents of the clipboard. Edit the part of the hyperlink to say EditForm.aspx instead of DispForm.aspx, as shown in Figure 5-19. Click OK.

    

    Figure 5-19. The edit form hyperlink

14. Click the Save button at the top left of SharePoint Designer.

Try out your DVWP in the browser. Notice that you can click the Edit button to get to the item’s Edit form.

In the next set of steps, the Email column will be modified so that it is a hyperlink to create a new email message.

1. In the DVWP, click to select the first person’s email address in the Email Address column. On the Insert tab in the ribbon, click Hyperlink.

2. On the Insert Hyperlink screen, put your cursor in the Address box and type the following: mailto:

3. Use the fx button next to the address box to select the Email Address field. Click OK.

4. When the Address box looks like Figure 5-20 on the Insert Hyperlink screen, click OK.

   

   Figure 5-20. Insert email address hyperlink

5. Click the Save button at the top left. Press F12 on the keyboard to see a quick preview of this page in the browser.

Try each hyperlink that you have created. The final product is shown in Figure 5-21. Click the Edit icon to get to the Edit page, click the name of each contact to display the details about that contact, and click any contact’s email address to quickly compose an email message to that person.

Figure 5-21. Contacts list with hyperlinks

There are some additional tweaks that can make this DVWP a bit more useful. First, the column headings can be set up to be filterable and sortable.

1. On the TestListDVWP.aspx page in SharePoint Designer, put your cursor inside of the Contact list that is on the page. This is so that the DVWP’s contextual ribbon will show all of the needed options at the top of the screen.

2. On the Design tab in the ribbon, check the box next to Sort & Filter on Headers.

3. The first column (called “Edit”) will not look quite right. Put your cursor in the cell that says “Edit&nbsp”, and click the button at the bottom of the page that says <th.ms-vh>, as shown in Figure 5-22.

   

   Figure 5-22. The Edit column

4. Press Delete on the keyboard and type the word Edit again. This is the easiest way to make the correction without having to modify a bunch of code.

5. Save the page again, go back to the browser, and refresh the page.

When you save the page and preview it in the browser, notice that each of the column headings can now be sorted and filtered, just as with a regular SharePoint List view.

The next modification will be to mimic the shaded style of formatting in a List view. The row background will be set up so that every other row is slightly shaded—this will make it easier for viewers to discern one row’s data from the next.

1. In the DVWP in SharePoint Designer, put the cursor in the first person’s row. On the Table tab in the ribbon, click the Select button and choose Select Row. With the row selected, the page will look like Figure 5-23.

   

   Figure 5-23. Select a row

2. On the Options tab in the ribbon, click the Conditional Formatting button and choose Format Row.

3. For the Field Name, choose [Row Number] and, in the Comparison column, choose Is Odd.

4. Click the Set Style button, shown in Figure 5-24.

   

   Figure 5-24. Row conditional formatting

5. On the Modify Style screen, select Background on the left. In the background-color drop-down box, choose a light gray color, as shown in Figure 5-25. Click OK.

   

   Figure 5-25. Set conditional formatting style

6. Click the Save button at the top left corner.

When you preview the page in the browser again, notice that the rows alternate color. The Contacts DVWP is done!

Moving the Web Part

Now that the DVWP has been finalized and tested on the temporary web part page, it can be moved to your home page or wherever its final resting place will be. Again, this method of using a temporary web part page allows you to createe, modify, and test a DVWP in a separate location. The best practice is that each time the web part needs to be modified, it will be modified in that temporary page first, tested, and then moved to the home page again. This method is a bit time-consuming, but it’s worth it when the web part blows up and the only thing that is broken is the temporary web part page, and not the home page.

1. In SharePoint Designer, with the cursor in your DVWP, click the Web Part tab in the ribbon.

2. In the Save Web Part section, click To File.

3. Pick a location on your computer (remember the location), and name the file ContactsDVWP.webpart. Click Save.

4. Navigate to the home page of the Chapter 5 Test site where you created the web part. Click Site Actions and choose Edit Page.

5. Click the Add a Web Part button.

   Note

   The interface for inserting web parts will be slightly different depending on whether the page is a web part page, a wiki page, or a publishing page. Since this site was created at the beginning of the chapter using the Document Workspace template, the home page is a web part page.

6. Click the Upload a Web Part button (see Figure 5-26).

   

   Figure 5-26. The Upload a Web Part button

7. Click the Browse button and navigate to the location on your computer where the .webpart file was saved in step 3.

8. Click the Open button.

9. Click the Upload button (see Figure 5-27).

   

   Figure 5-27. Upload a web part

10. Click Add a Web Part yet again.

11. In the Imported Web Parts category (shown in Figure 5-28), click to select the Contacts web part.

    

    Figure 5-28. The Imported Web Parts category

12. Click the Add button on the right side of the screen.

13. Stop editing the page, and save if applicable. Notice that wiki pages and publishing pages have Save buttons, but web part pages do not.

Now you should see your custom Contacts web part on the home page, just like the one in Figure 5-29!

Figure 5-29. The final Contacts web part

Note

For Office 365 users: In SharePoint Online with Office 365, you will not see that Upload a Web Part button as in Figure 5-26. As of the writing of this book, the version of SharePoint online does not offer the ability to import a web part. Here is the trick: on your home page, add ?ToolPaneView=2 to the end of the URL. In the pane on the right, click the blue word Browse and change it to Import. Then you’ll have the ability to browse to the file, upload it, and add it to the page.

Document Library—DVWP

Since library hyperlinks are structured differently in libraries, there is a slightly different set of instructions for creating a link to open a document from a DVWP that has been created for a document library.

1. Open your site in SharePoint Designer 2010, and in the list of Site Objects on the left, click the little pin next to All Files to expand it.

2. Click the + (plus) next to the new Web Part Pages library to expand it.

3. Double-click TestLibraryDVWP.aspx. Click Edit file.

4. Put your cursor in one of the web part zones. Click the Insert tab in the ribbon.

5. Click Empty Data View, then click Click here to select a data source.

6. Select the Project Files library and click OK.

7. In the Data Source Details pane on the right, select the FileLeafRef.Name field. Click Insert Selected Fields As and choose Multiple Item View.

8. On the Options tab, click Add/Remove Columns. Select the appropriate columns so that the screen looks like Figure 5-30. Click OK.

   

   Figure 5-30. Add library columns

9. The Icon column will contain the name of the file type and, in a later step, we will change it to an icon.

10. The name of the file needs to become a link to open that file. Click to select the name of the first file in your library. On the Insert tab in the ribbon, click the Hyperlink button.

11. Next to the Address box, click the fx button. Check the box to Show data values.

12. Click to select the field called FileRef.urlencodeasurl, as shown in Figure 5-31. Click OK.

    

    Figure 5-31. Select the file URL field

13. Click OK on the Insert Hyperlink screen (shown in Figure 5-32).

    

    Figure 5-32. The Insert Hyperlink screen

14. Click the Save button at the top left corner, then use the F12 shortcut key to preview in the browser. Click any filename in the library to open that file.

15. Now that the filename hyperlink works, you can set up the file icon. In the DocIcon column, select the file type for the first document in the list. Click the Split button at the bottom of the screen to see the code.

16. When you select the file type value, the program should highlight the code for the item selected. If it does not, click the Design tab and click the Customize XSLT button, shown in Figure 5-33. Choose Customize Item.

    

    Figure 5-33. Customize the XSLT

17. In the code, select the DocIcon line, which is row 171 in Figure 5-34.

    

    Figure 5-34. The DocIcon field

18. Paste the following code in place of the selected code:

    <img src="{concat('/_layouts/images/ic',@DocIcon,'.png')}" width="16" height="16" 
     alt="{@FileLeafRef}"></img>

19. Click the Save button at the top left, and see each office file icon displayed in the left column, as shown in Figure 5-35. Preview your page in the browser.

    

    Figure 5-35. The DocIcon Image

Speaking of hyperlinks, it is often requested that hyperlinks to common items are removed, such as people’s names and lookup items. Sometimes it is a bit confusing to site visitors to see several different hyperlinks to choose from in a row item. This walkthrough will show you how to edit the Modified By column so that it is not a hyperlink.

1. Open the TestLibraryDVWP.aspx file in SharePoint Designer and make sure you are using Split view.

2. Click to select the first person’s name in the Modified By column in the library.

3. In Code view, change the Editor field to say Editor.title (see line 175 in Figure 5-36).

   

   Figure 5-36. Remove the person hyperlink

4. Quickly clean up the column titles by simply typing new names. Change DocIcon to Type and change FileLeafRef.Name to Name.

5. Save the page and preview it in the browser.

If you have Office Web Apps installed on your SharePoint server, you can create a hyperlink that will open the file directly in the browser instead of with the client application. Here are the steps to add an Office Web Apps hyperlink. In this example, the file’s icon will be used as the link, but feel free to use text in a new column, or just use a different image.

1. Open the TestLibraryDVWP.aspx file in SharePoint Designer.

2. Select the office icon in the far left column (Type) of the first document.

3. On the Insert tab, click the Hyperlink button.

4. Next to the Address box, click the fx button.

5. Select the field called serverurl.progid (as shown in Figure 5-37) and click OK.

   Note

   The URL looks correct, except that it has a number 1 at the beginning. This is the URL we need so that a substring function will get the portion of the field after the 1.

   

   Figure 5-37. The serverurl.progid field

6. On the Insert Hyperlink screen, modify the address as shown in Figure 5-38. Click OK.

   

   Figure 5-38. The Office Web Apps hyperlink

7. Save the page. Notice that now when you open this page in the browser and click the icon next to any file, that file will open in the browser.

Office Web Apps are great, because it doesn’t matter if the end users have the Office Suite of software installed on their computers.

If you would like to place this DVWP on another page on your site, follow the instructions in Moving the Web Part.