This is documentation for enabling custom sections in your framework site. To use custom sections, see developer documentation and end user documentation.
Add custom section functionality to your site
Step 1
Go to Manage Site, find Data Definitions, and click the button for Go to Data Definitions.


Step 2
In the list of data definitions, find Page - Standard and view it.

Step 3
Edit the data definition and click the tab for <> xml.

Step 4
Add the code below to the end of the Section Type drop-down items. This will add the Custom Section option.
<dropdown-item show-fields="section/details,section/custom-section" value="Custom Section"/>

Step 5
Add the code below between the Details group and before the Chunk group.
<asset identifier="custom-section" label="Custom Section" render-content-depth="231" type="block"/>

Step 6
Submit the data definition changes.
Step 7
Return to the data definitions list and select Section - Attached - Standard. Edit the data definition and select the <> xml tab.

Step 8
Add the code below at the top of the data definition, before the details group.
<text default="Standard" identifier="type" label="Type" required="true" type="dropdown">
<dropdown-item show-fields="details, chunk" value="Standard"/>
<dropdown-item show-fields="details, custom-section" value="Custom"/>
</text>

Step 9
Add the code below between the Details group and the Chunk group.
<asset identifier="custom-section" label="Custom Section" render-content-depth="133" type="block"/>

Step 10
Go to _internal > templates > Page - Standard and edit.

Step 11
Add the code below after the system-region named "CSS-PAGE" line.
<include action="show" name="custom-css"/>

Step 12
Add the code below before the </body>
tag.
<include action="show" name="custom-js"/>

Step 13
In your site's folder tree, go to the _internal folder and expand the velocity folder. In this folder, go to 1.x > Page. Open <> Section.


Step 14
If your velocity code looks like the code below, velocity changes have been applied globally and you are finished. If it has been localized, continue to Step 15.
#import('/_internal/velocity/Page/Helpers')
#import('site://IU-FRAME-WEBS.common/velocity/1.x/Page/Sections')
#GetSettingsBlock()

Step 15
Edit the Sections macro at the bottom of format. Remove the code below at the bottom of the loop, if it exists.
#elseif($sectionType == 'Custom')
#CustomSection()

Step 16
Change the conditional code from: ($sectionType == 'On Page')
to the following:
#if($sectionType == 'On Page' || $sectionType == 'Custom Section')

Step 17
Add the following macros before the Sections macro:
#macro(StandardSection $section)
#if($sectionID=="")
<div class="$sectionClasses">
#else
<div id="$!sectionID" class="$sectionClasses">
#end
#if($sectionBackgroundImage != "/")
<div class="bg-image-cover" style="background-image:url('$!sectionBackgroundImage')"></div>
#end
<div class="row">
#Chunks()
</div>
</div>
#end
## ***************************************************************************************************************
#macro(CustomSection $section)
#set($blockSiteName = $_XPathTool.selectSingleNode($section, "custom-section/site").value)
#set($blockPath = $_XPathTool.selectSingleNode($section, "custom-section/path").value)
#set($block = $_.locateBlock($blockPath, $blockSiteName))
#set($blockXml = $_XPathTool.selectSingleNode($section, "custom-section/content/system-data-structure"))
#set($format = $_XPathTool.selectSingleNode($section, "custom-section/content/system-data-structure/format").value)
#set($entryPoint = $_XPathTool.selectSingleNode($section, "custom-section/content/system-data-structure/entryPoint").value)
#import("${format}")
#evaluate("#$entryPoint(\$block \$blockXml \$sectionPosition)")
#end
## ***************************************************************************************************************

Step 18
Change the following code:
#if($sectionID=="")
<div class="$sectionClasses">#else
<div class="$sectionClasses" id="$!sectionID">#end #if($sectionBackgroundImage != "/")
<div class="bg-image-cover" style="background-image: url('$!sectionBackgroundImage');"></div>
#end
<div class="row">#Chunks()</div>
</div>
</div>
to:
#set($sectionType = $_XPathTool.selectSingleNode($section, "type").value)
#if($sectionType=='Custom Section')
#CustomSection($section)
#else
#StandardSection($section)
#end

Step 19
Submit changes.