Office Suite Documentation
Release 0.1
Kevin De Coninck
July 23, 2015
Contents
1
Getting Started
1.1 Writing for first Office Suite application .
1.2 Need Help? . . . . . . . . . . . . . . . .
1.3 Reporting Bugs / Suggest Improvements?
1.4 Building from Source . . . . . . . . . .
.
.
.
.
3
3
4
4
5
2
What’s New / Release Notes
2.1 Version 0.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
7
3
Components
3.1 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2 Core Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3 Standard Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
9
9
10
4
Theming
4.1 Built-in Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
15
5
Build Instructions
5.1 Setting up your environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2 Preparing the Office Suite Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
17
17
6
Contributor Guide
6.1 Making Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2 Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3 Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
19
19
20
7
Glossary
23
8
Getting Support
8.1 Community Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
25
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
i
ii
Office Suite Documentation, Release 0.1
Office Suite is an AngularJS library that contains a variety of HTML controls that aims to bring the classic desktop
experience to the web. This is achieved by wrapping each Office Suite’s functionality in an AngularJS directive.
Office Suite is an AngularJS library that contains a variety of HTML controls that aims to bring classic desktop
experience to the web. Those controls are build to mimic the look and feel of Microsoft controls.
The custom controls which comes with this library varies from very simple controls like Button elements to more
complex elements like Message Boxes, Modal Windows, Ribbon Elements, and more.
Contents
1
Office Suite Documentation, Release 0.1
2
Contents
CHAPTER 1
Getting Started
1.1 Writing for first Office Suite application
1.1.1 Download the Office Suite Library
It’s highly recommended that you use bower to install the Office Suite. The version(s) that you can download with
bower are all optimized for use in a production environment such as minified and concated files.
When you have bower installed on your machine, execute the following script to install the Office Suite:
bower install office-suite
If you want to save the package in your bower.json file (see the offical bower website for more information),
execute the following command:
bower install office-suite --save
1.1.2 Create the HTML
Creating an HTML file with the following contents:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1.1.3 Adding the resources
Assuming that you’ve installed the Office Suite Library with Bower in the default dictionary, there should be a folder
named bower_components in the root of your application. Inside this folder, there should be several packages
installed like AngularJS, jQuery and Office-Suite.
Adapt your HTML like this to include the required scripts and stylesheets:
3
Office Suite Documentation, Release 0.1
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="bower_components/office-suite/build/resources/styles/OfficeSuite.min.c
<script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="bower_components/office-suite/build/resources/scripts/OfficeSuite.min.js" type="text/j
</head>
<body>
</body>
</html>
1.1.4 Create the AngularJS application
Since the Office Suite Library is built on top of AngularJS, you should create an AngularJS application before you can
use the Office Suite Library. I won’t go in detail about creating an AngularJS application. More information can be
found on the official AngularJS website.
Add the follow piece of JavaScript to your website (this can be either in an external JavaScript file or inline, for
simplicity, I will create it inline.)
var officeSuiteExample = angular.module('OfficeSuiteExample', ['OfficeSuiteModule']);
What the code above does is creating an AngularJS application named OfficeSuiteExample with a reference to
the OfficeSuiteModule which is the core of the Office Suite Library.
Now that you’ve created an AngularJS application you need to make your HTML aware that you’ll be using AngularJS.
This can be done by adding the ng-app attribute on the html element in your website.
<html data-ng-app="OfficeSuiteExample">
1.1.5 Adding the requirements components
There’s one component which is required in the HTML in order to be able to use the Office Suite Library and that’s
the Office Manager.
<data-office-manager></data-office-manager>
You’re ready now with your first Office Suite application. This application doesn’t do anything or contain any components, but they can be easily added. See the components section for all available components.
1.2 Need Help?
• You can ask questions on StackOverflow.
• You can participate in the Office Suite Google Group.
1.3 Reporting Bugs / Suggest Improvements?
• You can report bugs or suggest improvements on the official Office Suite Github Page.
4
Chapter 1. Getting Started
Office Suite Documentation, Release 0.1
1.4 Building from Source
The source code along with the build tasks is available on Github. Instructions on how to build this project are available
at Build instructions. More information about the project is in the Contributor guide.
1.4. Building from Source
5
Office Suite Documentation, Release 0.1
6
Chapter 1. Getting Started
CHAPTER 2
What’s New / Release Notes
2.1 Version 0.1
• Core components
• Office Manager
• Built-in components
• Office Button
7
Office Suite Documentation, Release 0.1
8
Chapter 2. What’s New / Release Notes
CHAPTER 3
Components
The Office Suite makes a distinguishment between 2 types of components, namely the Core Components and the
Standard components. While the standard controls adds specific behaviour to the page, the core components are
required by the Office Suite, meaning that your application will refuse to work when you don’t embed the core
components onto your page.
3.1 Prerequisites
All components in the Office Suite module are defined in a module named OfficeSuiteModule, therefore, this
module should be referenced in your AngularJS application. If you’ve followed the Writing for first Office Suite
application you should have the following line already.
angular.module('OfficeSuite', ['OfficeSuiteModule']);
To ensure that the correct styles are used for all the controls, ensure that all the controls are embedded in an element
with id OfficeSuite.
<div id="OfficeSuite"></div>
3.2 Core Components
The table below fives an overview of all the core components.
Name
Office Manager
Description
Used to control general settings of the application.
3.2.1 Office Manager
The Ofice Manager component is responsible for injecting the proper stylesheets into your page so that all of your
controls are styles properly in the look and feel which is defined in this component.
Usage
The office-manager control is a simple HTML control that needs be injected in your HTML:
<data-office-manager></data-office-manager>
9
Office Suite Documentation, Release 0.1
Properties
The follow properties are exposed on the office-manager.
Attribute
Name
style
api
Usage
datastyle
data-api
Required
Yes
No
Description
Used to define the style in which your Office Suite application will be
rendered.
Used to control this control dynamically.
The style attribute must contain one of the following features: Blue, Green, LightBlue, Orange, Purple, Red
or Turquoise.
See Theming for more information about theming.
Api
The following properties and methods are exposed on the api:
Api call
setStyle(styleName)
Type
Method
Description
Changes the style of the application to the style passed in the parameter.
Api usage
In order to use the api which is exposed on this button, you first need to define your api object onto the $scope of
your controller.
$scope.myApi = {};
When the page is loaded, this object now automtically has all the api calls, thus you can call
$scope.myApi.apiMethod();
3.3 Standard Components
Name
Office Button
Office Message Box
Description
Represents a normal button.
Represents a message box.
3.3.1 Office Button
The Office Button component is a component which represents a simple button element that respond to various actions.
Prerequisites
This component in an AngularJS directve, embedded in it’s own module, which means that in needs to be registered
in your application. In the definition of your AngularJS application, add a reference to the OfficeSuiteModule.
10
Chapter 3. Components
Office Suite Documentation, Release 0.1
angular.module('OfficeSuite', ['OfficeSuiteModule']);
Usage
The office-button control is a simple HTML control that needs be injected in your HTML:
<data-office-button></data-office-button>
Properties
The follow properties are exposed on the office-button.
Attribute
Name
isDisabled
label
api
Usage
data-isdisabled
data-label
data-api
Required
No
No
No
Description
Used to define the style in which your Office Suite application will
be rendered.
Used to define the text on the button.
Used to control this control dynamically.
Api
The following properties and methods are exposed on the api:
Api call
changeLabel(label)
enable
disable
onClick
Type
Method
Method
Method
Event
Description
Changes the label on the button.
Enables the button.
Disables the button
Fired when the button has been clicked.
Event Signatures
• The onClick event is fired and when it contains a function() and the button is enabled.
Api usage
In order to use the api which is exposed on this button, you first need to define your api object onto the $scope of
your controller.
$scope.myApi = {};
When the page is loaded, this object now automtically has all the api calls, thus you can call
$scope.myApi.apiMethod();
3.3.2 Office Message Box
The Office Message Box component is a simple component to sent notifications to the user.
3.3. Standard Components
11
Office Suite Documentation, Release 0.1
components/standard/messagebox.png
There are 4 different types of message boxes than can be used, Error, Warning, Question and Information,
each defined by it’s own unique icons.
Type
Usage
messageBoxStyle.Error
messageBoxStyle.Warning
messageBoxStyle.Question
messageBoxStyle.Information
There are also various button styles that can be used on the message box.
Buttons
Ok button
Ok and Cancel button
Yes and No button.
Yes, No and Cancel button.
Usage
messageBoxStyle.Error
messageBoxStyle.Warning
messageBoxStyle.Question
messageBoxStyle.Information
Prerequisites
This component in an AngularJS directve, embedded in it’s own module, which means that in needs to be registered
in your application. In the definition of your AngularJS application, add a reference to the OfficeSuiteModule.
angular.module('OfficeSuite', ['OfficeSuiteModule']);
Usage
The office-message-box control is a simple HTML control that needs be injected in your HTML:
<data-office-message-box></data-office-message-box>
As an alternative, you can also use a service to use this control. See the section Implementing it as a service for
more information.
Properties
The follow properties are exposed on the office-message-box.
12
Chapter 3. Components
Office Suite Documentation, Release 0.1
Attribute
Name
Title
Message
MessageBoxStyle
Usage
data-title
datamessage
datamessagebox-style
ReDescription
quired
No
Defines the title of the message box.
No
Defines the message of the message box.
Yes
MessageBoxButtons
datamessagebox-button
Yes
api
data-api
No
Defines the style of the message box. Should be either
messageBoxStyle.Error, messageBoxStyle.Warning,
messageBoxStyle.Information or
messageBoxStyle.Question
Defines the buttons of the message box. Should be either
messageBoxButtons.Ok, messageBoxButtons.OkCancel,
messageBoxButtons.YesNo or
messageBoxButtons.YesNoCancel
Used to control this control dynamically.
Api
The following properties and methods are exposed on the api:
Api call
onOkClicked
onCancelClicked
onYesClicked
onNoClicked
Type
Event
Event
Event
Event
Description
Fired when the button has been clicked.
Fired when the cancel button has been clicked.
Fired when the yes button has been clicked.
Fired when the no button has been clicked.
Event Signatures
• The onOkClicked, onCancelClicked, onYesClicked and onNoClicked events are only fired when
it contains a function().
Api usage
In order to use the api which is exposed on this message box, you first need to define your api object onto the $scope
of your controller.
$scope.myApi = {};
When the page is loaded, this object now automtically has all the api calls, thus you can call
$scope.myApi.apiMethod();
Implementing it as a service
A service is also exposed to ensure that a message box can be rendered on the fly, or as an action to a button click, for
example:
var officeSuiteExample = angular.module('OfficeSuiteExample', ['OfficeSuiteModule']);
officeSuiteExample.controller('demoController', ['$scope', 'officeMessageBoxService', function($scope
officeMessageBoxService.CreateWithButtons($scope, 'Office Suite 2015', 'This is a way to noti
onYesClick: function() { console.log('The yes button has been clicked.'); },
onNoClick: function() { console.log('The no button has been clicked.'); },
3.3. Standard Components
13
Office Suite Documentation, Release 0.1
onCancelClick: function() { console.log('The cancel button has been clicked.'); }
});
}]);
14
Chapter 3. Components
CHAPTER 4
Theming
The theming inside the Office Suite is handled by the Office Manager component.
4.1 Built-in Styles
The Office Suite Library is built with focus on recreating the controls that Microft uses in their Desktop applications. Therefore, there are a variety of styles available, each representing a color scheme which is tied to a Microsoft
Application.
Theme name
Blue
Green
LightBlue
Orange
Purple
Red
Turquoise
Description
Based on Microsoft Office Word.
Based on Microsoft Office Excel.
Based on Microsoft Office Outlook.
Based on Microsoft Office Powerpoint.
Based on Microsoft Office InfoPath.
Based on Microsoft Office Red.
Based on Microsoft Office Publisher.
15
Office Suite Documentation, Release 0.1
16
Chapter 4. Theming
CHAPTER 5
Build Instructions
5.1 Setting up your environment
Your environment needs to have a very specific setup in case you want to build the project from it’s source. There are
quite some dependencies which needs to be installed.
5.1.1 Installing Bower
Since Office Suite is distributed as a bower component, and all of the dependencies which are required are installed
through Bower, you need to install it. There are however a couple of requirements that must be met before prior to
install bower.
• Install Node and npm Installation Instructions.
• Install Git.
After those 2 requirements are met, you should be able to install bower by running the following command in your
terminal:
npm install -g bower
With bower installed, you almost have everything you need to compile the Office Suite from source. The Office Suite
also uses grunt to perform tasks to optimize the files and creating a release version. To be able to execute those tasks,
performs the following tasks:
• Install Ruby (Windows version).
When ruby is installed, you need to install sass, this can be done by running the following command in a terminal:
gem install sass
5.2 Preparing the Office Suite Project
When you download the source of Office Suite from Github, you may notice that it does not contain any external
libraries like jQuery, AngularJS, ... This is done to keep the repository as light as possible.
It’s for this reason that you need to have bower and npm installed, because both bower and npm will download the
dependent packages from their official source.
Navigate to the root of the Office Suite folder and execute the following commands in the terminal.
17
Office Suite Documentation, Release 0.1
bower install
npm install
After you’ve done this, you’ll notice 2 extra folders in the root of your application namely node_modules and
bower_components. This indicates that the installation of the extra components was successfull.
18
Chapter 5. Build Instructions
CHAPTER 6
Contributor Guide
Contributions to Office Suite, wether new features or bug fixes, are deeply appreciated and benefit the whole user
community.
The following guidelines help ensure the smooth running of the project, and keep a consistent standard across the
codebase. They are guidelines only - should you feel a need to deviate from them it is probably a good reason, but
please adhere to them as closely as possible. The Office Suite team has the right to not include your contributions if
those guidelines are not followed closely enough.
6.1 Making Contributions
If you’d like to contribute code or documentation to Office Suite, we welcome pull requests and patches. Questions
and suggestions are welcome on the newsgroup.
Your contributions must be your own work and licensed under the same terms as Office Suite.
6.2 Process
6.2.1 Suggest a feature
If you have an idea for an Office Suite feature, the first place to suggest it it on the discussion forum.
Providing code, either via your blog of another distribution outlok, it a great way to get feedback and support from the
broader Office Suite community. Consider this if it is a possibility, even if it requires core changes.
If your suggestion applies to a broad range of users and scnearios, it will be onsidered for inclusion in the core
Office Suite. It it likely however that if your suggested feature is experimental, we’ll first seek to add it added to the
OfficeSuite.Extra (see below).
6.2.2 Fix a defect
If you have an issue you’d like fixed, you may also contribute those fixes. Make sure the issue gets filed in the Issue
Tracker so it can be considered.
19
Office Suite Documentation, Release 0.1
6.2.3 Git vs. Patches
Regardless of wether your contribution is accepted for the core of the Extra’s, the preferred means of integration the
code is via Git rather than a patch. Github offers the ability to create a public ‘fork‘ of the Office Suite repository in
which you can commit changes to later be pulled into the main Office Suite repository.
6.2.4 Announcement
Feel free to announce your changes (once they’re built/working/checked in) on the Office Suite disucssio forum.
Include a link to the wiki page and/or blog post(s) if these apply.
6.2.5 License
By contributing to Office Suite, you assert that:
• The contribution is your own and original work.
• You have the right to assignt the copyright for the work (it is not owned by your employer, or you have been
given copyright assignment in writing).
• You license it under the terms applied to the rest of the Office Suite project.
6.3 Coding
6.3.1 Developer Environment
There are Build Instructions in this documentation that explains the expected developer environment and how to build
the project.
If your contribution somehow changes the required environment, this document needs to be updated.
6.3.2 Unit Tests
All contributions to Office Suite should be accompied by unit tests (Jasmine) demonstrating the impact of the change.
100% code coverage for code changes is encouraged but not mandatory.
6.3.3 Code Review
All check-ins to the Office Suitecode repository are subject to reiew by a project member. Please consider it a compliment that the other developers here will spend time reading your code. Code review is a great way to share knowledge
of Office Suite’s internals works, and to weed out possible issues before they get into a binary.
6.3.4 Documentation
It is strongly encouraged that you update the Office Suite’s documentation when making changes. If you changes
impact existing features, the documentation must be upaded via a pull request also. When your change get’s applied,
a new build is created along with your updated documentation.
For new features, consider adding an end-to-end example. This will help users get up to speed and correctly use your
feature. There isn’t much point contributing code that no one knows how to use.
20
Chapter 6. Contributor Guide
Office Suite Documentation, Release 0.1
The Golden Rule of Documentation: Write the documentation you’d wan’t to read. Every developer has seen
self explanatory docs and wondered whe there wasn’t more information. Please write the documentation you’d want
to read if oyu were a developer first trying to understand how to make use of a feature.
6.3.5 The OfficeSuite.Extra project
OfficeSuite.Extra is a companion distribution alongside the main Office Suite distrubution. The extras are distinguished by:
• Experimental features.
• Integrations with other Open Source projects.
• Alternatives to the ‘typical’ way of doing something in the code (e.g. a different configuration syntax).
In many cases, OfficeSuite.Extra is a way of testing alternatives and getting visibility for new ideas that could eventually end up in the core.
If your contribution is accepted to OfficeSuite.Extra, it is unlikely that the rest of the project team will have the
knowledge to maintain it, so please expect to have bug reports assigned to you for the area.
6.3. Coding
21
Office Suite Documentation, Release 0.1
22
Chapter 6. Contributor Guide
CHAPTER 7
Glossary
The goal of this page is to help kep documentatin, discussions, and APIs consistent.
Term
Directive
Meaning
A custom HTML that when added to the html, provides the page with extra functionality.
Wild deviations from these terms in the API of code should be fixed or raised as issues to fix in a future version.
23
Office Suite Documentation, Release 0.1
24
Chapter 7. Glossary
CHAPTER 8
Getting Support
8.1 Community Support
Office Suite has a community that can help you out if you have questions. If you can’t find your answer in the
documentation, you can...
• Ask your question on StackOverflow. Be sure to the the officesuite tag in your question.
• Start a discussion on the forum. This is a good idea if you have multiple questions or a question that might have
a more subjective answer (e.g. “Recommendations” sorts or things.)
25
© Copyright 2026 Paperzz