The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
I’m going to show how to create multipage forms with the help of the current Sitefinity API and the layouts that are available in the Forms module. The idea is to create a “dynamic” layout which can show or hide its placeholders (“pages”). Each layout widget is actually a simple .ascx file with a specific html structure for recognition of the placeholders. It looks like:
<
div
runat
=
"server"
class
=
"sf_cols"
>
<
div
runat
=
"server"
class
=
"sf_colsOut sf_1col_1_100"
>
<
div
runat
=
"server"
class
=
"sf_colsIn sf_1col_1in_100 myCustomCSSClass"
>
</
div
>
</
div
>
</
div
>
<%@ Control Language="C#" %>
<%@ Register Assembly="SitefinityWebApp" Namespace="Telerik.Sitefinity" TagPrefix="cl" %>
<
cl:MultipageFormsLayout
runat
=
"server"
NumberOfPages
=
"3"
/>
public
override
ControlCollection Controls
{
get
{
this
.EnsureChildControls();
return
base
.Controls;
}
}
protected
override
void
CreateChildControls()
{
this
.Controls.Clear();
this
.placeholders.Clear();
this
.CreateControlHierarchy();
}
for
(var i = 0; i <
this
.NumberOfPages; i++)
{
var placeHolder =
this
.CreatePlaceholder(
this
.InnerCssClass,
this
.OuterCssClass);
if
(i > 0 && !
this
.IsBackend())
{
//if rendered in the frontend we show only the first placeholder
placeHolder.Style[HtmlTextWriterStyle.Display] =
"none"
;
}
this
.Controls.Add(placeHolder);
this
.placeholders.Add(placeHolder);
}
And the next important part is that we add the client IDs to the ScriptDescriptor of the control, so they are available in the JavaScript component responsible for the client side operation – show/hide/validation/etc.
public
IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
var descriptor =
new
ScriptControlDescriptor(
this
.GetType().FullName,
this
.ClientID);
descriptor.AddProperty(
"numberOfPages"
,
this
.NumberOfPages);
descriptor.AddProperty(
"placeholders"
,
this
.placeholders.Select(c => c.ClientID));
descriptor.AddElementProperty(
"formsControlElement"
,
this
.GetParentFormsControl().ClientID);
return
new
[] { descriptor };
}
_buildPageControlsMap:
function
() {
var
placeholders =
this
.get_placeholders();
var
fieldControlsMappings = $FormManager._controlIdMappings;
for
(
var
i = 0, len = placeholders.length; i < len; i++) {
var
controlsIds = [];
this
._pageControlsMap[i] = controlsIds;
var
placeHolderElement = $get(placeholders[i]);
for
(
var
key
in
fieldControlsMappings) {
var
fieldControlId = fieldControlsMappings[key];
//check if the control is a child of the placeholder
var
el = jQuery(placeHolderElement).find(
"#"
+ fieldControlId);
if
(el.length == 1) {
controlsIds.push(fieldControlId);
}
}
}
},
_overrideSubmitButtons:
function
() {
var
submitButtons = jQuery(
this
.get_formsControlElement()).find(
":submit"
);
if
(submitButtons.length > 0) {
// from the first we take the original click handler
var
submitButton = jQuery(submitButtons[0]);
var
functionBody = submitButton.attr(
"onclick"
);
this
._originalSubmitHandler =
new
Function(functionBody);
// then we override all the buttons
for
(
var
i = 0, len = submitButtons.length; i < len; i++) {
var
submitButton = jQuery(submitButtons[i]);
submitButton.attr(
"onclick"
,
null
);
submitButton.click(
this
._showNextPageDelegate);
}
}
else
{
throw
new
Error(
"Unable to override the submit buttons!"
);
}
},
showNextPage:
function
() {
var
validationResult =
this
.validatePage(
this
._currentPageNumber);
if
(validationResult) {
if
(
this
._currentPageNumber >=
this
._numberOfPages - 1) {
return
this
._originalSubmitHandler();
}
else
{
this
.hidePage(
this
._currentPageNumber);
this
._currentPageNumber++;
this
.showPage(
this
._currentPageNumber);
}
}
return
false
;
},
Put a form widget on some page and publish it. When you open the page you’ll see the multipage page form there.
Screenshots:
Advanced settings - layout toolbox
Advanced settings - layout registration
Layout with 3 pages
Form with 3 pages layout selected.
Form with widgets
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.