Mura CMS Theme Development: Class Extensions
August 4, 2015 by Ronnie Duke
One of the great things about a CMS is that it stores all of your website information into a single database (like an Excel spreadsheet), and gives you easy access to edit that information in the admin. When you edit a page's title, summary, or body copy, and click publish, you're essentially updating that database with the changed information. But what if you want to store additional information associated with a particular content type?
A profile page, for example, might contain a repetitive structure of information about that person (First Name, Last Name, Job Title, etc). Traditionally your options would be to re-type all of that information every time, or you would have to either alter the database (either directly, or write some custom scripts to do that for you) to create additional columns to contain that information. Then you would have to alter the user interface (UI) to give the user additional form fields to input that information..
In Mura CMS, that entire process is simplified with the use of Extended Attributes. In the Mura admin, you can extend just about any content node type (Page, Component, Gallery, Folder, etc) and add as many extra fields you want, all without having to touch the database or write any code.
In this example, we're going to create a new page type for a book. In addition to the title, each book will have the following fields for the content administrator to fill out:
- Release Date
There are three parts involved in Creating Extended Attributes:
- Class Extension: This is the base node you are extending (Page, Folder, Gallery, Component, etc)
- Attrbute Set: A grouping of Extended Attributes, shown when the user is editing content
- Extended Attributes: Individual fields for the data you want to collect (like we listed above).
Create the Class Extension
The first step is to create the Class Extension. This is the main object Type andSubType that will house all of the extended attributes.
To create a new Class Extension::
- From the Mura Admin, go to select Site Config > Class Extension Manager > Add Class Extension.
- For Base Type Select Page.
- Under SubType, type Book
Note: Leaving "SubType" set to "Default" will apply any extended attributes you create to ALL content nodes of that type.
- Under Icon, select the book icon to associate with the Book subtype.
- Click Add.
Add Extended Attribute Set
Now that you have your Page/Book Class Extension, we need to add a few Extended Attributes for the items we need for the book. Extended Attributes are grouped into Attribute Sets, much like a
<fieldset> in an HTML form). The attribute sets are separated visually in the admin to allow modular separation for the user.
To create an Attribute Set:
- Select Add > Add Attribute Set.
- Enter Book Details for the Attribute Set Name. This set will contain all of the details we need for each book.
- For the Container (Tab), select Basic (you can select alternate tabs in the Mura UI for organization)
- Click Add.
Add Extended Attributes
Once you have your Attribute Set created, you can add the individual Extended Attributes. We will start by adding a plain text field for the book's author:
- Within your Book Details Attribute Set, click Add New Attribute.
- In the Name field, enter bookAuthor.
Note: It is important to namespace the variable based on its subType and Attribute's name. For example, if the subType is 'Book' and the attribute you wish to add is 'title,' then use 'productTitle' as the actual 'name' for the attribute instead. If you have several custom extended attributes for your site, you could easily and accidentally build two (or more) extended attributes with the same name. Don't do this! In addition, avoid using any of Mura's standard form field names. This is to avoid form field name collisions, otherwise you could unintentionally end up with two form fields with 'Title' for the name attribute, one from Mura, the other from your extended attribute.
- In the Label field, enter the user friendly label for the field that will appear to the user.
- For the Input Type, select TextBox.
- For Tooltip, enter a user-friendly hint about what should go into the input field. Something like "Please enter the name of who wrote the book" to make sure users understand what that field means.
- Your complete form should look like this:
- Click Add
For the remaining fields, repeat the steps above with the following details for each field:
- Name: bookReleaseDate
- Label: Release Date
- Input Type: TextBox
- Tooltip: Please select the date the book was published
- Validate: Date (this will add a date picker to the field)
- Name: bookISBN
- Label: ISBN
- Input Type: TextBox
- Tooltip: Please enter the ISBN of the book
- Name: bookNewUsed
- Label: New or Used
- Input Type: SelectBox
- Tooltip: Please select whether the book is new, or used
- Option List (the html values for the items in the dropdown list): new^used
- Option Label List (the user friendly labels for the items in the dropdown list): New^Used
- Name: bookPrice
- Label: Price $
- Input Type: TextBox
- Tooltip: Please enter price of the book
Using a Class Extension
Now that you have created all of your extended attributes, you can add a new book from the site manager, and fill out all of the form fields you just created.
- Go to the Site Manager
- Next to the Home Page, hover over the (+) sign and select Add Content
- Select Folder
- Enter Books for the Title
- Select the Layout & Objects Tab
- Under Alternate Child Layout Template, select twoCol_SR.cfm
- Click Publish
- Next to the Books folder in the Site Manager, hover over the (+) sign and selectAdd Content
- When the Select Content Type modal appears, you should now see the Bookpage type, along with the respective icon.
- Enter the book's Title, Summary & Content
- you should see the Book Details Attribute Set below the content field on the Basic Tab (if you don't see it there, you may have selected a different tab to display the Attribute Set on, such as Extended Attributes). Enter the books' respective information and click Publish
Displaying Extended Attributes
When you view the page, you will notice that your attributes are not showing up. That is because we need to tell Mura to display those values out on the page. Now, there are several ways to accomplish this, all depending on the use case and how much flexibility you want to give your users to change the page layout. In this example, we are going to create a component that outputs the information we want, so that way it's versatile to use in whatever page template we choose.
Create a New Component
- In the Mura admin, click go to Modules > Components
- Select Add Component
- In the Title field, enter Book Details
- In the content area, enter the following:
Note: We are using simple formatting for this example, however you can markup and style this however you wish with CSS.
- Click Publish
Add the Component to the Book Pages
- Back in the Site Manager, locate the Books folder (not the book itself), and click on it to edit.
- Select the Layout & Objects tab
- Under Inheritance Rules, select Start New Cascade
- Under Content Objects, select Components, locate the Book Detailscomponent and add it to the Right Column display region.
- Click Publish
Now when you refresh your book page, you should see the book details appear in the right-hand sidebar.
As I mentioned before, this is merely one way to display Extended Attributes. You may also choose to incorporate your extended attributes in your page or component templates, where you can use additional logic and further prevent your users from altering your markup.
If you would like to display your Extended Attributes within a template, simply change the
[ m ] to
[ m ] tag is part of the Mura Scope to allow you to display certain Mura functions within the editor in the admin, where as the hashtags (
#) are the standard way of outputting content in CFML.
Now that you've learned how to use Class Extensions, you can take your Mura themes to a whole new level by giving your users more robust ways to manage the content in your themes.
More About Mura Themes
Mura CMS v6 Documentation: Front End Workflow
Download Mura Themes: GetMura.com/themes
Premium Mura CMS Themes: Themeforest.net
This article is part of an original series at Tuts+.com titled "Theme development with Mura CMS" by Ronnie Duke. Further documentation for Mura CMS developers and content managers is available at docs.getmura.com. Learn more about Mura's powerful features and flexible options at www.getmura.com.