Collapse panels and resize the code panel

Side panels and the bottom code area can be collapsed or resized so you have more room for the canvas or for long scripts.

Collapse left or right panels

Panel collapse chevrons on the left and right panel edges, with the right panel collapsed.Panel collapse chevrons on the left and right panel edges, with the right panel collapsed.
  1. Look for the narrow collapse control on the inner edge of the left or right panel (chevron on the divider).
  2. Click it to hide that panel.
  3. Click again on the edge tab to expand.

Collapsing the right panel maximizes canvas width. Collapsing the left panel is useful when reviewing layout in Preview.

Bottom panel (code editors)

Bottom code panel with Calculable value selected for a component property.Bottom code panel with Calculable value selected for a component property.

The bottom panel opens when you edit items that use code or JSON, for example:

  • Calculable value on a component property (click the edit icon next to the property, then choose Calculable value)
  • Custom validation Code
  • Form-level validator
  • Some Actions code blocks
  1. Select a component and open a property that supports code (for example Value on the Main tab).
  2. Click the small edit icon beside the property name.
  3. In the bottom panel, choose Calculable value (or open a code block from Rules, Settings, or Actions).
  4. The bottom panel rises with an editor.
  5. Drag the top edge of the bottom panel up or down to change height.
  6. Close or finish editing to hide it when your workflow allows (use the panel Close control or finish the property dialog).

Height may be remembered during your session.

Summary

Side panel chevrons collapse the left and right chrome. The bottom panel appears for code or JSON; drag its top edge to resize it. Expand the side panels again before changing properties.

See also