如何创建多步表单

Question

We want to give option to author to create multi steps tabs or wizard. This number of steps/tabs should be configurable in Form Start component in Edit button. Once author selects the number of steps/tabs then steps/tabs will be created automatically and then author can drag and drop other components like "File Upload", etc.. Please refer to the attached screenshot.

Kindly let me know how to proceed on this.

Answer 1

You can try to leverage the OOTB tabctrl component provided in geometrixx-outdoors along with the OOTB form component. The only customization needed would be changing the form end component to accomodate prev and next buttons, and then adding a bit of javascript to navigate the tabs on click of those buttons.

Steps to create this.

• Drag and drop the default form component on page.
• Inside the form drag and drop the tab control component.
• Configure the number of tabs required and the contents within each tab in the tab control component.
• Modify the form end component to accomodate the previous and next buttons.
• Attach handlers for the previous and next buttons using the following JS(currently consists only of the basic functionality. Can be modified according to your requirements).

JS:

jQuery(function ($) {
    $(document).on('click', '.prev', function(){ // 'prev' is class of previous button
        var tabctrl = $(this).closest('form').find('.tabctrl');
        var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
        $(currentItemHeader).prev().find('a').click();
    });
    $(document).on('click', '.next', function(){ // 'next' is class of next button
        var tabctrl = $(this).closest('form').find('.tabctrl');
        var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
        $(currentItemHeader).next().find('a').click();
    });
});

NOTE: Try to include the appropriate clientlibs in geometrixx site before testing this, else tabctrl wouldn't work properly. Or else, you can check this dierctly in geometrixx-outdoors site.