Portal pages are a vital part of the Business User Edition portal architecture. Depending on the type of a page, the Business User Edition portal allows different levels of versatility in the way you organize, share, and interact with it.
There are three types of pages in a portal. These include:
Note: To avoid unwanted behaviors, you should not edit base portal pages in the Page Designer, or move or hide base portal pages in the repository, while users are running these pages in the Business User Edition portal. If you need to edit a base portal page, remove it from the Business User Edition portal, and unpublish it before you begin editing.
The Page Designer allows you to create domain portal pages inside domains and folders of your choice. This section explains how to use the Page Designer to create a domain portal page. It also describes the different components of the Page Designer interface.
The Page Designer opens, and the Add Page dialog box opens inside the Page Designer.
The page displays in the Page Designer.
If left blank, panels behave like Easy Selector containers at run time. To learn more about the Easy Selector, see Using the Easy Selector.
Note: The Lock Page option is enabled, by default.
A new domain portal page is created and now appears inside the selected domain or folder. It is ready to be added to the portal.
For more information, see Working With the Business User Edition Portal.
The following image shows the Page Designer, and the Add Page dialog box.
The Page Designer contains the following components, located from the top of the interface to the bottom:
The components are described in the following topics.
Page templates provide a quick way of creating page layouts. When you create a new domain page, the Add Page dialog box opens and displays layout presets that you can choose before adding any content.
Note: Page templates are only available for domain pages.
The Add Page window is shown in the following image.
The Add Page window contains the following options:
The Application button, represented by the BIP icon, opens the Application menu of options. From this menu, you can create a new portal page, open an existing portal page, save the page, or exit the Page Designer.
From the Application menu you can perform the following actions:
You can use the Quick Access Toolbar to save your changes to the current portal page.
In the Page Designer, you can use the ribbon to access commands to edit your portal pages and add content. You can also hide the ribbon to maximize space, or launch the online Help content.
The Page Designer ribbon contains the following three tabs:
The following image shows the Layout tab, which contains the Preview and Page groups. You can use the options in these groups to modify the theme of your portal page, or to change the layout of your canvas.
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:
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:
When you choose any option other than Single Area, any items that you add to the page automatically snap to place in the layout.
You can use the Insert tab to add containers or content to your portal page. The Insert tab is shown in the following image.
The Insert tab contains the following two groups:
You can use the Style tab to configure styling of objects, options for the background and borders, as well as fonts and colors of the text. This tab functions in the same way as does the Style tab in the Portal Designer.
The following image shows the Style tab.
From the State group, you can choose which of the available states you are styling for an object. The state options include the following:
You can use an image, a color, or a combination of options to style the background of an object.
The Image button is a split button. When you click Image, the Open dialog box appears, and you can select an image from your repository. When you click the menu, the Background Image Options open. Here, you can change or remove the image.
Click Change Image to launch the Open dialog box. From this dialog box, select an existing image in the Repository to use as the background, and click Open.
You can use the Select Background Repeat menu to choose whether or not to repeat the background. The options in this menu include the following:
You can select a background position using a visual menu if you do not choose to repeat the image on the page,. For example, you can position the background image at the bottom of the window, on the right. This feature is similar to Menu Bar positioning.
The default background position is upper left.
The Background Color icon launches the color selection dialog box, where you can set a page background color. The same icon is used in the Border and Font groups to set the border and font colors, respectively.
The Reset Background icon , resets the background styling to the theme settings, for the currently selected state. The same icon is used in the Border and Font groups, to reset those groups.
In addition to color and reset, the Border group contains style and width options.
When you click the Style menu, the Select Border Style menu opens. From this menu, you can choose from nine border styles. This includes None, solid border, dotted border, dashed border, groove border, and more. As you hover over each option, the canvas refreshes with a preview to show the border style.
You can use the Width controls to set the border thickness in pixels (px). If the style is set to none, which is th. default for most objects, the Width control has no effect.
The Border Color icon launches the color selection dialog box, where you can set the Border color.
The Reset Border icon , resets the border styling to the theme settings for the currently selected state.
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 Font Color icon launches the color selection dialog box, where you can set the font color.
The Reset Font icon , resets the font styling to the theme settings for the currently selected state.
The following image shows the canvas area of the Page Designer. Here, you design your portal pages.
The Properties panel appears near the bottom of the window, below the canvas. It contains properties that apply specifically to the currently selected item.
The breadcrumb trail appears at the bottom of the Page Designer window. It serves two purposes:
Click any portion of the breadcrumb trail to change the currently selected item on the page canvas. This feature is another way to select an item, in addition to selecting it through the canvas. It is especially useful when you are working with hidden or layered content.
The page is made up of different components, such as columns, containers, and resources. This section describes the different components of a page and their properties.
The portal page, while not a component itself, does have properties that you can set.
The following are the properties of a portal page.
Note: The Lock Page check box is selected by default. Clear it to grant permission to end users from moving and adding content.
You can set the following properties for columns in a portal page.
There are five types of containers that you can add to a portal page. These include:
A panel container holds a single piece of content, as shown in the following image.
The panel consists of three sections:
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 Responsive Item Properties dialog box provides options to change the dimensions of an individual item within the responsive container. You can access the Advanced Responsive Item Properties dialog box at design time by clicking the Responsive Properties button in the Properties panel.
The properties for a responsive item are:
Note: In a responsive layout, setting fixed dimensions for items is not recommended, because the viewport width and height continually change from device to device. Responsive layouts need to adapt to this change, whereas fixed dimensions create too many constraints. For this reason, you must only set a range between minimum and maximum width and height, defining an amplitude with which the item can vary in size.
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.