Mura 10: Managing Content

How to Create/Edit a Form

1. From the back-end administration area, go to the Content section, select the Tree View tab, then select the Forms button.
2. Click the three-dotted menu beside Forms and select Add Content.
3. The Select Content Type dialog window should appear.
   • Form
     • The Form option is the most common selection used. Using this option will offer you the ability to create a form using a special user interface, specifically designed with form creation in mind.
   • Simple Form
     • The Simple Form option is typically used by developers so they have a way to include their own custom designed form, and yet allow the data to be collected and managed by Mura.
   • Folder
     • The Folder option is available so that you can create groupings of Forms. This is useful for grouping forms logically and also for keeping forms used by similar groups of users together so you only need to set permissions on the Folder, versus having to modify permissions for each and every form.
4. The Create Form screen should appear.
   • Basic Tab
     • Title (required)
       • Enter a title for the form.
     • Content
       • Toolbar
         • This is where the actual content of the form is created. Across the top of the Content User Interface (UI) is a toolbar which allows you to add/create form elements. To rearrange form elements, simply click, drag, and then drop to your desired order.
         • Form Button
           • You may optionally click the "Form" button to enter specific information used when the form data is emailed to any addresses listed under "Send data to email address". You can also change the label of the Submit button, if desired here.
         • Section Button
           • If you select the "Section" button, it will create a grouping for form fields to belong to. Any fields listed directly below it will appear in that section. For developers, this merely creates a HTML "fieldset" element. Click on the "New Section" element itself to reveal options in the main window.
           • Any text entered in the Label field will automatically update the information elsewhere. For example, if you enter "Your Information" into the Label field, "Your Information" will also appear at the top of the section, and in the column of form fields.
         • Text Field
           • The Text Field is a commonly used form field used to collect simple data such as names, email addresses, phone numbers, etc.
           • Click the "New Text Field" element itself in the left column to reveal options in the main window. Any text you enter in the Label field will automatically update the name and other attributes just as it did in the previous "Section" button. This feature applies to all other form field types as well.
             • Basic Tab
               • Label
                 • Data entered here will appear with the form field so end-users know what to enter into the form field.
               • Name
                 • This field is primarily for developers, and the text here will become the "name" attribute of the form field itself.
               • Value
                 • You may enter a default value to be displayed when the form renders.
             • Advanced Tab
               • Size
                 • Primarily used by developers, data entered here will be used for the form field's "size" attribute.
               • CSS ID
                 • Primarily used by developers, data entered here will be used for the "ID" attribute of the form field.
               • CSS Class
                 • Primarily used by developers, you may enter a CSS class to be applied to the "class" attribute of the form field.
               • Wrapper Class
                 • Primarily used by developers, you may enter a CSS class to be applied to the container in which the form field is placed within.
               • Placeholder
                 • Data entered here will appear inside the form field, but is only "temporary" and will not be used if the form is submitted. For developers, this is the "placeholder" attribute of the form field.
               • Tool Tip
                 • Data entered here will be applied to the "title" attribute of the form field.
             • Validation Tab
               • Validation Type
                 • None
                   • No validation will be applied to the form field.
                 • Numeric
                   • Validates the data entered in the form field is numeric. If it does not validate, an error message will be displayed.
                 • Date
                   • Validates the data entered in the form field is a valid date format. If it does not validate, an error message will be displayed.
                 • Email
                   • Validates the data entered in the form field is a valid email address format. It does not verify whether or not the email address actually exists. If it does not validate, an error message will be displayed.
                 • Regex
                   • This field is reserved for experienced developers. Enter a JavaScript regular expression that should be invoked when validating the form field here. If it does not validate, an error message will be displayed.
               • Validation Regex
                 • If the Validation Type is set to "Regex", enter a JavaScript regular express to be used here.
               • Validate Message
                 • Text entered here will be displayed to end-users if the form field is required, or does not pass validation rules.
               • Required?
                 • If enabled, the Validate Message will be displayed to end-users who do not complete the form field.
         • Text Area
           • The Text Area form field represents a multi-line plain-text editing control.
         • Hidden Field
           • The Hidden form field does not show on the page. This field is typically used by developers to capture additional, or dynamic data such as the name of the page the form is being used on.
         • Radio Button Group
           • The Radio Button Group is a listing of many choices, where end-users may only select one.
             • Source Tab
               • Source Select Menu
                 • Create New
                   • Selecting Create New, and clicking the "Update" button will create a new List tab.
                   • For each option, enter a Label to be displayed to the end-user, and a Value to be stored in the database to indicate which option the user selected.
                   • To indicate a default selection, click the radio button next to your desired default row.
                 • Custom Display Object
                   • Primarily used by developers, you may enter the name of a Custom Display Object to use as the source for options.
                 • Custom Object
                   • Primarily used by developers, you may enter the name of a Custom Object to use as the source for options. Code example >
                 • Remote Source
                   • Primarily used by developers, you may enter a Remote Source to use as the source for options. Code example >
         • Checkboxes
           • A Checkbox allows you to select a single value for submission in a form (or not).
             • Source Tab
               • See the Source Tab section in the Radio Button Groups section above.
         • Dropdown Menu
           • The Dropdown Menu allows you to create a select menu of options for end-users pick from.
             • Source Tab
               • See the Source Tab section in the Radio Button Groups section above.
         • File Upload Field
           • The File Upload Field creates a form field to enable end-users the ability to attach files to their form submission.
             Note: Allowing the general public to upload files to your website may introduce a security risk. Please consult an experienced and qualified developer before using this feature.
         • Block of Static Text
           • The Block of Static Text button allows you to add text within the form itself. This is especially useful when you need to add instructions within the form.
         • Nested Form
           • The Nest Form button enables you to nest another Mura form within the form itself. This is useful when you have multiple forms that may contain duplicate information to be collected such as First Name, Last Name, Email, etc. You could create a separate form with only those fields, and then insert the form into the other forms requiring that data.
       • Page
         • In the far left column of the Content UI, you can create and/or delete additional "pages" of form fields. This is useful for long forms, and when you wish to display only a subset of form fields to your end-users to reduce the anxiety of completing a long form all at once.
         • Click the Plus sign to add a new page.
         • To delete a page, select the page you wish to delete, then click the circle with an "x" in the middle of it to remove the page.
     • Confirmation Message
       • Text entered here will appear for users after they successfully complete and submit the form. This is a great place to add information such as your organization's phone number, business hours, etc.
     • Send data to email address (Separate multiple email addresses by comma)
       • Enter a comma-delimited list of email addresses of where you would like email notifications sent to. Many organizations use a group email address of some kind for this field such as sales@yourdomain.com instead of entering individual's email addresses here.
   • Publishing Tab
     • Display

       • This field controls whether or not the form will be visible to users via the public, front-end view of your site.

       • Yes

         • If Yes, then the form will be visible to users via the public, front-end view of your site.

       • No

         • If No, the form will not be visible to users via the public, front-end view of your site.

       • Per Schedule

         • You may specify a schedule for the form to display, including the frequency of the display such as daily, weekly, monthly, etc. and when the form should stop displaying, if ever.

     • Content Parent

       • You may use this field to move a form to be grouped under another form or Folder of forms. See the Selecting New Parent section for more details and instructions.

     • Notify For Review

       • When enabled, Send to and Message fields will appear.
       • Send to
         • You may select one or more users to receive an email notification after saving or publishing the form. To select more than one person, use <CTRL> + click (on a PC) or <CMD> + click (on a Mac).
       • Message
         • Text entered here will accompany a link to view the form in the email notification.

     • Add Notes

       • This field allows you to enter informational notes which can be shared amongst content managers, without it appearing anywhere on the public, front-end view of the site.

   • Categories Tab

     • The Categories tab is where you manage a form's Categories. To learn more about Categories, including how to create/manage categories, and categorize content, visit the Categories section.

   • Tags Tab

     • The Tags tab is where you manage a forms's Tags. Visit the Tags section to learn more about Mura Tags.

   • Advanced Tab
     • Content ID
       • This is a unique identifier of the form and typically used by developers.
     • Caching
       • Mura uses "caching" to store data in memory, so future requests for that data can be served faster.
       • Exclude from Site Cache
         • If enabled, Mura will not include the form in Mura's data cache.
     • Locking
       • Mura offers the ability to "lock" forms so they will not be accidentally deleted by content managers.
       • Lock Node
         • If enabled, content managers will not be able to delete the form.
