Use the Splitter plugin to resize regions in a FOEX application

The Splitter plugin is one of the new features that was introduced in the FOEX v2.2 release, along with the Big Number plugin. It was a much needed addition to the FOEX Plugin Framework, as we realized that for some of our users this would improve their user experience significantly.

Why is it so important you may ask and what does this plugin exactly do? As most of our customers are leveraging FOEX to build backend web applications with data-dense screens, at times, the information presented on a page might prove to be harder to read unless one of the page’s regions can be resized. Here’s one such example from our Forms to FOEX demo:

Forms to FOEX demo without Splitter plugin

Forms to FOEX demo – Customers screen without the Splitter plugin (click to enlarge)

As you can see the regions on the middle of the page don’t display a lot of information, while the upper region (Customers from selected Country) displays only one record leaving some white space unused underneath. We saw this as an opportunity to work on a feature that would enable users to customize their view in such situations, so we created the Splitter plugin.

Note: In our documentation app you can find the following two demos for the Splitter plugin: Columns collapsible and Rows collapsible. To read the plugin’s documentation, please click here.

Basically, this plugin allows the resizing of any region on the page, so that you can optimize the amount of information displayed on the screen. It is also very simple to implement.

All you have to do is add a FOEX Splitter (for HBOX/VBOX Layouts) [Plug-In] in between each of the regions that you would like to resize. For the above example we’ve added the Splitter for each of the horizontal regions that you see in the center.

FOEX Splitter plugin setup 1

and these are be settings we used:

FOEX Splitter plugin setup 1

Now have a look at the animated GIF below, showing how the page’s behavior changes:

Forms to FOEX demo Splitter plugin

 

Do you have a technical question about FOEX or want good tips for improving your application? We’ve launched this series of How To articles to help improve your FOEX applications even more.

Use #askFOEX on Twitter and we’ll get back to you as soon as possible or sign up for a free trial and see why it is a great tool for developing large-scale web applications!

Categories FOEX How To
Add your comment

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