Sections

Definition

A section allows to split a View into several parts.

Several Sections can be configured, they will be arranged one under the other in the order of their configuration.

1 section and 1 column	1 section and 2 columns	2 sections

Configuration

Properties

Property name	Type	Mandatory	Description	Values (default value in bold)
id	`String`	YES	The id is the unique identifier of each Section.	-
description	`String`	NO	Used to describe the Section that will be configured. It is possible to modify this property after the creation of the Feature.	-
layout	`String`	NO	Allows to define the graphical layout of the Section.	SINGLE (one full width column layout), TWO_EQUAL (two equal size columns layout), TWO_LEFT_SMALL (two columns with the left one relatively smaller than the right one), TWO_RIGHT_SMALL (opposite of TWO_LEFT_SMALL), TWO_EQUAL (two equal size columns layout), TWO_LEFT_SMALL (two columns with the left one relatively smaller than the right one), TWO_RIGHT_SMALL (opposite of TWO_LEFT_SMALL), THREE_EQUAL (three columns of equal width), THREE_RIGHT_LEFT_SMALL (three columns with the left and right one relatively smaller than the center one)
frame	`String`	NO	Allows to define an optional frame.	-
columns	`String`	NO	Allows to define Columns in the Section. The number of Columns in the Section must match with the specified layout in the Section.	-
displayCondition	`String`	NO	Allows to display or not the Section according to the configured script.	-
collapsible	`Boolean`	NO	Allows to indicate if the Section is collapsible or not.	true, false
initiallyCollapsed	`Boolean`	NO	Allows to indicate (only if the Section is collapsible) if the Section will be collapsed or not when initially displaying the Screen.	true, false

Example

1 section and 1 column

1 section and 2 columns

2 sections

CODE

<screen>
	<views>
		<view>        
			<sections>
            	<section id="test-section-1">
               		<layout>SINGLE</layout>
               		<columns>
						<column></column>
					</columns>
	        	</section>
          	</sections>
		</view> 
	</views>
	<frame/>
</screen>

CODE

<screen>
	<views>
		<view>        
			<sections>
            	<section id="test-section-1">
               		<layout>TWO_EQUAL</layout>
               		<columns>
						<column></column>
						<column></column>
					</columns>
	        	</section>
          	</sections>
		</view> 
	</views>
	<frame/>
</screen>

CODE

<screen>
	<views>
		<view>       
			<sections>
            	<section id="test-section-1">
               		<layout>TWO_EQUAL</layout>
					<frame></frame>
               		<columns>
						<column></column>
					</columns>
	        	</section>
            	<section id="test-section-1">
               		<layout>SINGLE</layout>
					<frame></frame>
               		<columns>
						<column></column>
					</columns>
	        	</section>
          	</sections>
		</view>  
	</views>
</screen>

Nested sections

It is also possible to define sections inside a column. As for widgets, the number of sections must match the layout provided by the parent section. Note that you cannot mix the property “widgets” and “sections” inside a column.

CODE

<screen>
	<views>
		<view>        
			<sections>
            	<section id="test-section-1">
               		<layout>TWO_EQUALS</layout>
               		<columns>
						<column>
							<widgets />
							<sections>
								<section id="test-subsection-1">
									 <frame>
									 	<display>PORTLET</display>
									 </frame>
									<layout>SINGLE</layout>
									<columns>
										<column>
											<widgets>...</widgets>
											<sections />
										</column>
									</columns>
								</section>
							</sections>
						</column>
						<column>
							<widgets />
							<sections>
								<section id="test-subsection-2">
									 <frame>
									 	<display>PORTLET</display>
									 </frame>
									<layout>SINGLE</layout>
									columns>
										<column>
											<widgets>...</widgets>
											<sections />
										</column>
									</columns>
								</section>
							</sections>
						</column>
					</columns>
	        	</section>
          	</sections>
		</view> 
	</views>
	<frame/>
</screen>

Configuration

Properties

Example

Nested sections

Read Next