Using tabs to organize form fields

Facebooktwittergoogle_pluspinterestlinkedinmail
Applies to version 2016.1.x; Author: Łukasz Chechelski

Introduction

Tabs are an intrinsic part of the user interface in almost all modern software, including WEBCON BPS 2016. The Tab panel is a feature that allows you to create a number of tabs on your SharePoint form, into which form fields can be organized. Adding a Tab panel to your form will allow you to design an elaborate site which is both legible and ergonomic.

In this article, I will cover how to create and configure a Tab panel directly in WEBCON BPS Designer Studio.


Configuration

For the purposes of this article and demonstration of the Tab panel mechanism, we will use a modified Requisition process which is installed by default with WEBCON BPS. In order to add a Tab panel, go to the Form fields node in your process configuration. Select New tab panel either from the context (right-click) menu or from the top menu bar (see picture 1).

Picture 1 – “New tab panel”, as seen on the top menu bar.

A newly created Tab panel will then need a number of tabs. To create them, select the Tab panel and click New tab from its context menu or from the top menu bar. The Field name of a tab is the display name that will be shown on the form.

Each created tab has full support for SQL and Business rules, which may be used to define the requiredness and visibility of individual tabs. For example, it can be used to create a tab containing technical fields visible only to admins. Creating the business rules is assisted by an auto-complete mechanism, which significantly shortens the time needed to develop the conditions. Simply begin typing and the system will suggest matching commands.

Picture 2 – A simple Business rule which checks whether the current user is part of the “BPS_Admin” group. It can be used to restrict the visibility of a tab to members of this group.

The next step is to organize form fields into the created tabs. Existing form fields may be quickly assigned to tabs using the Group dropdown menu in its configuration, or simply via drag-and-drop.

An example of form fields being grouped into 3 tabs is shown on a screenshot below. After completing the tab configuration, remember also define their visibility and requiredness settings in the field matrix (this is identical to configuring normal form fields). Tabs which contain required form fields are marked on the form with a red asterisk.

Picture 3 – Form fields distributed between tabs.

After configuring the tabs and determining their visibility, go to the Global form template and determine the location of the Tab panel. With EasyForm technology, they layout of the form can be quickly defined by dragging the elements around the configuration area.

Picture 4 – Placement of the Tab panel on the form. In this example, the attachment panel is moved to the bottom section to make more room on the right-hand side.


Summary

The Tab panel feature introduces a number of new possibilities that make navigating complex forms possible. Flexibility in designing the form is increased through the EasyForm mechanism, which allows for free movement of the template elements. Combining these two function allows us to create a user interface which combines ergonomics and simplicity of configuration.

 

Leave a Reply

Your email address will not be published. Required fields are marked *