Written by:
6/14/2007 8:30 AM 

I recently realized that, with all the work I do developing XMod and its family of applications, providing customer support, answering pre-sales questions, managing business issues, and maintaining the website, it is sometimes difficult to remember what I've done and when I did it.

This came to my attention in the last few days as I've been editing some pages on the site. The goal behind these edits is to provide information to the new site visitor more efficiently - ideally convincing them that XMod is the DotNetNuke module they've always dreamed about... but I'll settle for them being able to determine if it will meet their current and future needs.

Of course, the only way to determine if the changes make a difference is to measure how visitors are navigating the site - what pages they view and how much time they spend on certain pages (how "sticky" they are). However, since I would be making a lot of little and some large changes, I realized I needed to keep track of what I'd done and when I did it. That way, if I see a noticeable increase or decrease in traffic to a certain page, I will have a record that I can refer to and determine if a change I made contributed to the difference.

Naturally, I turned to XMod to help me out. There were several goals I wanted to meet with this project:

1. Quick Data Entry: It can be a hassle to record everything you do, so the easier and quicker the process is, the better. I don't want to spend a lot of time typing and filling out forms.
2. Efficient Log Views: All I really need is the date of the change and a one-liner describing the change. However, I know that there will be changes that require more of an explanation and I want to account for that possibility.
3. Ability to set the date of the change when needed.
4. Minimize postbacks

The final output of the project looks like this:

Data Entry Form

The data entry form is pretty standard. This is an auto-layout form which works well for my purposes since I will be the only one using it and am concerned more with creating the project quickly than with making it look pretty for a public audience that will never see it. For the date I decided to use the <dateinput> control rather than a standard text box. This allows me to enter a date for the item and later sort by that date when viewing records. The Select Date button enables me to pop-up the DNN date picker to choose a date and have it automatically inserted into the field. What isn't noticeable in the image is that I save some keystrokes by having XMod automatically insert the current date. For the details, I'm using a plain old text area. This is an admin-type form, so rich text editing isn't needed. The textarea provides a cleaner, leaner input option. I can enter any HTML tags by hand. However, in part 2, I'll show you how to leverage the <xmod:format> tag to remove the need for HTML tags.

Let's take a look at the form definition to see what it takes to build this.

<form>
  <controls>
    <dateinput ref="DateOfChange">
      <label>Date of Change</label>
      <default>{XMOD_Now:MM/dd/yyyy}</default>
      <calendar text="Select Date" display="button" format="MM/dd/yyyy" />
    </dateinput>
    <input ref="Name" width="250px">
      <label>Name</label>
    </input>
    <textarea ref="Details" width="400px" height="150px">
      <label>Change Details</label>
    </textarea>
  </controls>
</form>

Grid View

The grid view has quite a lot happening but it takes surprisingly little code to do it. The grid displays the date of the change, the user who recorded the change and the change's name that, when clicked, will open up (without a postback) to reveal any details that have been provided for the change. Additionally, you'll notice the Edit, Delete and Copy "links" show as buttons and they aren't in the left-most column (where they usually appear). I've also added a little style to the template to match my site's style.

The template is listed below:

<column header="Change Date">
  <xmod:field  name="DateOfChange" detaillink="False" usevalue="False" encodehtml="False" enablescripts="False" />
</column>
<column header="User">
  <xmod:user  type="add" field="username" />
</column>
<column header="Change" width="425px">
  <strong><xmod:field name="Name"/> </strong>
  <xmod:toggle visible="false" display="LinkButton" layout="block" 
    opentext="(Show Details)" 
    closetext="(Hide Details)" 
    togglestyle="color:black;font-weight:bold;">
    <div style="width:400px;border:1px dotted #333333; padding: 5px; margin-top: 5px;">
      <xmod:format  type="regex" 
        value="<xmod:field name="Details" preservewhitespace="true" preservelinebreaks="true"/>" 
        pattern="(Added|Modified|Deleted):" replacement="<b>$1:</b>" />
    </div>
  </xmod:toggle>
</column>
<column header="Admin" width="250px">
  <xmod:editbutton text="Edit" display="button"/> 
  <xmod:deletebutton text="Delete" display="button"/>
  <xmod:copybutton text="Copy" display="button"/> 
  <xmod:approvebutton text="" unapprovetext=""/>
</column>

If you've created a grid view template, this will be familiar. I use a <column> </column> tag pair for each column in the grid. Inside each column tag is what will be displayed for each record. So, I've created four columns. The first has a header of "Change Date" and contains the date of record for the change, as entered by the user. In the next column, I use the <xmod:user> tag to pull out the username of the person who added the record. We'll cover the third column in a moment. The fourth column contains explicit tags for each of the administrative functions: edit, delete, copy, and approve. Each is set to display as a button (rather than the default of hyperlink). If I didn't explicitly define them in the template, XMod would create default versions of any that are missing. They would be placed in the first colum and would display as links. It's important to note the <xmod:approvebutton> tag. It uses a trick to hide any approve/un-approve button by supplying the tag with empty captions for text and unapprovetext. This technique can be used on any command button you wish to hide. If we didn't want to show the copy button - even to administrators, we would include: <xmod:copybutton text=""/>

I breezed past column three since this is where most of the action happens. In this column I want to display the change name (i.e. "title" or "caption"). In most cases, that's all I'll need when viewing the change log. However, there are numerous cases where I might want to include some descriptive information or additional notes on the change. To view that, I'd rather not have the page postback to the server just to get those details. Instead, I use the <xmod:toggle> tag. This little tag packs a lot punch. Without knowing Javascript, you can set up a link, a button, or a clickable image to toggle the display of some content on or off. In this example, I'm using both (Show Details) and (Hide Details) as the link text. When the link is clicked, a panel will appear with the change details and the link text will change to (Hide Details). If you click the link again, those details will be hidden and the link text will change to (Show Details). Here's the code that does this:

<xmod:toggle visible="false" display="LinkButton" layout="block" 
     opentext="(Show Details)" 
     closetext="(Hide Details)" 
     togglestyle="color:black;font-weight:bold;"> 
    <div style="width:400px;border:1px dotted #333333; padding: 5px; margin-top: 5px;"> 
      <xmod:field name="Details"/>
    </div>
</xmod:toggle>

In the toggle tag, visible is set to false to tell XMod the internal content should start out hidden. Display is set to LinkButton which indicates the toggle should appear as a hyperlink. Layout is set to block which means the contents will display as a block element. If I set it to inline then XMod would attempt to display the contents on the same line as the toggle.

Next I've set the caption to be shown when clicking the toggle will display the content (opentext) and the text to show when clicking the toggle will hide the content (closetext). In this case, I'm using (Show Details) for the opentext attribute and (Hide Details) for the closetext attribute.

The last attribute, togglestyle, allows you to style the display of the toggle link/button/image. In this case, I've chosen to display the link with black, bold text. Finally, I've placed the "Details" field value inside a div tag that has a dotted border. I've also added some padding to set it off a bit from the rest of the content.

And there you have it. A site change log using XMod. All you need to do is configure your module to use these.

But wait, there's more....

I'm not through with this yet. I think we can improve on the Site Change Log. First, I want it to display on all my site's pages so that I have easy access to it whenever I make a change. However, if I do that, I don't want it taking up much space on the page. It should be fairly un-obtrusive until I'm ready to use it. Second, it should only appear to administrators (and without that annoying red border). Finally, while the current method allows me to insert my own HTML, I don't want to have to do that - but I also don't want to use the HTML Editor which takes up too much space.

In Part 2, I'll take up these three items.

Trackback Print

Tags:

Categories:

Location: Blogs DNNDev_Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel