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

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

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

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

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”

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

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

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

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

Customize Default Portal to Look Like Desired Portal

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

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

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

Access Denied for AWVExecutive Group Log in as John Wood

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

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

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

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

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

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

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

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

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

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

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

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

Any Questions ?

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

Thanks For Attending Thanks For Attending Thanks For Attending