5. After completing the form, select your desired publishing option to save your form.
6. To add the form to a page or section of your site, please visit the Form Module section.

Managing Form Data

Whenever a Mura-created form has been submitted, the information is captured and stored in Mura's database. With Mura, you can view form data, and even export the data for archival purposes and/or to import it into a third-party system such as a Customer Relationship Management (CRM) system.

How to View and/or Download Form Data

1. From the back-end administration area, go to Content, select the Tree View tab, click the Forms button.
   
2. Click the three-dot menu next to the row of the form you wish to view/download data for, and select Form Data.
   
3. Or,  select the form you wish to view/download data for.
   1. Then, click the Form Data button.
      
4. You should see the Form Data Screen.
   
5. From the Form Data screen, you can see the Total Records Available at the top of the screen.
   
6. By default, the From field is pre-populated with the oldest form submission stored in the database, and the To field is pre-populated with the most recent form submission stored in the database. You may change these to your desired time range to limit the results to be returned.
   
7. You can also choose which form field you would like to sort the results by and the sort direction.
   
8. You may also perform a Keyword Search of form submissions by specific form fields.
   
9. To view the data on the screen, click the View Data button.
   
10. The form data results should now appear on the screen.
    1. You can edit and/or view more details of each result by clicking the three-dot menu and selecting Edit.
       
    2. From the form detail screen, you can make edits to your desired form fields, then Update or even Delete the form entry entirely.
       
