Portal Designer Overview

In this section:

This topic explains how to create a portal and launch the Portal Designer. It also describes the different components of the Portal Designer interface.

Creating a Portal

How to:

You can create a portal in one of the following ways:

Procedure: How to Create a Portal from the Portals Node

  1. On the WebFOCUS Home page, sign in to WebFOCUS.
  2. On the left side of the page, right-click the Portals node, and click New Portal.

    The New Portal dialog box opens.

  3. Supply the requested information on the dialog box, as follows.
    • Title. Value displayed in the tree that users use to identify the portal.
    • Name. Type a descriptive name for your portal. The name will be used throughout the WebFOCUS application.
    • URL. The URL is generated based on the portal name. Another user can enter this URL to access your portal without going to the WebFOCUS Home page.
    • Security. Select the Give others access check box to bring up the security dialog box when the Portal Designer opens.
  4. Once you have completed the fields, click Create.

    The portal is created for you. If you did not select the Give others access check box, the Portal Designer opens.

    If you did select the Give others access check box, the Security Rules dialog box opens. Use it to set the access rules for the portal. For more information, see Security.

Procedure: How to Create a Portal While Creating a Domain

  1. On the WebFOCUS Home page, sign in to WebFOCUS.
  2. Right click the Domains node, point to New, and then click either Enterprise Domain or Tenant Domain, depending on which type of domain you want to create.

    The New Domain dialog box opens.

  3. Type the title of the domain in the Title field.

    The Name field is filled automatically to match the value in the Title field. You can edit it.

  4. Select the Create Portal check box, as shown in the following image.
    New Enterprise Domain dialog box

    Note: If the basic portal is disabled in your environment, the Create Portal check box is unchecked and disabled by default.

  5. Click OK.

    A message appears and confirms that the template processing is complete.

  6. Click OK.

    A new domain and a portal with the same name appear in the Resources tree.

  7. To customize your new portal, under the Portals node, right-click the portal and click Edit.

    The Portal Designer opens.

    When you create a portal as part of a domain, it comes with the following pre-configured pages:

    • Workbench
    • My Page

    The Workbench page can be used to work with domain content. It displays the Resources tree on the left and the Report Output area in the middle. When you run a content item, it appears in the Report Output area. Multiple content items appear as tabs.

    My Page presents you with series of empty containers that you can fill with the content of your choice. You can maximize any of these containers to get a better view of your content.

For more information about domain templates, see the WebFOCUS Security and Administration technical content.

Procedure: How to Create a Collaborative Portal

  1. On the WebFOCUS Home page, sign in to WebFOCUS.
  2. Right click a domain or folder, point to New, and then click Collaborative Portal.

    The New Collaborative Portal dialog box opens.

  3. Supply the requested information on the dialog box, as follows.
    • Title. Value displayed in the tree that users use to identify the portal.
    • Name. Type a descriptive name for your portal. The name will be used throughout the WebFOCUS application.
    • Path. The path of the portal in the WebFOCUS repository.
    • URL. The URL is generated based on the portal name. Another user can enter this URL to access your portal without going to the WebFOCUS Home page.
  4. Once you have completed the fields, click Create.

    The portal is created for you, and the Resources folder for the collaborative portal is added to the repository. The Portal Designer opens.

Reference: Resources Folder

When you create a collaborative portal, a Resources folder with the same name is automatically generated. The Resources folder is used to store pages for each portal under the Domains node. The following image shows the Sales Dashboard Resources folder, which contains the pages for the Sales Dashboard portal.

You can change a default Resources folder at any time. You can also reference pages in a portal from other locations.

Portal Designer Interface

The following image shows the Portal Designer.

The Portal Designer has the following components:

The components are described in the following topics.

Page Templates

How to:

Page templates provide a quick way of creating page layouts . When you create a new collaborative portal or page, the Add Page window opens and displays layout presets that you can choose from before adding any content. If you have custom templates, they are also shown in this window.

Note: Page templates are only available for collaborative portals.

The Add Page window is shown in the following image.

The Add Page window contains the following options:

