layout:stepper
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper
DESCRIPTION
ATTRIBUTES
alignItems
id
linearProgression
transition
validateForms
EXAMPLES
Form in Stepper Layout
layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<layout:stepper> </...>

Define content as a series of 'panels' that that can be stepped through.

Content

<layout:stepperpanel>
At least 1 Stepper Panel.

Attributes

alignItems
string
Align Items

Vertical alignment of rotator items where items are of different heights. Follows CSS spec for Flex containers in the row direction.
Possible values are flex-start and flex-end

Default = stretch
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
linearProgression
bool
When true, requires validation before moving to incomplete panels
transition
string
Rotator transition

Possible values are instant, fade, and slide

Default = slide
validateForms
string
Whether to validate on change

Examples

Form in Stepper Layout

Adding stepper layout on a sample feedback form.

HTML:

<forms:form id="feedback_form" recordsubmissions="true" contactmode="store" onsubmitemailsubject="Feedback Form" onsubmitemail="true" method="ajax"> <layout:stepper id="stepper_feedbackform" transition="fade"> <layout:stepperpanel> <forms:row label="First Name"> <forms:editbox id="contact_first_name" validations="mandatory" /> </forms:row> <forms:row label="Last Name"> <forms:editbox id="contact_last_name" validations="mandatory" /> </forms:row> <forms:row label="Email Address"> <forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton onclick="ProgressLinks.moveNext('stepper_feedbackform_progresslinks'); return false;">Next</forms:submitbutton> </forms:row> </layout:stepperpanel> <layout:stepperpanel> <forms:row type="two_column" label="Did you like our service"> <forms:radiobuttongroup name="question1" align="horizontal"> <forms:radiobutton valuechecked="Yes" label="Yes" /><forms:radiobutton valuechecked="No" label="No" /><forms:radiobutton valuechecked="Undecided" label="Undecided" /> </forms:radiobuttongroup> </forms:row> <forms:row type="two_column" label="Did you enjoy the food?"> <forms:radiobuttongroup name="question2" align="horizontal"> <forms:radiobutton valuechecked="Yes" label="Yes" /><forms:radiobutton valuechecked="No" label="No" /><forms:radiobutton valuechecked="Undecided" label="Undecided" /> </forms:radiobuttongroup> </forms:row> <forms:row type="two_column" label="Did you enjoy the venue?"> <forms:radiobuttongroup name="question3" align="horizontal"> <forms:radiobutton valuechecked="Yes" label="Yes" /><forms:radiobutton valuechecked="No" label="No" /><forms:radiobutton valuechecked="Undecided" label="Undecided" /> </forms:radiobuttongroup> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton onclick="ProgressLinks.movePrevious('stepper_feedbackform_progresslinks'); return false;">Previous</forms:submitbutton> <forms:submitbutton onclick="ProgressLinks.moveNext('stepper_feedbackform_progresslinks'); return false;">Next</forms:submitbutton> </forms:row> </layout:stepperpanel> <layout:stepperpanel> <forms:row label="Comments / Suggestions / Feedback" type="one_column"> <forms:textarea id="message" height="150" validations="mandatory" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton onclick="ProgressLinks.movePrevious('stepper_feedbackform_progresslinks'); return false;">Previous</forms:submitbutton>ms:row type="one_column"> <forms:submitbutton>Submit Feedback</forms:submitbutton> </forms:row> </layout:stepperpanel> </layout:stepper> <forms:successcontent> <p><br /></p> <standard:icon library="fontawesome" size="4" style="width: 131px; height: 131px; margin-left: auto; margin-right: auto; display: block; color: #75d776" iconname="circle-check" iconstyle="regular" /> <p><br /></p> <h2 style="text-align: center;">Thank you! We've received your feedback.</h2> <p style="text-align: center;"> We really appreciate your effort and the time you devoted to filling the questionnaire. Your answers will help us improve our service for you. </p> </forms:successcontent> </forms:form>