8207


Enabling Container Customization

When creating a page with external content, you can enable users to select content to display at run time, which can make portal pages more engaging, useful, and interactive. With this feature you can also control which items users can access, by assigning a specific path to the Add content button in the Properties panel. This feature can be used with panel, tab, carousel, and accordion containers. If you enable this feature on a multi-content container, the Add content button automatically appears on every new tab, slide, or area.

Enhancing Pages With Custom JavaScript

You can use custom JavaScript to enhance the functionality of components on a page. Any component created on the page using the Designer canvas can be modified in the JavaScript text editor by referencing a CSS class name specified in the Classes field of the Properties panel for the object, or using the Designer JavaScript API, to standardized classes that correspond to different component types in a page or portal. Each component class can utilize a set of predefined methods in addition to custom JavaScript.

Styling Pages With Custom CSS

Cascading style sheets, or CSS, is a commonly used language that allows you to style different components on a page. CSS properties include font style, text color, background color, and much more. Custom CSS can be applied to specific objects on a page by specifying a CSS class for the object, and then using a class selector in your CSS code.

Applying Custom CSS and JavaScript Code to a Page

You can apply custom cascading style sheet (CSS) properties and JavaScript code to a page, allowing you to significantly enhance the page with countless styling options and run-time behaviors using code that you write yourself. CSS makes it easy to style different elements on a page by applying various styling properties to them, while JavaScript is a robust programming language that you can use to customize a page with dynamic and interactive features not normally available in WebFOCUS Designer. 

Applying Themes and Styles to Pages

While customizing your page, you can apply themes and styles to various page elements. The general theme of the page is defined by the Theme setting, which you can configure in the Properties panel, on the page level. A theme affects the look of the entire set of elements on the page, including colors, opacity, and typeface styles. Themes also dictate the color schemes available as styles on the Format tab when editing sections, filters, or containers.

Editing Page, Section, and Container Properties

The Properties panel displays the properties for the element that is selected. To access container properties, select a container from the canvas or Outline. To access section properties, click the grid inside the canvas, or select a section from the Outline. To access page properties, click the page header or the toolbar, or select a page from the Outline. If the page header and the toolbar are hidden, you can also access page properties by clicking the canvas outside a grid section.

The following properties are available when you select an entire page.

Settings tab:

Resizing Content on a Page

You can resize content on a page, at any time, using the sizing handles and the shaded placement area that appear on the canvas. When you hover over a container on the canvas, a series of handles appear. Drag a handle in the direction that you want to resize the item, as shown in the following image.