We created an author management solution in the previous lesson in less time than it would take to read through the lesson and look at the pretty pictures. Speaking of pictures... Remember that we uploaded images when we created our author records but they weren't displayed in the template.

Let's modify our template so we can display the images rather than the image file names.

Displaying Author Images

There are two ways you can edit your template.

1. You can edit the template in the same place you created it - the Control Panel.
   
2. Or you can use the Inline Editor.
   
   I prefer this method generally as the editor expands to the size of my browser window. Since I have a large monitor, the editor can use more screen real estate. Plus, it allows me to open two tabs onto the same page I'm working on. The first tab will contain the editor and the 2nd will be the view of the page without the editor. By un-ticking the Reload page after save checkbox, I can save my edits in one tab and reload the second tab to see the changes. It makes editing much quicker. NOTE: if you try clicking on the Article_Author form button, you will receive a message stating that Auto Layout forms can't be edited with the Inline Editor. You'll need to edit the form from the Control Panel.  When you graduate to custom HTML layout forms, then you'll be able to edit them with the Inline Editor.
   

Don't Let the Code Scare You Away

If you look closer, you'll see that most of the code is simply HTML with some special XMod Pro tags (e.g. , ) and XMod Pro field tokens (e.g. [[Name]], [[AuthorId]], etc.) thrown in. In fact, that's the beauty of XMod Pro.  Inside the HeaderTemplate tag, you can see the components of an HTML table complete with table, thead, tr, and th tags as well as the opening tbody tag. In other words, all the non-repeating HTML that you'll find at the beginning of any table.

Inside the ItemTemplate tag, you'll find a single table row (tr) with some td tags. These are tags that repeat for each record in the list. So, one row will be generated for each record in your list. Finally, the FooterTemplate tag contains the closing and tags — the non-repeating tags you find at the end of any HTML table. So, if you know HTML, you should be able to easily customize any XMod Pro template.

Displaying the Author Image

1. First, find the [[Image]] field token

   <td>[[Image]]</td>

2. Next, add an HTML <img> tag. The src attribute will be the path to our file (remember when we set that on the File Upload control?) along with our [[Image]] field token, which contains the filename.

   <td>
       <img src="/Portals/0/XMP_Articles/images/[[Image]]" style="width: 120px;"/>
   </td>

   You'll notice I stuck a style property on the image tag to set the width of the image. This is for convenience for this example. In reality, you may have a rule in your skin's stylesheet to handle this, in which case you might add a class attribute.

3. Let's re-order the columns so the image is the first cell in each row. Also, we don't need to display the Author's ID so we'll remove that in the process.
   Header Template

     <HeaderTemplate>
       <table>
         <thead>
           <tr>
             <th>Name</th>
             <th>Image</th>
             <th>&nbsp;</th>
           </tr>
         </thead>
         <tbody>
     </HeaderTemplate>

   Item Template

     <ItemTemplate>
           <tr>
             <td><img src="/dnn722/Portals/0/XMP_Articles/images/[[Image]]" style="width:120px;"/></td>
             <td>[[Name]]</td>
             <td>
               <xmod:EditLink Text="Edit">
                 <Parameter Name="AuthorId" Value='[[AuthorId]]' />
               </xmod:EditLink>
               <xmod:DeleteLink Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this?');">
                 <Parameter Name="AuthorId" Value='[[AuthorId]]' />
               </xmod:DeleteLink>
               <xmod:DetailLink Text="Details">
                 <Parameter Name="AuthorId" Value='[[AuthorId]]' />
               </xmod:DetailLink>
             </td>
           </tr>
     </ItemTemplate>
   

Styling Our Buttons

The template builder generates hyperlink "buttons" for you by default for Adding, Editing, Deleting, and viewing Details. Let's improve our buttons' appearance. 

1. At the bottom of the template, you'll find this code

   <div>
     <xmod:AddLink Text="New" />
   </div>

   We'll leave this as a link, but we'll change the text and we'll use DNN's standard button styling to enhance the looks.

   <div>
     <xmod:AddLink Text="Add Author" CssClass="dnnPrimaryAction" />
   </div>

   Notice that we didn't use the class attribute. The <xmod:AddLink> control is a server-side control, instead of an HTML control. That means we have to treat it a bit differently. There is no class attribute. Instead, we use CssClass, but the effect is still the same. Ultimately, the HTML that is rendered by this tag will include the class attribute with your value in it. By the way, you can also put multiple class names in the CssClass attribute - just as you would do for the class attribute of an HTML tag.

