General Questions

• Stuff to document (high level notes)
  • For Internal/External/3rd Parties
  • FAQ Page
  • Installation Pages (Internal/External/3rd Party)
  • Integration with 3rd parties
  • How to make your own further customisations
  • Flex will not support the new custom page
  • Release Management
  • Location of documentation (Internal/External/3rd Party)
  • Notification to clients
  • Failures/blocks in test cases that do not affect Flex
  • Custom pages (how to apply Flex)
  • What about clients who have themes already (Pacific/Custom)
  • Using ../CSS/Site folder?
  • What may be happening for the future?
  • Supported devices/tested on
    • Browsers (e.g. Samsung browser based on IE)
  • Required minimum versions
    • 68.35/69.07

Installation

Installation is very simple and can be completed by the client.  See Flex - Responsive Community Portal skin

It is recommended that installation on a test server be completed first so that you can become accustomed to the look and feel as well as test against numerous devices to understand its General Questions

Versioning

The latest release is included in Flex - Responsive Community Portal skin

To locate the version a site is currently using, open the flex.css file, the version information should be at the top of the file.

Support

This is going to be an evolving position from a Synergetic standpoint.

Originally, there was to be no support for this once implemented, however this is likely to change depending on feedback and uptake.

The intention was to be able to provide sites with a starting point skin that makes it as responsive as possible without code changes to the Portal itself, allowing sites to utilise this as it is or further customise themselves.

It is highly recommended to check the Limitations and Recommendation sections prior to implementing and raising issues.

Due to the nature of the Microsoft codebase, Internet Explorer and Edge browsers are not supported and will display the Portal as it was originally designed.

Limitations

The following are the known limitations.  Without making changes to the Community Portal code itself.

Flex is not supported for Internet Explorer and Edge browsers.  It is recommended users use Chrome, Firefox or Safari.

• Admin mode > Configurations
  • If using a mobile phone, use landscape mode
  • Recommended to use tablet or desktop browser
• My Details page
  • Custom HTML, both top and bottom appear at bottom of page
    • Keys
      • CommunityPortal|CustomHTML|MyDetails|Top
      • CommunityPortal|CustomHTML|MyDetails|Bottom
• Grid/Table implementation
  • The following grids/tables may not be responsive and may require the user to scroll the screen to see all detail
    • In most cases it is due to the size of the screen, e.g. when using a mobile phone

Recommendations

• Use Chrome, Firefox or Safari web browsers
• Student Results page
  • If displaying Markbook, check configuration key (CommunityPortal | Students | Results | Markbook | DisplayMode)
    • Best look is DisplayMode: 2
    • It is NOT recommended to have the following keys as TRUE due to display on phone/tables
      • CommunityPortal | Students | Results | Markbook | ShowMarkOutOfFlag
      • CommunityPortal | Students | Results | Markbook | ShowResultTypeFlag
        
      • CommunityPortal | Students | Results | Markbook | ShowWeightingFlag
        
• Events page

  • If pagination active, when attempting to select a button (right side of grid) in most cases the screen will select the next page

    • Recommendation to increase size of paging (CommunityPortal|Events|Paging|Size)
    • Error rendering macro 'jira' : Unable to locate Jira server for this macro. It may be due to Application Link configuration.

FAQ

Q: Why is there an initial display of the original Portal then the new Flex skin applied?

A: This is due to the Flex CSS being a skin on top of the original Community Portal.  It was implemented this way to provide clients with a responsive Portal in rapid time, without requiring a high degree of change to the original code.

Q: Why is this placed in the ..\Site\Flex folder and not in ..\Site\CSS folder to avoid the initial load of the non-flexible?

A: Due to some browsers code base not supporting this (for example Internet Explorer/Edge) detection of the browser is required.  If it was placed in the Site\CSS folder it would apply to all browsers.

Q: What testing was completed on this

A: Each page was tested against Functionality and Usability

• Functionality
  • Tested different config keys, especially those that affected the look and feel.  See General Questions & General Questions
• Usability

  • Device	Operating System
    Chrome	Windows
    Firefox	Windows
    IE	Windows
    Edge	Windows
    iPhone	iOS
    iPad	iOS
    Samsung Galaxy	Android
    Samsung Tablet	Android
    Safari	MacOS

Q: Is there an easy way to see how it would look on most devices

A: Many browsers can emulate the look and feel of multiple devices.  Below is one way to do this using the Chrome browser

• Please note: This is emulation and not true to how the actual device will operate
• Open the Chrome desktop browser 
• Access your Community Portal URL
• Press F12 to open the Developer Tools
  • You can change where this docked window appears by locating the three dots and selecting an appropriate 'Dock side'
  • 
  • Select the following Icon (Ctrl + Shift + M) to display the Device Toolbar
  • 
  • Using the drop down you can emulate many devices
  •