Mura CMS: Example of how to use the 'Custom UI' container/tab assignment option when creating a class extension.

muraCustomUI.cfm

<!--- 
		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>

pageBook.xml

<!-- 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>