Dear Tamara,
I have four columns Name, CollegeName, Picture, Bio. I want to be able to display this list grouped by college name in a two column format. The College Name would be displayed as an H2 on the page.
Then the picture would float to the left of Name & Bio, where Name was an H3.
Also with the two columns I would like for all the colleges with names A-J in the first column & K-Z in the second column.
It would look like the image I have attached to help you visualize it a little more.
Thanks for your help.
Amy
Assumptions:
We have access to SharePoint Designer 2010.
We have a list named College with the following columns:
|
Column |
Type |
Required |
Notes |
| First Name |
Single line of text |
|
|
| Last Name |
Single line of text |
X |
Title Column |
| College Of |
Choice |
|
Asheland
Big Sandy
Bluegrass
Hazard
Jefferson
Madisonville
Maysville |
| Bio |
Multiple lines of text |
|
Rich Text |
| Full Name |
Calculated |
|
=[Last Name]&”, “&[First Name] |
| Starts with* |
Calculated |
|
=LEFT([College of],1) |
| Image** |
Multiple lines of text |
|
Enhanced rich text |
Make sure you have some content. If you don’t have content it makes setting up the Data view just a little bit harder. Here’s my data:
Let’s build that Data View
1. Open the site in SharePoint Designer 2010. Site Actions > Edit in SharePoint Designer.
2. In the Navigation pane, click Site Pages.
3. In the New group of the Pages tab, click the Page drop-down and select ASPX.
NOTE: If you do not have the ability to Edit in Advanced Mode, create a Web Part Page instead of an ASPX page. Click Edit File after you have created and renamed your Web Part Page. Skip to step to continue with the instructions.
4. Right-click on your Untitled_1.aspx page and rename it CollegeContacts.aspx.
5. Press the Enter key to save your change.
6. Click on CollegeContacts.aspx to open the Settings Page for this page.
7. From the Pages tab, in the Edit group, click the Edit File drop-down and select Edit File in Advanced Mode.
8. Select the Insert tab.
9. From the Web Parts group of the Insert tab, select Web Part Zone.
NOTE: If Web Part Zone is unavailable, you do not have permissions to create a custom ASPX page. Create a Web Part Page instead.
10. From the Web Part Zone Tools ribbon, click the drop-down for Zone Layout and select Side-by-Side.
11. From the Data Views & Forms group, click the Data View drop-down and select Empty Data View.
12. In Web Part Zone 1, click Click here to select a data source.
13. Select College from the Data Sources Picker window and click OK.
14. From the Data Source Details Tool pane, click on Image and drag and drop it into the DataFormWebPart.
15. Click on an image, then press the Right Arrow key.
16. From the Data View Tools ribbon, select the Table tab.
17. From the Table tab, in the Row & Columns group, select Insert Right.
18. Click into the new Right Column.
19. From the Merge group of the Table tab, select Split Cells.
20. Select the Split into rows radio button.
21. Leave Number of rows: set to the default value 2.
22. Click OK.
23. Click and drag Full Name from the Data Source Details tool pane into the top cell of the Right Column.
24. Click and drag Bio from the Data Source Details tool pane into the bottom cell of the Right Column.
25. Your page should now look something like this:
26. Right-click in the Bio cell, from the drop-down select Format Item as > Rich Text.
27. In the Confirm window click Yes.
Congratulations! You have just created a Data View.