When you create your themes, you will need to access various values and objects stored in Mura CMS to be output within your theme markup or example pages. The Mura Scope is a fast and easy way to access data and objects in Mura CMS. The Mura Scope not only allows you to access page level data, but also allows you to access entire objects and functions! Let's take a look at a few key use cases for the Mura Scope.

Content Scope

In the Class Extensions tutorial, we added some custom attributes to a Book page in Mura, and output those values using a component. We used the Mura Content Scope to access the content bean and retrieve the attribute we wanted. The base syntax for accessing the content bean is:

$.content('someAttribute')

We can use this syntax to access any variable we want from a content node, including any custom attributes we add:

<!--- Page Title --->
$.content('title')

<!--- Summary --->
$.content('summary')

<!--- Credits/Author --->
$.content('credits')

<!--- Type (Page, Folder, Gallery, etc) --->
$.content('type')

<!--- Extended Attributes --->
$.content('myExtendedAttribute')

Current User Scope

If your site is designed to include membership-based functionality, you may want to use the Current User Scope to interact with the current user on the site. 

Detect whether or not the user is logged in

<cfif $.currentUser().isLoggedIn()>
    Hello, #$.currentUser('fname')#
<cfelse>
    <!--- Display Login Form --->
</cfif>

Site Config Scope

This scope gives you the ability to access global information about your Mura CMS site, more specifically, most of the values you would find in your Site Config > Edit Site area in the admin. You've probably already seen this used in the theme html_head.cfm when dynamically linking to your CSS and JS files:

<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/assets/bootstrap/css/bootstrap.css">

This tells Mura that no matter what the theme name is called, grab its path and locate the /assets/bootstrap/css/bootstrap.css file. This is helpful because it prevents the paths from being broken if the developer ever decided to change the name of the theme to something different (e.g. the name of the client's company) in development. For example, if your theme is 'MuraBootstrap3' (that ships with Mura), the path would be {siteID}/includes/themes/MuraBootstrap3/

And if the developer ever changed the theme name to 'CompanyABC', the path would then be: {siteID}/includes/themes/CompanyABC/

You can also use the Site Config scope to access the Name of the site, as it's entered in the admin:

$.siteConfig('site')

This is helpful for things like Title tags, or footer information for your theme.

Displaying Objects

In addition to fetching page and site variables, the Mura Scope can also display entire built-in and custom objects in Mura. 

Displaying a form

$.dspForm('My Form')

Displaying a component

Displaying a component is very common in theme development. This allows you to have complex markup in your layout templates, and only let the items you want editable by your users to be edited via the admin. 

<div class='my-class'>
    #$.dspComponent('Component Name')#
</div>

Displaying a Feed

$.dspFeed('Feed Name')

Custom Methods

As we learned in the Custom Methods tutorial, Mura CMS allows you to easily add custom functions to your theme's contentRenderer.cfc and access them via the Mura Scope. So given the following function in your theme contentRenderer.cfc:

<cffunction name="dspMySlider" output="yes">
    <!--- Custom Javascript Slider Markup --->
</cffunction>

You can simply call that function using the Mura Scope:

$.dspMySlider()

The Mura Scope is a powerful tool in Mura that can be used for a variety of use cases during your theme development. I encourage you to use it often to create robust themes.