One of the un-sung heroes of the 3.0 release of XMod Pro was the Feeds feature. Sure you could use it to create CSV and Excel spreadsheet downloads for your DotNetNuke site. You could create RSS or customer XML Feeds. You could even use a Feed to display a printer-friendly HTML page that pops-up outside the DNN skin. Beginning in version 4, we’ve made leveraging Feeds easier and more powerful than ever.

I’m guessing the majority of you read the intro to this blog post and didn’t even realize you could use exports and Feeds with XMod Pro. It’s true. We’ve even put together a module kit that shows off some of what you can do with Feeds. For version 4 we decided to make Feeds even more useful and provide you with an easier way to use them in your web pages.

Feeds Are Were Public

Feeds were initially created to provide Feeds of data like RSS Feeds. By their nature, Feeds were assumed to be publicly accessible.  In evaluating them for version 4, we realized that if we provided a way to better secure them, you could use them in even more circumstances. So, we introduced a new property to the <xmod:Feed> tag called "ViewRoles".

Like the AddRoles, EditRoles, etc. of <xmod:Template> tags, the ViewRoles is a comma-delimited list of DNN Security roles. If the user has an active session with your website and has logged-in and is a member of one of the roles you’ve listed, they’ll be able to see the feed. If they’re not, they won’t. Of course, this feature is backwards compatible. If you don’t specify a ViewRoles property, the feed will be publicly accessible.

This change enables you to use feeds to supplement your other XMod Pro pages. But how do you get that data into your pages? It would be awesome if there was some way a user could click a button and have that data auto-magically appear in your page without a postback…

Dynamically Load Feed Data Into Your Page with AJAX – No Scripting Required

If you’re a jQuery or Javascript expert, you’ve probably already figured out how you can leverage feeds to provide dynamic data in your page. So, go off, create your AJAX calls and have fun.  For everyone else, we’ve created a vastly simplified process that gives you true AJAX calls without the scripting using four new tags:

<xmod:LoadFeed>,
<xmod:LoadFeedButton>,
<xmod:LoadFeedImage>,
<xmod:LoadFeedLink>

We'll cover the last three tags – the “Button” “Image” and “Link” versions of the LoadFeed tag.

In many cases, you'll want to provide the user with a link, button, or image which, when clicked, will load some data into the page. That's precisely what these tags do. The only real difference between the three tags is how control is displayed to the user (button, image, hyperlink).

So, how do you use them?

• These controls use jQuery so ensure the jQuery library is included in the page. This is typically the case if you're running DNN 5 or later.
• Create the Feed you want to use on the Manage Feeds page. I'll include an example feed here.
• Add your Load Feed Button.

Here's the example feed we'll be working with. It's very simple but doesn't have to be complex. We just need to understand that we're going to use this feed inside an HTML page so we set the feed's ContentType to "text/html" and we output HTML in our template. We could get more extravagant and add a <HeaderTemplate> and <FooterTemplate> for more complex or list-based HTML outputs (like tables and bullet lists), but we'll keep it simple here and only output the Author's name in an H3 tag.

Feed Example:

 
<xmod:Feed ContentType="text/html">


	<ListDataSource CommandText="SELECT AuthorId, FirstName, LastName FROM Authors WHERE AuthorId = @AuthorId">
		<Parameter Name="AuthorId" Value='[[Url:aid]]'></Parameter>
	</ListDataSource>


	<ItemTemplate>

		<H3>[[FirstName]] [[LastName]]</H3>

	</ItemTemplate>


</xmod:Feed>

Let's save the Feed with the name "AuthorDetails" and move on to the Template side of things.

Template Example:

 
 
 <xmod:Template>

    <ListDataSource CommandText="SELECT TOP 10 Title, AuthorId FROM Books ORDER BY SalesRank ASC">
    </ListDataSource>
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>

        
        <ItemTemplate>
            <li>[[SalesRank]] - [[Title]]

            <span style="color: #ff0000;">
                <xmod:LoadFeedButton FeedName="AuthorDetails" Target="#AuthorDetails" Text="Author Details">
                    <Field Name="aid" Value='[[AuthorId]]'></Field>
                </xmod:LoadFeedButton>
             </span>

            </li>
        </ItemTemplate>

        <FooterTemplate>
            </ul>
            
            <div id="AuthorDetails"></div>
        </FooterTemplate>

 </xmod:Template>
 
 

This template is pretty straightforward. It creates a bullet list (an un-ordered list in HTML-speak) with the top 10 best-selling books. Each book title is followed by a button - our LoadFeedButton tag. The link has a caption of "Author Details". Beyond that, two properties are given.

