Configure Data-Viewer Web Part to Make it Easy to Use

Configure Data-Viewer Web Part to Make it Easy to Use

SeeData.png

Issue Solution
TOO MANY COLUMNS IN VIEW
Columns2display.jpg

COLUMN SELECTION

Configure the web part to allow users to add and remove columns

And now Maggie can select columns to show just the data that she needs to see.
selectCol.png

TOO MUCH DATA
FilterData.jpg

FILTERED DATA VIEW
Configure the web part to allow filtering.

Now Joe will be able to filter the data in whatever way he’d like.

Filter.jpg

DATA IS NOT ORGANIZED

GroupBy.jpg

GROUP DATA BY COLUMN

Configure the web part to enable the grouping bar to display at the top of the Data Viewer display.

Now Paul can create the view to show in groups for each department.

Grouping.jpg

TOO MANY COLUMNS TO EDIT

EditInDataSheet.jpg

USE INLINE EDITING

Configure the web part to allow inline editing

Rather than opening a form with a lot of columns to edit, Genie can edit just columns she needs to.

Inline.jpg

Use a SharePoint List or Library as the Data-Viewer data source

Use a SharePoint List or Library as the Data-Viewer data source

Configuration Infographic Overview of Configuration Screens

Regardless which on-premise version of SharePoint you use, Data Viewer lets you easily manage how data will be displayed, and how users will be able to interact with that data. Image of different SharePoint logos

When working with Data-Viewer keep in mind:

  • SharePoint List or Library is the default Data Source type for Data-Viewer

  • You can display information from a second SharePoint List and Library using the Nested Data configuration options

  • If you want to display content from multiple Lists or Libraries, use Bamboo List Rollup as the data source.

To configure Data-Viewer to display data from a SharePoint list or Library:

NOTE: The following steps require you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

Action Result
1.

Click the SharePoint List and Library button under Data Source Settings in the navigation tool pane. Image of the Navigation Pane with the SharePoint list and library button available. All other data source buttons are grayed out

NOTE:You will only be able to select this button if SharePoint Lists and Libraries is selected as the Data Source Type

The SharePoint List and Library Settings screen will be displayed on the right side of the configuration pop-up and allows you to scroll through the configuration options associated with the data source.
2.

Enter the URL to the site that contains the list or library to be displayed in Data-Viewer, then click the View lists and Libraries button.

