Implementing template controls
Template controls provide a consistent rendering pattern for the user controls that they contain. Every configuration page should have at least one ConfigurationPropertySection control in the ContentBody control of the configuration page, in which you add appropriate template controls to control how the rows and columns are configured in the table rendered by the ConfigurationPropertySection control, and to present the user controls contained by those template controls.
Working with template controls
A template control is rendered as a set of rows and columns within its container, depending on the template control itself. The following template controls are available:
Nesting template controls
Template controls can be nested. For example, you can nest a ConfigurationProperty control in the TemplateControlArea collection of a CollapsableConfigurationProperty control, to get a collapsible two-column presentation for, as an example, a SingleLineInput user control associated with an optional configuration setting, as shown in the following code example.
<Nintex:CollapsableConfigurationProperty runat="server" FieldTitle="Optional settings">
<TemplateControlArea>
<Nintex:ConfigurationProperty runat="server" FieldTitle="Optional setting 1" RequiredField="False">
<TemplateControlArea>
<Nintex:SingleLineInput runat="server" id="optionalSetting1" />
</TemplateControlArea>
</Nintex:ConfigurationProperty>
</TemplateControlArea>
</Nintex:CollapsableConfigurationProperty>
Grouping template controls
Template controls can be grouped, by specifying the same string identifier in the GroupName property available on all template controls. When grouped, the visibility of all template controls in a specific group can be toggled by invoking the ToggleGroupVisibility JavaScript function, dynamically added by the ConfigurationPropertySection control.
Example
The following JavaScript function toggles the visibility of a group of table rows for which the groupName attribute is set to group1, in a ConfigurationPropertySection control named groupsSection.
function setGroup1Enabled(isEnabled) {
var parentTable = document.getElementById('<% =groupsSection.ClientID %>');
if (isEnabled) {
// Make the group visible, by setting the value of the
// display CSS style attribute for all rows in the group to ''.
ToggleGroupVisibility('group1', parentTable, '');
}
else {
// Make the group hidden, by setting the value of the
// display CSS style attribute for all rows in the group to 'none'.
ToggleGroupVisibility('group1', parentTable, 'none');
}
}
See Also
Concepts
Operations
Working with configuration pages