WebFOCUS Designer

The link tile widget provides additional innovative ways of using your content and incorporating it into your page. The link tile widget layers content in such a way that one content item becomes a click-through tile that opens another content item. This feature is especially useful when you need to incorporate a large or Insight-enabled item into a page and display it on all devices. The link tile widget can be used in pages assembled from existing content.

You can utilize responsive panel in panel behavior by adding items to a panel in panel container. When you run the page, top-level containers in the page, including the panel group container, fold responsively based on the size of the browser, and the panels within the panel group container fold based on its current size, independent of the rest of the page.

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.

As part of the Designer JavaScript API, you can use the following predefined classes.

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.

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.

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. 

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.

Using a carousel container is one way to put multiple charts, reports, and other content items into a single container. Carousel containers include an unobtrusive control that allows users to cycle through the items added to it, as shown in the following image.

You can choose to hide certain content items from smaller devices, especially when dealing with large or multi-faceted items like maps or HTML pages. When an item is hidden from a device, the other items around it re-flow into the empty space and retain the responsive layout.