1. Basic Introduction to Portal Designer
by Sandy Stulberger
Summit 2016
June 13, 2016

2. Basic Introduction to Portal Designer
Goals and Approach
What is a Portal
Use examples from “Building a Business Intelligence Portal”
Use Portal Designer to Build one Page of a Portal
Demo and Discuss all Six Pages of The Completed Portal
Demo and Discuss Securing a Page of the Portal
Demo and Discuss a Responsive Portal Design

3. This is an example of a basic portal
Portals are containers for displaying WebFOCUS content
This portal is one of the ones built in the Building a BI Portal class
This demo shows some of the Portal Designer features

4. This is a typical portal
Most portals will have a banner on top
The banner may have a logo on the left side
The banner will usually have a menu bar on the right side

5. The menu bar in the banner…
Will have the name of the person viewing the portal
It will offer numerous choices such as “Sign Out” and More…
More… will list additional choices such as “Resources” & “Tools”

6. Below the banner is the portal’s Navigation Bar
The Navigation Bar lets the viewer access different portal pages
This portal has six portal pages
Each page contains different WebFOCUS content

7. Below the Navigation Bar is the page content
This page is divided into two columns
All WebFOCUS content (reports or charts) are displayed in containers
This is the basic “Panel” container with it’s title bar

8. Portals have special containers to show different content in the same space
This is the Tabbed Container it has the “12 Month” chart on its first tab
The second tab switches to the “30 Day” chart
Such containers have multiple pages; each with a different report or chart

9. D E M O Create Default Portal Customize Look
Build A Simple Portal
Create Default Portal
Customize Look
Create Simple Version of Today Page
Test Portal

10. Customize Default Portal to Look Like Desired Portal

11. We created this Portal with the Enterprise Domain Template
We customized the Look of the banner and the Menu
Added 4 Text Guages
Added 2 Charts in a tabbed container
Added a third chart

12. D E M O Discuss basic Security Concepts
Use Security to Restrict Access to A Given Page
Discuss basic Security Concepts
Change Permission for A Given Page for A Select Group
Test Portal

13. D E M O Discuss Access For A Given Group
We start with the BasicUser Group
Normally they can see all Portal pages
AWVExecutive is a subgroup of BasicUser
Inheritance lets them also see all pages
We must deny them access to one page

14. Access Denied for AWVExecutive Group
Log in as John Wood

15. Access Denied for AWVExecutive Group
Log in as John Wood
John can see the Ad-Hoc page
Log in as Laura Norman
Laura can’t see the Ad-Hoc page

16. D E M O Discuss Responsive Portal Concepts Show a Responsive Portal
Discuss and Demo a Responsive Portal
Discuss Responsive Portal Concepts
Show a Responsive Portal

17. This Portal page was built using Responsive Design
Notice that it does not fill the screen
That is because Responsive panels will shrink or grow within a limited range to best fit and display on:
Computer screens
iPad or Droid pads
iPhone or Droid phones

18. This shows the portal layout on a pad
This simulates a pad in portrait mode
Notice the Text Gauges have wrapped
The charts below have also wrapped
In this mode you see two items per row
You scroll down as needed

19. This shows the portal layout on a phone
This simulates a phone in portrait mode
Notice the Text Gauges have wrapped
In this mode you see one item per row
You scroll down as needed

20. D E M O Discuss Responsive Portal Concepts
Designate Portal as “Responsive” This is done via “Width: Responsive” ( as opposed to auto or 100%)
Breakpoints The responsive portal has three breakpoints, or screen widths that represent the page width, at which the size will adjust to the next default resolution.
1300px. Full width Desktop mode or tablet landscape mode
710px. Half width Tablet portrait or phone landscape mode
420px. Quarter Phone portrait mode

21. D E M O Discuss Responsive Portal Concepts Responsive Item Properties
The responsive properties define how the containers will react with various mobile devices.
Minimum and Maximum Width gives the object (report or chart) The ability to shrink or grow as needed

22. Look at the Text Gauges on the phone
They are wider than the ones on the pad
The phone is using 400 px width
The pad is using closer to 300 px

23. D E M O Let’s see what this portal looks like on Peter’s PC
Discuss Responsive Portal Concepts
Let’s see what this portal looks like on Peter’s PC
Then use Laura’s Firefox browser to “show” an iPad
Then use John’s Chrome browser to “show” an iPhone

24. Here’s Laura on iPad and John on iPhone
Both scroll down to wide Tabbed reports
Note: Report is cropped on iPhone

25. The Tabbed reports on phone are cropped
Note the ( + ) in front of each row
Click the ( + ) to show missing fields

26. The Sales Territories Tab on both devices
“Table Saw Grid” shows what columns are missing
Click right arrow to show missing fields

27. Any
Questions ?

28. Socialize to Win! Daily Prizes Awarded!
Tweet and
tag #IBSummit during the event!
in your #IBSummit pics!
Check our Summit Facebook & LinkedIn pages
for updates, photos, and announcements

29. Thanks For Attending
Thanks For Attending
Thanks For Attending