2. Next, we're going to swap out the Edit and Delete link buttons for images. Find this code in the <ItemTemplate> tag

     <td>
       <xmod:EditLink Text="Edit">
         <Parameter Name="AuthorId" Value='[[AuthorId]]' />
       </xmod:EditLink>
       <xmod:DeleteLink Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this?');">
         <Parameter Name="AuthorId" Value='[[AuthorId]]' />
       </xmod:DeleteLink>
       <xmod:DetailLink Text="Details">
         <Parameter Name="AuthorId" Value='[[AuthorId]]' />
       </xmod:DetailLink>
     </td>

   EditLink, DeleteLink, DetailLink display as hyperlinks. XMod Pro also provides EditImage, DeleteImage, DetailImage that display as clickable images. Additionally, if you're looking for HTML push buttons, there is EditButton, DeleteButton, etc.  Check the help file for more details.  For this example we're going to swap out the EditLink and DeleteLink for images. Your new code should look like this:

     <td>
       <xmod:EditImage Text="Edit" ImageUrl="~/images/eip_edit.png">
         <Parameter Name="AuthorId" Value='[[AuthorId]]' />
       </xmod:EditImage>
       <xmod:DeleteImage Text="Delete" ImageUrl="~/images/eip_title_cancel.png" 
         OnClientClick="return confirm('Are you sure you want to delete this?');">
         <Parameter Name="AuthorId" Value='[[AuthorId]]' />
       </xmod:DeleteImage>
       <xmod:DetailLink Text="Details">
         <Parameter Name="AuthorId" Value='[[AuthorId]]' />
       </xmod:DetailLink>
     </td>

   Other than changing the work "Link" to "Image" in the opening and closing tags for our controls, the only change is the addition of the ImageUrl property.  The value of this property should be the path to the image file you want to use. Remember the tilde (~) mark will be replaced at run-time with the path to the root of your website. In this case the control will look in DNN's root "images" directory for the eip_edit.png file for the Edit image button and the eip_title_cancel.png file for the Delete image button.  These should be in the default DNN installation unless you're using an older version of DNN. If so, or if those files aren't there, simply put another URL in there to whatever image you want to use.

3. Our last button change will teach you a critical technique that will serve you well in your XMod Pro endeavors. Most of the time, when you see a list of items, you don't click on a "Details" link to see the details for that record, you usually click on the record's Name or Title. Let's do that here. We'll turn the author's name into a clickable link that will take the view to the detail page. Begin by finding the <xmod:DetailLink> tag.

   <xmod:DetailLink Text="Details">
     <Parameter Name="AuthorId" Value='[[AuthorId]]' />
   </xmod:DetailLink>

   The link is going to display the value of its Text property -- in this case, that is "Details". Instead, we want it to display the author's name. How do we do that? You may have already guessed that we should use the [[Name]] field token and you've probably written something like this:

   <xmod:DetailLink Text="[[Name]]">
     <Parameter Name="AuthorId" Value='[[AuthorId]]' />
   </xmod:DetailLink>

   And you are oh, so close, but if you run with this code, you'll probably get a cryptic error like this:
   
    
   The key phrase in this error is The server tag is not well formed. Essentially, it's telling you there's a syntax error. Remember that XMod Pro controls are server-side controls. Many of them have an ASP.NET control deep down in their inheritance hierarchy. As a result, they have to adhere to a set of rules that are slightly different that standard HTML tags. So, what's wrong here?  Instead of using double quotes Text="[[Name]]" to delimit our Text property, we need to use single quotes Text='[[Name]]'. You'll notice that the auto-generated code for the <Parameter> tag already is using single quotes. This is the reason. So, here's our corrected code

   <xmod:DetailLink Text='[[Name]]'>
     <Parameter Name="AuthorId" Value='[[AuthorId]]' />
   </xmod:DetailLink>

   Now, the final step is to replace the static display of the author's name with our new detail link. The new code should look like this

     <ItemTemplate>
           <tr>
             <td><img src="/dnn722/Portals/0/XMP_Articles/images/[[Image]]" style="width:120px;"/></td>
             <td>
               <xmod:DetailLink Text='[[Name]]'>
                 <Parameter Name="AuthorId" Value='[[AuthorId]]' />
               </xmod:DetailLink>
             </td>
             <td>
               <xmod:EditImage Text="Edit" ImageUrl="~/images/eip_edit.png">
                 <Parameter Name="AuthorId" Value='[[AuthorId]]' />
               </xmod:EditImage>
               <xmod:DeleteImage Text="Delete" ImageUrl="~/images/eip_title_cancel.png" 
                 OnClientClick="return confirm('Are you sure you want to delete this?');">
                 <Parameter Name="AuthorId" Value='[[AuthorId]]' />
               </xmod:DeleteImage>
             </td>
           </tr>
     </ItemTemplate>

   All we've done is remove the [[Name]] field token from the <td>[[Name]]</td> line and moved the <xmod:DetailLink> tag into that table cell. The final tweak we need to make is to switch the table column headers around so that they reflect our new layout

     <HeaderTemplate>
       <table>
         <thead>
           <tr>
             <th>Image</th>
             <th>Name</th>
             <th>&nbsp;</th>
           </tr>
         </thead>
         <tbody>
     </HeaderTemplate>

   
   Save your changes and preview them on the authors page
   
   

Congratulations!

XMod Pro is a very deep program, but you already have an application that allows you to add, edit, delete, and view the details of your article authors.  You also now know how to go in and modify the HTML and some of the XMod Pro tags, to customize your display to fit the look and feel of your site.  One thing you may have noticed if you click one of the author detail links is that the details page is very plain.  Since this is just for management, there's not a lot of call to modify it much, but you have the tools to do it yourself if you'd like. To get you started, here's the code you'll need to modify

  <DetailTemplate>
    <strong>AuthorId</strong> [[AuthorId]]<br />
    <strong>Name</strong> [[Name]]<br />
    <strong>Bio</strong> [[Bio]]<br />
    <strong>Image</strong> [[Image]]<br />
    <xmod:ReturnLink CssClass="dnnSecondaryAction" Text="&lt;&lt; Return" />
  </DetailTemplate>

As you can see, it simply displays the basic author information - one field per line. You can easily put your own HTML and CSS in here to spiff-it-up.  The only other bit that you may want to modify is the <xmod:ReturnLink>. As in our previous examples, you can change this to <xmod:ReturnButton> or <xmod:ReturnImage> to affect how it renders. The ReturnLink/Button/Image control is a special control specifically meant for DetailTemplates. It will return the user to the previous List View.