Step-by-step guide to dashboard design in WEBCON BPS 2025 R2

Applies to version: 2025 R2 and above; author: Łukasz Maciaszkiewicz

Introduction

A well-designed dashboard can serve as a showcase for a WEBCON BPS application – attracting attention, directing the eye to key data, and improving navigation. To make dashboard creation easier, version 2025 R2 introduces a complete redesign of the dashboard design mechanism, featuring a design grid and several changes to widget configuration.

This article describes how to design dashboards using the new grid, efficiently add and configure widgets, and organize the space in a functional and aesthetic way.

What is the design grid?

The design grid is a graphical layout that allows for the orderly and predictable placement of elements (widgets) on a dashboard. In WEBCON BPS 2025 R2, the design grid consists of 12 columns that define the width of individual widgets, and a variable number of rows that are dynamically added depending on the number and size of embedded elements. This allows the dashboard’s length to automatically adjust to its content.

Thanks to the design grid, it’s possible to precisely plan the page layout: widgets can be freely moved, resized, and arranged without losing visual consistency. The drag & drop method makes the design process intuitive, giving the user full control over the appearance and logic of component placement. This solution greatly simplifies the creation of attractive, functional, and ergonomic interfaces.

Design in 5 Steps

Although a dashboard can be created both in Portal and Designer Studio, the actual configuration takes place exclusively in the former. Therefore, this article focuses on configuration in Portal.

• Step 1: create a dashboard

To create a new dashboard within a selected application, enable edit mode in Portal (Settings → Edit mode), then add a dashboard by clicking the Add new button in the navigation menu and selecting the Dashboard option.

• Step 2: enter a name and description

After creating the dashboard, its configuration window is displayed. It's best to start by defining its name and optionally a description. To do this, click the default dashboard name in the top-left corner and enter your own. Then do the same in the field below to add a description. Note that users can hide both the name and description by clicking the Hide title and description button located to the right of the name.

• Step 3: add a Widget

For the dashboard to be useful, it must include widgets that provide access to relevant information or functionality. You can embed them using the Add widget button, visible in the upper-right corner (or in the center of the design grid if no widgets have been added yet). Clicking it opens the Drag widget panel from the right side, allowing you to select the desired widget.

This panel contains tiles for all available widgets, grouped into five categories (Reports, Additional dashboard elements, Data analysis and special reports, Text, media and content, and Miscellaneous). To add a selected widget (in this example, Task counter), drag its tile to the target location on the dashboard.

While dragging a widget onto the design grid, a gray outline appears, reflecting its default size. Note that each added widget is automatically “snapped” to the top edge of the dashboard. This behavior is intended to optimize space usage and eliminate gaps between widgets.

• Step 4: Move and resize widgets

Users can change the position of a widget. To do this, drag it to the desired location while holding the Move () button (visible in the widget’s menu when you hover the cursor overt it).

Additionally, users can manually change the width of most widgets and the height of some. To adjust width, drag the left or right edge of the widget to the desired size.

As mentioned, the height of some widgets can also be set manually. This is done by dragging the bottom or top edge (or a corner). However, note that this is only possible if the Automatic height option is disabled in the widget’s configuration (when enabled, the widget’s height automatically adjusts to its content).

• Step 5: Save changes and test!

Once changes are made, save the configuration by clicking the Save button in the top-right corner of the dashboard window, then disable edit mode. It's worth spending some time testing how the dashboard performs in practice and making any necessary adjustments.

Managing empty space – the Separator widget

As mentioned, widgets on the dashboard are automatically “snapped” to the top edge (if space is available). While this helps optimize space, it can limit design flexibility. However, you can address this problem with the Separator widget.

This widget appears as a horizontal line spanning the entire width of the dashboard. Once added, it acts as a boundary to which elements below are automatically aligned. This allows the creation of independent sections with widgets and enables users to leave intentional empty space within the dashboard.

By default, this widget is visible in both edit and view modes. However, to hide it in the view mode, uncheck the Show in disabled edit mode option in the widget’s configuration panel.

Form matters – which layout to choose?

After designing the dashboard, consider which layout best suits its content. This can be set in the Settings tab at the top of the dashboard, specifically in the default Full screen layout option.

The fullscreen mode, where the design grid stretches across the entire width of the dashboard, offers several benefits: maximum workspace for presenting more data, easier placement of large components, and better readability of detailed charts and tables.

However, if layout composition is more important than space, consider disabling this option to narrow the layout. This results in a more concentrated and visually prominent arrangement, improving clarity and information accessibility – especially on wide screens. It also gives the dashboard a more organized and aesthetic appearance.

Still, the final choice should depend on the nature of the presented content and the expectations of the end user.

The same dashboard – two layouts: full screen on the left, narrow on the right

Summary

With the grid-based mechanism, creating a visually appealing and, more importantly, functional dashboard is now easier than ever. Improved widget handling and easier layout management make it exceptionally convenient and intuitive to adapt the dashboard to its content and users’ expectations.