Blog

Custom Objects in Mura

Although I only meant to cover how to use Mura's "addToHTMLHeadQueue" function to show you how to load javascript libraries, CSS or whatever else you may need on-the-fly, I ended up covering a lot of ground in the interest of providing something useful, a custom object that uses the aforementioned function and loads internal Mura content dynamically.

Since this post originated as a request in our support forum, we're going to create tabbed navigation for an in-page object/component loading the files into the HTML <head> only when the Display Object is called on a specific page. For content, we're going to use both static and dynamically generated content. We've adapted the tab code from Fabtabulous.

If you'd like to follow along or use Fabtabulous in your Mura site, here are the files: fabtabulous.zip.

Step 1: Let Mura know which javascript library you'd like to use

Mura uses Prototype/Scriptaculous jQuery by default, so this step is only really necessary if you'd like to use JQuery Prototype/Scriptaculous or if you'd like to just hard-code the libraries and CSS you need in the templates rather than loading them on-the-fly as we do in this example.

There are two variables that you can set in the local contentRenderer (/[siteid]/includes/contentRenderer.cfc):

  1. jslib: This variable tells Mura which js framework it should use. Set this to jquery.
  2. jsLibLoaded: This tells Mura if it needs to load the js framework into the html head. If you have hard coded jquery into the template set this to true.

Example:

<cfcomponent>
<cfset this.jslib=""/>
<cfset this.jsLibLoaded=true>
...
</cfcomponent>

Step 2: Place files into the appropriate directory

Best practice for adding custom Display Objects suggests you place the files in /[siteid]/includes/display_objects/custom/ so we'll create a new directory there called "fabtabulous", add a couple sub-directories for our javascript and CSS, and drop fabtabulous.js and tabs.css into the js and css sub-directories respectively.

If you take a look at the files included in the you'll see that there are also two other files included, index.cfm, htmlhead.cfm and Mura tag.txt. If not, you can create them and place them in the root of the fabtabulous directory.

index.cfm needs to include the following to initiate the Javascript library and tell Mura where to find the items to be loaded into your document <head>:

<cfset loadJSLib() />
<cfset addToHTMLHeadQueue("custom/fabtabulous/htmlhead.cfm")>

If this were a static component you would also place all necessary HTML for your object following these two lines (be sure to wrap your code/content in <cfoutput>). Since we want our content to be edited from within the Mura admin, we're going to use the "dspObject" function to dynamically place a Mura Component that contains the HTML (and other nested objects) instead.

<cfoutput>
#dspObject('component','COMPONENT ID',request.siteid)#
</cfoutput>

The other file we need is htmlhead.cfm. This file is the include that places the calls to your javascript and CSS into the <head> of your page dynamically. You can use actual code here or link to files as we do:

<cfoutput>
<script src="#$.siteConfig('assetPath')#/includes/display_objects/custom/fabtabulous/js/fabtabulous.js" type="text/javascript"></script>
<link rel="stylesheet" href="#$.siteConfig('assetPath')#/includes/display_objects/custom/fabtabulous/css/tabs.css" type="text/css" media="all">
</cfoutput>

Step 3: Create Your Mura "Component"

In the Mura Admin, go to "Components" and create a new Component. Give it a title and paste the following into the code view in the editor:

<div id="fabtabs">
<ul id="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
</ul>
<div class="panel" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="panel" id="tab2">[ Mura ]dspObject('feed','60F01591-DC00-15EF-A8D129D0BE512940',request.siteid)[ /Mura ]</div>
<div class="panel" id="tab3">[ Mura ]dspObject('feed','09DA88D4-F2BB-4055-938B52F2D89EFB64',request.siteid)[ /Mura ]</div>
<div class="panel" id="tab4">
<h3>[ Mura ]dspObject('component','60F5C04D-DFC2-6319-19B508376EAC5147',request.siteid)[ /Mura ]</h3>
</div>
</div>

You'll notice in the panels for tabs 2,3 and 4 I'm using the dspObject function to pass in other Mura objects. In tab2, I've added a "Remote Feed" for Yahoo Sports RSS and in tab3 I've added a "Local Index" with recent posts from a Blog in Mura. In Tab 4 I'm nesting another component inside this one to provide an easy way to edit the content of that tab, reducing the opportunity for the mark-up to break. Tab1 is simply text. You will, of course, need to create create objects before being able to use them. Once you have, you can grab the contentID (the long string of random numbers that is the second argument in my function, the first is the type of object you are calling, the third and last is the specific siteID we're calling it in) by editing the object and copying the feedID out of the URL.

Unfortunately, with fabtabulous, you'll need to manually create each of the actual tabs and it's asscoiated panel/content manually. In the near future, we'll show you how to do a similar thing, but using the powerful JQuery Cycle plug-in which creates navigation for you dynamically, among other cool tings.

Step 4: Placing your new custom object into a page

This last step is a simple one. Using the [mura ] tag and the dspInclude function, we'll place your object into a specific page using the following:

[ Mura ]dspInclude('display_objects/custom/fabtabulous/index.cfm')[ /Mura ]

