Using Data View Web Parts To Display Html From Formulas

What is a Data View Web Part

A Data View Web Part (DVWP) is a built-in web part in SharePoint used to display dynamic data from various sources including databases, lists, libraries, and more. DVWPs allow you to show data in a customizable tabular format using XSLT formatting. They can also display HTML markup generated from formulas and conditional logic.

Key capabilities of using Data View Web Parts for HTML output include:

Displaying custom HTML layouts and designs not possible in standard SharePoint web parts
Dynamically generating HTML code based on combinations of formulas, conditional logic, variables, and more
Formatting tabular data from SharePoint lists and libraries in HTML using XSLT and CSS
Creating dynamic HTML dashboards, reports, and data visualizations
Integrating dynamic data from various sources into a common HTML display

In summary, Data View Web Parts provide a flexible way to generate and display custom HTML markup within SharePoint pages that goes beyond the capabilities of standard web parts and list views.

Table of Contents

When to Use Data View Web Parts for HTML

Displaying dynamically generated HTML content is one of the key unique capabilities of the Data View Web Part. Some common scenarios where using a DVWP for HTML output is useful include:

Dashboard pages – Show figures, charts, reports, summaries, alerts etc. generated from various data sources.
Landing pages – Highlight key info in eye-catching displays not possible in regular web parts.
Custom lists – Go beyond the standard view styles to create HTML forms, tables, cards and more.
Dynamic portals – Refreshing portal pages with targeted news, reports, indicators for each user.
Calculated metrics – Display formulas, metrics, KPIs based on various data sources integrated via HTML.

The unique requirements of these solutions often mean standard SharePoint web parts don’t provide the layouts, customizations, or data integrations required. Using SharePoint Designer to produce the custom HTML display within a Data View web part serves as a lightweight, no-code solution for dynamic HTML rendering.

Constructing the Formula for HTML Output

The formulas that generate HTML output within Data View Web Parts are constructed using a mix of standard text, formulas, variables, and function calls. When putting together your HTML formula, key syntax, operators, and functions to understand include:

Text – Plain text that will be rendered as-is in the final HTML output.
"" – Double quotes for enclosing attribute values and literal strings.
+ – Concatenates text strings together.
= – Output of the formula expression that follows.
HTML tags – Native HTML tags for text formatting and layout.
XML escaping – Encoding special characters e.g. > for >.
Data fields – Insert dynamic field values from the connected data source using syntax like =[FieldName].
Functions – Inbuilt methods for formatting values e.g. Date, Text, Lower, Len.
Nested formulas – Inserting the output of other formulas using syntax like =[FormulaName].

These formula components can be combined in powerful ways to generate full HTML page layouts with integrated dynamic data. The key is learning how to nest formulas and data fields within standard HTML tags and strings to output the desired mix of static markup and dynamic content.

Adding Sample HTML Code to the DVWP Formula

Here are some examples of HTML code snippets that can be embedded within Data View Web Part formulas:

1. Bullet list

“`
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
“`

2. Star ratings

“`
Rating: 
“`

3. Linked images

“`
<a href="http://example.com">
<img src="/images/sample.png" width="100" />
</a>
“`

4. Dynamic data values

“`

Name: =[FullName] 
Date: =[Modified]

“`

5. Conditional table row formatting

“`
<tr style="background-color:=[IF(Status==’Approved’,’green’,’red’)]">
<td>=[RequestID]</td>
<td>=[Status]</td>
</tr>
“`

These samples illustrate common patterns for integrating dynamic data, conditional formatting, images, links, and more within a custom HTML output using native HTML tags combined with Data View Web Part formula syntax and fields.

Formatting the Data View Web Part

Once your Data View Web Part formula generates the desired HTML output, additional formatting and layout options are available:

Web Part Header – Change title text, remove header entirely.
Chrome Type – Control Web Part border and visible controls.
XSLT Stylesheets – Format the containing table with CSS.
Table Styles – Apply color bands, headers etc. for list data sources.
HTML formatting – Use native styling in the formula output e.g. colors, sizes, positions.
SharePoint Themes – The surrounding page theme impacts DVWP styling.

In particular, native HTML tags allow extensive styling control over the custom markup contained in your formula. You can leverage heading sizes, paragraphs, div layouts, id and class attributes, colors, links, tables, and CSS markup within formulas to achieve a wide range of displays and formats.

Combining the conditional logic and dynamic data capabilities with HTML formatting means highly customizable, data-connected web parts tailored to specific business reporting needs.

Connecting the Data View Web Part to a List

Displaying list data within a Data View Web Part is a common requirement, providing easy integration into SharePoint data. To connect a DVWP to a list data source:

Edit Web Part > Toolpane > Data Sources.
Select type = “SQL Database Connection”.
Set Data Source = “All Site Content | Current Web URL | Lists”.
Select the target list as the Table.
Check field names to insert within the formula using =[FieldName].
Set Filters, Parameters etc to customize list data (optional).
Click Ok to save data connection settings.

The connected list will provide dynamic values based on rows/items, filtered by any parameters defined. Formulas can mix list fields with custom HTML, nested formulas for layout, and conditional logic to achieve a custom display.

Setting filters, search parameters, and default sort orders allows further control over the connected list data. These parameters update dynamically based on user selections for interactive reporting.

Best Practices for Implementation & Management

When putting Data View Web Parts displaying HTML into production, the following tips will help manage maintenance and performance:

Avoid large, complex single formulas – Split into nested formulas for easier management.
Use HTML formatting for layout rather than extensive XSLT/CSS where possible.
Index connected list columns used for filtering parameters and formulas.
Apply list item limiting through filters to ensure fast DVWP performance.
Consider caching options for very large datasets or frequent calculations.
Secure access to Data View Web Parts to prevent markup injections.
Schedule regular checks for formula errors or unexpected output.

Planning a consistent structure with nested formulas, applying limits through filters, and checking for issues will help manage reliable solutions as data sizes and integration complexity grows.

Additional Resources

For more information on creating and managing Data View Web Parts that display custom HTML formulas in SharePoint, see the following resources: