To use this example, you can download and import the RAP file attached to this discussion post. The RAP contains a ruleset called Template2ResizeCol:01-01 with the following 4 rules
The code has been implemented and tested on 8.5 but should work with any Pega Infinity platform version. It relies only on Jquery for the draggable implementation - see https://jqueryui.com/draggable/
To achieve this implementation, we are going to create a new design template that will automatically add the slider between the 2 layouts and support the resize. We are using the same region names than the 2 column layout to make it easier to switch to this new template
There are multiple ways to implement such functionality. the most typical is to set an inline px width when dragging the resize hanlde for each region. The downside of this approach is that the width will not work when resizing the browser window and as such requires to add a resize handler to update the inline width.
A better approach is to make region B flex-grow 1, so that it takes the available space and set a % width on region A as inline style when dragging the resize handle. This approach provides the most lightweight and efficient implementation and does not require an resize handler.
To identify the layout, a new helper class called two-col-resize is added to the parent layout - A little bit of CSS is added in the HTML non section to correctly render the layout once the resize handler is added to the DOM
a min-width of 200px is set for each region to avoid draggable handle to be too much on the right or on the left. The layout is also no longer wrapping and will no longer be responsive. The drag handle is similar to the screen layout resize handle.