Changing the Locations of the Parts of a Grid Component in an A5W Page

Description

When you create a grid component with search and detail view parts and then place the grid onto an A5W page, you will see something like the following.

images/rearrangeGrid1.png

What you see are four groups of <A5%...> Xbasic code blocks. If you switch to the Source tab of the HTML Editor, you can see the Xbasic code blocks:

<%A5 ?x_CUSTOMERS.Output.Body.Search_HTML %>
<%A5 ?x_CUSTOMERS.Output.Body.Grid_HTML %>
<%A5 ?x_CUSTOMERS.Output.Body.DetailView_HTML    %>
<%a5 ?a5dialogHelper_generateCORSHeaders() %>

You are free to move restructure the code blocks using HTML to change where the parts of the Grid component (Search Part, Detail View, and Grid View) will be shown. For example, if you make the following reorganization of the HTML code:

<table>
    <tr>
        <td><%A5 ?x_CUSTOMERS.Output.Body.Search_HTML %></td>
        <td rowspan="2"><%A5 ?x_CUSTOMERS.Output.Body.DetailView_HTML    %></td>
    </tr>
    <tr>
        <td><%A5 ?x_CUSTOMERS.Output.Body.Grid_HTML %></td>
    </tr>
</table>
<%a5 ?a5dialogHelper_generateCORSHeaders() %>

you will see this on the WYSIWYG tab:

images/rearrangeGrid2.png

As long as the <%A5 ... %> structures are not modified, you can place them anywhere on the page, even outside of the table structure see here.

Define a Master Layout for the Grid Component

Another way to arrange the layout of a Grid Component is to define a Master Template. A master layout template can be used to arrange the pieces of a Grid. If no master layout is defined for a Grid, the Grid parts can be arranged on the A5W page (above.) If the Grid is opened using an Ajax Callback (using an Action Javascript or embedded in another component,) the default layout for the Grid component will be used if no master layout template is defined.

If the Grid will be opened using an Ajax Callback, using a master layout template is recommended. See Master Template for more information.

See Also