Customizing a standard or web view

This topic describes how customize standard and web views, including web headers and footers.

To customize a standard or web view

1. In Developer Studio, open the form for which you want to customize a view.
2. Click the tab of the view you want to customize.
3. Make the necessary changes.
   On the Properties tab for the view (click in an empty part of the form to see these properties), you can specify the visibility of the details pane, results pane, and toolbar when forms are viewed in a browser. You also can edit web header and footer content of any view.
   For detailed information creating views, see Defining-and-managing-form-views.

To show or hide the web toolbar

You can specify whether the toolbar should be visible or hidden when a form is viewed in a browser (and when the form is not a dialog box).

1. In Developer Studio, open the form for which you want to specify toolbar visibility.
2. Click the tab of the View that you want to customize.
3. Click in an empty part of the form to display the view properties.
4. In the Properties tab, select the Web Toolbar property, and select Hidden or Visible.
5. Save the form.

Guidelines for editing web header and footer content

You can customize any view to add web-specific header and footer content. To be sure that header and footer text appears properly in your form, follow these guidelines:

• Allow enough room at the top of your form for the header text, especially if you will be using a banner graphic or if your header text will use a large type size. You might need to move some fields down on the form.
• Enclose all header or footer text within <div> tags. Then, use HTML tags and styles to format the text.
• Use absolute positioning so that the header and footer content is not hidden behind the fields in the form.

To add or edit web headers and footers

1. In Developer Studio, open the form for which you want to include web header or footer text.
2. Click the tab of the web view for which you want to add or edit headers or footers.

3. In the Properties tab, modify values for the Web Footer Content and Web Header Content properties.
   Enclose all text within <div> tags, and specify the position for the header and footer text, as shown in the following example:

   <div style="position: absolute; top: 50px; left: 30px; width=640px; height: 45px;">
   <h1 style="color: #ffffff;background-color: 003366; font-size: 24pt; font-style: italic; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; padding-top: 6px; padding-bottom: 6px;">ABC Enterprise Solutions</h1>
   </div>

   In this example, the header is positioned 50 pixels from the top of the form, and 30 pixels from the left edge, with a height of 45 pixels. The <h1> tag indicates a heading and specifies styles for the color, background color, font size and style, border, and padding around the text.

   Make sure that the CSS z-index of the header and footer is greater than that of the other elements on the page that overlap it. For example, if you add content to the top of the page, make sure that its z-index is greater than that of the FormContainer element (for instance, greater than 29999).

   Example header in a web view of a form

4. 
5. Save the form.

6. Open the form in a browser to verify that the positioning and text are correct:

   http://<midTierServer>/arsys/forms/<ARSystemServer>/<formName>