IMPORTANT: To keep the [ Mura ] tags from rendering in this page, I've added spaces after the first bracket and before the last bracket in the tag in all references above. These spaces will need to be removed for the [ Mura ] tag to render.

Step 5: View the result

This screenshot shows the tab I created for my Local Index.

Conclusion

While I ended up getting a little carried away, the topics covered in this post can be used in many different ways and not only for custom objects. They can be used alone or in combination to provide some very powerful, but easy to maintain results. In addition, some of the concepts covered here will be useful when we release the forthcoming Plug-In Manager. We hope you find this as useful as we do.

Comments

David Morgan

Awesome info. Thanks so much for the walk through. Looking forwad to the next installment with the Cycle plug in and dynamic nav.

Thx so much for Sava and the wonderful support.

December 23, 2008, 10:19 PM
Reply
Flag as Spam
Steve O'Neal

Just a quick note, the way the files were setup in the zip file you referenced the component in step 3. The list code needs to be a child of id="fabtabs"

Simply put surround step 3 code with:

<div id="fabtabs">

[Step 3 Code]

</div>

December 26, 2008, 4:05 AM
Reply
Flag as Spam
Jonas Eriksson

Thanks Sean - looking forward to seeing more examples utilizing "cool & useful" JavaScript Libs, future jQuery Cycle examples most appreciated :-)

January 26, 2009, 8:59 PM
Reply
Flag as Spam
Sean Schroeder

@Steve:

Thanks for pointing taht out. I've updated the code above.

February 2, 2009, 9:00 AM
Reply
Flag as Spam
Mike Duey

If the dynamic feed is set to use paging (set by Items Per Page on the display tab) the whole page refreshes when you click the Next link. Is there a way to make an ajax call to return the next set of records?

February 5, 2009, 4:59 AM
Reply
Flag as Spam
Rob

Trying to download the sample files fabtabulous.zip. But the link is broken. Any way to get them?

Thanks

October 19, 2009, 2:19 PM
Reply
Flag as Spam
megan

Could you repost the link to fabtabulous.zip - still getting a 404

Thanks!, Megan

October 27, 2009, 3:22 AM
Reply
Flag as Spam
Sean Schroeder

Sorry about that...not sure what happened to that file. In any event, it's been fixed.

November 1, 2009, 8:34 AM
Reply
Flag as Spam
Rob

Mike Duey posted a comment about using a dynamic feed when is set to use paging. When you click on the next page the page refresh and take you back to the first tab. I believe is set up in the dsp_nextN.cfm file. Is there is any work around this.

Thanks

January 20, 2010, 5:28 PM
Reply
Flag as Spam
Sean Schroeder

The paths to the javascript have been updated. I'm not sure if that is/was causing the issue, but you might want to update those and see if that helps.

August 12, 2010, 10:46 AM
Reply
Flag as Spam
kiran

I was trying to implement this but is not working and errors out as class is not defined.. Could you please guide me with this. There is something to do with the CSS i guess.

August 13, 2010, 2:35 AM
Reply
Flag as Spam
Jocuri cu Hannah Montana

Do you have to have an app.cfm/cfc file at all or will this work without it?

If I wanted to build a store app that allowed users to shop etc... is this the best way to integrate it?

I should have tested this out before posting my last comment. This is really nice, the only thing that I would like to know is whether or not this is the best approach for creating custom features like displaying products or whatever.

October 4, 2010, 6:40 AM
Reply
Flag as Spam
Jocuri de Gatit

Is there a way to make an ajax call to return the next

October 4, 2010, 6:41 AM
Reply
Flag as Spam
James

I'm confused by this (sorry... new to Mura). I think part of the confusion is how much of the example was dynamically driven. I'd be happy to see a simpler example where as much as possible was hard coded to just make it work for a specific page, then make it dynamic bit by bit.

I'm interested in using the jquery ui widgets like tabs and accordion. I thought this would be *easy* since Mura uses jquery as the default js library.

Any tips on how to use jquery ui widgets?

Thanks!

James

October 10, 2010, 1:32 PM
Reply
Flag as Spam
James

p.s. I can get jquery ui widgets to work on a regular html page (outside of Mura)... the help I need is how to do it within Mura.

October 10, 2010, 1:50 PM
Reply
Flag as Spam
Sean Schroeder

James, this method can be followed to use jQuery UI, as well. As for using static content, just replace the [mura ] tags in the tabs with static content. Also, instead of using the htmlheadqueue, you can just add jQuery UI to your html_head.cfm. Just make sure you set JSLibLoaded to true.

Also of note, this topic is one we cover in our Front-End Dev Training course.

October 11, 2010, 6:41 AM
Reply
Flag as Spam
Robert Stark

I think it is important to put a sidenote here regarding the Mura tag. The Mura tag cannot be hardcodes (e.g.) placing the tag directly on your template. It can only be used from within the Site Manager in the "Content" area of a particular page. This stumped me as I did not understand the mura tag at first and had to do more research into why I was not getting the mura tag to render content after I hardcoded it in my home page.

May 9, 2011, 2:20 AM
Reply
Flag as Spam
Post a Comment

Required Field