SharePoint: Displaying Data

Exclusive offer: get 50% off this eBook here
SharePoint Designer Tutorial: Working with SharePoint Websites

SharePoint Designer Tutorial: Working with SharePoint Websites — Save 50%

Get started with SharePoint Designer and learn to put together a business website with SharePoint with this book and eBook

$20.99    $10.50
by Mike Poole | August 2008 | .NET Microsoft

Once we have the data view firmly embedded in our page, it is a breeze to change the way the data looks and operates. In this article by Mike Poole, we will learn to apply nice formatting to data that is displayed on our page. We will learn to do this by making use of Cascading Style Sheets. We will also learn how to format our data automatically, depending on the data values (a technique known as conditional formatting). Then we will learn to filter and sort our data, use formulae to perform calculations, and how to split our data up into multiple pages.

Formatting the Data View

The default data view that we are presented with uses uninspiring black serif text on a white background. We can jazz up our data view using two different methods:

Direct Formatting

It is possible to apply formatting directly to a data view by highlighting the cells that we wish to format and then using the formatting tools. This can be a good option if we only want to format a single data view but is not the best approach if we would like to apply our formatting on a site-wide basis.

CSS Formatting

A more manageable way to apply formatting to our data views is to make the changes across the entire site by editing our style sheet.

When we click in the cell that has the Price heading in it, notice that a tag appears above it, telling us that this cell is referred to as th.ms-vh. That is to say that it is a table heading <th> element that is being rendered using the ms-vh class (which stands for Microsoft View Heading). Similarly, if we click in any of the cells further down the data view, we see that they are referred to as td.ms-vb (standing for Microsoft View Body). This reference is used to specify the format of the cells in our table that display the actual data.

In addition, there is an ms-alternating class that renders every other row with a different background color.

To allow us to edit our styles, we must first create a new blank style sheet, which we will call share.css:

  1. Select File | New | CSS.
  2. Go to File | Save.
  3. Give the file the name share.
  4. Save the file as CSS Files file type.
  5. Click Save.

The next step is to attach our style sheet to our site so that our pages can refer the styles that we will create within the style sheet:

  1. Open the Apply Styles task pane.
  2. Click Attach Style Sheet.
  3. Click Browse.
  4. Browse to share.css and click it.
  5. Click Open.
  6. Under Attach to, check All HTML pages.
  7. Click OK.
  8. Click Close on the information dialog.

SharePoint: Displaying Data

We will then make our style sheet ready to use by defining some styles. Adding the following code to the style sheet will change the ms-vh and ms-vb classes so that they are formatted in a more inspiring manner:

th.ms-vh, td.ms-vb {
font-family:gill sans, gill sans mt, arial, sans-serif;
}
th.ms-vh {
border-width:0px;
background-color:#903;
color:#FFF;
}
td.ms-vb {
color:#903;
border-top-width:0px;
border-left-width:0px;
border-right-width:0px;
border-bottom-width:1px;
border-bottom-style:dashed;
font-style:italic;
}
ourtable{
border-width:0px;
}

Notice how the first line of our style sheet refers both ms-vh and ms-vb, with a comma separating them. This allows us to specify the font face in one place rather than needing to enter it separately into each class. Grouping styles in this way not only saves time when creating our site but also makes the site more easily maintainable when we and other people make changes in the future.

