These topics introduce WebFOCUS Designer, and how you can begin using it to create pages and InfoApps.
WebFOCUS Designer is a web-based development tool that you can use to create interactive, responsive pages, using content that you or other members of your organization create. This content can be added to a page by utilizing drag-and-drop actions. With the interactive canvas, you can resize and rearrange resources with ease. Additionally, you can use the integrated filter control capability to create instant, compelling applications and InfoApps from your content.
WebFOCUS Designer is shown in the following image.
Topics: |
The WebFOCUS Designer features a modern user interface with intuitive navigation, streamlined content creation, and the flexibility to build filtered responsive pages that are instantly compatible with any browser or mobile device.
The WebFOCUS Designer interface is shown in the following image.
The Designer toolbar provides access to general properties and interface controls that you use to help develop content in the WebFOCUS Designer, as shown in the following image.
The following table lists and describes the controls that you can access from the Designer toolbar.
Icon |
Description |
---|---|
|
Application Menu. Opens a menu that you can use to open an existing page, create a new page, save the current page, and close the WebFOCUS Designer. |
|
Save. Opens the Save dialog box, where you can save the page to a specific location in your environment. |
|
Preview. Shows the page in preview mode, allowing you to view how the page will appear when run. To exit the preview mode of the Designer, click the back arrow. |
|
Quick Filter. Configures filters that automatically appear when new unbound parameters are found in the content on the page. The badge icon shows the number of parameters available. |
|
Page Filter Configuration. Opens the Page Filter Configuration dialog box, where you can choose to display filters in a filter bar above your content or in a modal window. |
|
Help. Launches the online Help content. |
|
Resources. Hides or shows the Resource selector. |
|
Properties. Hides or shows the Properties panel. |
You can use the Resource selector to access content, containers, and controls for your page. The Resource selector has the following tabs:
The Containers tab is shown in the following image.
Using this tab, you can select empty containers, which you can drag to the canvas, and populate with the content of your choice. The types of containers available to you include:
The Content tab is shown in the following image.
This tab shows your Resources tree, where you can navigate to your content by expanding and collapsing folders, selecting content items, and dragging to the canvas.
The Controls tab is shown in the following image.
Using this tab, you can add a text label or a Submit button to your page.
The canvas is the design area. It provides a responsive grid for all your containers and content and resizes automatically to fit any browser or device. The canvas is shown in the following image.
When you right-click the grid area, you access a shortcut menu of options that include the following:
The Page toolbar is located above the canvas. Here you can edit the page title by double-clicking the text and typing the new text. You can hide the page title by disabling Title in the Properties panel.
The Page toolbar also contains two options, described in the following table.
Icon |
Description |
---|---|
|
Refresh. Refreshes the content on the canvas. |
|
Filter. Toggles the page filter, which can be displayed as a filter bar or a filter modal window. This option is only visible when filters are added to the page. |
You can hide the options by disabling Toolbar in the Properties panel. To hide the Page toolbar completely, disable both Title and Toolbar in the Properties panel.
You can use the Properties panel to configure properties for the element that you selected on the page. An example of the Properties panel for a page is shown in the following image. Under the Settings tab, you can toggle the title and toolbar visibility. Under the Style tab, you can configure page style and page heading.
Topics: |
Using the responsive grid, drag-and-drop operations, and other features, arranging content on a page in WebFOCUS Designer is quick.
How to: |
You can create pages in WebFOCUS Designer that you can add to a portal or portal page to share with other users in your organization. Additionally, pages that you create in Designer can be run as content items from the Home page or directly from a browser. You can share a Designer page as a stand-alone repository resource or a URL.
The New Page dialog box opens, as shown in the following image.
Designer opens, and the canvas shows the template that you selected.
After creating a page in WebFOCUS Designer, you can edit it at any time, in one of the following ways:
Note: You can only use WebFOCUS Designer to edit pages that were created in this tool.
How to: |
In the WebFOCUS Designer, you can create interactive pages or InfoApps, using content that you create in InfoAssist+ as well as images and URLs to external content. You can also add content to these pages using content that was created by another user in your organization. You can access the content that is available to you from the Content tab in the Resource Selector.
As you drag the item to your canvas, a shaded placement area appears, as shown in the following image.
After adding content to your page, you can resize or rearrange items, add a heading, or add filters. Before closing the page, be sure to save any changes.
How to: |
In the WebFOCUS Designer, you can create multi-content containers that show multiple content items at the same time. For example, you can create a carousel that rotates images or an accordion container that maximizes space on your page.
The multi-content container types include:
The Add Content dialog box opens, and presents the following options.
The item refreshes and shows the multi-content container. You can modify the container title and adjust the placement on your page.
Note: Once you have selected a new tab, new slide, or new accordion area, the options in this menu only allow you to replace an item or add an item.
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 an item 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.
As you create pages in the WebFOCUS Designer, you can preview how the page will appear when run by clicking the Preview button . This opens a preview mode of the Designer, which is shown in the following image.
In preview mode, you can interact with your content, view tooltips, as well as access menu options only available when the page is run. You can also explore the responsive capabilities of the page by adjusting the width of your browser. These functions are not available when you create the pages, as interactive features are disabled. The Maximize / Restore button behaves in the same way when you create a page or preview a page, by maximizing the item to fill the entire canvas. If you save the page while an item is maximized, it will appear maximized the next time that you open or run the page, by default.
To exit the preview mode of the Designer, click the arrow .
The WebFOCUS Designer canvas uses a responsive grid layout that you can divide into sections to organize your content, and achieve multiple, complex layouts. You can also collapse selected sections to allow users to maximize space on a page.
When you open a blank page, only one section displays inside the canvas. To add more sections, right-click the canvas and then click Insert section above or Insert section below.
When a section is selected, a red dotted line appears to indicate the border of the section, as shown in the following image.
To delete a section, right-click the section, and then click Delete section.
To make a section collapsible, enable the Collapsible setting in the Properties panel. Right-click the section, and click Settings, or click Properties on the toolbar to open the Properties panel. You must enable the Collapsible setting for each section that you want to make collapsible.
When the page is run, you can expand or collapse sections using the section indicator, which is shown in the following image.
When you save the page, the collapsed state of the section is saved and will appear collapsed the next time you open or run the page.
The Properties panel displays the properties for the element that is selected. To access container properties, click a container or item with the Properties panel open. To access page properties, click the page header or the toolbar. If the page header and the toolbar are hidden, you can access page properties by clicking the canvas outside a grid section.
The following properties are available for pages.
Settings tab:
Style tab:
The following properties are available for containers and items.
Settings tab:
Style tab:
Topics: |
How to: |
Creating a page filter in WebFOCUS Designer is a quick and intuitive process. Whenever you add parameterized content item to the canvas, such as a report with parameters or chart with parameters, the Designer recognizes the parameters and creates filters for them automatically. The tool then notifies you of any available filters with a notification, and a badge count is overlaid on the Quick Filter button, as shown in the following image.
There are three ways to add filters to a page in WebFOCUS Designer:
The Quick Filter button appears on the toolbar with the badge icon showing the number of unbound filters.
The filter bar with all available filters appears above your content.
Note: Another way to edit a control label is to double-click the field, type the new text, and press Enter.
The Quick Filter button appears on the toolbar with the badge icon showing the number of unbound filters.
The Page Filter Configuration dialog box opens.
Note: If you prefer a floating modal window instead of a filter bar, click Create empty filter modal window.
The Add Filter Controls dialog box opens, and lists all available controls selected by default, as shown in the following image.
Note: When working with button sets, keep in mind that they look best when positioned in a single line.
The controls are added to the filter bar.
The Filter button appears on the toolbar with the badge icon showing the number of available filters.
The Add Filter Controls dialog box opens, and lists all available controls selected by default.
The controls are added to the grid container.
Note: You can also drag a control from the filter bar to a grid container directly, if the filter bar is open and populated with controls.
An example of a simple layout featuring a grid container with filter controls is shown in the following image.
You can configure the properties of the filter grid using the Properties panel, which is content-sensitive. For example, when you click a filter cell, the cell style properties open in the Properties panel. When you click a filter control, the general and style properties for this control open in the Properties panel.
The Properties panel for a cell is shown in the following image. When you configure these properties, you modify the alignment of content within a cell or change the style layout of the filter grid.
The properties for a grid cell are:
The Properties panel for a filter control is comprised of two tabs: general and style properties. The settings tab is displayed in the following image. Using these properties, you can define the type of filter control that shows on the page, add a tooltip or placeholder text, and set the default value.
The settings tab contains the following properties:
Note: If the select list contains 50 or more values, the Search option is enabled automatically.
Note: The Selection controls and Show All options cannot be selected at the same time.
Note: Choosing this option results in the parameter receiving a _FOC_NULL value. If this parameter is used in a WHERE condition, it results in the WHERE condition being removed from the request and all data values for this field displaying the page.
The style tab is displayed in the following image. Similar to the properties of a cell, you can modify the positions of labels in a control, define the alignment, and set the object width.
The style properties are:
WebFOCUS Designer filter controls are versatile and allow you to facilitate multiple filtering scenarios. Depending on the needs of your enterprise and on the specifics of the data that you are using, you can configure filter controls to fit your unique needs. Examples below show you different types of controls and how to use them.
How to: |
WebFOCUS Designer supports two event models for passing parameters to your page content:
The preview mode is activated, allowing you to interact with content and filters.
Each time you make a selection, the content refreshes to reflect it.
Note: Notice that the filter controls are chained in such a way that each selection automatically reflects the available choices in other filters. In our example, we set Category to Televisions. Now, the Product Model filter only shows models of televisions, as shown in the following image. WebFOCUS Designer chains controls automatically, if the parameters are defined in the metadata layer with the WITHIN keyword to relate them.
The Submit and Reset buttons display in the filter grid.
Note: You can delete one or both buttons by right-clicking them and clicking Delete.
The preview mode is activated, allowing you to interact with content and filters.
The content refreshes to reflect all your selections upon clicking the Submit button, as shown in the following image.
The filters return to their default values.
Note: If you deleted the Reset button in the previous step, you must select default values manually, and then click Submit to return to the default state.
How to: |
When you have required parameters in your content, WebFOCUS Designer interprets them as required filter controls. Required controls are marked in red, prompting you to make a selection for the request to be processed. The image below shows an example of a required filters control.
With a required parameter in place, your content does not refresh until you select filter values.
There are two ways to create a required filter control:
The Open dialog box opens.
InfoAssist+ opens.
To learn more about creating content in InfoAssist+, see the WebFOCUS InfoAssist+ User's Manual.
The Create a filleting condition dialog box opens.
The drop-down dialog box opens.
In our example, we are creating a multiple select required control. An example of a complete configuration is shown in the following image.
The content item does not load. Instead, a blank container displays a message: A required parameter is missing. The Quick Filter button appears on the toolbar with the badge icon showing one available filter.
The filter bar with one filter appears above the content item. The filter control is marked in red and the Make a selection text displays inside the control field.
The preview mode opens.
The filter control is no longer red. It displays your selections. The content refreshes to reflect the filter values, as shown in the following image.
The Properties panel opens.
The filter control is marked in red and the Make a selection text displays inside the control field.
The preview mode opens. The content does not refresh.
The content refreshes to reflect your selection.
There are two types of list controls in WebFOCUS Designer:
An example of a single select list control is shown in the following image.
Once you have made a selection in a single select list, your content instantly refreshes to reflect that selection.
An example of a multiple select list control is shown in the following image.
Once you have made all your selections in the multiple select list, you must click outside of the control for the content to refresh.
You can customize your list controls with the search feature by enabling the Search setting in the Properties panel. Once enabled, it adds the search field to your list and allows you to quickly navigate to a specific value. Simply start typing any word or syllable and all values that contain it will display. When a list contains 50 or more values, the search feature is enabled automatically. You can disable it at any time by disabling the Search setting in the Properties panel.
If a list contains 200 or more values, the paging feature is added to the bottom of the control. When paging is active, 10 values display per page. An example of a long list with the paging feature enabled is shown in the following image.
You can further enhance a multiple select list by enabling the Selection controls option in the Properties panel. Once enabled, it adds the Select all and Clear buttons to the list. This feature is especially useful when you need to eliminate just a few values from your results. You can click Select All, clear the values that you need to eliminate, and click outside of the control to refresh your content.
If the Selection controls and Search features are enabled at the same time, you can use the Select all button to select all search results, as shown in the following image.
How to: |
A slider control is a horizontal track with a marker that you can slide between a minimum and maximum value. This versatile control is often used to choose a value within a fixed range. An example of a slider control is shown in following image.
The Open dialog box opens.
InfoAssist+ opens.
To learn more about creating content in InfoAssist+, see the WebFOCUS InfoAssist+ User's Manual.
The Create a filleting condition dialog box opens.
In this example we create the minimum and maximum parameters for the MPG field in the car report. An example of the completed filtering condition is shown in the following image.
The Text Editor window opens.
An example of the modified syntax is shown in the following image.
The Quick Filter button appears on the toolbar with the badge icon showing two available filters.
The slider controls display in the filter grid, as shown in the following image.
Your controls are combined. You can edit the label to reflect your new combined control. An example of the combined slider control is shown in the following image.
Parameters that contain date ranges are recognized by WebFOCUS Designer as date range controls. An example of the date range controls on the page is shown in the following image.
The calendar feature inside a date control allows you to select a specific date value. Once you pick a specific date, it is always spelled out, so that it can be supported by all internationalized applications.
Optionally, you can combine two date control into one date range control. To do so, multi-select two date controls and then click Combine. An example of a combined date range control is shown in the following image.
WebFOCUS | |
Feedback |