Data Input Forms.Wizard Form

Appearance

View mode
Number of cards in a row Here you can select the number of cards to be placed in a row for each of supported screen resolutions. Your current resolution is highlighted in this way.
	Large desktop
	Desktop
	Tablet
	Phone

Page size

Total record count: 200.

Records per page

This page demonstrates how to split a data input form into multiple steps (such forms are commonly called wizard forms). The point is to override the forms/form.tpl and forms/page_form.tpl templates and then bind them with the OnGetCustomTemplate event. Click the button to see the event handler code.

Try to add a record to see the wizard form in action.

        protected function doGetCustomTemplate($type, $part, $mode, &$result, &$params)
        {
            if ($part == PagePart::VerticalGrid) {
                if ($mode == PageMode::Insert) {
                    $result = 'custom_page_form_wizard.tpl';
                } else if ($mode == PageMode::Edit) {
                    $result = 'custom_page_form.tpl';        
                }   
            }
            
            if ($mode == PageMode::FormInsert) {
               $result = 'custom_form_wizard.tpl';
            } else if ($mode == PageMode::FormEdit) {
               $result = 'custom_form.tpl';
            }
        }

{include file="page_header.tpl" pageTitle=$Grid.Title pageWithForm=true}

<div class="col-md-12 js-form-container" data-form-url="{$Grid.FormAction}&flash=true">

    <div class="row">
        <div class="js-form-collection {if $Grid.FormLayout->isHorizontal()}col-lg-8{else}col-md-8 col-md-offset-2{/if}">
            {foreach from=$Forms item=Form name=forms}
                {$Form}
                {if not $smarty.foreach.forms.last}<hr>{/if}
            {/foreach}
        </div>
    </div>

    {* <Custom template> *}

    <div class="form-actions row">
        <div class="col-md-12">
            <div class="row">
                <div class="{if $isHorizontal}col-sm-9 col-sm-offset-3{else}col-md-8 col-md-offset-2{/if}">
                    <div class="btn-toolbar">
                        <a class="btn btn-default" href="{$Grid.CancelUrl}">{$Captions->GetMessageString('Cancel')}</a>
                        <a href="#" class="btn btn-primary js-previous" disabled="disabled">{$Captions->GetMessageString('Previous')}</a>
                        <a href="#" class="btn btn-primary js-next">{$Captions->GetMessageString('Next')}</a>
                        <button type="submit" class="btn btn-primary js-save js-primary-save" data-action="open" data-url="{$Grid.CancelUrl}" style="display: none">
                            {$Captions->GetMessageString('Save')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {* </Custom template> *}

</div>

<form id="{$Grid.FormId}" class="form-horizontal" enctype="multipart/form-data" method="POST" action="{$Grid.FormAction}">

    {if not $isEditOperation and $Grid.AllowAddMultipleRecords}
        <div class="btn-group pull-right form-collection-actions">
            <button type="button" class="btn btn-default icon-copy js-form-copy" title="Copy"></button>
            <button type="button" class="btn btn-default icon-remove js-form-remove" style="display: none" title="Delete"></button>
        </div>
    {/if}
    <div class="clearfix"></div>

    {include file='common/messages.tpl' type='danger' dismissable=true messages=$Grid.ErrorMessages displayTime=$Grid.MessageDisplayTime}
    {include file='common/messages.tpl' type='success' dismissable=true messages=$Grid.Messages displayTime=$Grid.MessageDisplayTime}

    {* <Custom template> *}

    <div class="row">
        {assign var=Columns value=$Grid.FormLayout->getColumns()}

        <div class="stepwizard col-sm-offset-2 col-sm-10">
            <div class="stepwizard-row setup-panel">
                <div class="stepwizard-step">
                    <a href="#step-1" type="button" class="btn btn-primary btn-circle" data-step-number="1">
                        About
                    </a>
                </div>
                <div class="stepwizard-step">
                    <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled" data-step-number="2">
                        Additional info
                    </a>
                </div>
                <div class="stepwizard-step">
                    <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled" data-step-number="3">
                        Media
                    </a>
                </div>
            </div>
        </div>

        <div class="setup-content-container">
            <div class="row setup-content" id="step-1">
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.title}
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.overview}
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.original_language_id}
            </div>
            <div class="row setup-content" id="step-2" style="display: none">
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.release_date}
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.genre_id}
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.runtime}
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.rating}
            </div>
            <div class="row setup-content" id="step-3" style="display: none">
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.poster}
                {include file="custom_templates/custom_form_column.tpl" Col=$Columns.trailer}
            </div>
        </div>

    </div>

    {foreach key=HiddenValueName item=HiddenValue from=$HiddenValues}
        <input type="hidden" name="{$HiddenValueName}" value="{$HiddenValue}" />
    {/foreach}

    {* </Custom template> *}

    {if $flashMessages}
        <input type="hidden" name="flash_messages" value="1" />
    {/if}

    <div class="row">
        <div class="col-md-12 form-error-container"></div>
    </div>

    {include file='forms/form_scripts.tpl'}

</form>

	Actions	Title	Runtime	Release Date	Rating
		Star Wars	121	1977-03-20	7.81
		Finding Nemo	100	2003-11-29	7.34
		American Beauty	122	1999-09-15	7.63
		Pirates of the Caribbean: The Curse of the Black Pearl	143	2003-07-03	7.24
		Kill Bill: Vol. 1	111	2003-10-10	7.47
		The Lord of the Rings: The Fellowship of the Ring	178	2001-12-18	7.75
		The Lord of the Rings: The Two Towers	179	2002-12-18	7.72
		The Lord of the Rings: The Return of the King	201	2003-12-01	7.85
		The Dark Knight	152	2008-07-16	8.02
		The Godfather	175	1972-03-15	8.23
		Batman Begins	140	2005-06-14	7.29
		The Shawshank Redemption	142	1994-09-10	8.30
		Alien	117	1979-05-25	7.51
		Terminator Salvation	115	2009-05-20	5.81
		Fight Club	139	1999-10-14	8.03
		Titanic	194	1997-11-18	7.22
		The Matrix	136	1999-03-30	7.72
		Pulp Fiction	154	1994-10-14	8.01
		Ice Age: The Meltdown	91	2006-03-23	6.40
		Iron Man	126	2008-04-30	7.20
There are no records to display

	Column	Order

Legend
New	Recently added or significantly updated pages.
Pro	Pages illustrating features available only in the Professional edition of PHP Generator.

© 2002- SQL Maestro Group. Follow us:

Created with PHP Generator for MySQL. Want to learn more? Download the demo project!