Quantcast
Channel: Chris's unofficial Office Live developer blog : web services
Viewing all articles
Browse latest Browse all 6

Advanced List Publishing

0
0

In the previous release of Office Live, we had a deeply hidden and difficult to use feature known as Data Sharing. This feature was designed to allow you to take the data from one of the lists in your password-secured 'business applications' and publish it out to your public-facing web site as a dynamic list or table of items.  So when you update an item in the private list it was automatically updated on your public web site.  Data Sharing also provided the inverse... forms on your public web site that collect data into a business application list. 

Despite the efforts of our intern (hi Chester!), the feature was a dud.  When publishing a list (aka Display Data), there were only 3 options for how to layout the data, and the approval process was onerous at best. The form builder (aka Collect Data) also had some major hurdles, such as numerous unsupported column types and lack of ability to directly set what columns you were collecting data into.  Despite its shortcomings, we did get a good amount of customer and developer feedback that they liked the concept, just not the implementation.

In our recent release, we set out to address the major usability problems, add more UI flexibility and also address some of the major underlying technical limitations.  We especially wanted to give developers more power so they could unlock scenarios that they know best.  We set a goal that a 'normal' small business user could set this up... you don't have to be a developer.

I won't give you a full blow-by-blow account of all the changes we implemented, let's just say that instead of having to take a bunch of shortcuts to squeeze this feature into our Nov 06 release, we were able to get a full development milestone to build it the way we thought was best.  OK, OK, we did take a few shortcuts, and big chunks of what we hoped to do were cut (you gotta dream big!), but by and large the end result is a much more flexible, powerful and usable solution.

Advanced Mode

Hopefully you have seen my blog post about the new Web Site Designer 'advanced mode'.  If you haven't, go check it out to learn how to configure that for your Office Live Small Business web site.  This post will focus on the advanced mode capabilities and other developer-centric features for the List Publisher specifically, so that will be an important piece of homework for you to start with.

List Publisher Module

imageTo recap, the List Publisher is a module that you can drop onto a web page using the Office Live page designer tool.  To add a module, just click on the zone where you want to add it on the page, select the Modules dropdown, and select the List Publisher module.  The property sheet for the module will pop up to guide you through the rest of the process.  Modules can be moved around into any zone on a page, resized, copy & pasted and packaged up into a solution file

The List Publisher property sheet gives you the ability to select lists from any of the business applications or Business Contact Manager in the password-protected area of your Office Live subscription.  Once you pick an app and a list from that app, the controls on the property sheet are populated and enabled. 

NOTE:  You may not have the Business Applications provisioned on your Office Live Small Business account. If you don't, you will be notified.  They're free, so check 'em out.  If you already have them added to your account, you might not see a list you want to publish.  From the Business Applications, you can add a variety of interesting apps to perform common tasks for small businesses such as Contact Management, Project Management, Team Workspaces and more.  Just click + Add Application in the left nav once you go to the Business Apps and you will see a gallery. Don't see the one you want to use?  You can also create a custom app or add a custom list to one of the Business Apps you already have to suit your needs.

Defining your data details

image On the data details tab, you can define the exact data you want to publish by selecting the 'Create custom information view' radio button.  That allows you to select the columns you want, reorder them, and rename the labels for each column. 

Instead of picking and choosing from the full set of columns, you may decide to base your data details on a SharePoint view by selecting 'Use columns from an existing view' and then selecting the view you want from the dropdown.  These "views" are kind of like mini-reports that are part of the  Business App that are generally used to format the list data in a way that is more useful.  For example, you might have a task list with an "overdue" view, "assigned to me" view, etc. 

Selecting one of these views on the module property sheet is kind of like a big shortcut for you, plus it has some added power.  We automatically select only those columns that are present on the view for inclusion on the published list.  You cannot add or remove columns from the data details unless you switch back to the custom information view mode. 

Why would you want to limit yourself by using an existing view?  Because SharePoint views also give you the ability to add a sort order and create filters on the list.  Using the task list example again, you may want to only publish the active tasks, and the SharePoint view makes that possible by filtering only those tasks where status = active.  You need to go to the Business Application itself to create or modify a SharePoint view, but depending on what you are trying to do, it may well be worth the effort.

Creating a layout template

Once you have selected the data, now you need to decide how it should appear.  The layout tab gives you 3 options: a dropdown to select one of 3 predefined layouts, an option to link to a XSLT file and finally, a text area where you can edit/paste XSLT code directly. 

The layout dropdown is pretty self-explanatory... grid, repeating form or repeating form centered are standard layouts for basic publishing.  But this blog post is about 'advanced' publishing, so let's talk about the other controls instead.

So far we have ignored the 'View XML source' button that hovers above the 2 tabs on the right of the property sheet. By clicking it, you get an XML document that describes the schema you have configured on the data details tab.  As you make more changes, that XML will be updated.  Once you have the data details ironed out and are viewing the XML, you can write your own XSLT code to generate HTML/Script output exactly like you want it.  Here's where things get very interesting. 

The Grid Layout example

The Edit XSLT control contains a default XSLT that you may use as a sample.  imageBy writing a couple simple loops, it first iterates over the fields in the schema, and writes out the DisplayName attribute of each Field node.  This lets you write the column headers out in the grid example.

You can then write a second loop to create a new row in the HTML grid/table for each Row node of the XML, grabbing each of the attributes of the Row and outputting them as the value for one of the columns of the grid.  The attributes on the Row nodes correspond to the order of the Field nodes in the Schema subsection of the XML. 

Now you have a simple HTML grid of all the items in your list.

Instead of just outputting the values as raw text into a grid-like table, you can manipulate the values in any way you see fit such as passing them to a javascript function, building them into part of a URL or querystring, applying different fonts & styles conditionally based on a test of the value, and so on. In the grid example, we look at the position of the Row node using the XSLT mod function.  This allows us to change the style class name for each row, and build alternating colors into our grid.

In XSLT, you can pretty much output any HTML you would normally create for a web page, including styles and javascript. So, the sky and your imagination are really the limit.

To Link or Not to Link

The main difference between linking to an XSLT file vs. editing it directly on the module is that linking will give you the ability to share an XSLT across multiple modules, and manage the code all in one place for easy maintenance.  The text area is a better option while you are still developing and debugging the XSLT you are working on. 

Syndicating your list with RSS 2.0 and Simple List Extensions

You've probably noticed by now the recognizable orange RSS icon at the bottom of the page.  This checkbox is selected by default, and by doing so, publishes your list also as an RSS 2.0 feed at a separate URL.  We also adhere to the Simple List Extensions proposal, which provides both an enhanced experience in Internet Explorer 7.0 and formats the data from your list in a way that is more usable by developers who are consuming your list feed on a 3rd party server/service/application.  I'll dig more into the syndication features in a future blog post.

You can read more about advanced list publisher features in our dev guide.


Viewing all articles
Browse latest Browse all 6

Latest Images

Trending Articles





Latest Images