11. To download for results, from the Form Data screen, click the Download button.
    1. You should be prompted to save the file. The data will be exported as a .CSV (comm-separated values) file. This makes it easy to open in popular spreadsheet software programs, and even import the data into a third-party system such as a Customer Relationship Management (CRM) tool.
12. You can also choose which form fields to display and/or export. To do so, click the Edit Display button at the top of the Form Data screen.
    
13. You should now see a screen with a number of configuration options. Under the Available Fields menu, you can select a field you wish to display, then click the double right arrows pointing to the Summary Display Fields, or if you wish to modify the display of the "form detail" screen, you can select the double right arrows under the Detail Display Fields. To remove a form field from the display, simply click the form item in the display, and then click the double left arrows and it will be removed. You can also control the order of the display fields by selecting a field, and then clicking the Up or Down button, as desired. If you leave the Summary Display Fields empty or blank, by default, Mura will display and/or export all form fields.
    
14. Once you've made your desired changes, click Update to save the new displays.
15. Next time you either View Data or Download, you will only see the form fields selected, plus the default "Date/Time Entered" form field, which is created by Mura for all form entries.
    

Version History

Each time a content item is saved, a new version of that content is created. If the content item was published, the previously published version is archived. Each version of the content is available for preview, editing, and publishing through the Version History menu.

To access Version History for content, you can follow these steps:

1. From the Tree View or List View tabs, click on the three-dotted menu located next to the content item you wish to view.
2. This should reveal a menu of options to select from.
3. Or, from the "Edit Content" screen, click the Actions button to reveal a menu of options.
4. Select the Version History option from the menu of options.
5. Or, from the front-end editing view, select the Version History icon button from the front-end toolbar.
6. The Version History screen should appear.
7. From the Version History screen, select the three-dot menu next to a specific version of content to Edit, Preview, Delete, or view the Audit Trail.
8. From the Version History screen, you can also click the Actions button to reveal options to Clear Version History, Delete the content item altogether, and edit the Permissions of the content item.

Compare Versions

With Mura CMS, you can compare different versions of a content item, to visually see what has changed to various fields. You can compare versions of content from either the Version History screen, or the Audit Trail screen. Follow the steps below to compare different versions of a content item.

1. On both the Version History and Audit Trail screens, there are two columns of radio buttons located under a Compare button.
2. Select a radio button in one column to indicate the version you want to compare to, and another radio button in the other column to indicate the version you wish to compare from. It really doesn't matter which column you select for either one, as long as the radio buttons in each column are selecting different content versions, Mura will be able to display the differences between the two selected versions.
3. Next, click the Compare button above the two columns of radio buttons.
4. The Version History Comparison: Code & Attribute Diff screen should now appear, revealing which fields have been changed. The newer version of content will be highlighted in light-green and underlined, while old information will be highlighted in pink with a strikethrough.

Roll Back to a Prior Version

Using the Version History feature of Mura CMS, you can roll back content items to a prior version quickly and easily.

How to Roll Back to a Prior Version

1. Go to the Version History screen of the content item you wish to roll back.
   
2. Select the specific version of the content item you wish to re-publish.
   
3. At this point, you can optionally choose to make any desired to edits to the content item.
   
4. When ready, select your desired publishing option (e.g., Publish, Save to Change Set, etc.)
5. You have now created a brand new version of the content item, and successfully rolled back to a prior version. Please keep in mind Mura will still maintain the original version of the content item you wished to roll back to, as well as the newly published content item, as you could have made some additional changes prior to publishing it.
   

Audit Trail

An Audit Trail reveals the individual history of each specific version of content. While similar in nature to the Version History, the primary difference is that content managers can determine which version was used as its source. To view an Audit Trail, go to the Version History of your desired content item, and follow the steps below.

