ShowTable of Contents
This is one in a set of articles about creating your application's UI
The main article in this series is Creating Your Application's UI
Other articles in the series are:
Approaches to UI Design and Layout
Modifying Your Applications Appearance Using Custom HTML
Writing Page Automation friendly HTML and styles
Using the design view to customize your data layout
One way to customize the look and feel of your generated application is by using the design view to directly manipulate and modify your pages.
The design panel shows a visual representation of a page or page element that is selected in either the Application Tree or the Pages panel. When you click on the Design tab you see the Design panel. This panel lets you quickly and conveniently see your pages in your model without having to generate the web application. In the pane, tags are represented visually as boxes on the page. Tags that appear with an orange background indicate areas where builder's can add new items. The tag names are displayed in the boxes. Items can be added to any tagged item either replacing that item or inserting a new item relative to that items location on the page.
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. Within the application tree the fields and columns are listed also included are group and table 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 also the properties for the selected item is also displayed.
The Design pane
The Design panel supports context menu options and a palette that help you develop your web application. The context 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. This also works when selecting the items from the application tree.
Show Palette icon
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. Using the categories in the palette, you can add builders to page locations by dragging and dropping this will add the related builder into the model. Sometimes it will display a dialog that allows you to set certain settings and other times it add the builder without any user interaction. Adding a builder this way is no different than adding one from the builder picker, They can be profiled, disabled, Undo/Redo works for them.
The page automation elements in the Design panel can be rearranged with the mouse by dragging and dropping. A good way to start this laying out is by using the Layout Tools group in the palette which lets you modify and augment your page design. There different types of layout tools that are found within this category from basic blocks the Layout Grid , Layout Row and Layout Column tools let you add grids ,rows and columns to the page. To more complex building blocks that allow you to add more complex layouts ( two column, T layout, Inverted T and I layout) which can be added to. And finally some predefined HTML based layouts that you can place the fields into. When adding these builders from the palette within the builder call editor of any inputs that can be correctly defaulted will be.
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.
Changing the layout of Page Automation fields on a page
It's common to change the default layout of fields on a page. By default the page automation template creates a single column of fields that are listed in a table with the labels in one column and controls in another.
This layout is controlled by the HTML template which defines the layout of the field. If you want more columns or different grouping of these columns then there is a layout builder that adds basic layouts to the form, such as: two column, T layout, Inverted T and I layout You can add these from the palette by dragging the layout and dropping it onto the fields or selecting a field and right clicking to get a context menu. In this example I added an I layout which automatically splits the fields between the two center sections I then dragged the status field and the state field to the other groups within the I layout. These changes are stored in a layout builder as the changes are made.
This kind of layout is easily achieved with the layout tool. But what happens if you want the fields to not always be in a column based layouts?
As long as you can layout these fields on a grid you can using the display manager builder to create more complicated layouts by adding individual layout columns and layout rows creating a grid that lets you place the fields where you want on the page. This level of customization is sometimes easier to do by exporting the section of the fields to html and using an html editor layout these fields, but you can use the display manager. Here is the grids I added to this page to get this effect:
I started by adding an inverted T to the page this created the two groups on the top and one below. I next added two Layout columns to the bottom layout row. To make the center layout column be centered I added an attribute setter to the groups in the second row that set the width of the groups to be 33%. If I wanted the labels on some of the fields in a different place than the standard one for this template like this:
I would do this by dropping a new row onto the row that has the Shipped Date start. That duplicates the layout of the top row with two columns. After doing this I changed the label for the Shipped Date label to Start. I then added a text builder in the top row first column with the Date shipped text. I then used the style setter to set the class for this text to label so it would match.
Investing Time on your Grid Layout
It will save you time in the long run if you invest time on your UI design and getting your fields, labels, and other object properly aligned on the grid. For example, can they be combined into a single grid or do they need to be split? You'll also need to figure out what your grid would need to look like to provide the layout that you would need. Then use the initial layouts to get a layout that would be a good starting layout and then use the base layout objects to create the other needed grids. After this using other builders such as the attribute setter to set the desired widths of the groups and text builders to add any needed text you should be able to create quite complex field layouts.
For some videos on how to work within the design view see
Basic editing of tables in Design view
Basic editing of forms in Design view