The First property is FeedName. It specifies the name of the Feed that will supply the data. Remember we named our Feed "AuthorDetails".

The second property is Target. This tells the button where to place the data it gets from the Feed. You can specify basically any jQuery selector syntax. In our case, we've created a DIV tag with an ID of AuthorDetails (see just after the closing tag). To locate an element by its ID, we use the hash tag (#) before the ID - thus Target="#AuthorDetails". There are all sorts of ways you can locate an element using jQuery.

Finally, since our Feed is looking for us to pass an Author ID in the URL called "aid", we add a <Field> child tag. That field specifies the name of the parameter - "aid" and the value we want to pass - the value of the AuthorId column. The name must match the URL parameter we're expecting in our Feed.

That's it. Save your template and set your XMod Pro module to use it. Now, when someone clicks on the Author Details button that show up with each book, the author's details will be shown in the DIV tag below the template.

Templates? We Don't Need No Stinking Templates!

While most of the time, you'll want to load data as the result of some user action. However, you may also just want to load data whenever the page loads - with no user interaction. Enter the <xmod:LoadFeed>tag. It's even simpler to use that than the button/image/link tags we've already discussed.

For instance, let's say we want to display a list of the top-selling books (as before). However, we also want to display a list of the most recently published books. All we need is a Feed and a little modification to our template.

Here's the new Feed. Save it with the name "NewBooks". Again, I'm keeping the HTML simple so you don't have to wade-through a lot of layout and styling to get to point:

<xmod:Feed ContentType="text/html">

	<ListDataSource CommandText="SELECT TOP 10 Title, ReleaseDate FROM Books ORDER BY ReleaseDate DESC">

		<HeaderTemplate>
			<ul>
		</HeaderTemplate>

			
			<ItemTemplate>
				<li>[[Title]] released on [[ReleaseDate]] </li>
			</ItemTemplate>


		<FooterTemplate>
			</ul>
		</FooterTemplate>

</xmod:Feed>

The purpose of this Feed is to display a fully formatted list of records so we're using the Header and Footer templates in addition to the ItemTemplate to create a bullet list that displays the book's title ( [[Title]] ) and the date it was released ( [[ReleaseDate]] ).

Next, let's go back and tweak our template.

<div id="NewBooks"></div>

	<xmod:Template>

		<ListDataSource CommandText="SELECT TOP 10 Title, SalesRank, AuthorId FROM Books ORDER BY SalesRank ASC" />

			<HeaderTemplate>
				<ul>
			</HeaderTemplate>
				

				<ItemTemplate>
					<li>[[SalesRank]] - [[Title]]
						<xmod:LoadFeedButton Target="#AuthorDetails" FeedName="AuthorDetails" Text="Author Details" >
						<Field Name="aid" Value="[[AuthorId]]"></Field>
						</xmod:LoadFeedButton>
					</li>
				</ItemTemplate>

			<FooterTemplate>
				</ul>
			</FooterTemplate>
				
	</xmod:Template>

			<xmod:LoadFeed target="#NewBooks" feedname="NewBooks"> 
			</xmod:LoadFeed>

		<div id="AuthorDetails"></div>

The changes we made are in red. At the top of the template we created a container where we want to display the newly released books - a DIV tag with an ID of "NewBooks". Next, after the closing template tag, we added our LoadFeed tag. It's simple. It specifies the name of the Feed that will supply the data and the jQuery selector (the Target property) that identifies where on the page we want to put the data.

The astute among you may have noticed that we didn't place any of our tags inside the <xmod:Template> tag. That's because we don't have to (though we could if we needed). Since we're not getting any data (like AuthorId in the first example) from our template's data source, we can safely place these tags outside the Template.;

Well, you may be thinking, if you can put it outside the template tag, do you even need the template tag? The short answer is No. We could easily rewrite this template like so:

 

 <div id="NewBooks"></div>

 	<xmod:LoadFeed Target="#NewBooks" FeedName="NewBooks">

 	</xmod:LoadFeed>

No <xmod:Template> tag needed. How's that for cool. You could theoretically have multiple LoadFeed tags in your template along with some HTML for layout and that's it. The one thing to remember, though, is that this data is being pulled by AJAX and it's being pulled on each page load. It is effectively read-only. You won't have access to Edit data, filter, search, sort, etc. But if you don't need them, there's no sense "paying" for them. If you were creating a customer dashboard that just displayed data, the LoadFeed option would require less resources and in all likelihood would load more quickly.