Custom Section

Add custom section functionality to your site

This is documentation for enabling custom sections in your framework site. To use custom sections, see developer documentation and end user documentation.

If you are applying this update to a site that has the landmark updates or was created after February 7, 2019, please update any references to 1.x to 1.2.x.

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"/>

code for asset identifier for custom section

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>

custom section in section drop-down code

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"/>

code for custom section at the bottom of template

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()

code for local framework velocity changes

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

				## ***************************************************************************************************************

space for adding new custom section macros

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.