Description:
This Tab widget control creates multiple tabs and can hold many controls within each tab.
Inputs
- Tab Widget ID/Name - Name of widget generated by FlowWright (read-only field)
- Add, Rename, and Delete Tab - Add, rename, and delete tabs. Use the arrow keys to align.
- Width (px) - Enter the pixel value for width
- Height (px) - Enter the pixel value for height
- Hide - Select the checkbox to hide (tick mark)
- Lock Widget - Click the button to toggle the lock/unlock feature
- Save - Save the input values
- Delete - Remove this form widget from the designer page
- Close - Close the input popup window
Design:
The TabWidget is a FlowWright form widget registered under the Engine category. Its internal name is tabwidget, and its display name is Tab Widget. The widget is associated with the implementation class FlowWright.Forms.clsTabwidget in the FlowWright.Forms.dll assembly.
Typical Workflow Suggestions:
The following five examples illustrate potential use cases for a tab-based form widget. They assume that the implementation supports organizing form content into tabs.
Employee Onboarding
Consider organizing an employee onboarding form into tabs for personal details, employment information, and supporting documents. This can help structure a lengthy form if the widget supports grouping other form controls into separate tabs.
Customer Registration
Evaluate using tabs to separate customer profile information, contact details, and business information within a customer registration form.
Purchase Request Form
Consider using tabs to organize a purchase request into sections such as request details, item information, budget information, and approval details.
Service Request Management
Use a tab-based layout, if supported, to separate service request details, troubleshooting information, and resolution notes in a service request form.
Project Information Form
Consider arranging project information into tabs for project overview, resources, milestones, and supporting documentation to make complex forms easier to navigate.
Example:
Let’s build and execute the “TabWidgetDef” example.
- Create a new Form Definition called “TabWidgetDef.”
- Drag a “Tab widget, Submit” control onto the canvas and arrange it as shown below.
- Double-click the “Tab" widget to configure the “Settings” properties. The application provides the control name. The UI lets you “Add, Rename, or Delete” tabs.
- Enter the new tab name in the text area, then click the Add button as shown below. Click the “Lock Widget” button to toggle the lock/unlock feature and prevent accidental configuration changes. Click the “Save” button.
- Select an existing tab, rename it with a unique name, then click Rename to apply the changes.
- Select an existing tab, then click the Delete button to remove it. Click the Save button.
- Double-click the “Tab” widget to configure its “Styling” properties. Enter the widget's pixel dimensions. Click the Save button.
- Drag and drop a few controls onto each tab as shown below.
- Drag and drop a few controls onto each tab as shown below.
- Save the Form definition. Then, go to Actions > Create Form Instance to generate a new Form Instance. After that, select the checkbox to edit this Form Instance.
- The Form is shown to the user as depicted below. Select the menu tabs to navigate, and use the controls on each tab to interact with the content. Click the Submit button to finish.
Tips:
- Keep sections logical: If multiple tabs are supported, group related fields together.
- Use clear labels: Choose tab names that help users understand the information in each section.
- Test navigation: Verify that users can move between tabs without losing entered information.
- Check validation: Confirm how required fields behave when they are located on different tabs.
- Test different screen sizes: If the widget supports responsive layouts, verify that tabs remain usable on the target devices.
Definition Sample:
You may download and extract the sample definition(s) from the link provided and later import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.
Note: After the import, verify and complete any missing configuration steps, such as file path references and database connections. Then, save the definition to confirm the changes.
Click here to download the sample file.