In this article
The Visual Components are “prefabricated” elements you can use on the portal pages. Page Masters and “normal” pages have different sets of Visual Components available, reflecting the pages’ different functions.
The procedure for inserting Visual Components is the same for Page Masters and Pages. Note that the Visual Components you insert into a Page will all be located within the Page Area component that is positioned on the Page Master.
Adding an HTML Table to the Page
When you first create a page, it will be empty. To simplify the positioning of components on a page, it is recommended that the first thing you create on the page is a table. You can then place the various components within the table cells, and use the cell properties to define the positions of the components. An existing page will normally already have a table.
- Double-click on the appropriate page in the Panel Portal toolbox Pages folder, or create a new page (go to Creating a Page Master for more information).
- To create the table, click the Table button
(A in the figure below) in the page editor toolbar to open the table selector, move the pointer to the right and down until the required number of rows and cells are selected, then click in the lower-right selected square - .
- Right-click in the table and select Table Properties from the drop-down menu to open the Properties page for the table.
- Right-click in a cell and select Cell Properties from the drop-down menu to open the Properties page for the selected cell.
- In the right-click menu you can also add and delete rows and columns for the table.
- On completion, click Save to save the changes.
The Page Editor for the page opens - .
Figure 1 - The blank page editor
Figure 2 - Creating a 3x3 HTML Table
While working in the Portal Designer, a dotted grid is displayed as a visual guide so you can see the table and cell boundaries while editing - . The table will not be visible on the portal page. If you wish to see the page without this grid, either select preview, or click the Show/hide grid button (B in the figure above).
Figure 3 - The resulting 3x3 table
Adding a Visual Component to the Page
A page can include any number of visual components. From the Visual Components toolbox, which contains all the various page elements, we will now drag a component and drop it in the upper left cell.
- Go to the Visual Components toolbox, click on the component you wish to insert, and drag it up to the appropriate field in the table - .
- On completion, click Save to save the changes.
Or:
Right-click in the appropriate cell, choose Insert Component, then select the desired component from the drop-down list.
Figure 4 - Dragging a Visual Component into the table
In the example, a Language Selector component is being dragged into the upper-left cell of the table. You can now open the component’s, the cell’s and/or the table’s Properties pages and set up the component as required.