panel and tab can be used to group fields. At least one panels is required; tabs are optional.
The panel element is used to visually group fields on the screen (in edit and view modes).
cssclass CSS class for the panel. The default value is "Panel".
cssclasslabel CSS class for the panel title. The default value is "PanelLabel".
img Image to display as the title panel.
label Panel title
optional Skips the panel from displaying, if every field contained is empty and optional (in View mode only).
width Width of the panel in percentage of the total width of the form. Example: width="100"
Tabs are used to divide a page into several sets of panels and panel-details displayed separately. A tab contains one or more panels and panel-details. More about the tab element.
Tabs are used to divide a page into several sets of panels and panel-details displayed separately. A tab contains one or more panels and panel-details.
Using tab elements adds one level of hierarchy in the metadata documents. The structure becomes the following: one form element containing one data element, and several tab elements containing one or more panel elements containing one or more field elements.
Here is an example from our demo, the first few lines of the wine cellar XML:
<form xmlns="http://www.evolutility.com"> <data ... /> <tab label="General" > < panel label="Wine" width="80" > <field label="Name" type="text" ... width="62" /> <field label="Vintage" type ="integer" ... width="38" /> ... </panel> <panel label="Bottle Label" width="20"> <field type="image" ... /> </panel> </tab> <tab label="Purchase" > <panel label="Purchase" width="30" > <field type="date" ... /> ... </panel> </tab> ... </form>
The attributes of the element tab are the same as for the element panel.
4.1