Exploring Page Creation Options

You can create interactive responsive pages using content that you or other members of your organization create. 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.

To create a page, from the WebFOCUS Home Page, on the Action bar, click the Common tab or Designer tab and click Page, then select a page template.

When creating a page, WebFOCUS Designer includes the following components that contain different tools and functionality.

When working with pages, WebFOCUS Designer consists of the following components:

• WebFOCUS Designer toolbar
• Resource selector
• Canvas
• Page toolbar
• Properties panel

The WebFOCUS Designer toolbar provides access to general properties and interface controls that you use to help develop content in WebFOCUS Designer, as shown in the following image.

The following table lists and describes the controls that you can access from the WebFOCUS 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 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 WebFOCUS 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.
	Info Mode. Enables the informational mode that changes the view of all content items on the canvas to display their paths in the repository and parameters configured within these items.
	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:

• Containers
• Content
• Controls

The Containers tab is shown in the following image.

Using this tab, you can select empty containers that you can drag to the canvas and populate with the content of your choice. The types of containers available to you include the following:

• Panel
• Tabbed
• Carousel
• Accordion
• Grid
• Panel grid

The Content tab is shown in the following image.

The Content tab consists of two drop-down areas, Content and Repository Widgets.

The Content area, provides access to the Resources tree, where you can navigate to your content. The initial view of the Resources tree displays the directory in which the page is created. You can navigate to other domains and folders using the back arrow. Each item on the tree is represented by a thumbnail, making it easy to locate content. The following images show the Resources tree displaying two different levels of the domain hierarchy.

The Repository Widgets area, shown in the following image, displays the Explorer and Link Tile widgets, which give you more ways to interact with your content.

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, a shortcut menu of options opens that include the following:

• Settings. Opens Section Settings inside the Properties panel, which you can use to make the current section collapsible.
• Style. Opens the Style tab of the Properties panel, which you can use to apply styling to the current section.
• Delete section. Deletes the current section.
• Insert section above. Inserts a section above the current section.
• Insert section below. Inserts a section below the current section.

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, which are 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.