Alt 3 Applying only header and footer

Load stylesheet/script

Include this code in the head-tag

    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/headonly.css" type="text/css"/> 
    <script type="text/javascript" src="//www.liu.se/mallar/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/o365.js"></script>

Note: jQuery is needed but if you already have loaded it, don't load it again.

Apply head/foot

The top (blue) field of a page is the SuiteBar. It contains links to some common applications, logout, help etc

LiU also have a bottom field with that same look and feel whith links to responsible etc

Call javascript-method somewhere when the document is loaded. (It adds html in the DOM in the start and end)

  liuSuite11(language, username, actualName, applicationName, parameters);

language shall be lowercase 2-letter language code ("sv" or "en"), or start with one (i.e "sv-SE" or "en-US" is ok too)
username and actualName is the currently logged in user's.
applicationName is displayed in the upper left corner, next to the logo/icon
parameters a set of zero or more of optional named parameters described below

Optional named parameters

image - src-url to the image, if you want to display another one instead of the liu-sign
applicationUrl - link to the "start" of this application, defaults to startpage in LISAM
settings - a list of links or separators displayed under the settings gear. Each link must have a text and url. A separator have a type wit the value separator. (Se example below)
helpUrl - link to page containing help for your application
langUrl - link to this page in the other language of English or Swedish (no other languages are supported)
bottomText - text or html displayed in the bottom line (example: version number)
contactEmail - email adress to the one answering questions about the page

Deprecated parameters:

settingsUrl - link to page containing settings for your application. Was replaced by settings in version 11

Developer parameters:

appStatus - status of the application environment: dev, test, edu, prod (defaults to empty, equals to prod). Visual feedback to the developter/tester

Recommendation: Specify at least contactEmail

Examples:

  liuSuite11("en", "tesus123", "Test User", "My Application", {'contactEmail': 'helpdesk@it.liu.se'});

  liuSuite11("sv", "anous99", "Erik Melkersson", "Another Applikation", {'image':'http://myapplication.liu.se/icon.png', 'settings': [{'text':'One link', 'url':'//www.liu.se/'},{'type':'separator'},{'text':'Another link','url':'anotherpage'}], 'contactEmail': 'techweb@it.liu.se', 'helpUrl': 'http://myapplication.liu.se/help'});

The call may for example be made within a block like this:

  <script type="text/javascript">
    $(document).ready(function() {
      ...
    });
  </script>

Release notes

The last digits of the method is a version. You should try out and upgrade to the most recent version.

10 - First version

11 - Changed to using the bootstrap dropdown feature for the dropdowns in the menu. Support multiple menuitems in the settings menu (the gear).

Added optional named parameter applicationUrl