DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Repository: Modifying the display of Custom Attributes

If you are using Custom Attributes in your Repository template, you may be slightly frustrated that you do not have much control over the format of the Attributes when displayed. Well with a little template tweaking and a little jQuery magic, you can alter the format of your attribute values

 
Creating Custom Attributes

You drop a Repository module on a page and in the Module Settings, you setup an Attribute named “Color” and configure it to have 3 possible values, “Red”, “White” and “Blue”. You start by entering “Color” in the Attribute field and clicking on the “ADD ATTRIBUTE” link. You’ll then see your new Attrbute listed. Click on the new Attribute to select it, then begin entering Values for that Attribute. Enter “Red” and click “ADD VALUE”, then enter “Blue” and finally “White” clicking the “ADD VALUE” link after entering each one. When done you should have something that looks like this, a custom attribute with three possible values.

image

After we save our module settings, we’ll now see a checkbox list of Attributes available on the Upload form, where we can check which attributes we want assigned to the item we’re uploading.

image

However, If we now upload an item to our module, we won’t see our Custome Attributes Sad smile.

image

Displaying Custom Attributes

Next, in order to see the attributes that each item has been assigned, we need to make a small change to our “template.html” file. As always, when modifying one of the standard template, copy the template folder from “DesktopModules/Repository/Templates” to “/Portals/n/RepositoryTemplates”. If the “RepositoryTemplates” folder does not exist, just create it.

So, in this example, we’ll modify the “default” folder. After copying it from it’s “DesktopModules” location to our “0” portal, we’ll edit the “template.html” file in the “default” folder now located in the “Portals” folder structure.

We need to add a new table row to the template to display our Custom Attributes. We open the “template.html” file with Notepad (or any text editor) and add a new row. We’ll add our Attributes after the FileSize and before the DownloadCount.

Before:

 

<tr> 
 <td align="left" valign="top" class="SubHead" width="75">[LABEL:FileSize]</td> 
 <td align="left" valign="top" class="normal">[FILESIZE]</td> 
</tr> 
<tr> 
 <td align="left" valign="top" class="SubHead" width="75">[LABEL:Downloads]</td> 
 <td align="left" valign="top" class="normal">[DOWNLOADCOUNT]</td> 
</tr> 

 

After:

 

<tr> 
 <td align="left" valign="top" class="SubHead" width="75">[LABEL:FileSize]</td> 
 <td align="left" valign="top" class="normal">[FILESIZE]</td> 
</tr> 
<tr> 
 <td align="left" valign="top" class="SubHead" width="75">Color</td> 
 <td align="left" valign="top" class="normal">[ATTRIBUTE:Color]</td> 
</tr> 
<tr> 
 <td align="left" valign="top" class="SubHead" width="75">[LABEL:Downloads]</td> 
 <td align="left" valign="top" class="normal">[DOWNLOADCOUNT]</td> 
</tr>

 

Now, when we view our Repository module, we’ll see our Custom Attribute values displayed

image

FORMATTING YOUR ATTRIBUTES

As you can see, the Attributes that were selected when the item was uploaded are displayed as a comma separated list of values. Some people have expressed an interest in having a space after each comma to better distinguish the values.

While there is no way to currently change the display of the Attribute values within the module settings or the template, you can do it with a little jQuery. We want to inject some script at the bottom of our module which will re-format the values. So, the first thing we need to do is wrap the data in a div with a class name so that we can reference it from our jQuery script.

Change the line that injects the Attribute values from

<td align="left" valign="top" class="normal">[ATTRIBUTE:Color]</td>

 

to

 

<td align="left" valign="top" class="normal"><div class="rAttributes">[ATTRIBUTE:Color]</div></td>

 

what we did is wrap a div around the [ATTRIBUTE:Color] token and gave it a class of ‘rAttributes’.

Next, we’ll open the “footer.html” template file in our template folder. The footer is injected into the module output at the bottom, which is exactly where we want to place our script.

Edit the “footer.html” template file with and add the following script block at the end of the file

<script type = "text/javascript"> 
 // add space between each attribute 
 $(document).ready(function() { 
 $(".rAttributes").each(function(index) { 
 $(this).html($(this).html().replace(/\,/gi, ',&nbsp;')); 
 }); 
 }); 
</script>

Then save the file. The script will find any div with a class of ‘rAttributes’ and grab the html markup from within. Then it uses the replace() method to change all of the commas to commas followed by a space, and finally it modifies the html within our div. Now, after we save the changes we go back to our Repository module and we now see a space between each item.

image

In fact, we can change our comma to just about any html markup, a <br /> to show each attribute value on a separate line

image

In fact, we can use some jQuery string methods to parse the original attribute value string into individual values then modify the div’s html to redisplay them any way we want.

Enjoy!

This post was cross-posted from my personal blog.

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (41)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out