The Design and related Pages panels in the model editor provide a graphic representation of visual elements in a model.
With the Design panel, you can change your fields and grouping of fields on pages.
The Pages panel
The Pages panel shows thumbnail icons of all created pages and forms in the model. (The same generated elements are listed in the Application Tree.) Click the Pages
tab to expose the pane. The icons let you more easily select a visible element in your model. The Views icon in the Pages toolbar lets you also display both list and details formats of the visible elements.
The Pages panel supports a popup menu that lets you more readily open builders that created or can modify the selected element.
The Design panel
The Design panel shows a visual representation of a visible element that is selected in either the Application Tree or the Pages panel. Clicking the Design
tab exposes the Design panel. This panel lets you quickly and conveniently see visible elements in your model without having to generate the web application and lets you make design changes.
In the pane, tags are represented visually as boxes on the page. Tags appear in orange to indicate where to add a builder. The tag names are displayed in the boxes.
An arrow icon in the left side of the editor panel can be toggled to hide or expose the Application Tree and Pages panels. Hiding the other panels gives you more room on the screen to work with the builder call editor. The visual representation includes a red star and red text indicators. These show that the associated elements have an error condition that you must remove in the builder call editor. Also included are group icons that let you easily operate on aggregate elements.
The Design panel is tightly connected to the Application Tree. If you select an element in the Design panel, the corresponding element in the Application Tree is selected. Also, the associated code in the Source panel is highlighted.
The Design panel supports popup menu options and a palette that help you develop your web application. The popup menu options available depend on the context of the element selected in the panel. Right-clicking any element or the group icon in the pane displays the menu.
In the builder call editor of any builder that you add to your model from the Design panel, page and tag fields are pre-filled based on the context of the selected element.
A Show Palette icon in the upper right corner of the Design panel offers a palette dialog that lets you drag and drop design elements onto pages in the model. Click the Show Palette icon to display the dialog and click the Hide Palette icon to hide the dialog. The page automation elements in the Design panel can be rearranged with the mouse by dragging and dropping. Using the categories in the palette, you can add builders to page locations by dragging and dropping. The Layout Tools
group in the palette lets you modify and augment your page design. These options include:
- Dojo Accordion Container List to generate an AccordionContainer list where each list item is contained within a Dojo ContentPane that can be selected to view the item list details.
- Dojo Title Pane List to generate a list where each item is contained within a Dojo Title Pane that can be expanded or collapsed to view the item details.
- Multi-Line List Layout to generate a list where each list items contains three columns of data and three rows.
- Thumbnail Multi-Line List to generate a list where each list items contains three columns of data and three rows and the first column is used for a thumbnail image.
- Thumbnail Single-Line List to generate a list where each list items contains three columns of data in a single row and the first column is used for a thumbnail image.
- Unordered/Ordered List to generate a simple ordered or unordered list with a single target.
For Page Automation areas:
- Insert Grid to add a grid to the page.
- I Layout to add an "I" layout to a page.
- Inverted T Layoutto add an inverted "T" layout to the page.
- Layout Columnto add a layout column to the page.
- Layout Rowto add a layout row to the page.
- T Layoutto add a "T" layout to the page.
- Two Column Layoutto add a two column to the page.
Adding and changing objects on a page by drag and drop causes a Display Manager builder to be added to your model for that page.
If you select multiple fields in the Design panel or the Application Tree, you have available the Merge Fields command on the popup menu. This command lets you combine fields for display. Data Field Settings
You typically have a situation in which your data needs to be in multiple fields. However, when you display the data, you would like these multiple fields to line up on the display as fields that they occupy only one column. For example, a person's address could consist of separate city, state, and ZIP code fields. You can use the Data Field Merge builder to treat separate fields as a single field on a details page or as a single display column.
In the Design panel, you can select multiple fields to be merged, right-click, and click Merge Fields to merge the fields into the current column. The multiple fields must all be in the same container field. After you fill in the information related to the menu command, the Data Field Merge builder is added to your model and the newly merged columns are displayed.
If you select a field or column in the Design panel or the Application Tree, you have available the Data Field Settings command. This command lets you control a limited number of display settings for page automation fields in a model (and validation settings for data entry fields). For some types of change, you can limit the changes to one page in the model or have the change effect all pages in the model on which the field appears.
Right-click a page automation field in the Design panel and click Data Field Settings -> Field or Data Field Settings -> Validation. (The Validation command is available on the menu only for data entry fields.) When you change a setting, click Apply or OK.
If you right-click a column or a field in a form or page, you can use Data Field Settings -> Hide or Data Field Settings -> Show to quickly change its display setting. The command lets you toggle the property that prevents the field or column from being displayed or lets it be displayed.
If you right-click a column or a field in a form or page, you can use Data Field Settings -> Sort or Data Field Settings -> Remove Sort to quickly change the sort setting. The command lets you toggle the property that allows the field or column to be sorted or prevents it from being sorted.
If the model does not contain a related builder for this form or page, a recommended builder is added to the model. If a related builder resides in the model for this form or page, the related input in that builder is updated with your change.
Parent topic: Previewing and interacting with your design