Procedure: How to Create a Custom Page Template

  1. Sign in to WebFOCUS as a Developer or Administrator.
  2. In the Resources tree, expand the Global Resources folder, expand the Page Templates folder, right-click Custom, point to New, and then click Page.

    The Page Designer opens. The Add Page window displays.

  3. Select a template that you want to use as a base for your custom template, update the Name field, and then click Create.
  4. Modify your layout.

    In this example we used the Responsive_3-3 template and added a filter panel to it, as shown in the following image.

  5. Click Save and close the Page Designer.
  6. In the Resources tree, right-click your newly created custom page template and click Properties.
    The Properties window opens.
  7. Locate the Properties value and make a note of the thumbnail image name, as shown in the following image.

  8. Create a custom thumbnail image, resize it to 96 x 72 pixels, and save it with the same name as the one in the custom template Properties value.
  9. In the Resources tree, right-click the Custom folder, point to New, and then click Folder.

    The New Folder dialog box opens.

  10. Type Resources in the Title field and click OK.
  11. Right-click the Resources folder that you just created, point to Upload and then click Image.

    The Image Upload dialog box opens.

  12. Upload your custom thumbnail image and exit the Image Upload dialog box.

    The correct folder structure is shown in the following image.

  13. In the Resources tree, under the Domains node, right-click a domain or folder, point to New, and then click Page or Collaborative Portal.

    The Designer tool opens. The Add Page window displays with the new custom template added to the list, as shown in the following image.

  14. With the Custom Template selected, click Create.

    The custom template layout is displayed on the page.

Application Menu

You can access the Application menu through the BIP icon at the upper-left corner of the Portal Designer window.

The menu contains options to:

Quick Access Toolbar

The Quick Access Toolbar allows you to save your changes to the current portal.

Ribbon

In this section:

The ribbon contains three tabs:

Layout Tab

In this section:

The following image shows the Layout tab for a collaborative portal.

The layout tab has two groups, Portal and Page & Banner.

Portal Group

In this section:

The following topics describe the options in the Portal group.

Navigation
You can expand the Choose a Navigation Layout option and choose among:
  • None. There is no navigation menu.
  • Top. The navigation menu is located beneath the banner at the top of the window. This is the default layout.
  • Left. The navigation menu is located on the left side of the screen in the left banner.
  • Right. The navigation menu is located on the right side of the screen in the right banner.
Banner
A banner is an area that is visible in the portal no matter what page you are on. You can choose to have no banner or any combination of top, bottom, left, and right banners.

You can expand the Choose Banner Areas option and choose among:

  • Top. The banner is at the top of the window. This is the default area.
  • Bottom. The banner is at the bottom of the window.
  • Left. The banner is at the left of the window.
  • Right. The banner is at the right of the window.

Click each menu option to turn the associated banner on or off.

Menu Bar

The Menu Bar button allows you to use a visual interface to change the location of the links. You can choose from three main locations:

  • Top Bar. The links are displayed above the top banner.
  • Top Banner. The links are displayed within the top banner. This is the default location, with a right alignment of the links.
  • Bottom Bar. The links are displayed below the bottom banner.

The bar options are thin strips, either at the top or bottom of the window. They are always visible, no matter how far down or up you scroll.

In each of the locations, you can choose alignment options. For example, you can align the links to the left, in the center, or to the right.

Theme

The Theme menu consists of two parts:

  • Portal Theme Files Browser. Allows you to configure CSS files, apply a predefined theme, including a Custom theme.
  • CSS Editor. Enables you to edit specific components of the existing CSS theme.

The default theme is Neutral.

Security

The Security button launches the Security Rules dialog box, which enables you to specify an audience for the portal and add other designers.

There are four permission sets for portals:

  • BIPCreatePortal. Allows you to create a portal.
  • BIPFullControl. Gives you design access and personalization features on a portal.
  • BIPViewAndCustomize. Provides access to run-time mode only. It saves the position of any content that you rearrange and lets you add new content to your copy of the portal.
  • BIPViewOnly. Does not save anything that you do in run-time mode. One use for this operation is anonymous access.
Properties

The Properties button makes the current portal the selected object. It also sets the Properties panel at the bottom of the Portal Designer window so that it applies to the current portal.

Page & Banner Group

The Page & Banner group has a single Layout button. By default, all banner areas and pages are single area (free-form) layouts. You can use the Layout option to change to 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. A page can have one of the following layouts:

  • Single Area (default). There is no grid, and all items are free flowing.
  • Fluid Canvas. Items are dragged to a floating drop target that arranges the content evenly and redistributes space as more items are added.
  • One Column. The content stretches to fill the entire page area.
  • Two Columns. The page is evenly divided into two columns.
  • Three Columns. The page is evenly divided into three columns.
  • Four Columns. The page is evenly divided into four columns.

