Component Templates & Dynamic Data - Mura Docs v6

Component Templates & Dynamic Data

Mura Components are an extremely useful tool for a front-end developer, allowing you to encapsulate content into something that can be used as either a template (for a specific visual convention) or as an object that can be used in many places, but edited in a single place.

In this example, we'll build a Component, create a Component Template, and use the [mura] tag and Mura Scope to pull out dynamic data. We'll then show two ways to use a Component as an object.

  1. Create the Component Template
    1. In the MuraBootstrap theme you'll find an example Component template in the following directory:

      {context}/{SiteID}/includes/themes/{ThemeName}/templates/components/example.cfm
    2. Open the example.cfm template file and you'll see the following code:

      <cfoutput>
      <div>#$.component('body')#</div>
      </cfoutput>
      <!--- Use this if you want [mura] tags to render. --->
      <!---
      <cfoutput>
      <div>#$.setDynamicContent($.component('body'))#</div>
      </cfoutput>
      --->
    3. Since we'll be using [mura] tags to render dynamic content, we'll want to comment out or delete the first section and uncomment the second one. You should now have only this code in your template file:

      <cfoutput>
      <div>
      #$.setDynamicContent($.component('body'))#
      </div>
      </cfoutput>
    4. Let's add a CSS hook we can use to style the content of components that use this template by adding class="meta" to the containing <div>:
      <cfoutput>
      <div class="meta">
      #$.setDynamicContent($.component('body'))#
      </div>
      </cfoutput>
    5. Save your file as content_metadata.cfm
  2. Create the Component
    1. In the Mura Admin create a new Component and title it About This Content
  3. Add Content to the Component
    1. In the Editor, add a subhead for your component called "About this content" and create an unordered list with the following values:

      • Created by:
      • Originally Published:
      • Last Edited:
    2. It should look like this in the editor:

    3. We want this component to dynamically output each of these values. We can do this by using a combination of the [mura] tag and the Mura Scope. To use the [mura] tag, simply wrap a Mura or ColdFusion method or function with the opening and closing [mura] tags:

      [mura]muraFunction()[/mura]
    4. To grab a specific value from content in Mura, we use the Mura Scope, a simple and easy syntax for doing just that. For example:

      $.content('title')
    5. In our Component, let's combine these two to grab relevant meta data about a page's content:

    6. A list of the available attributes can be found in the Mura Component API (NOT to be confused with Mura Components like the one we are creating now) under the "content" package: contentBean ({context}/requirements/mura/content/contentBean.cfc)
  4. Set the Component template
    1. Select the Advanced tab and set the Layout Template to use your new template and click Publish.

  5. Place the Component as an Object
    1. Edit a page in Mura and select the Content Objects tab. Next, select Components under Available Content Objects and assign the Component - About This Content to the Right Column Content Object display region using the double-right arrows.

  6. Publish the page.
    1. When viewing the published page you should see the following Component rendered in the page:

  7. Place the Coponent inline
    1. This time, we'll place the Component directly into the middle of content using the [mura] tag.
    2. Edit the previous page and add the following directly into the middle of some content:

      [mura]$.dspObject('component','About This Content')[/mura]
    3. Note that you can use $dspObject() to render a Component, Feed (Local Content Index, Remote Feed) or Form by stating its type (component, feed, form) and Title or ContentID (found on the Advanced tab when editing content).
  8. Publish the page and view the result: