Creating a section based on a design template

When you create a section, you can use a design template to bring greater consistency to your application. The section preview on the Design tab of the Section form lets you see how the section changes as you add or move fields, controls, and embedded sections. If you modify the application skin, those changes are also reflected in real time. With section preview, you can see the impact of each design change that you make reflected immediately on the screen, thus reducing rework and development time.

Each design template contains one or more regions, which are marked with names or with capital letters (A, B, C, and so on, depending on the number of regions). For example, 2-column templates have regions A and B. In the section preview, each region is displayed with this name or letter at the top. While working in the section preview, you can move elements within or across regions. You can edit the properties of any element from the section preview. You can also resize the section preview to help you visualize how elements will be rearranged to accommodate the change in screen dimensions.

  1. In the Dev Studio header, click Create > User Interface > Section.
  2. On the Create Section form, select the Create Section using a Design Template check box, specify the label, applies-to class, and ruleset for the section, and then click Create and open.
  3. On the Design tab of the Section form, click the Change button beside the Template icon, and then click a design template on the modal dialog box (overlay) to select it.
  4. Build each region (A, B, and so on) by completing the following tasks in the template element list at the right of the screen:
    1. To specify a title for a region, click the Edit region icon (pencil) for that region and use the Region properties dialog box to specify text, a property, or a field value for the region title.
    2. To add a control or field to a region, click the Add new icon (plus sign) and select the element from the Basic or Advanced list that is displayed.
    3. To add an embedded section to a region, click the Add new icon (plus sign), select Embedded section on the Advanced list, and use the Section Include Modal dialog box to specify the page context, class, and section. Embedded sections are displayed with shading in the section preview.
  5. Modify regions and elements in the section preview on the left by completing the following tasks:
    1. To move any element—within its own region or to a different region—hover over the element until a dashed line is displayed and drag the element to the new location.
    2. To specify the properties for an element, hover over the element, click the Edit icon, and use the Properties panel.
      If you set a visibility condition for an element, the element is not displayed in the section preview. In the template element list at the right, an Eye icon is displayed with that element to indicate that visibility options have been set.
      If you are using UI Kit 10 or later, you can use advanced presentation options on the Presentation tab of the Properties panel to modify styling of cells or layouts by applying one or more helper classes. For example, you can use a CSS helper class to center an element, rather than using a skin format to do so.
    3. To edit an embedded section, double-click the section to display its contents on the Section form, make your changes, and then click Submit to return to the current section.
  6. To preview how the layout of the section changes when the screen size changes, hover over the right border of the preview area until a bidirectional arrow and blue bar are displayed, and then drag the bar left or right.
    In the bar at the top of the section preview, the number of pixels changes as the screen width changes.
  7. To make the section editable at run time in App Studio, click the Settings tab of the Section form and select the Allow Section to be edited at runtime check box.
  8. Click Save.