Both absolute paths (http:// server name/site ) or relative paths(./Site/) can be used for the site URL. Bamboo recommends using relative paths if:

  • Multiple Alternative Access Mappings are being used
  • The Web part will be included in a site template

Image of relative URL in the SharePoint Site URL field and the View lists and libraries button

The available lists and libraries on that site will be listed in SharePoint List or Library drop-down selector.

Icon-WarningIMPORTANT: Although you can enter a URL for another Site Collection, be careful about going across Web Applications. You may have issues if the other web app has a significantly different security setup.

3. Select the desired list or library from the SharePoint List or Library drop down. The Description and List or Library Type will be shown for the selected list.
Image of the SharePoint list or library drop down ,and Column Display Settings button
4.

Click the Columns Display Settings button to specify:

  • Which columns to display (required)
  • Column Alias, or alternate header text
  • Column position
  • Column Width
  • Text Justification

Columns Display Settings button

NOTES:
1. You must select at least one column to display in the Web Part.
2. For information on how to add new columns to an existing Data View click here

5.

You have now configured the web part to use a SharePoint list or library as the data source.

Continue to scroll down the screen to optionally configure how displayed data will be organized including specifying:

  • Sorting

  • Grouping

  • Filtering

Configuration Infographic Overview of Configuration Screens

Use a SQL Server Table or View as the Data-Viewer Data Source

Use a SQL Server Table or View as the Data-Viewer Data Source

Configuration Infographic Overview of Configuration Screens

SQLServer.jpgThe Data-Viewer Web Part can connect to Microsoft SQL Server 2005 or SQL Server 2008.

To select and configure a SQL Server data source, follow these steps:

Action Result
1.

Click the SQL Server Table or View button under Data Source Settings > Data Source Type in the navigation tool pane.

SQL left.png

NOTE: You will only be able to select this button if SQL Server Table or View is selected as the Data Source Type. Otherwise, this button will be disabled/grayed.

The SQL Server Table or View screen will be displayed and allows you to scroll through the configuration options associated with that type of data source.

SQL top.png
2.

SQL top with data.pngEnter the Server Name for the SQL Server. Then choose an Authentication Method. Options are:

  • Current Login Account This is an appropriate selection if the current login account will have access always.

NOTE: The current login is the user visiting the page where the Data-Viewer resides. That is why no username and password is entered when you choose this option.

  • Custom Login Account. This is the appropriate selection if the SQL Server is remote, which is generally the case if you are running SharePoint 2010 or SharePoint 2013. If you choose this option, specify either a SQL Server Account or a Windows Account. Enter the Domain, Account Name, and Password. When ready, click Load Databases. If the connection is successful, the available databases will be listed in the Select a SQL Server database drop down.

Icon-WarningIMPORTANT: In order to use Windows Authentication, you must have enabled Windows Authentication as the Authentication Mode in SQL Server.

3. Select the desired database from the Select a SQL Server database selection list. The tables and views available in that database will be loaded into the Select a Table or View to Display list.
4. Select the desired table or view from the SQL Server table or view drop down. The columns included in the table or view will be loaded so you can choose which to include in the display.
5. Configure the Data Display Options.

Configuration Infographic Overview of Configuration Screens

Sort Order

Sort Order

Sort Order is optional. You can sort data displayed in the Data-Viewer Web Part by up to two columns.

Step Action Result
1. Select a column and choose whether to sort in ascending or descending order.

ConfigurationSort37.png

NOTE: You can sort by any column in the data source, not just by the columns displayed.

Data-Viewer skins

Data-Viewer skins

Configuration Infographic Return to Look and Feel Settings

Look and Feel iconA variety of skins are available when configuring Look and Feel settings to change the appearance of the Data-Viewer display.

Skin options

Skin SelectorTo select a skin, click the Look and Feel button under Preferences, then pick the desired skin from the available options.

NOTE:
This requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

Skin Name Sample Display
Inherit Site Theme

NOTE: No image to show since this selection should look like the site where you put the web part.

Default DVWP Skin 2013 - Default.png
Black DVWP Skin 2013 - Black.png
Forest DVWP Skin 2013 - Forest.png
Hay DVWP Skin 2013 - Hay.png
Outlook DVWP Skin 2013 - Outlook.png
Office2010Black DVWP Skin 2013 - Office2010black.png
Office2010Blue DVWP Skin 2013 - Office2010blue.png
Office2010Silver DVWP Skin 2013 - Office2010silver.png
Simple DVWP Skin 2013 - Simple.png
Sitefinity DVWP Skin 2013 - Sitefinity.png
Sunset DVWP Skin 2013 - Sunset.png
Telerik DVWP Skin 2013 - Telerik.png
Transparent DVWP Skin 2013 - Transparent.png
Vista DVWP Skin 2013 - Vista.png
Web20 DVWP Skin 2013 - Web20.png
WebBlue DVWP Skin 2013 - WebBlue.png
Windows7 DVWP Skin 2013 - Windows7.png

Configuration Infographic Return to Look and Feel Settings

Configure Data-Viewer to display Nested data

Configure Data-Viewer to display Nested data

Configuration Infographic Overview of Configuration Screens

Infographic Icon
Nested Data Settings allow you to display additional detail for items of the primary (parent) data source.

When working with Nested Data keep in mind:

  • Nested data is linked to a parent item by a column or field with the same value as a similar field in the parent item.

  • Linked nested data is displayed below its parent item, and nested data can have a one-to-one or many-to-one relationship with parent data.

  • The nested data must be the same data source type, and must also reside in the same location as the parent:

    • If the parent data source is a SharePoint list, the nested data must be from a list in the same site.
    • Nested data from a SQL Server data source must be from a table or view in the same database as the parent data source.
    • If the parent data source is a Bamboo List Rollup, the nested data must be from a schema in the same site or a Data View on the same page.

To configure a nested data source:

NOTE: The following steps require you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

Step Action Result
1. Click the Nested Data button under Data Analysis in the navigation tool pane. Nested button in navigation pane The Nested Data Settings screen will be displayed and allow you to scroll through the configuration options associated with the data source.
2. Select the Display Nested Data option to activate the settings page.
HW37_SelectNested.png
3

Select the Nested Data source from the drop-down menu. Nested data selector

Icon-WarningIMPORTANT:The nested content must be of the same Data type, and reside on the same site as the parent data source.

Depending on the Data Source Type selected for the Parent list, this screen may look a little different.Nested Data - LR crop.png
4. Select a column in each data source that links the two sources.

Nested column mapping

  • The values in the nested data source column should have one match in the parent data source column you select.

  • The two columns must be the same data type.

5.

Click the Columns Display Settings button to specify:

  • Which columns to display (required)
  • Column Alias, or alternate header text
  • Column position
  • Column Width
  • Text Justification
Columns Display Settings button
NOTES:
1. You must select at least one column to display in the Web Part.
2. For information on how to add new columns to an existing Data View click here
5.

You have now configured the web part to display Nested Data

Continue to scroll down the screen to optionally configure additional data display settings including:

  • Sorting

  • Grouping

  • Filtering

Configuration Infographic Overview of Configuration Screens

Use Business Connectivity Services (BCS) as the Data-Viewer data source

Use Business Connectivity Services (BCS) as the Data-Viewer data source

Configuration Infographic Overview of Configuration Screens

BCS.png.Microsoft Business Connectivity Services is one of the four available data sources for Data-Viewer

To configure Data-Viewer to connect to a BCS data source:

NOTE: The following steps require you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

Step Action Result
1.

Click the Business Connectivity Services button under Data Source Settings in the navigation tool pane.Image of the Navigation Pane with the Business Connectivity Services button available. All other data source buttons are grayed out

NOTE:You will only be able to select this button if Business Connectivity Services is selected as the Data Source Type

The Business Connectivity Service Settings screen will be displayed and allows you to scroll through the configuration options associated with the data source.
2. Enter the name of the application you want to connect to in the Microsoft BCS Application Name box.
BCS setup.png

Click the Check if External Content Type Exists icon (bcs icon1.png) to verify the data source.

To search for available applications, click the Select External Content Type icon (bcs icon2.png).

Icon-Tip Hover over the icon to see which is which. A tooltip will popup describing the purpose of the icon.

3*

Click the Columns Display Settings button to specify:

  • Which columns to display (required)
  • Column Alias, or alternate header text
  • Column position
  • Column Width
  • Text Justification

Columns Display Settings button

NOTES:
1. You must select at least one column to display in the Web Part.
2. For information on how to add new columns to an existing Data View click here

4

You have now configured the web part to use Business Connectivity Services as the data source.

Continue to scroll down the screen to optionally configure how displayed data will be organized including specifying:

  • Sorting

  • Grouping

  • Filtering

Configuration Infographic Overview of Configuration Screens

Look and Feel Preferences

Look and Feel Preferences

Configuration Infographic Overview of Configuration Screens

Icon Use Data-Viewer’s Look and Feel Settings configuration screen to modify the default appearance of the Web Part.

You can change:

  • the color scheme and style
  • the size of the web part
  • the font of the text in the header row
  • or, hide the column headers

NOTE: Look and Feel Settings are optional. If you don’t configure anything your Data-Viewer will have the default Look and Feel.

To change Data-Viewer’s look and feel:

Look and Feel in navigation pane1. Click the Look and Feel Settings button under the Preferences header in the Data-Viewer configuration screen.

NOTE:
This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. Select from the configuration options below:

Option Description
Select Skin or Define Custom CSS

DataViewerLF_SelectSkin.png

  • Select Skin: Select from several preconfigured skins, each with different color and style themes. The default choice is to Inherit Site Theme, so the Data-Viewer uses the same colors and fonts as the rest of the site.
    The Inherit Site theme feature became available in Data-Viewer 3.6
  • Define Custom CSS: If you don’t want to inherit the theme from the site and you don’t like any of the available skins, you can customize the Cascading Style Sheet (CSS) for the Web Part directly.
    • Click the Edit CSS button to display a window where you can edit the CSS. See CSS for Data Viewer for more information.
Define Custom Height and Width

Define Height and WidthBy default, the Data-Viewer will fill the available space in the web part zone or the wiki page where you put it.

Using a custom height and width for the web part lets you control the space that the web part will consume on the page.

  • Icon-Warning Important: This option is only available when the Set Column Width check box in the Column Display pop up screen is selected.

    Select boxes for column size

  • Click Specify Custom Height and Width in the Define Custom Height and Width section of the configuration page. If you enter fewer pixels than are needed to display a whole page, vertical and/or horizontal scroll bars will be displayed.

    Icon-TipIf you specify a height (in pixels) that is less than needed to display a whole Data-Viewer page, a vertical scroll bar will be displayed. As end users scroll, the header bar remains stationary.

    DVWP with custom width and height2.png
Define Column Header

DataViewerLF_Header.pngDetermine whether the column headers will be visible in the display, or define special formatting for the column headers.

  • Check Allow Hide Header to remove column headers from the display
  • To modify the column headers, select the Header Format checkbox and click the box below it to open the formatting dialog.
    • In the formatting dialog, select a desired Font (use the arrows for selection), Style, and/or Size.
    • Select the following format, click Apply and then ok.

      text formatting pop-up

Configuration Infographic Overview of Configuration Screens

Configure Data-Viewer to support Interactive user options

Configure Data-Viewer to support Interactive user options

Configuration Infographic Overview of Configuration Screens

Interactive Options infograph iconData-Viewer can be configured to allow users to update and modify the appearance of the data set in run-time. When working with the Interactive Options keep in mind:

  • Icon-Warning IMPORTANT: All changes made in run-time will be lost when the user leaves the page and the default configuration will be restored.
  • For information on how users can take advantage of these interactive options click here

To configure Data-Viewer to support interactive options:

General Settings in navigation pane1. Click the General Settings button under Preferences.

NOTE:
To see this screen you need to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. Select from the available interactive options, shown below.

Function
Interactive Options section of General Settings screen
.

Allow Columns to be resized

  • Allows users to adjust the column width at runtime by hovering over the column divider, clicking, and dragging the mouse until the column is the desired width.

NOTE: This option is only available if the Set Custom Column Width box is checked in the parent list’s Columns Display Settings window.

Allow users to add or remove columns

  • Run time Column Selector Allows users to customize the column view using a drop-down menu located in the Data-Viewer Web Part.

  • Added columns will be displayed on the right side of the grid in alphabetical order.

  • See How to Dynamically Add or Remove Columns to Display for usage information.

Edit Default Fields

  • This option is only available if Allow users to add or remove columns has been selected.

  • When checked, all columns configured for default display in the web part will be available in Inline Edit or Datasheet modes for editing, even if the column was removed from the users run-time display.

    Edit Default Fields feature added in Data-Viewer 3.7

Allow filtering

  • Allows users to filter items displayed in the Data-Viewer Web Part by entering values in the filter text boxes.

Allow grouping

  • Lets users to group items displayed in the Data-Viewer Web Part by dragging and dropping a column heading to the bar just above the column heading bar.

    NOTE: The Allow Group By feature only applies to the parent list column headings. You cannot group nested data.

Allow sorting

  • When checked users can click a column heading to dynamically sort displayed items

  • Clicking the column heading cycles sort order between ascending, descending, and no sort.

Allow inline editing

  • When checked an Inline Edit icon (Data Viwer Inline Edit Icon) is added to each row of data.
    The Inline Edit icon changed in Data-Viewer 3.7

  • By default, the following columns will be available for edit in the inline edit form-

    • Editable columns that are included in the display
    • Columns that are required in the form.
  • See How to Use Inline Editing for additional information.

NOTES:
1. If using a SQL data-source the referenced database must be defined with a primary key
2. This option is not supported for BCS data-sources.

Add required fields to edit form

  • When inline editing is enabled, this option is turned on by default, and adds any required data source fields to the inline edit form, even if they are not normally displayed in the Data-Viewer grid.

Enable Edit in Datasheet
Edit in DataSheet

  • When selected the Edit in Datasheet link will be displayed in the upper left corner of the Web Part.

  • When users click this button, the default Data-Viewer Web Part view is replaced with a grid view similar to SharePoint Datasheet mode. This allows users to make multiple edits quickly. For information about using this feature see How to Edit in Datasheet View.

Enable Add New Item
Add Item Link

  • Click to display the Add New Item link in the upper left corner of the Web Part.

Enable Print Current Page
Print Page Link

  • Checking this box displays a Print Current Page link in the bottom left corner of the Data-Viewer Web Part.

  • Only the data displayed on the current page will be printed

Configuration Infographic Overview of Configuration Screens

Item Grouping

Item Grouping

Item Grouping is optional.

Use item grouping to group data in the Data-Viewer Web Part by up to two columns or fields.

Step Action Result
1.

Select a column and choose whether to group column in ascending or descending order.

Select whether to show groups collapsed or expanded by default.

configurationGroup37.png

NOTE: Unlike sort options, you can only group by columns displayed in the Web Part.

Item Filtering

Item Filtering

Item Filtering is optional. To filter the items from the data source so that only certain items are displayed in the Web Part, define a filter criteria.

Step Action Result
1.

Configure Item Filtering
* For SharePoint list or library data, you can select an existing list view.
* For all other data source types, you must Create a custom filter.

Show the item when column: Select the column or field to filter by, select the comparison operator (i.e. Equal To, Contains, etc.), and then enter the value to filter on.

Show More Columns…: Click this link to filter by more than one value using AND/OR logic.

configurationFilter37.png

NOTE: The filter value can include the SharePoint variable me.jpg to match the currently logged on user or today.jpg to match the current date.

How to Show All Items Without Folders

How to Show All Items Without Folders

In the Data-Viewer Web Part, it is possible to show all items inside folders or without folders. Your Document Library showing items in folders in SharePoint 2013 looks like this:

HW37_2013_ListLibraryWithFolders.jpg

In the Data Source Settings part of the Web Part Settings tool pane, check the appropriate radio button to select a flat structure display or folders.

NOTE: This is a configuration option and not an interactive option for end users.

With folders:

HW37_2013_AllItemsWithFoldersoption.jpg

HW37_2013_AllItemsWithFolders.jpg

And without folders:

HW37_2013_AllItemsWithoutFoldersoption1.jpg

HW37_2013_AllItemsWithoutFolders.jpg

Configure data export options in Data-Viewer

Configure data export options in Data-Viewer

Configuration Infographic Overview of Configuration Screens

Infograph iconData-Viewer can be configured to allow users to export data to Microsoft Excel. When working with the Data Export options keep in mind:

  • Only the columns displayed will be included in the export to Excel

To configure Data-Viewer to allow data export:

General Settings in navigation pane1. Click the General Settings button under the Preferences header in the Data-Viewer configuration screen.

NOTES:
1. This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.
2.** Data Export Options** are found in the lower section of the General Settings screen.

2. Select from the export options below

Option Description
Data Export section of General Settings screen
.
Enable Export to Excel
  • Export to Excel linkWhen checked the Export to Excel link will be visible in the bottom right corner of the Data-Viewer Web part.
  • If the Data-Viewer Web Part is configured to display both parent and nested data, only the parent data will be exported.
Export to Excel with data formatting (slower performance)
  • The Export to Excel with data formatting (slower performance) button will only be available after the Enable Export to Excel option has been selected.

  • When selected, data exported to Excel is formatted based on a combination of Regional Settings and column configuration.

  • Export performance may be slower when exporting with data formatting.

    When this option is not selected:

    • Date and Time columns will be displayed in UTC time.
    • Choice columns that allow multiple selections will include the separator characters #; between values.
    • Lookup column values will include the item ID and the characters #;.
    • Multiline Rich Text will display tags
    • Percent columns won’t show the % sign

See examples here.

Enable Export Nested Data to Excel

Export Nested Items link

  • When checked the Export Nested Data to Excel link will be visible in the bottom right of the web part.

  • What nested data is exported is determined by the following options:

    • Export expanded nested items only: Only nested items from an expanded parent item will be exported. Nested items that are collapsed (not currently visible) will not be exported.
    • Export all nested items: All nested data is exported, even if the associated parent items are not expanded.

Icon-Tip If you export all nested items, be sure the nested data is configured with a column that displays the name of the parent item or you won’t know which nested items goes with which parent item.

Configuration Infographic Overview of Configuration Screens

Conditional Formatting options in Data-Viewer

Conditional Formatting options in Data-Viewer

Configuration Infographic Return to Conditional Formatting

Infographic Icon
There are three available Color Scopes you can use when formatting data displayed in the Data-Viewer. If desired, you can mix the scopes if you have multiple rules defined.

Keep in mind:

  • Conditional formatting can be applied to both Parent and Nested data sets

  • If you are using Data Viewer 3.6 or earlier you will need to reset the formatting column(s) if the Column Display Settings screen is accessed after formatting rules have been defined.

NOTE: Resetting the conditional formatting column(s) is not required if you are using Data-Viewer 3.7. To find out what version you are using, click here

Color Scope options:

Color Scope drop downTo apply conditional formatting, click the Conditional Formatting button under Data Analysis.

NOTE:
This requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

Option Configuration & Result
Text Configuration:
configured format example.png

Result:
example of format nested cropped.png
Cell

Configuration:
format by cell2.png

Result:
format by cell2 result.png

Icon-Tip If you are going to format the cell, use a background color as shown above and pick a corresponding foreground color (text color) and style for the text so it is easy to read. Only the cells for the selected column will be formatted.

Row

Configuration:
row format2.png

Result:
row format example.png

Icon-Tip If you are going to format the row, use a background color and not necessarily a text color or style. Text formatting (i.e., foreground color, style, font) will affect only the column identified in the rule (Task Status in the example above), while the background color will impact all columns displayed in the row. Be sure the background color selected works with the text of the other columns.

Configuration Infographic Return to Conditional Formatting

Organize how data is displayed in Data-Viewer

Organize how data is displayed in Data-Viewer

Configuration Infographic Overview of Configuration Screens

Top


After you have selected a data source and have identified which columns will be displayed by default in the Data-Viewer web part, you can optionally configure how the displayed data will be organized, including specifying:

Keep in mind:

  • The options discussed on this page define the default display of data in the Web Part.

  • You may also allow your end users to change sorting, filtering, and grouping on-the-fly by enabling interactive options in the General Settings page of the Preferences section of the Data-Viewer Web Part Settings.

NOTE: Changes made interactively are not saved and the web part configuration will revert back to its saved configuration when the page is re-loaded.

To organize Data-Viewer’s default display:

SharePoint list settings screen1. Use the scroll bar found on the data source configuration screen to scroll down the page to the desired section.

NOTE: This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. Configure the desired option

Option Description

Folders or Flat

show in folders or not1.pngIf a SharePoint library containing folders was selected for display, use the Folders or Flat radio buttons to determine whether to include the folders in the display.

NOTES:
1. The Show Items inside folders is selected by default.
2. This option is not displayed for other types of data sources.
3. Showing items without folders will take longer to display due to the additional processing required.

Top

Sort Order

Sort.png

Sort Order.pngData displayed in the Data-Viewer Web Part can be sorted by up to two columns, by default. This is similar to SharePoint list views will be the initial sort for the display.

Select a column from each drop down and choose whether to sort in ascending or descending order.

NOTE:
You can sort by any column in the data source, not just by the columns that were selected for display.

Top

Filter

Filter.png

Apply a default filter to the displayed data by selecting from one of the following options:

Filtering1.png
1. Create Custom Filters:
Select the column(s) that you want to filter on, the comparison type and the value that you are comparing. If needed, add more conditions by clicking the Show more columns… link.

Icon-Tip The custom filter in the Data-Viewer supports the SharePoint variables [Me], representing the currently logged in user, and [Today], representing today’s date. Use either or both in your filter conditions for SharePoint Lists or Libraries or List Rollups. They are not available for SQL and BCS data sources.

multi filter example1.png

filter by view1.png2. Use list or library view:
When selected the you will be able to select an existing view associated with the configured list to filter the displayed data.

NOTE: The Use List or Library view filter is only available when using a SharePoint List or Library as the data source.

HW37_ListFilter.png** New ** in Data-Viewer 3.7: This filter option is selected by default when using a SharePoint list or library as a data source and users are able to change list views in run-time from the Web Part display.
Top

Grouping

Group.png

Grouping1.png To configure default grouping for your display:

1. Select the column for the first level grouping
2. If needed, select a column for the second level of grouping
3. Select whether the groupings will be collapsed or expanded by default.

NOTES:
1. Collapsed is selected by default.
2. Unlike sort options, you can only group by columns displayed in the Web Part.

Top

Number of Items to Display

Limit.png

Num Items1.pngUse the Limit Number of Items to Display setting to set a limit for the number of items displayed per page and the total number of items the Data-Viewer Web Part can display.

NOTES:
1. The Limit Items box is selected by default.
2. Limiting the number of items can help to improve performance.

Top

Configuration Infographic Overview of Configuration Screens

Data-Viewer Configuration Infographic

Data-Viewer Configuration Infographic

Click any of the icons below to get instructional details. For example, if you click on the Calculations icon in Step 3, you will immediately see that topic open.

DataViewerData-Viewer Web Part Configuration
Black1.png
Step 1 (Required)
Choose Your Data Source
SharePoint List or Library
Bamboo List Rollup
SQL Table or View
Business Data Connectivity (BCS)
Black2.png
Step 2
Organize Your Data
Column Display (Required)
Sort
Group
Filter
Limit Items
Black3.png
Step 3 (Optional)
Present Your Data
Nested Data
Calculations
Conditional Formatting
Black4.png
Step 4 (Optional)
Select Interactive Options
Interactive Options
Data Export
Black5.png
Step 5 (Optional)
Change User Preferences
Look & Feel
Language

Modify the Data-Viewer CSS file

Modify the Data-Viewer CSS file

Configuration Infographic Overview of Configuration Screens

LookFeel-CSS.pngBy default, the Data-Viewer web part renders the user interface using the default CSS styles that are selected in your SharePoint sites, assuming you are inheriting the site theme. The look and feel of the web part can further customized by editing the custom cascading style sheet (CSS) file from the tool pane of the web part.

To customize the style of the Data-Viewer web part:

Step Description
1.

Look and Feel Settingsbutton in navigation paneClick the Look and Feel Settings button under Preferences.

NOTE: This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. CSS radio button Click the Define Custom CSS radio button to enable the Edit CSS button
3.

HW37_CSS.pngClick Edit CSS.

  • The default Data-Viewer CSS file is displayed in a new window.

  • Edit the file in this window or copy the contents to your favorite text editor.

Icon-Tip Download the default CSS here.

NOTE: The default CSS is not related to the skin/site theme you had enabled when you chose to edit the CSS. The default CSS is a standard file that doesn’t change unless you change it. A Data-Viewer Web Part displayed with the default CSS looks like this:

DVWP with default CSS.png

4.

Edit the CSS file as needed.

Icon-Tip 1. Always save the original content of the file in Notepad (or something similar) in case you need to go back to it. You can also download the default CSS here.
2. You may choose to remove some of the formatting included in the default file.

Sample modifications:

The Data-Viewer Web Part uses the following class selectors to define each element of the Web Part:

Data Grid (the entire grid)
class selector - data grid.jpg

Table of Contents and Border
class selector - TOC and border.jpg

Rows and Alternating Rows
class selector - rows and alt rows.jpg

Selected Row
class selector - selected editing row.jpg

Group Header
class selector - group header.jpg

Footer bar
class selector - footer.jpg

Filter bar
class selector - filter row.jpg

For additional information and CSS examples, visit the site W3schools.

5. Click Save to save changes and close the window or click Cancel to close the window without saving any changes.

Configuration Infographic Overview of Configuration Screens

Configure conditional formatting rules in Data-Viewer

Configure conditional formatting rules in Data-Viewer

Configuration Infographic Overview of Configuration Screens

IconWhen applying Conditional Formatting to data displayed in Data-Viewer keep in mind:

  • Conditional formatting can be applied to both Parent and Nested data sets

  • If you are using Data Viewer 3.6 or earlier you will need to reset the formatting column(s) if the Column Display Settings screen is accessed after formatting rules have been defined.

NOTE: Resetting the conditional formatting column(s) is not required if you are using Data-Viewer 3.7. To find out what version you are using, click here

To configure Data-Viewer to display conditional formatting:

Conditional Formatting button in navigation pane1. Click the Conditional Formatting button under Data Analysis.

NOTE:
This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. Define the desired conditional formatting using the provided tool, shown below.

# Function
Conditional Formatting screen
.
1.

Click the Add a Rule button for the list you want to analyze (parent or nested).

NOTES:
1. Multiple formatting rules can be defined by re-clicking Add A Rule
2. Nested formattingrules can only be defined if a Nested data source was configured

2.

Use the following parameters to build the conditional formatting rule:

  • Column Name: Select the column that contains the values you want to format. The column list will include any columns you display for the data source. Columns that aren’t displayed won’t appear in the list.
  • Condition: Error displayed when incorrect operator of a column type is selectedSelect a Condition to use when comparing the value in the selected column to the condition’s value.

NOTE: If you choose an inappropriate condition for the column type, you will see a message when you save your web part configuration.

  • Value: Enter the Value you want to compare with the selected column’s actual value. The condition value can include the SharePoint variable Me to match the current user or Today to match the current date.

    NOTE: If the value you are comparing is a percent, enter its value as a whole number, such as 10 for 10%.

3.
  1. Text Formatting pop up screen
    Click the edit icon (Edit Icon) in the Format column to access the Text formatting pop-up.
  1. Define the display format for list items that match the rule by specifying, font, style, size, color (foreground), shading (background), etc.
4.

Choose the desired Color Scope for the rule:

  • Text: The formatting will apply to just the text of the selected column.
  • Cell: The formatting will apply to the cell and the text of the selected column.
    • Typically, when specifying the formatting for a cell, you will select a background color.
  • Row: The formatting will apply to the whole row, but any text-specific format (i.e., foreground, style) will apply to only the text of the selected column.
    • Typically, when specifying the formatting for a row, you will select a background color.

Click here to see examples of formatting by each of the color scope options.

5. To remove a formatting rule, select the check box for the desired rule and click the Remove Selected Rules button.

Example:
This configuration rule applies to the nested view…

Sample Configuration

…and it will look like this in the Data-Viewer display.

Sample display

Configuration Infographic Overview of Configuration Screens

Configure the columns to display in Data -Viewer

Configure the columns to display in Data -Viewer

Configuration Infographic Overview of Configuration Screens

ColDisplay.png After you have identified the Data-Viewer data source you will need to identify the columns that will be displayed in the Web Part. This step is required when configuring all data sources.

When working with the Columns to Display pop up screen keep in mind:

  • You must select at least one column to display
  • If you choose a different list or view, or otherwise re-load the data to be displayed, the previously configured column settings will be lost.

To configure the columns to display in Data-Viewer:

Column Display settings button1. Click the Column Display Settings button found on the data source configuration screen.

NOTE: This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. Select the columns to display in the pop up screen, shown below.

HW37_ColumnDisplayScreen.png

# Function
1.

Display Check Box : (required)

  • In the Column Display Settings window, locate the Column Name you would like to display and click the corresponding checkbox to the left.

  • Columns with a check in the box will be displayed in the web part.

  • To select all columns, click the box in the header of that column.

2.

Column Alias:

  • In the Column Alias field, type the name you would like displayed in the header row of the grid view for each column.

  • The specified will be visible in the web part display as the column header in Standard and Datasheet modes, Grouping, and Inline Edit .
    Column Alias use on Grouping is new with Data-Viewer 3.7

NOTES:
1. If the user clicks on the title link (if it is included in the display) to open the display form or selects Edit Item in the item context menu, the original column display name is shown.
2.In the screen shot above, Task Name(linked to item) will be displayed in the web part unless the text in brackets is removed from the Column alias

3.

Position From Left:

  • In the Position from Left column, choose the order of the column from the respective drop-down menu.

  • Clicking Save & Close and reopening the Column Display Settings window will show the updated Position from left order.

    NOTE: The default position of columns is determined by the number order, then by alphabetic order.

4.

To adjust the default Column Width:

  1. Check the Set Custom Column Width box in the bottom-left corner of the window (4A).
    • When checked, the values in the Column Width column are enabled and default to 150 pixels each.
  1. Enter the desired default width in pixels in the Column Width column (4B)

Icon-Warning Important:
The Set Custom Column Width check box must be checked if you want to allow users to adjust column width in run-time, or if you want to define a custom height and width for the web part

5. Justification:
Select the desired justification (left, right or center) for the data displayed in the column.
6.
  • Click Save & Close to save any changes made to the web part configuration.

  • Click Cancel to close the dialog without saving any changes.

    Icon-WarningIMPORTANT: If you are using Data Viewer 3.6 or earlier and you access the Columns to Display pop up screen after configuring Conditional Formatting or Calculations, you will need to update the Column Name on the appropriate screen – regardless of whether you check Save & Close or Cancel.

Configuration Infographic Overview of Configuration Screens

Configure Data-Viewer to analyze and calculate data

Configure Data-Viewer to analyze and calculate data

Configuration Infographic Overview of Configuration Screens

Calc.pngWhen applying calculations to data sets displayed in Data-Viewer keep in mind:

  • The Data-Viewer Web Part can display count, sum, average, maximum, or minimum calculated values for columns in parent or nested data sets.

  • You can apply more than one calculation to a data set.

  • If you are using Data Viewer 3.6 or earlier you will need to reset the calculation column(s) if the Column Display Settings screen is accessed after calculations are configured.

NOTE: Resetting the calculation column(s) is not required if you are using Data-Viewer 3.7. To find out what version you are using, click here

To configure Data-Viewer to display calculations:

Calculations button in navigation pane1. Click the Calculations button under the Data Analysis header in the Data-Viewer configuration screen.

NOTE:
This step requires you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

2. Define your calculation using the provided tool, shown below.

# Function
Calculations screen
.
1.

Click the Add a Rule button for the list you want to analyze (parent or nested).

NOTES:
1. Multiple calculations can be defined by re-clicking Add A Rule
2. Nested calculations can only be defined if a Nested data source was configured

2.

Use the following parameters to build the calculation rule:

  • Column Name: Select the column that contains the values you want to calculate. The column list will include any columns you display for the data source. Columns that aren’t displayed won’t appear in the list.
  • Operator: Select an operator to use on values in the selected column (Count, Sum, Average, Maximum, or Minimum). The operators are the same for all column types.
  • Operator Label: When the calculation results are displayed in the Data-Viewer Web Part, you can accept the default label for the results (the name of the operator) or you can enter your own label.
3.
  1. Text Formatting pop up screen Click the edit icon (edit icon.png) in the Format column to access the Text formatting pop-up.
  1. Define the format for the Operator Label and the calculation result by specifying,font, style, size, color (foreground), shading (background), etc.
4.

calc with grouping result example.pngSelect Yes in the On Grouping? drop down if you want the calculation result and the Operator Label to appear in the group headers.

NOTE:
1. The default value for this field is NO.
2. For more information about grouping click here

5.

Select where you would like to position the calculation results in the data view. You can display results above the data set, below it, or both.

NOTE: The results will appear in the column that is associated with the rule, either at the top of the list or at the bottom. If On Grouping? is set to Yes, the result will appear on the right side of the group headers.

6. To remove a calculation, select the check box for the desired rule and click the Remove Selected Rules button.

Result:
This configuration…

sample calc config.png

…will look like this in the Data-Viewer display.

example of calculation.png

NOTE: This configuration uses the alias Project Name for the Title column and the Operator Label is set to Number of Projects:.

Configuration Infographic Overview of Configuration Screens

Use a Bamboo List Rollup as the Data-Viewer data source

Use a Bamboo List Rollup as the Data-Viewer data source

Configuration Infographic Overview of Configuration Screens

ListRollup Bamboo List Rollup is one of the four available data sources for Data-Viewer.

When working with List Rollup keep in mind:

  • Data-Viewer can connect to Bamboo List Rollup Schemas and Data Views from List Rollup 5.0 or higher.

  • List Rollup must already be installed (sold separately) and a rollup created in order to use Bamboo List Rollup as a data source. For information on how to create List Rollups, view the List Rollup Online Documentation.

  • Data-Viewer will use a single Bamboo List Rollup as the data source, however List Rollup can aggregate an unlimited number of lists.

To configure Data-Viewer to display data from a Bamboo List Rollup:

NOTE: The following steps require you to have accessed the Data-Viewer Settings screens by clicking the Data Viewer Web Part Settings button in the web parts configuration tool pane.

Step Action Result
1.

Click the Bamboo List Rollup button under Data Source Settings in the navigation tool pane. Image of the Navigation Pane with the Bamboo List Rollup button available. All other data source buttons are grayed out

NOTE:You will only be able to select this button if Bamboo List Rollup is selected as the Data Source Type

The Bamboo List Rollup Settings screen will be displayed on the right side of the configuration pop-up and allows you to scroll through the configuration options associated with the data source.
2.

Select the type of List Rollup that will be used as a data source:

  • A List Rollup Schema created with List Rollup Schema

  • A List Rollup Data View (Classic Edition) created with
    List Rollup Classic

    Information on the differences between the Bamboo List Rollup tools is available
    here

Radio buttons to select List Rollup type

Icon-Tip The List Rollup Schema is the preferred List Rollup aggregation method. List Rollup Data View (Classic Edition) is available to support legacy aggregations.

3.

Enter the location of the schema or Data View then click the Load List Rollup… button.

  • If you selected List Rollup Schema in the previous step, enter the SharePoint Site URL where the schema you want to display was defined. The Schema definition may be in a different site collection. Schemas definitions are stored in a known list and therefore, only the site URL is needed.

  • If you selected List Rollup Data View (Classic Edition), enter the URL of the page that contains the Data View you want to display. Data Views are web parts themselves and exist on a particular page of a site. The page may be in a different site collection.

    Icon-WarningIMPORTANT: Although you can enter a URL for another Site Collection, be careful about going across Web Applications. You may have issues if the other web app has a significantly different security setup.

The predefined rollups associated with the List Rollup source selected will be listed in List Rollup… drop-down selector.
Image of the Page or  Site URL field and the Load List Rollup button

  • Both absolute paths (http :// server name/site ) or relative paths(./Site/) can be used for the site URL. Bamboo recommends using relative paths if:
    1. Multiple Alternative Access Mappings are being used
    2. The Web part will be included in a site template
4. Select the Schema or Data View rollup to display. List Rollup schema/ data view drop down selector
5.

Click the Columns Display Settings button to specify:

  • Which columns to display (required)
  • Column Alias, or alternate header text
  • Column position
  • Column Width
  • Text Justification

Columns Display Settings button

NOTES:
1. You must select at least one column to display in the Web Part.
2. For information on how to add new columns to an existing Data View click here

6.

You have now configured the web part to use a Bamboo List Rollup as the data source.

Continue to scroll down the screen to optionally configure how displayed data will be organized including specifying:

  • Sorting

  • Grouping

  • Filtering

Configuration Infographic Overview of Configuration Screens