In my last post I talked about the out of the box mobility pages available in SharePoint. Now I'll show you what you can do with a little bit of time in SharePoint Designer.
First of all, I have 2 lists I want to surface in my mobile interface:
- Speaking Events
- Blog Posts
The first step I took was to overwrite the default.aspx with my own splash page:
As you can see, I kept things pretty simple. This could, of course, be updated to be a little better looking with some CSS for mobile browsers that support such things. For now, this'll do.
For the real fun, let's look at how to add a list view and an item view:
First of all, I copied the default.aspx page twice:
For blog.aspx, I then created a Data Form Web Part:
To get the layout I wanted I clicked on the chevron and selected Data View Properties:
Once in the Data View Properties, I can use the Layout tab to select the general layout that I wanted:
The last step is to configure the link to the details page. By clicking on the Post title's chevron, I am able to format the title as a hyperlink:
In the Hyperlink options screen, I am able to point the Title hyperlink to blogPost.aspx and pass in the post's ID in the query string:
Next, I open my blogPost.aspx page and insert a single Item View:
The last thing I need to do is configure the filter to display the correct item. Before I can do that, I need to add a parameter that reads from the query string. Select the chevron on the Data Form Web Part and choose Parameters:
From there you can create a PostId parameter that reads from the query string variable PostId:
You can then configure your Data Form Web Part's filter to filter on the [PostId] parameter (note the use of [] for parameter values):
And that's it! Here's what my pages look like today:
The only downside is that the Data Form Web Part can be a little heavy in its HTML output. Watch for future posts on how to trim that down as well!