Organize widgets using a layout

By default, widgets are arranged horizontally in the order in which they appear within the <dynamic>. However, you can use the <layout> element to change the arrangements of the widgets. The arrangement of widgets alternate vertically and horizontally with each embedded <layout>.

In Interact with other widgets, the two drop-down widgets were arranged horizontally with the grid widget by default. Suppose you wanted the drop-down widgets to be arranged vertically but the grid widget to be arranged horizontally to the right of them. You could put the drop-down widgets inside a <layout> element. The layout and the grid widget would still be arranged horizontally.

To organize widgets using a layout:

  1. Place the two drop-down widgets inside the opening and closing tags of a <layout>. 
    <dynamic selection="19" product_master="pub.doc.retail.product" 
 sales_detail="pub.doc.retail.salesdetail" aggregate_by="groupdesc_prod">
  <layout>
    <widget class_="dropdown" base_="{@product_master}" 
     inputwidth_="250" value_="@selection"
     label_="Department:" labelwidth_="75">
      <tabu label="Tabulation on Product Master" breaks="deptdesc">
        <break col="deptdesc" sort="up"/>
        <tcol source="dept" name="dept" fun="first" 
         label="First`Department"/>
      </tabu>
      <colord cols="dept,deptdesc"/>
    </widget>
    <widget class_="dropdown" value_="@aggregate_by" 
     label_="Aggregate by:" labelwidth_="75" inputwidth_="250">
      <table>groupdesc_prod,Group;brand_prod,Brand
      </table>
    </widget>
    <ignore>
      <widget class_="text" text_="Current selection: {@selection}"/>
    </ignore>
  </layout>
  <widget class_="grid" base_="{@sales_detail}">
    <link table2="{@product_master}" col="sku" col2="sku" 
     suffix="_prod" type="select">
      <sel value="dept={@selection}"/>
    </link>
    <tabu label="Tabulation on Sales Detail" breaks="{@aggregate_by}">
      <tcol source="xsales" fun="sum" name="tot_sales" 
       label="Sum of`Extended Sales" format="type:currency"/>
    </tabu>
    <sort col="tot_sales" dir="down"/>
    <sel value="({@aggregate_by} <> '')"/>
  </widget>
</dynamic>
  2. Click Apply.

    The drop-down widgets are now vertically arranged, and the grid widget appears to the right of the layout containing those widgets.

Like widgets, layouts also have attributes that allow you to control what they look like when they are rendered. For instance, you may want to highlight the layout containing the drop-down widgets by giving it a light blue background color and a visible border.

  1. Add attributes to the <layout> to specify a background color and border. 
    <dynamic selection="19" product_master="pub.doc.retail.product" 
 sales_detail="pub.doc.retail.salesdetail" aggregate_by="groupdesc_prod">
  <layout background_="lightblue" border_="10">
    <widget class_="dropdown" base_="{@product_master}" 
     inputwidth_="250" value_="@selection"
     label_="Department:" labelwidth_="75">

  ...
  2. Click Apply.

    The layout containing the drop-down widgets now has a light blue background color and a visible border.

Cumulative QuickApp code

The Macro Language code for the QuickApp up to this point is:

<dynamic selection="19" product_master="pub.doc.retail.product" 
 sales_detail="pub.doc.retail.salesdetail" aggregate_by="groupdesc_prod">
  <layout background_="lightblue" border_="10">
    <widget class_="dropdown" base_="{@product_master}" 
     inputwidth_="250" value_="@selection" 
     label_="Department:" labelwidth_="75">
      <tabu label="Tabulation on Product Master" breaks="deptdesc">
        <break col="deptdesc" sort="up"/>
        <tcol source="dept" name="dept" fun="first" label="First`Department"/>
      </tabu>
      <colord cols="dept,deptdesc"/>
    </widget>
    <widget class_="dropdown" value_="@aggregate_by" 
     label_="Aggregate by:" labelwidth_="75" inputwidth_="250">
      <table>groupdesc_prod,Group;brand_prod,Brand
      </table>
    </widget>
    <ignore>
      <widget class_="text" text_="Current selection: {@selection}"/>
    </ignore>
  </layout>
  <widget class_="grid" base_="{@sales_detail}">
    <link table2="{@product_master}" col="sku" col2="sku" 
     suffix="_prod" type="select">
      <sel value="dept={@selection}"/>
    </link>
    <tabu label="Tabulation on Sales Detail" breaks="{@aggregate_by}">
      <tcol source="xsales" fun="sum" name="tot_sales" 
       label="Sum of`Extended Sales" format="type:currency"/>
    </tabu>
    <sort col="tot_sales" dir="down"/>
    <sel value="({@aggregate_by} <> '')"/>
  </widget>
</dynamic>