How to Create Dynamic Content Display Objects in Mura CMS with MuraFW1 Plugins

If you've ever created a MuraFW1 plugin for Mura CMS (which this article assumes by the way!), you may have wondered how to go about creating dynamic Content Display Objects. Doing so would enable an end-user to edit a page, go to the Content Objects tab, select Plugins from the Available Content Objects dropdown, select your plugin, then select your "dynamic display object" which would then fire off and return yet form field containing the dynamic list of options available to be assigned to the desired content display region.

Still with me? Great!

Ultimately, there's three main parts to this:

1. Create the display method, i.e., myDisplay

2. Then create an "OptionsRender" display method which follows the naming convention of myDisplayOptionsRender

3. Finally, we'll add the basic display method (i.e., myDisplay) to the config.xml.cfm's list of available displayObjects

1. Create The Display Method

In the pluginEventHandler.cfc, we can add our basic display method. Ultimately, we should eventually expect a JSON formatted variable to be passed in via $.event('params'). Obviously, we'll need to deserialize the JSON, and once we do that, we can do whatever we like with it. An easy way to pass this information over to FW/1 is to stuff any desired variables into the URL scope ... and then call the typical renderApp() method and let FW/1 take over from there. Check out our simple example below which is expecting to find "whateverID" to be in the unpacked params:

<cffunction name="dspWhatever" output="false" returntype="any">
    <cfargument name="$" hint="mura scope" />
    <cfscript>
        var local = {};

        // grab everything that's been passed in from OptionsRender() and unpack the JSON option values that were saved
        local.params = DeserializeJSON($.event('params'));

        // stuff selected WhateverID into the url scope so that fw1 will pick it up
        if ( StructKeyExists(local.params, 'whateverid') ) {
            url.whateverid = local.params.whateverid;
        };

        // something went wrong ... so let's not bomb everything
        if ( not StructKeyExists(url, 'whateverid') ) {
            return '';
        } else {
            return renderApp($,'public:main.default');
        };
    
</cfscript>
</cffunction>

2. Create An "OptionsRender" Method

Now for the magical part! Whatever you named your displayMethod, you simply append "OptionsRender" to the end of it. So if you have dspWidgets, then you would have dspWidgetsOptionsRender as an available method. In the example below, I'm creating a simple recordset which we'll then loop over to output the options and dynamically generate the option value which is a tilde (~) separated list where the last item in the list is a JSON formatted list of params...yes, the very same params our display method in step one is expecting to find!

<cffunction name="dspWhateverOptionsRender" output="false" returntype="any">
    <cfargument name="$" />
    <cfscript>
        var local = {};
        
        // this recordset could come from anywhere ... doesn't even have to be a recordset, could be anything that contains data that you want to grab options from
        local.rs = QueryNew('WhateverID,WhateverTitle,WhateverField', 'VarChar,VarChar,VarChar');

        QueryAddRow(local.rs, 1);
        QuerySetCell(local.rs,'WhateverID', 'anyid-1', 1);
        QuerySetCell(local.rs,'WhateverTitle', 'My Awesome Title', 1);
        QuerySetCell(local.rs, 'WhateverField', 'Hi Ho Cherry-O', 1);

        QueryAddRow(local.rs, 1);
        QuerySetCell(local.rs, 'WhateverID', 'anyid-2', 2);
        QuerySetCell(local.rs, 'WhateverTitle', 'Another Great Title', 2);
        QuerySetCell(local.rs, 'WhateverField', 'Knick Knack Paddy Whack', 2);
    
</cfscript>
    <cfsavecontent variable="local.str">
        <cfif local.rs.recordcount>
            <select name="availableObjects" id="availableObjects" class="dropdown">
                <!--- we're going to pack everything up into a tilde (~) separated list where the last item in the is a JSON formatted list of params to be passed over to the display method --->
                <cfoutput query="local.rs">
                    <option value="plugin~#HTMLEditFormat(Replace(WhateverTitle,'~','','ALL'))#~#$.event('objectid')#~{'whateverid':'#WhateverID#','anotherfield':'#WhateverField#'}">
                        #HTMLEditFormat(WhateverTitle)#
                    </option>
                </cfoutput>
            </select>
        <cfelse>
            <p><em>Please create some Whatevers first.</em></p>
        </cfif>
    </cfsavecontent>
    <cfreturn local.str />
</cffunction>

3. Add The Rendering Method To config.xml.cfm