1. From the Version History screen, select the three-dot menu icon next to the content version you wish to investigate.
   
2. A menu of options should appear, including an option labelled Audit Trail.
3. If you hover (don't click!) over the Audit Trail label, the specific version of content you're hovering over will be highlighted, as well as the versions that it derived from. In the example below, hovering over Audit Trail of the most recent draft reveals the version from 02/10/2017 was used as its source, and the version before that was used at its source, and so on.
   
4. If you click on the Audit Trail menu option, you should be taken to the Audit Trail screen, revealing the specific history of that particular version of content you're currently working with, thus eliminating any unrelated versions from view.
   

Export Content

Mura CMS offers the capability to export content from your website. You can choose to export your entire site, a section of your site, or even just a page. This is useful for creating a simple backup of a small section of your site, or if you want to move/copy a section of your website to a completely different Mura CMS website.

How to Export Content

1. Log in to the back-end administration area of the website.
2. Select the content item representing either the page or section you wish to export, and edit the content item.
3. From the Edit Content screen, click the Actions button, and select Export.
4. If the content item you've selected has any children (sub-pages, files, etc.), you should be presented with the Export Content screen. If you're exporting a single content item without children, this screen will not appear.
   1. You may choose to export either the Children Only, or This Content Item and Children. When making your selection, you may wish to consider how you will be using the content you are exporting. For example, if you want to include the "News" landing page in addition to its children, then select "This Content Item and Children."
   2. Once you've made your selection, click Export Content.
   3. From the Alert dialog window, click Yes to confirm your selection.
5. Once Mura CMS bundles the content together for you, a prompt to save the export file as a .ZIP document will appear. You can choose to save it wherever you wish.
6. The exported file is now ready for archival and/or ready to be imported into another Mura CMS site.

Import Content

Mura CMS offers the ability to import content that has been exported from Mura CMS, quickly and easily. Please review the steps from the Export Content section before proceeding.

How to Import Content

1. From the back-end administration area of Mura, select a content item to edit, where you would like to import the new content. For example, if you would like to import the entire "News" section, you could choose to edit the "Home" page.
2. From the Edit Content screen, go to Actions > Import.
   
3. You should be taken to the Import Content screen.
   
4. Click Choose File or Browse to select the Mura CMS created/exported .ZIP file you wish to import.
5. Select your desired Content Status for the imported content.
   • Published
     • The content will be visible by users visiting the front-end, public facing view of your website.
   • Draft
     • The content will not display on the front-end, public facing view of your website.
   • Save to Change Set
     • When you select Save to Change Set, the Change Set Name field will appear. Simply enter your desired Change Set Name.
       
6. Click Import.
7. Once completed, the imported content should now appear.

Editor Settings

Mura's web editor, CKEditor, comes with a rich set of configuration options that make it possible to customize its appearance, features, and behavior.

Custom Configuration File

Mura utilizes a custom configuration file for setting CKEditor's configuration. Using a custom configuration file allows you to customize the various toolbars, and offers a way to control much of the way the web editor looks and functions.

The important piece to know is where you can place your custom configuration information. Mura automatically scans for specific files within your theme to use for CKEditor's configuration file. Listed below are the files Mura checks for in the specified order.

1. ../themes/{ThemeName}/js/editor/config.js.cfm
2. ../themes/{ThemeName}/js/editor/config.js

The default theme for Mura as of v7.1, MuraBootstrap4, includes a sample file with miscellaneous configuration examples. You can find it under ../MuraBootstrap4/js/editor/config.js.cfm.txt

Since the sample file's extension ends with ".txt", Mura will ignore it. If you wish to use it, simply rename the file to remove the ".txt" file extension.

Custom Toolbar

A common question from developers centers around the ability to customize the editor toolbar. For example, if you only want the "Default" editor toolbar to display Bold, Italic, and Underline options, your configuration file could look something like the following code example.

if ( 'CKEDITOR' in window) {
    CKEDITOR.editorConfig = function( config ) {

        config.toolbar_Default = [
          {name:'group1',items:['Bold','Italic','Underline']}
        ];

    };
}

Using the example code above, the editor toolbars for "Content" will only display the Bold, Italic, and Underline options. However, the "Summary" toolbar will not change, as shown below.

As noted in the sample configuration file, if you wish to update the "Summary" toolbar, you'll need to explicitly define that as well. In addition, the front-end toolbar may be referenced with "QuickEdit". Below is an example that would update all three toolbars.

if ( 'CKEDITOR' in window) {
    CKEDITOR.editorConfig = function( config ) {

        config.toolbar_Default = [
          {name:'group1',items:['Bold','Italic','Underline']}
        ];

        config.toolbar_Summary = config.toolbar_Default;
        config.toolbar_QuickEdit = config.toolbar_Default;

    };
}

As you can see in the example code, we're simply using the first definition for the other toolbars. However, you could easily have different options for each toolbar definition, if you wish.

The example below displays both the Summary, and Content ("Default") toolbars.

The example below displays the "QuickEdit" toolbar used for front-end editing.

As you can see, Mura exposes CKEditor's configuration settings to allow you the ability to customize Mura's web editor quickly and easily.

Where to Learn More

All available CKEditor configuration options can be found in the CKEditor API documentation. Please refer to the CKEDITOR.config object definition for full details on each option.

Editor Styles Drop-down

Mura's web editor, CKEditor, includes a Styles drop-down list which contains styles that you can apply to editor content in order to assign semantic value to the text you are creating. The functionality is provided by the Styles Combo plugin.

Defining Styles

Mura automatically scans for specific files within your theme to apply styles to the drop-down list. Listed below are the files Mura checks for in the specified order.

1. ../themes/{ThemeName}/js/editor/styles.js.cfm
2. ../themes/{ThemeName}/js/editor/styles.js

Using the first option with a ".cfm" file extension, allows you the ability to include dynamic code, in the event you wanted to do so.

The default theme for Mura as of v7.1, MuraBootstrap4, includes a sample file with some styles included. You can find it under ../MuraBootstrap4/js/editor/styles.js. Any styles defined here will appear in the Style drop-down list.

Where to Learn More

To learn more about CKEditor Styles, visit the Applying Styles to Editor Content section in the CKEditor documentation. Please refer to the CKEDITOR.styleSet object definition for full details on each option. The Styles section also has some useful information.

Editor Content CSS

Mura's web editor, CKEditor, can include your own CSS files to be used to apply style to the editor content. Generally, these styles should reflect the CSS used in the target pages where the content is to be displayed.

Mura automatically scans for specific files within your theme, specifically for this purpose. Listed below are the files Mura checks for in the specified order.

1. ../themes/{ThemeName}/css/editor.css.cfm
2. ../themes/{ThemeName}/css/editor.css

Using the first option with a ".cfm" file extension, allows you the ability to include dynamic code, in the event you wanted to do so.

The default theme for Mura as of v7.1, MuraBootstrap4, includes a sample file with basic styles included. You can find it under ../MuraBootstrap4/css/editor.css. Any style definitions found in the file are applied to content entered in the editor body/content area.

For example, if you wanted to set the color of <h2> and <h3> tags to "green", you could add the following to your CSS file.

h2, h3 {
    color: green;
}

The example image below illustrates the result of the <h2> tag (visible due to the Show Blocks button being enabled).

Your style definitions may also affect the styles of elements in the Paragraph Format select menu.

Where to Learn More

The CKEditor documentation has more information. The section on Applying Block-Level Text Formats contains some useful information as well.

Editor Body Templates

Mura includes the Content Templates plugin for CKEditor, which provides a dialog to offer predefined content templates - with page layout, text formatting and styles. It comes with a couple of sample templates, and theme developers may also create their own templates.

This feature only impacts the "Content/Body" area of the layout, and is separate from Mura's layout templates.

To see the sample templates in action, select a content item to edit, and locate the template button on the web editor toolbar. It's typically located on the last row, just before the Mura [m] tag button, as highlighted below.

Clicking the template button will launch the Content Templates dialog window.

The sample layouts include 2 Columns, 3 Columns, and 4 Columns. If "Replace actual contents" is enabled, all content will be deleted and replaced with the sample content. If you wish to disable this feature by default, you can add config.templates_replaceContents = false; to your editor's configuration settings.

The options on this dialog window are controlled by files located under the theme at ../themes/{ThemeName}/js/editor/templates/. Example files can be found in the default theme for Mura as of v7.1, currently MuraBootstrap4.

The images directory contains the preview images that will display in the dialog window.

The default.js file contains the code used by CKEditor for the templates.

If you open the default.js file, you'll see where the "templates" are defined.

Each template definition should include the following:

• title
  • This is the text used next to the image in the dialog window as the Title.
• image
  • This is the image file used for the example layout to be displayed in the dialog window.
• description
  • This text will display under the Title in the dialog window.
• html
  • This markup is used to populate the web editor, if the template is selected.

You may add, modify, replace, or delete, any of the examples included.

Note: The sample default.js file included with MuraBootstrap4 includes the use of Bootstrap class names. You may want to modify these to match your own framework's classes.