Working With Portal Pages

The Preview group contains a single Theme option that launches a menu from which you can customize the theme of your portal page. This includes the following:

• Portal Theme Files Browser. Configures CSS files, by applying a predefined theme. You can also create a custom theme. The default theme is Neutral.
• CSS Editor. Edits specific components of the existing CSS theme.

The Page group contains a single Layout option that launches a menu from which you can customize the layout of your canvas or portal page. For example, you can choose between a column-based layout or to a fluid layout. In a column-based layout, dragging a panel results in a drop indicator, showing where the panel goes. In a fluid layout, the content automatically fills the page area in equal proportions. You can manually rearrange and nest these elements on the page. The display area changes its size depending on your browser dimensions.

The Layout menu includes the following options:

• Single Area. Creates a free-flowing area, where there is no grid.
• Fluid Canvas. Arranges content evenly, and redistributes space as more items are added.
• One Column. Stretches content to fill the entire page area.
• Two Columns. Divides the page evenly into two columns.
• Three Columns. Divides the page evenly into three columns.
• Four Columns. Divides the page evenly into four columns.

When you choose any option other than Single Area, any items that you add to the page automatically snap to place in the layout.

From the State group, you can choose which of the available states you are styling for an object. The state options include the following:

• Normal. This is the default state of an object in which an event, such as a hover, is not occurring, or if styling for that event is not defined.
• Active. This is the state in which the object is currently in use. An example is the background color of the current page tab.
• Hover. This is the state in which the mouse cursor is resting on the object.

You can use an image, a color, or a combination of options to style the background of an object.

In addition to color and reset, the Border group contains style and width options.

You can use the Font group to choose the Font family, modify the size of the font, and apply bold, italic, or underlined formatting. :

In addition, the Font group contains the following options:

The portal page, while not a component itself, does have properties that you can set.

The following are the properties of a portal page.

• Title. Identifies the title or label shown in the navigation menu and any tree that lists pages in a portal.
• Page Icon.
  • This is an icon displayed to the left of the page name throughout the software. You can turn it on or off. It is disabled, by default.
  • The maximum display size of the icon is 16 x 16 pixels. Upload an image that is visible at that size.
  • Change the page icon by clicking the preview icon or the Change Image button.
• Lock Page. Turns off customization on the page. Customization includes moving content and adding content.

  Note: The Lock Page check box is selected by default. Clear it to grant permission to end users from moving and adding content.

• Refresh on Click. Refreshes the page when you click the page title. This feature is useful if another page changes the parameters used by the reports on this page. When you switch back, the reports rerun with the appropriate parameters.
• Show in Navigation. Hides the page from the navigation. You can use this property to create a Home page for a portal that displays the first time that a user runs the portal, but the user cannot navigate to it again.
• Prevent Layout Change. Restricts layout changes on unlocked pages at run time. This option is only active when the Lock Page option is cleared.
• Relative Path. References a specific path for the content that was added to a page and allows you to move the page in the repository without losing any content or resources.
• Show Refresh. Displays the Refresh option in the page menu at run time.
• Margins. Sets page margins in pixels or as a percentage. Use the Same for All option to set equal margins on all four edges of a page.
• Comments. Controls the placement of the comments on a page. The options include: none, top, bottom, left, and right.
• Container Defaults. Opens the Container Defaults dialog box, where you can set a default size, appearance, and list of behaviors for all containers on a page.

You can set the following properties for columns in a portal page.

• Column Number. Indicates the column that is selected on the page, using a label.
• Width. Sets the width of a column in pixels or as a percentage.
• Lock Width. Prevents a designated column width from being changed at run time. This option is disabled, by default.
• Container Padding. Sets the space between either container and the column edge (left and right of each container, the top of the first container, and the bottom of the last container) or each other (vertical space between each container). These work like page margins, but are set only in pixels.
• Freeze Column. Prevents users from adding content to the column or any of the containers inside this column at run time. It also prevents users from removing any content or containers from this column at run time. This option is not available when the Lock Page option is selected.
• Show Easy Selector. Activates the Easy Selector function at run time. When you enable this property, the Browse For Folder dialog box opens, and you can select a folder that is available from the Easy Selector option at run time.
• Select Folder. Opens the Browse For Folder dialog box, where you can select a folder that is available from the Easy Selector option at run time.

There are five types of containers that you can add to a portal page. These include:

• Panel. A simple container that can hold a single piece of content.
• Accordion. A compound container that can hold one or more pieces of content. It uses accordion panes to switch between the content.
• Tabbed. Similar to the accordion, but uses tabs to switch between the content.
• Responsive. A compound container that responds to the layout changes based on the size of the browser or device.
• Easy Selector. A simple container that a flexible way of adding content to a portal at run time without opening the Resources tree.

A panel container holds a single piece of content, as shown in the following image.

The panel consists of three sections:

• Overall panel
• Title bar
• Content Area

If you hover over a panel in Page Designer, the change panel type button appears, as shown in the following. This button opens a menu, where you can select a different type of panel.

Note: When adding pages created in the WebFOCUS Designer, the change panel type button opens over the Refresh and Filter option for the page. However, when you run the portal page, these options are accessible.

To change the title of the panel, right-click the title bar and click Change Title, as shown in the following image.

When you select a panel or container on the canvas, the properties panel refreshes, and provides access to the properties that you can use to modify or customize the container.

When you select a tabbed or accordion container, you can modify properties on the Tabs or Areas tab. These properties include the following:

Tabs/Areas Tab. Contains the properties that apply to tabs and areas. This tab is only visible in the properties panel of a tabbed or accordion container. Here you can style different areas of the container by selecting Buttons or Bar. You can also hide the new tab button from a tabbed container, or the new area button from an accordion container, to restrict adding more tabs and areas to this container at run time.

The accordion container can hold more than one piece of content, as shown in the following image.

In the preceding image, notice how the chart fits perfectly in the container. InfoAssist+ has an option to AutoFit charts. When enabled, it accepts the sizing from the portal. This prevents the person who develops the chart and the person who uses it from having to coordinate sizing. Additionally, you can easily resize the container and see the entire chart.

The title bar and content area properties are the same. The overall properties have an additional section labeled Area.

In the Area section, you can use the icons in the order in which they appear to add, rename, delete, and reorder the areas. You can also create a new area using the new area bar in the container or delete containers using the menus. You must use the Properties panel to rename or reorder the areas.

Note: When you click the New Area bar multiple times to add new areas, you may need to resize the container to view the bar, as it could be covered by newly created areas.

There is also an additional Properties panel, the Pane Title Bars, which is accessible only through the breadcrumb trail. This feature lets you style the title bars of the areas. They are all styled together, but you can style the different states to distinguish the currently active one from the one on which the mouse pointer is resting.

The tabbed container can hold more than one piece of content, as shown in the following image.

The tabbed container has all the same properties as the accordion container. Instead of the Pane Title Bars properties, it has a property panel called Tab Bar. You can access this property panel by clicking it.

Unlike the Pane Title Bars, it is not blank. You can choose to style the buttons or the bar.

The responsive container is designed to help you build a responsive portal that automatically adapts to different screen sizes and mobile devices, providing an optimal viewing experience for users everywhere. You can build your responsive portal on your desktop, and make it available to users on different platforms. The following image shows an example of a responsive portal displayed on a desktop, tablet, and smart phone.

The responsive container intuitively changes its layout when you change the size of your browser. The default width and height of the container, and the inserted items, are pre-configured to offer the best positioning of the elements on the screen. You can manually change the dimensions of the items in the Responsive Item Properties dialog box. You can also change the layout options in the Responsive Panel Properties dialog box.

The easy selector container provides a simple way to add content to a portal at run time, without opening the Resources tree. It also gives you the option to control which items users can access. When you insert an easy selector container into a page at design time, the Browse For Folders dialog box opens, as shown in the following image. Here you can select a folder that users can access at run time.

To change a target folder, click the Change Folder button in the Properties panel.

You can add content to a page in a few ways. The first way is to use the ribbon. Navigate to the Insert tab and choose a type of content in the Content group. The second way is to insert a blank panel, area, or tab container, and use the WebFOCUS Resources panel to populate it. From this panel, you can drag content to the portal page.

Note: When you click, and drag one or multiple resources or folders from the WebFOCUS Resources panel to a blank page, a tabbed container is created, showing each resource as a separate tab.

The other three options (Image, Resource Tree, and Text) place their content in the content area that is selected, if applicable. Alternatively, they create a new panel with the content on the page.

The WebFOCUS Resource option opens the Resources tree on the right-hand side of the window. The tree shows you the content stored in the Repository. You can access this content in the Domains section of the tree. Alternatively, you can find a resource that you marked as a Favorite.

The Resources tree is docked on the right. When it is docked, you can keep it open, close it, or unpin it so that it collapses to the side. T

The last type of content is text. The text area is simple to use. All styling is applied to all the text. You cannot style individual words or characters.

The text area has no properties other than the content type and the Area ID.