Attach custom information to any page or Mura CMS content item using "Class Extensions" to create extra editable attributes. Mura's Extended Attributes system allows for virtual database columns to be added and manipulated, without writing any code at all.
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:
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.
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)
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:
For the remaining fields, repeat the steps above with the following details for each field:
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)
Input Type: TextBox
Tooltip: Please enter the ISBN of the book
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
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
Enter Books for the Title
Select the Layout & Objects Tab
Under Alternate Child Layout Template, select twoCol_SR.cfm
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: Details Author: Release Date: ISBN: Condition: Price: $
Note: We are using simple formatting for this example, however you can markup and style this however you wish with CSS.
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.
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 # e.g. #$.content('bookAuthor')#
The [ 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.