Guide Section: An EASAP GUI
EASAP Tree: USER INTERFACE > FORM LIST or TABBED PANE LIST > FORM or TABBED PANE

LAYOUT PANEL is a newer implementation of SUB PANE.

A LAYOUT PANEL may be created by specifying a range of cells in the Excel Range Wizard.

Download, import, examine in the EASAP Builder, and Test the new functionality in: LAYOUT PANEL example EASAP

LAYOUT PANEL has a number of improvements over SUB PANE:

• Zero pixel borders for LAYOUT PANELs nested within LAYOUT PANELs
  An Author has more precise control and flexibility to control layout for input and display objects
• The Excel Range Wizard 2.0 creates a LAYOUT PANEL for an Excel range by default
  Excel-derived CSS attributes may be modified by an Author
• Columns or rows may be hid using Layout: VERTICAL or HORIZONTAL and Show If:

A LAYOUT PANEL creates a highly configurable rectangular area for GUI objects in an EASAP.

A LAYOUT PANEL has no default border so may be nested multiple times within parent LAYOUT PANELs without absorbing any display area.

In a SUB PANE CSS-style for child objects is adjusted in one of two ways:

1. Within the EASAP (default), enter a USER INTERFACE STYLE or object reference in one of the various style-accepting parameters, such as
   Style:
   Input Style:
   Label Style:
   Row Style from DOR:
   
   
2. From the Excel spreadsheet-derived style:
   Style settings will be imported for the corresponding Excel range
   Closely approximates the 'Excel look'
   The Excel Range Wizard-derived Style: parameter could not be modified and saved

With LAYOUT PANEL an Author does not need to choose between an inheritable and customizable style, or, an Excel-derived style.

For a LAYOUT PANEL and its child objects:

• The default value for Style: may be taken from an Excel Range Wizard-derived LAYOUT PANEL
• An Author is then free to modify, and customize Style:

LAYOUT PANEL
Optional Parameters:
Show if:	Enter a logical expression to apply to this object and any child objects This object and child object(s) are shown if this object's and every parent's Show if: is true (ie. parent of parent,…etc… and so on up the Tree) Default: true (also the default for other object's Show if: parameter)
Enable if:	Enter a logical expression or leave blank to inherit expression from the first non-blank parent Enable if: If expression is true child object value(s) may be modified, otherwise child object(s) will be greyed-out and disabled Default: <blank> (ie. inherit expression from parent, or if parent is <blank>, parent of parent…, up the Tree) Top level Enable if: is true by default, thus a chain of objects with the default Enable if: <blank> are enabled
Layout:	Select placement of any child objects Default: VERTICAL, HORIZONTAL, GRID
Grid: when Layout: GRID	Enter the dimensions of a 'rows x columns' grid for child objects using integers in the form 'rows,columns' For example: 5,7 for a 'calendar month grid of days'
Style:	Enter literal CSS text, a USER INTERFACE STYLE or a SCALAR reference that controls visual appearance
Style to Child:	Select whether child objects may inherit the Style: of this TABBED PANE Default: FALSE Each child's Style: which is not blank will take precedence over the parent's Style:
Columns Widths:	Set by the Excel Range Wizard, not intended for direct input
Rows Heights:	Set by the Excel Range Wizard, not intended for direct input
Rowspan:	Set the number of cells to vertically span across in the parent LAYOUT PANEL or SUB PANE with Layout: GRID
Colspan:	Set the number of cells to horizontally span across in the parent LAYOUT PANEL or SUB PANE with Layout: GRID

The Excel Range Wizard may import an Excel chart via an Author-selected region.

The Range Wizard sometimes adds some extra space around the edge of the actual chart (often extra rows appear below the image).

There are two ways to remedy this manually:

1. Add the actual CHART REFERENCE in IMAGE > Chart Reference: and use this IMAGE in place of the Excel Range Wizard generated one
2. Eliminate the extra rows for the IMAGE, set Rowspan: 1

The Excel Range Wizard 2.0 will take a spreadsheet and a range of cells and create a LAYOUT PANEL and child GUI objects which mimic the Excel look and layout of those cells within an EASAP.

The exact details that specify this look and layout are set as a string of CSS attributes in LAYOUT PANEL > Style:

Although a discussion of Cascading Style Sheets are outside the scope of the EASA Help Pages the primary reference may be found at,

• https://www.w3.org/community/webed/wiki/CSS/Properties

One straightforward alternative to editing individual CSS attributes is to create a USER INTERFACE STYLE referred to in Style: or else to set Style: to a blank string which leaves just the GUI object without any extra formatting.