Controlling the Page Layout

To define how the portlets within a page can be positioned, define the page layout. There are two types of layouts:

Column layout. In this layout, all the portlets in a page are aligned in columns. Portlets cannot overlap within a column. You can define a page to have one, two, three, or four columns. The default for a new page is a two column layout.

Each column has a single row. You can add additional rows to a column by dragging the Row tool into the column. For more information about using rows, see Adding Rows When Using a Column Layout and Removing Rows When Using a Column Layout.

Free Form layout. In this layout, you can place portlets on the page in any location. Portlets can overlap and even completely cover one another.

For instructions for adding portlets to a page, see Adding Portlets to a Page. For instructions for how to position portlets within a page, see Positioning Portlets on a Page.

1. As system administrator, navigate to and open the page for which you want to define the layout.

2. In the page title bar, click

, and then Edit Page to switch to page editing mode.

5. Use the View As list to indicate whether you want to view column, row, and portlet borders and hidden portlet title bars.

Borders are helpful when you are positioning portlets. Also, if you set a portlet’s properties so that the title bar is hidden, you must view the page as an expert user to re-display the title bar so that you can take action on that portlet, for example, to move it or access its properties.

Note:
The setting to view as an expert is temporary. If you leave the edited page, when you return, the view will be as an end user again.

Note:
The View As Expert check box at the top of the page serves the same purpose as the View As property. If you select Expert User in the View As property, My webMethods Server automatically selects the View As Expert check box when you save the properties. Similarly, if you select End User in the View As property, My webMethods Server automatically clears the View As Expert check box when you save the properties.

6. Set the Editable Canvas property based on whether you want users to be able to reposition and/or resize portlets on the page.

Select the Editable Canvas check box if you want users to be able to reposition and resize portlets on the page.

Clear the Editable Canvas check box if you do not want users to be able to reposition and resize portlets on the page.

Clearing the Editable Canvas check box prevents end users from inadvertently changing the layout while using the page. If you select a free form layout for the page, a user can inadvertently change the page simply by clicking a portlet.

Note:
When the Editable Canvas check box is selected, users can change the layout. This is true even when users are denied edit permissions, although they are prevented from saving those edits. However, when the Editable Canvas check box is cleared, all users are prevented from changing the layout.

8. If you select One Column, Two Columns, Three Columns, or Four Columns, you can set additional properties for each column in the layout.

a. In the Attributes field, optionally specify attributes for the column for your own use. Out-of-the-box, My webMethods Server does not provide functionality that uses the attributes. However, you can write custom code that takes advantage of the attributes.

b. In the Width field type the percentage of the page to use for the column. By default the percentages are set for evenly spaced columns.

c. Select the Word Wrap check box if you want the server to attempt to wrap long text lines within portlets to fit the column size. Clear the check box if you do not want long lines to wrap.

d. From the Horizontal Alignment list select how the portlets should be aligned horizontally in the column. By default, the server left aligns the portlets in each column.

e. From the Vertical Alignment list select how the portlets should be aligned vertically in the column. By default, the server aligns the portlets at the top of each column.

f. To apply a CSS class to the column, in the CSS Class field, type the name of the class, omitting the leading period. For example, type nav for the “.nav” class.

Specify a CSS class defined by a CSS style sheet included in the page, either the CSS style sheet that is:

g. To apply a style to the column, in the CSS Style field, type any style that is valid for use in a CSS file. For example, if you type border: 1pt dashed red, a dashed red line appears as a column border.

h. To apply a background image to the column, in the Skin Background Image field, type the name of the image file from the current skin.

You specify the name of the skin property. For example, to use the main logo image from the skin, type images/logo.gif. Determine the skin property name for an image by accessing the skin editor (via the Administration Dashboard > User Interface > Skin Administration portlet) and locating the image in the Images page. The skin property is "images/" followed by the property name, such as "images/logo.gif".

Note:
To apply an image that is not in the current skin, specify the standard CSS background-image property in the CSS Style field. You can also specify properties in the CSS Style field to control how the background is displayed, such as whether it repeats, is centered, scrolls with the page, etc.