Split Screen

From WorkWithPlus 12 you will be able to use a new feature called "Split Screen". This feature allows you to show in the same screen a grid with a list of records and next to it a visualization with the data regarding the selected item:

A running WorkWithPlus SplitScreen web application shows the DVELOP top navigation bar with a language selector (EN/ES/PT) and user avatar, an Insert button, a Search box, and a scrollable list of sample records (Alvarez Josefina/IBM, Gomez Juan/Tangocode, Gallo Ramiro/DVelop, Perez Juan/TCS, Maria Lopez/Tata) beside an empty detail area on the right.

In this way, you will be able to optimize the data shown in the screen. 

In order to use this kind of visualization, you should select the "Split Screen" template when applying WorkWithPlus to a transaction:

The Select Template dialog for a Selection node lists template categories under 'Selections' (Selection, CardWithMainImage, CardWithSmallImage, Chat, InfiniteScrolling, SearchResults, SimpleCard, SplitScreen, SplitScreen with Tabs), with a red arrow pointing to SplitScreen; the right panel previews a grid with Insert, Excel, PDF, and Select columns buttons and columns Id, First Name, Last Name, Full Name, Id, Company.

You will notice that the generated WorkWithPlus instance is different from the ones generated by using other templates as it is specially designed for the "Split Screen" feature:

On the Work With Plus Patterns tab for a Customer selection, red arrows point to the SplitScreen and ViewSplitScreen toolbar buttons; the tree shows Selection (Customer) with TableMain, TableLeft, TableHeader, a Full text filter, a Free style grid (TableItem with PersonFirstName, PersonLastName, hidden PersonId), and a Detail Web Component, with the preview showing an Insert button, search box, and an empty detail placeholder panel.

You can customize this instance (the SplitScreen Selection and the ViewSplitScreen) as you usually do in WorkWithPlus. For example, you can change the attributes displayed in the Grid:

A zoomed detail of the Selection (Customer) pattern tree highlights, in a red box, the Free style grid node containing a TableItem with attributes PersonFirstName and PersonLastName plus a hidden PersonId, positioned above the Detail Web Component node.