If you are eagle-eyed, you will also notice that the color references (e.g. #903) only have three digits rather than six. This is possible when a color has repeating numbers (e.g. 99 or 00), allowing us to condense #990033 to #903.

If you are not familiar with using CSS, do not be put off using it because it is easy to learn. We also get a helping hand, because when we type code into the style sheet, SharePoint Designer uses IntelliSense to suggest code we may like to use.

Once we have saved our style sheet, SharePoint Designer instantly reflects changes to the style sheet in the Design view of products.aspx.

When creating our td.ms-vb style, we specified that dashed lines should appear below each cell. By default, SharePoint Designer has a default value of 0 for our borders, meaning that they will not display. In order for the dotted lines to appear, we will need to make sure that our table has a border value of 1. We can do this by highlighting the whole table and typing 1 into the border attribute in our Tag Properties task pane. Selecting ourtable as the class for the table in this task pane will remove the solid border, allowing our dashed lines to be visible in all their glory.

SharePoint: Displaying Data

We can take our formatting even further and use CSS to format the delete and insert text links so they look like buttons, by giving them a border and some padding. We can also give our "buttons" a different background color whenever the cursor is positioned over them.

SharePoint Designer Tutorial: Working with SharePoint Websites Get started with SharePoint Designer and learn to put together a business website with SharePoint with this book and eBook
Published: July 2008
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

To add this additional formatting, we will place the following code into ourstyle sheet:

a:link, a:visited, a:active {
color:#903;
padding-top:1px;
padding-bottom:1px;
border-color:#903;
border-width:1px;
border-style:solid;
text-decoration:none;
}
a:hover {
background-color:#EEE;
}

A word of warning about specifying these styles for your links—they will apply to all links in the share site (and it is unlikely that you would want to do that). It would be better for us to create a new class (for example, A.funkyButton) that we can use whenever we want to render our links to look like buttons.

SharePoint: Displaying Data

Conditional Formatting

We can make our data views more meaningful by setting up our data view to automatically use different styles in response to differing data values. This technique is known as conditional formatting.

Applying conditional formatting in SharePoint Designer requires us to use the XPath language. Don't worry though because SharePoint Designer makes this easy for us.

We would like to apply some conditional formatting to our data view so that it shows a differently formatted price for all wines that have a low number in stock.

We start this process by right-clicking on our data view and selecting Conditional Formatting from the shortcut menu. This will open up the Conditional Formatting task pane.

SharePoint: Displaying Data

We then click on the data value that we would like to apply our conditional formatting to. We will select any of the prices in the data form. Below, I have selected the price of the most expensive wine, Chateau le Gay.

SharePoint: Displaying Data

We then click the Create button in our Conditional Formatting task pane and select Apply Formatting.

SharePoint: Displaying Data

Doing so presents us with the Condition Criteria dialog box. This dialog is used to specify the conditions for our formatting. To begin using the dialog, we click on the line that says Click here to add a new clause…. We would like our Price to be formatted differently if the number of products in stock is less than 10, and so select the options in the diagram below and then click OK:

SharePoint: Displaying Data

Now that we have chosen our criteria, the next screen allows us to specify the style that will be automatically applied to our Price when the condition is met. In the Font category, we will select a font-weight of bold, and in the Background category, we will select a nice bright background-color of yellow (#FFFF00). This vivid style will ensure that the information stands out to the users of the site.

To modify the condition at a later date, we can click on the condition in our Conditional Formatting task pane and select Edit condition… from thedrop-down list.

SharePoint: Displaying Data

It is also worth noting that it is also possible to use conditional formatting to change the visibility of the data so that it can be displayed or hidden, depending on the value. This is useful to show or hide images. For example, if the type of wine is red, show a red bottle. If white, show a white bottle.

Formatting Numbers

It is worth pointing out that it is very easy to format numbers in our data view so that they display as we would like. We can display our numbers as percentages or as a currency and specify the number of decimal places that the number should have. We can also control the 1000 separator so that commas appear in the correct places to make large numbers more easily readable.

We will take the opportunity to display our prices with a dollar sign in front of them by doing the following:

  1. Right-click on one of the prices in our data view.
  2. Select Format Item as.
  3. Select Currency.
  4. This will open the Format Number dialog. Ensure that the Symbol is set to $.
  5. Click OK.

Notice that we only needed to select one record and that all prices were formatted in the same manner.

Filtering Data

It is possible to filter our data view so that only certain records are displayed. We will use this functionality to display only products with a price of over $15. This feature works in a similar manner to the conditional formatting (albeit there is no formatting to be applied). To filter our data view, we follow these steps:

  1. Right-click on our data view.
  2. Select Show Common Control Tasks.
  3. Select Filter: from the list.
  4. Click on the first row to add our new clause.
  5. Specify the following values:
    • Field Name = Price (Number)
    • Comparison = Greater Than
    • Value = 15
  6. Click OK.

SharePoint: Displaying Data

You will notice that our data view now only displays the products that are priced over $15.

To remove the filtering, we follow the first three steps so that the Filter Criteria dialog appears again. We remove our criteria by right-clicking on the black arrow to the left of the criteria and selecting Remove. Finally, we click OK.

SharePoint Designer Tutorial: Working with SharePoint Websites Get started with SharePoint Designer and learn to put together a business website with SharePoint with this book and eBook
Published: July 2008
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

Using Formulae

When using SharePoint Designer, it should be remembered that it is a fully-fledged member of the Microsoft Office suite of products. As such, we can use it to perform powerful calculations that you would expect other products in the suite (such as Excel) to perform.

We will add a new column to our data view that will display the total value of the wine the Wine Company has in stock. We begin this process by clicking on our data view to select it and then going to Data View | Edit Columns….

The Edit Columns dialog allows us to select the fields in our data set that we would like to include in our data view. If we would like to add columns to or remove columns from our data view, this is the dialog that we would use.

The dialog also allows us to add a formula column. We will do this now by clicking on Add Formula Column… and then clicking on the Add >> button.

SharePoint: Displaying Data

The XPath Expression Builder then appears. If you have previously created formulae in Microsoft Excel or Microsoft Access, then you will be familiar with the principle behind creating formulae using a builder like this.

We can either type our field names into the pane titled Edit the XPath expression or drag them across from the field list in the left pane. We can also use my personal favorite method and double-click them across. Whenever we type a space into the expression pane, IntelliSense suggests appropriate code items including field names and arithmetic operators (such as +, -, /, and *).

We will use the following simple expression:

Price * InStock

The following image shows the Expression Builder in use:

SharePoint: Displaying Data

Once we click the OK button, SharePoint Designer adds our formula to our Displayed Columns list as Formula 1 (important note: this has nothing to do with fast racing cars!). When we click the next OK button on the Edit Columns dialog, our formula is added as a new column on the right of our data view. You may wish to take a moment to resize the width of your data view to 450 pixels and to rename the last column Total Value.

SharePoint: Displaying Data

Sorting Data

Hopefully, by now you are impressed with how easy it is to display data using SharePoint Designer. When it comes to ordering our data, you will continue tobe impressed.

We would like to sort our wines so that the cheapest wines appear first and the more costly bottles appear last. To do this, we use the sort feature:

  1. Right-click on our data view.
  2. Select Show Common Control Tasks.
  3. Select Sort and Group: from the list.
  4. Click on the Price(Number) field and click Add>>.
  5. Click on the ProductName field and click Add>>.
  6. Click OK.

SharePoint: Displaying Data

It is worth noting that we can also group similar items together within the data view. For example, if our data specified whether the wine was red, white, or rosé, then we would be able to group the data by type.

Allowing Users to Sort the Data

It is easy for us to give users the ability to sort the records in the data view. We can enable this sorting like so:

  1. Click on our data view to select it.
  2. Go to Data View | Change Layout.
  3. Click on the General tab.
  4. Check the Enable sorting and filtering on column headers checkbox.
  5. Click OK.

Once we have saved the page, users will be able to click on the column headings to sort the records by alphabetical order (or numerical order, provided that the data in that column are numerical values).

Paging

Although our example data only contains five different products, there are a huge number of wine products in the market (there are about 6,000 wineries in the United States alone). Naturally, we would not want to display tens of thousands of products all on one page. By using paging, we can specify the maximum number of records that will be displayed in our data view at one time. Depending on the options we have specified, users may be able to click forwards and backwards through the data view, displaying the next records each time they do so.

  1. Right-click on our data view.
  2. Select Show Common Control Tasks.
  3. Select Paging: from the list.
  4. Click on the Display items in sets of this size: radio button.
  5. Enter 4 into the field.
  6. Click OK.

SharePoint: Displaying Data

Summary

In this article, we discovered how easy it is to display information from data sources in our SharePoint site in an attractive and useful manner.

About the Author :


Mike Poole

Mike Poole owns and runs 2F3 Internet, which he established in 1997 to specialize in providing Microsoft-based web development and IT training.

He has received a much acclaim for his web development from many satisfied customers including the BBC, British Medical Association, Microsoft, and six different agencies of the Scottish Government. His work has won him awards from Scottish Enterprise (winner of best e-commerce site) and Microsoft (IM bot competition finalist and winner in both UK and international phases).

Mike has also written and taught courses in Microsoft Excel and Web Development at Edinburgh University.

His current technological interests include creating highly efficient/scalable database solutions and integrating online solutions into virtual environments.

Books From Packt

Beginners Guide to SQL Server Integration Services Using Visual Studio 2005
Beginners Guide to SQL Server Integration Services Using Visual Studio 2005

BlackBerry Enterprise Server for Microsoft® Exchange
BlackBerry Enterprise Server for Microsoft® Exchange

LINQ Quickly
LINQ Quickly

ASP.NET Data Presentation Controls Essentials
ASP.NET Data Presentation Controls Essentials

Programming Windows Workflow Foundation: Practical WF Techniques and Examples using XAML and C#
Programming Windows Workflow Foundation: Practical WF Techniques and Examples using XAML and C#

Blender 3D Architecture, Buildings, and Scenery
Blender 3D Architecture, Buildings, and Scenery

Programming Microsoft® Dynamics™ NAV
Programming Microsoft® Dynamics™ NAV

ImageMagick Tricks
ImageMagick Tricks

 


 

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
D
z
P
Y
G
y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software