When you choose any option other than Single Area, items snap to place within the area.

Insert Tab

The following image shows the Insert tab.

The Insert tab is used to insert three types of items:

  • Pages. Adds a new page to the portal.
  • Containers. Adds a panel, accordion, tabbed, responsive, or easy selector container.
  • Content. Inserts WebFOCUS content (for example, reports, charts, visualizations, documents, and URLs), images, a Resources tree, a Portal List, and text.

Style Tab

In this section:

The following image shows the Style tab.

Style tab

The Style tab is divided into four groups:

  • State
  • Background
  • Border
  • Font

State

From the State group, you choose which of the available states you are styling for an object. The state options are:
  • Normal. This is the default state of an object in which an event, such as a hover, is not occurring, or if styling for that event is not defined.
  • Active. This is the state in which the object is currently in use. An example is the background color of the current page tab.
  • Hover. This is the state in which the mouse cursor is resting on the object.

Background

In this section:

You can use an image, a color, or a combination of options when styling the background of an object.

Image
The Image button is a split button. Clicking the left side of the button launches an Open dialog box. Clicking the right side of the button displays the Background Image Options. The Background Image Options allow you to change or remove an image.
Click Change Image to launch the Open dialog box. From this dialog box, select an existing image in the WebFOCUS Repository to use as the background, and click Open.

To add a new image, use the WebFOCUS Resources tree, and right-click the folder that you wish to place the new image in. Point to Upload and click Image.

Note: The background image is not visible when the Width option is set to Responsive.

Repeat
The Select Background Repeat menu enables you to choose whether or not to repeat the background. The options are:
  • None. Displays the background image only once.
  • Everywhere. Repeats the background image horizontally and vertically. This is the default value.
  • Horizontally. Repeats the background image horizontally.
  • Vertically. Repeats the background image vertically.
Position
If you do not choose to repeat the image everywhere, you can select a background position using a visual menu. 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 top left.

Background Color

The Background Color icon Color Picker Icon launches the color selection dialog box for setting a page background color. The same icon is used in the Border and Font groups to set the border and font colors, respectively.

Reset Background

The Reset Background icon Reset Background Icon in the Background group 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.

Border

In this section:

In addition to color and reset, the Border group has style and width controls.

Style
The Select Border Style menu is a visual menu that enables you to choose one of nine border styles. In the order of left to right (by row), the styles are:
  • None (This is the default border style.)
  • Solid
  • Dotted
  • Dashed
  • Double
  • Groove
  • Ridge
  • Outset
  • Inset
Width

The Width control sets the border thickness in pixels (px). If the style is set to none (the default for most objects), the Width control has no effect.

Color

The Border Color icon Color Picker Icon launches the color selection dialog box for setting the Border color.

Reset Border

The Reset Border icon Reset Background Icon in the Border group resets the border styling to the theme settings for the currently selected state.

Font

In this section:

The Font group enables you to set:

  • Font family
  • Font size in pixels
  • Formatting
    • Bold
    • Italic
    • Underline

In addition, the Font group contains:

Color

The Font Color icon Color Picker Icon launches the color selection dialog box for setting the font color.

Reset Font

The Reset Font icon Reset Background Icon in the Font group resets the font styling to the theme settings for the currently selected state.

Canvas

The following image shows the canvas of the Portal Designer.

The canvas is the design area, including the banners and pages of your portal. When the portal itself is the selected object, a red outline appears around the entire canvas.

Properties Panel

The Properties panel appears near the bottom of the window, below the canvas. It shows properties that apply specifically to the currently selected item.

Breadcrumb Trail

The breadcrumb trail appears at the bottom of the window. It serves two purposes:

Click any portion of the breadcrumb trail to change the currently selected item. This feature is another way to select an item, in addition to selecting it through the canvas. This feature is especially useful when you are working with hidden or layered content.

In the following image, Retail is selected in the breadcrumb trail, and a menu of options is displayed. You can choose an option from the menu to add it to the breadcrumb trail.


Context Menu

 WebFOCUS