Creating Your First Portal Page

Last Updated: 08/17/2016 Introduced in Verision: 2.0

Portal pages are page entities added to Designer folders that allow users to access information about data and entities. A portal page’s components and properties are set in the Page Designer.

The appearance and behavior can be customized so that all portal pages look the same and behave in the same way.

A portal page can be displayed in another Designer folder, and will have the same components, such as a header, an actions bar or a report viewer, regardless of the folder it displays in.

When you add a portal page, a link does not appear below the address bar when in Folder View as it does when you add a folder page. Portal pages are accessed through navigation links added on other pages, or directly through the Designer folder.

Example

In the example, we will:

  1. Create a portal page with a vertical stack layout.
  2. Add a header, actions bar and report viewer.
  3. View the portal page.

To begin, navigate to a Designer folder and click the Create Page/Dashboard button.

create page

 

Give your page a name and click OK.

name page

 

The Page Designer opens.

page designer

 

The Toolbox panel is located to the right and contains categories with components. You can drag components to the workspace in the center of the Page Designer to create the portal page.

To set the properties of a component, we select the component in the workspace and make changes in the Properties panel on the right. The Properties panel allows us to customize almost everything about a component, from its labels or the data it displays by default, to the functions that the component should carry out.

The Explorer panel in the bottom right contains a list of all the elements currently in the workspace, including the containers on the page, the bottom-most elements of the page that determine its layout.

By default, when the Page Designer opens with a new portal page, the Explorer panel is collapsed. Just click the Explorer panel to expand the section.
To change the look of the page, in the Explorer panel, we select the Surface component and change its properties in the Properties panel.

explorer pannel

 

The first change we will make to our portal page is to change the layout to a vertical stack. Once configured, each component dragged to the workspace will occupy the width of the page, and the components will be placed one below the other.

To change the layout of the Surface component to a vertical stack, select it. In the Properties panel, in the Layout section, in the Container Type drop-down list, select VerticalStack.

vertical stack

 

Now that the page has a new layout, the components in the Explorer panel will update. Underneath the Surface component, we no longer see a Left and Right component. A Grid 1 [SilverGrid] component appears.
Before adding components to the portal page, we can make one more adjustment to the layout. You can see two boxes outlined in blue in the workspace, indicating that the page has three sections. We do not want our portal page to have these sections, so we will remove the Silvergrid component.

In the Explorer panel, we select the Silvergrid component.

silvergrid component

 

With the selection of the Silvergrid component, the boxes in the workspace now have yellow arrows at their borders, indicating that they are selected.

In the workspace, a menu also appears. This context menu displays whenever we select a component in the workspace or in the Explorer panel. 

In this example select Delete.

Once again, the components in the Explorer panel update. A Root Container component displays beneath the Surface component, and we are now ready to add components to the workspace.

root container

 

To quickly locate components, we will use the search bar at the top of the Toolbox panel.

Search for “folder header” and select the component Folder Header Data and drag it to the workspace.

folder header

 

Next search for “action” and select the Actions Bar component and drag it to the workspace below the Folder Header Data component.

actions bar

 

Next search for “report,” select a Report Viewer component and drag it to the workspace, and place it below the Actions Bar component.

report

 

That completes creating the portal page, save it and close the Page Designer.

Back in the portal, to preview the new page, select the page’s thumbnail in the folder data panel. Select Show Preview from its Action menu.

show preview

 

The portal page displays with the components we added.

element preview

 

.

Additional Resources