Simple displaying list items

This example show you how you can simple display SharePoint list items with your own markup.

Creating data source

At the first we need to create SharePoint list, which will be the data source. For example I have created the custom list, named "News", and add field with announcement field (Multiple lines of text):

simple-1.png

And fill test data to list:

simple-2.png

Data source is done.

Adding Sunbox dataview web part

Now we need to add Sunbox dataview webpart to webpart zone, which we want to put markup. I have been added to right web part zone of the home page:

simple-3.png

Configuring data source

Now we need to configure web part to use created News list. Click on "Add" link in data source editor section. And edit added data source.
We need to specify List - News, and View - All items. Also I specified maximum row limit to 15:

simple-4.png

Press "Save" button to save our settings.

Configuring XSL template

Now we need to specify: which markup we want to see. Click "Edit" at the "XSL template" editor section.
In the opened window you need to specify xslt file name (file will be saved to "Style Library/Sunbox/SunboxDataView/XSL" folder. Then you can press on "Generate XSL" button to generate basic applet:

simple-5.png

I have changed XSL template to shows "Announcement" field too:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">
        <div>
          <h3>Latest news:</h3>
          <xsl:for-each select="/response/News/Rows/Row">
            <a href="Lists/News/DispForm.aspx?ID={ID}">
              <xsl:value-of select="Title" />
            </a>
            <p class="news-announcement">
              <xsl:value-of select="Announcement" />
            </p>
          </xsl:for-each>
        </div>
	</xsl:template>
</xsl:stylesheet>


Click on "Save" save button to save changes.
Click on "Apply" button to save all web part properties.

After that your home page will be looks like:

simple-6.png

You can specify output markup as rich as your want.

Read more: How to add paging to this list

Last edited Feb 7, 2012 at 3:31 PM by Bukharin, version 5

Comments

No comments yet.