Document Modelling

Form Wizard

Learn more about the string field type "Form Wizard".

Using a Form Wizard input field is a brilliant way to configure a web form. It visualizes the structure of the form with a tree. It is possible to add new elements or remove existing ones via the context menu. All elements can be edited when selected.

Parameters
ParameterDescriptionDefaultRange of Values
Max. Pages Count
###
Maximum number of pages that can be created.No restrictionPositive integers.
Max. Column Count
###
Maximum number of colums that can be configured side by side.No restrictionPositive integers. If set to 0, it is not possible to create multiple columns.
Max. Recursion Depth of Groups
###
Limits the recursion depth of nested groups to the specified value.No restrictionPositive integers. If set to 0, groups will not be creatable.
Supported Field Types
###
Specifies the field types that can be selected in the form wizard for each input field.NoneHTML Field Types

For displaying such a configured form on a web page, a built-in function generates a simple HTML form. In a template JSP, you could use this simple command for building the first page of the form stored in the property example:form.

+++
+++ (Image: subshell/CC BY)
${current['example:form'].createHtml5Form}

If you wish to build a custom template, you can access the model OnlineForm by using the following property function:

${current['example:form'].toForm}

A rudimentary template could look like this:

<c:forEach items="${current['example:form'].toForm.pages}" var="page">
	<h2>Form Page</h2>
	<c:forEach items="${page.elements}" var="element">
		<c:choose>
			<c:when test="${element.getClass().name == 'com.subshell.sophora.client.onlineform.Group'}">
				<h3>Group "${element.caption}"</h3>
				<%-- TODO recursively list elements --%>
			</c:when>
			<c:when test="${element.getClass().name == 'com.subshell.sophora.client.onlineform.Columns'}">
				<h3>${element.columns} Columns</h3>
				<%-- TODO recursively list elements --%>
			</c:when>
			<c:when test="${element.getClass().name == 'com.subshell.sophora.client.onlineform.InputField'}">
				<h4>${element.label}</h4>
				<input type="${element.type.name}" name="${element.identifier}" />
				<p>${element.description}</p>
			</c:when>
		</c:choose>
	</c:forEach>
</c:forEach>

Last modified on 10/16/20

The content of this page is licensed under the CC BY 4.0 License. Code samples are licensed under the MIT License.

Icon