The final step in all this is to add your basic displayMethod to your config.xml.cfm file so that it will be registered with Mura CMS. Once it is, then we should expect to see it show up in the Content Objects tab when someone selects our plugin.

<displayobjects location="global">
    <displayobject name="Display Whatever" displaymethod="dspWhatever" component="pluginEventHandler" persist="false" />
</displayobjects>

That's it! Hopefully this helps anyone else who is creating FW/1 plugins for Mura CMS.

Cheers!

New Plugin for Mura CMS: MuraMetaGenerator

In honor of Mura's new and improved App Store, I've release another plugin for Mura CMS into the wild called MuraMetaGenerator™. In a nutshell, this allows Mura CMS to auto-generate meta keywords and descriptions for your pages.

Why Should I Use This?

There could be a number of reasons why someone would want to use MuraMetaGenerator™. One of the best reasons is that most Authors and Editors either don't have the time and/or the knowledge of what information to put in these fields to begin with.

Also, since search engines change their algorithms daily and actually rely less and less on meta keywords and meta descriptions, why not spend your time going through the actual content of your pages and making sure your content contains the information you want indexed by search engines? After all, MuraMetaGenerator™ derives its information based on the actual page content which means you'll be following 'White Hat' Search Engine Optimization (SEO) techniques so your search engines rankings will most likely grow organically over time.

So go ahead and let MuraMetaGenerator™ do it for you! You can grab it from http://www.getmura.com/index.cfm/app-store/apps/murametagenerator/

MuraMediaPlayer Plugin Released for ColdFusion-Powered Mura CMS

I was finally able to finish up my MuraMediaPlayer plugin for Mura CMS. This plugin uses JW Player™, the Internet's most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, MP4, MP3 and AAC). It also supports RTMP, HTTP, live streaming, a wide range of settings and more.

This plugin is available in the Mura CMS App Store under plugins. Since the primary guts of the plugin are driven by my cfMediaPlayer project hosted on RIAForge (a ColdFusion wrapper of the JW Player™), I'm posting a copy of the license here just so there's no confusion.

License

By using MuraMediaPlayer, you agree to the 'non-commercial' license found at https://creativecommons.org/licenses/by-nc-sa/3.0/. For corporate use or if you're planning to generate revenue from your site (e.g., by running advertisements on the page, selling anything, etc.) you will need to buy a license for JW Player™. To obtain a commercial license of the JW Player™, please visit https://longtailvideo.com/players/jw-flv-player/commercial-license/

Installation

Installing the plugin is pretty simple. I've created a brief video tutorial and also included an outline of some simple steps to follow:

Installing MuraMediaPlayer

  1. Download the plugin from the Mura CMS App Store's plugins section
  2. Note the location of the 'muramediaplayer.zip' file that you downloaded
  3. Log in to your Mura CMS Admin area
  4. Click 'Site Settings' found on the top-right portion of the screen on the yellow bar
  5. Select the 'Plugins' tab
  6. 'Browse' to the location of the 'muramediaplayer.zip' file and select it
  7. Click 'Deploy' and the 'Plugin Settings' form should appear
  8. If you want to change the 'Plugin Name,' feel free to do so
  9. You can simply leave the 'Load Priority' alone or change it to anything you want to be if you have other plugins that require loading ahead of it
  10. If you're Mura CMS install is using Amazon S3 for file storage and you've set up an Amazon CloudFront, you can enter the 'Cloud URL.' Otherwise, leave it blank.
  11. If you're Mura CMS install is using Amazon S3 for file storage, you have an Amazon CloudFront set up and you've setup a Streaming Distribution to deliver content to end users in real time, you can enter the 'Streaming URL.' Otherwise, leave it blank.
  12. Under 'Site Assignments,' select the site(s) you wish to enable the plugin to run on.
  13. Click 'Update' when finished.
  14. That's it! You're ready to create MuraMediaPlayer pages and/or use a new [mura] tag method that is now available to you.

Please visit Amazon for more information about their S3 and CloudFront services.

Usage/Instructions

Detailed instructions for using the plugin are available at https://www.getmura.com/index.cfm/app-store/plugins/muramediaplayer/documentation/. In addition, instructions can be found after you install the plugin simply by logging into the Admin area, click 'Plugins' (or go to 'Site Settings', then select 'Plugins' tab), then click the 'MuraMediaPlayer' link.

More Entries

© 2024, Stephen J. Withington, Jr.  |  Hosted by Hostek.com

Creative Commons License   |   This work is licensed under a Creative Commons Attribution 3.0 Unported License.