Using O365 template with Bootstrap

This page describes how to apply and use LiU's O365-layout in an application running outside of our instance of Office365, but where we want the same look and feel.

There are three alternatives on how to use this template.

1. You want to use the latest Bootstrap 3, jQuery and this template. You don't want to upgrade yourself.
2. You want Bootstrap 3, jQuery and this template. You want the control of when Bootstrap/jQuery/O365-template are upgraded yorself.
3. You just want the header and footer on your pages. If you use bootstrap or not doesn't matter but it's css and javascript files must still be loaded (might have effect of your layout). Described on another page.

Requirements

• Use Bootstrap 3 for styling/positioning (Note: You don't need to download it yourself, just use it, keep reading)

Alt 1 Applying stylesheets and scripts, for the "lazy"

If you dont care about bootstrap or jquery version, just want the latest stable anyway. Add this within the head-tag.

    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/latest.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/bootstrap.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/o365.js"></script>

Note: This loads relevant stylesheets and scripts for bootstrap to work. You don't need to load them yourself.

Note: The lastest.css-file must be loaded after other css-files you might load. Generally avoid having local css-files unless you have very special elements on your page. If you need style on something first check if it can be included in the central css-file.

Alt 2 Applying stylesheets and scripts, using specific version

• Apply jquery's js-file, local or central
• Apply the central bootstrap and bootstrap-theme css-files and the js-file.
• Apply the central extra css-file
• Avoid having local css-files unless you have very special elements on your page. If you need style on something first check if it can be included in the central css-file.

Example. (within the head-tag)

    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/bootstrap-3.1.1/css/bootstrap.min.css" type="text/css"/> 
    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/bootstrap-3.1.1/css/bootstrap-theme.min.css" type="text/css"/> 
    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/o365v2.css" type="text/css"/> 
    <script type="text/javascript" src="//www.liu.se/mallar/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/o365.js"></script>

Note: css-files must be loaded in order.

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

How to use bootstrap

Using bootstrap is a lot about writing normal html-code and then applying a definded set of classes to them. See bootstrap documentation.

Forms

Make horizonal forms

Submit/Cancel/etc-buttons, both at top and bottom fo form. Use the htmlcode (with bootstrap-classes) below to get right-aligned images with correct layout.

<div class="form-group">
  <div class="col-sm-12 text-right">
    <input type="submit" value="Save" class="btn btn-primary">
    <input type="button" value="Cancel" class="btn btn-default">
  </div>
</div>

If you want to make more advanced things you should learn the bootstrap grid system.

The buttons should be right aligned with the fields.

See form example and view source to see the source for some examples.

Expandable/Collapsible sets of fields (LiU's extension)

If there are many fields if the form and you want to group them you use <fieldset>-tags.

If you add a <legend> within the <fieldset> is it displayed as a "header"

Add the class liuCollapse to the <fieldset> in order to enable the user to toggle visibility by clicking on the legend.

Also add the class liuCollapsed to the <fieldset> to make the fieldset intially collapsed.

Examples

• Form example and view source to see the source.