Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mura CMS: Example of how to use the 'Custom UI' container/tab assignment option when creating a class extension.
<!---
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>
<!-- 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>
@alladinUK

This comment has been minimized.

Copy link

alladinUK commented Apr 20, 2020

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

<cffunction name="onUserEdit" access="public" output="false" returntype="any">
	<cfset $.event('tabLabel', 'Login history')>

	<cfreturn 'HI' />
</cffunction>

Mura v. 7.1.423

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.