Tutorial App: Section Wizard & Section Tab is an educational form design demonstrator and UI plugin application that restructures standard top-to-bottom form layouts into horizontal tabs and multi-step wizard interfaces on Joget v6 and Joget DX 7.

Form designers, low-code developers, and UI engineers struggle to organize lengthy multi-field forms when limited to standard vertical scrolling layouts. Long vertical forms lead to poor user navigation, unorganized input sections, increased form completion fatigue, and cluttered user interfaces across enterprise applications. Application builders require practical working templates to learn how to convert complex form sections into navigable tabbed panels or guided step-by-step wizard workflows without writing custom CSS or JavaScript.

Key Features

• Transforms standard top-to-bottom form layouts into horizontal tabs or step-by-step wizard interfaces using specialized form element plugins.

• Demonstrates dynamic section visibility control to automatically show or hide specific tabs or wizard steps based on user form selections.

• Integrates checkbox field logic to dynamically open corresponding industry sections comprising Technology, Finance, Hospitality, and Travel.

• Bundles pre-installed Section Wizard and Section Tabs form field element plugins ready for use inside the Joget Form Builder or Plugin Manager.

• Illustrates proper form element placement rules requiring the Section Tab or Section Wizard element to sit as the bottommost component in form designs.

• Renders reference forms showcasing individual Section Wizard step navigation alongside horizontal Section Tab layouts.

• Displays central record datalists to manage and review submitted multi-section records with full field attribute views.

• Exports section submission records and form layout configuration logs into CSV, Excel, XML, and PDF formats.

Frequently Asked Questions

How does Tutorial App: Section Wizard & Section Tab alter standard Joget form layouts?

Tutorial App: Section Wizard & Section Tab utilizes the Section Wizard and Section Tabs plugins placed at the bottom of a form to automatically convert vertically stacked sections into horizontal tab bars or step-by-step wizard workflows.

Where must the Section Wizard or Section Tab element be placed inside the Form Builder?

Tutorial App: Section Wizard & Section Tab requires placing the Section Wizard or Section Tab element as the final or bottommost element in the form designer tree.

Which Joget platform versions support Tutorial App: Section Wizard & Section Tab?

Tutorial App: Section Wizard & Section Tab runs on Joget v6 and Joget DX 7, On-Premise and Cloud environments across Enterprise editions.

Notes

• The Section Tab/Wizard element MUST be the last or bottommost element in your form.
• If you downloaded this app from the Joget Marketplace, it includes the "Section Wizard" and "Section Tabs" plugin. If you cannot see this form field element in your Form Builder, you can download this plugin directly from Joget Marketplace and import the plugin via the Plugin Manager.
• This app was designed for Joget v6 Enterprise and higher. 

What's New

• 26-Apr-2016: Updated .jwa app with correct hyperlinks in Welcome page.
• 05-May-2016: Updated section wizard .jar to support nested Section Wizard and new option to support clickable steps.
• 04-Apr-2019: App updated for Joget Professional/Enterprise v6 with new v6 compatible section & tab plugins.
• 13-May-2019: Section Tab plugin updated to fix UI issues on tab title.
• 01-Jun-2020: Plugin updated for compatibility with Joget DX.
• 25-Jun-2020: Plugin updated with a fix for NPE in Joget DX.
• 08-Jul-2020: Plugin updated with a fix for mandatory fields in Joget DX.
• 14-Jul-2020: Section Tab plugin updated with new option to load all tabs if the developer wants to run Javascript in unopened tabs.
• 19-Jun-2021: Plugins updated with minor fixes.
• 27-Sep-2021: Plugin updated to fix wrong cursor type when hovering on tabs.
• 16-Dec-2021: Plugin updated to cater for Joget DX v7.0.25 new security fixes.
• 14-Feb-2022: Plugin updated with fix for section with visibility condition.
• 29-Nov-2022: Plugin updated with fix for select box dropdown visibility.
• 15-Dec-2022: Plugin updated with fix for multiple section tabs in a form.