Adding A Layout

Search…
Adding A Layout
Every time the framework renders a view, it will try to leverage the default layout which is located in layouts/Main.cfm by convention. This is an HTML file that gives format to your output and contains the location of where the view you want should be rendered.
Layout Code
This location is identified by the following code:
1
<div id="maincontent">
2
#renderView()#
3
</div>
Copied!
The call to the renderView() method with no arguments tells the framework to render the view that was set using event.setView(). This is called a rendering region. You can use as many rendering regions within layouts or even within views themselves.
Named Regions: The setView() method even allows you to name these regions and then render them in any layout or other views using their name.
Creating A Layout
Let's create a new simple layout with two rendering regions. Open up CommandBox and issue the following commands:
1
# Create a Funky layout
2
coldbox create layout name="Funky"
3
​
4
# Create a footer
5
coldbox create view name="main/footer"
Copied!
Open the layouts/Funky.cfm layout and let's modify it a bit by adding the footer view as a rendering region.
1
<h1>funky Layout</h1>
2
<cfoutput>#renderView()#</cfoutput>
3
​
4
<hr>
5
<cfoutput>#renderView( "main/footer" )#</cfoutput>
Copied!
Using The Layout
Now, let's open the handler we created before called handlers/hello.cfc and add some code to use our new layout explicitly via adding a layout argument to our setView() call.
1
function index( event, rc, prc ){
2
    // param an incoming variable.
3
    event.paramValue( "name", "nobody" );
4
    // set a private variable
5
    prc.when = dateFormat( now(), "full" );
6
​
7
    // set the view to render with our new layout
8
    event.setView( view="hello/index", layout="Funky" );
9
}
Copied!
Go execute the event now: http://localhost:{port}/hello/index and you will see the view rendered with the words funky layout and footer view at the bottom. Eureka, you have now created a layout.
You can also leverage the function event.setLayout( "Funky" ) to change layouts and even concatenate the calls:
event
  .setView( "hello/index" )  
  .setLayout( "Funky" );
Working With Event Handlers
Adding A Model
Last modified 8mo ago
Copy link
Contents
Layout Code
Creating A Layout
Using The Layout