Last active
December 14, 2023 09:50
-
-
Save stevewithington/f3dd405d5a188fb594a1 to your computer and use it in GitHub Desktop.
Mura CMS: Example of how to use the 'Custom UI' container/tab assignment option when creating a class extension.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--- | |
A brief example on how to use the 'CustomUI' option when creating a class extension in Mura CMS. | |
This example assumes you have an extended attribute called 'Page/Book'. | |
It also assumes you have an attribute set using the 'CustomUI' container/tab assignment. | |
Any extended attributes you assign to the attribute set, you are responsible for collecting | |
that data using your own form fields. Make sure the 'name' and 'id' attributes match the | |
names you've used when you created the extended attributes! For example, if you have an | |
extended attribute with a name of 'bookPublisher', make sure you have a form field with an | |
'id' and 'name' attribute of 'bookPublisher'. Check your casing too! | |
The name of the method to create a custom tab when editing content follows | |
the syntax of on{Type}{Subtype}Edit() | |
You could drop this into your Theme eventHandler.cfc, or a plugin's eventHandler.cfc | |
Remember to reload Mura anytime you make a change to this method! | |
Please Note: This will NOT work if you place it in the Site eventHandler.cfc | |
---> | |
<cffunction name="onPageBookEdit" access="public" output="false" returntype="any"> | |
<!--- | |
This is how to set the name of the Tab Label for your Custom UI. | |
If this is used from within a plugin, it will used the plugin name be default. | |
If not used from within a plugin (i.e., in the Theme eventHandler.cfc) and | |
you don't define the tabLabel, it will display as 'undefined' | |
---> | |
<cfset $.event('tabLabel', 'Book Info') /> | |
<cfset var i = '' /> | |
<!--- This could easily be a recordset from a query, etc. ---> | |
<cfset var publishers = ['Select', 'Simon & Schuster', 'HarperCollins', 'Penguin Random House', 'Hachette Livre'] /> | |
<cfsavecontent variable="local.str"> | |
<cfoutput> | |
<div class="fieldset"> | |
<div class="control-group"> | |
<!--- Book Publisher ---> | |
<div id="book-publisher-container" class="span6"> | |
<label class="control-label"> | |
<a href="##" rel="tooltip" title="My Tooltip!"> | |
Book Publisher | |
<i class="icon-question-sign"></i></a> | |
</label> | |
<div class="controls"> | |
<select id="bookPublisher" name="bookPublisher"> | |
<cfloop array="#publishers#" index="i"> | |
<option value="#esapiEncode('html_attr', i)#"<cfif $.content('bookPublisher') eq i> selected</cfif>>#esapiEncode('html', i)#</option> | |
</cfloop> | |
</select> | |
</div> | |
</div> | |
<!--- Book Author ---> | |
<div id="book-author-container" class="span6" style="display:none;"> | |
<label class="control-label"> | |
<a href="##" rel="tooltip" title="Another Tooltip! (if necessary)"> | |
Book Author | |
<i class="icon-question-sign"></i></a> | |
</label> | |
<div class="controls"> | |
<!--- This will be populated with jQuery based on the 'bookPublisher' selected ---> | |
<select id="bookAuthor" name="bookAuthor"></select> | |
</div> | |
</div> | |
</div><!--- /.control-group ---> | |
</div><!--- /.fieldset ---> | |
<script> | |
jQuery(document).ready(function($){ | |
var checkPublisher; | |
var bookPublisher = $('##bookPublisher'); | |
var currentAuthor = '#$.content('bookAuthor')#'; | |
// these options could come from anywhere ... use Ajax if you want too! | |
var authorGroup1 = { | |
'Steve': 'Steve Withington' | |
,'Matt': 'Matt Levine' | |
,'Sean': 'Sean Schroeder' | |
}; | |
var authorGroup2 = { | |
'Grant': 'Grant Shepert' | |
,'Jason': 'Jason Long' | |
,'Ronnie': 'Ronnie Duke' | |
}; | |
checkPublisher = function() { | |
var bookAuthorContainer = $('##book-author-container'); | |
bookAuthorContainer.hide(); | |
if ( bookPublisher.val() !== 'Select' ) { | |
bookAuthorContainer.show(); | |
var bookAuthor = $('##bookAuthor'); | |
bookAuthor.empty().append($('<option value="">Select</option>')); | |
switch(bookPublisher.val()) { | |
case 'Simon & Schuster': | |
authorOptions = authorGroup2; | |
break; | |
default: | |
authorOptions = authorGroup1; | |
}; | |
$.each(authorOptions, function(index, value) { | |
bookAuthor.append( | |
$('<option>').val(index).text(value) | |
); | |
}); | |
if ( currentAuthor in authorOptions ) { | |
bookAuthor.val(currentAuthor); | |
} | |
} | |
} | |
checkPublisher(); | |
bookPublisher.change(function() { | |
console.log($(this).val()); | |
checkPublisher(); | |
}); | |
}); | |
</script> | |
</cfoutput> | |
</cfsavecontent> | |
<cfreturn local.str /> | |
</cffunction> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- you could import this class extension as an example to test with the above code --> | |
<?xml version="1.0" encoding="UTF-8"?> | |
<mura> | |
<extensions> | |
<extension adminonly="0" availablesubtypes="" basekeyfield="contentHistID" basetable="tcontent" datatable="tclassextenddata" description="" hasassocfile="1" hasbody="1" hasconfigurator="0" hassummary="1" iconclass="icon-book" subtype="Book" type="Page"> | |
<attributeset categoryid="" container="Custom" name="Book Info" orderno="1"> | |
<attribute adminonly="0" defaultvalue="Select" hint="" label="Publisher" message="" name="bookPublisher" optionlabellist="" optionlist="" orderno="1" regex="" required="false" type="SelectBox" validation=""/> | |
<attribute adminonly="0" defaultvalue="" hint="" label="bookAuthor" message="" name="bookAuthor" optionlabellist="" optionlist="" orderno="2" regex="" required="false" type="MultiSelectBox" validation=""/> | |
</attributeset> | |
</extension> | |
</extensions> | |
</mura> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I've created an event to add a new tab to the user admin screen, the newly created tab is appearing and the content is also appearing. However, the newly create tab label is appearing as "undefined".
I don't have any Class Extensions, all I want to do is display some text to the screen.
Am I missing something? Should this work?
This line seems to overwrite my label and reset the tab name to "undefined"
https://github.com/blueriver/MuraCMS/blob/7.1.423/core/mura/plugin/pluginManager.cfc#L3052
Mura v. 7.1.423