Enable a reflow for your UI Builder pages

  • Release version: Australia
  • Updated March 12, 2026
  • 1 minute to read

    • Enable a reflow for your UI Builder pages. This way, when you’re resizing a window, you don't have to scroll horizontally.

    Before you begin

    Role required: admin

    About this task

    The reflow feature adjusts the properties of the components when you’re resizing a window. It accommodates smaller screen sizes and changes the component’s properties for the different screen sizes.

    Procedure

    1. Navigate to All > UI Builder.
    2. Under Experiences, select Playbook Experience Portal.
    3. Open a specific page or variant: Either CSM Create Case Process or CSM Case Process, for which you want to adjust the reflow.
    4. Edit the Playbook Activity Viewer component settings.
    5. On the Styles tab in the UI Builder, set the height of the activity viewer to 100vh.
    6. Navigate to the component Resizeable Panes > Panes configuration and copy the code in the default displayed pane by editing the scripted property value. 
      // Resizable Panes default displayed pane scripted value
​
// when in left/right pane position
function evaluateProperty({api, helpers}) {
    if(!api.data.playbook_custom_layout.compactMode) return "both";
​
  return (api.data.playbook_custom_layout.selectedItem || {}).stageContextId ? "right" : "left";
}
​
// when in top/bottom pane position
function evaluateProperty({api, helpers}) {
    if (!api.data.playbook_custom_layout.compactMode) return "both";

  return (api.data.playbook_custom_layout.selectedItem || {}).stageContextId ? "bottom" : "top";
}
    7. Select Done.
      For more details, see Reflow for playbook components.