Infor Mashup SDK

Developers Guide

Mashup SDK
Copyright © 2016 Infor

Important Notices
The material contained in this publication (including any supplementary information) constitutes and
contains confidential and proprietary information of Infor.
By gaining access to the attached, you acknowledge and agree that the material (including any
modification, translation or adaptation of the material) and all copyright, trade secrets and all other
right, title and interest therein, are the sole property of Infor and that you shall not gain right, title or
interest in the material (including any modification, translation or adaptation of the material) by virtue
of your review thereof other than the non-exclusive right to use the material solely in connection with
and the furtherance of your license and use of software made available to your company from Infor
pursuant to a separate agreement, the terms of which separate agreement shall govern your use of
this material and all supplemental related materials ("Purpose").
In addition, by accessing the enclosed material, you acknowledge and agree that you are required to
maintain such material in strict confidence and that your use of such material is limited to the
Purpose described above. Although Infor has taken due care to ensure that the material included in
this publication is accurate and complete, Infor cannot warrant that the information contained in this
publication is complete, does not contain typographical or other errors, or will meet your specific
requirements. As such, Infor does not assume and hereby disclaims all liability, consequential or
otherwise, for any loss or damage to any person or entity which is caused by or relates to errors or
omissions in this publication (including any supplementary information), whether such errors or
omissions result from negligence, accident or any other cause.
Without limitation, U.S. export control laws and other applicable export and import laws govern your
use of this material and you will neither export or re-export, directly or indirectly, this material nor any
related materials or supplemental information in violation of such laws, or use such materials for any
purpose prohibited by such laws.
Trademark Acknowledgements
The word and design marks set forth herein are trademarks and/or registered trademarks of Infor
and/or related affiliates and subsidiaries. All rights reserved. All other company, product, trade or
service names referenced may be registered trademarks or trademarks of their respective owners.
Publication Information
Release: Infor Program Cost Ledger
Publication date: August 26, 2016
Document code:
 Contents

Contents

About this guide ................................................................................................................................... 7

Version log ....................................................................................................................................... 7
Organization..................................................................................................................................... 7
Contacting Infor................................................................................................................................ 7

Chapter 1 Introduction .................................................................................................................... 9

Purpose ..................................................................................................................................... 9
Disclaimer ........................................................................................................................................ 9
Who Should Read This Document ............................................................................................ 9

Chapter 2 Overview ....................................................................................................................... 10

Technologies.................................................................................................................................. 10
TypeScript................................................................................................................................ 10
AngularJS ................................................................................................................................ 11
UI Bootstrap ............................................................................................................................. 11
Requirements .......................................................................................................................... 11

Chapter 3 Development environment .......................................................................................... 12

Prerequisites .................................................................................................................................. 12
NodeJS .................................................................................................................................... 12
Install NodeJS ................................................................................................................... 12
Verify the Node package manager ................................................................................... 12
Verify the Node executable ............................................................................................... 13
Developer tools ........................................................................................................................ 13
Visual Studio ..................................................................................................................... 14
Other tools ......................................................................................................................... 14
Node.js TypeScript compiler ....................................................................................... 14
Mashup SDK content ..................................................................................................................... 14
Additional ................................................................................................................................. 15
Documentation ........................................................................................................................ 15

Infor Smart Office Developers Guide | 3

Contents

API ..................................................................................................................................... 15
OpenSourceLicenses .............................................................................................................. 15
Samples ................................................................................................................................... 15
NodeJS .............................................................................................................................. 16
Projects.............................................................................................................................. 16
Web ................................................................................................................................... 16
Source ............................................................................................................................... 16
External framework versions....................................................................................... 16
Proxy .............................................................................................................................................. 16
Using a proxy with Chrome ..................................................................................................... 17
Samples ......................................................................................................................................... 17
Web server .............................................................................................................................. 18
Installing the web server ................................................................................................... 18
Starting the web server ..................................................................................................... 18
Stopping the web server ................................................................................................... 18
Proxy ........................................................................................................................................ 18
Configuring the proxy ........................................................................................................ 18
Starting the proxy .............................................................................................................. 19
Stopping the proxy ............................................................................................................ 19
Configuring multiple proxies .............................................................................................. 19
Testing the sample applications .............................................................................................. 20
Sample projects ............................................................................................................................. 20
Common .................................................................................................................................. 20
Applications ............................................................................................................................. 20
M3 ............................................................................................................................................ 20
Visual Studio project files .................................................................................................. 21

Chapter 4 Creating a project......................................................................................................... 22

Visual Studio .................................................................................................................................. 22
Create and configure the project ............................................................................................. 22
Create the application.............................................................................................................. 23
TypeScript example code.................................................................................................. 25
HTML Example code ......................................................................................................... 25
Debug the application .............................................................................................................. 26
Troubleshooting................................................................................................................. 27
Could not create output directory................................................................................ 27
There is no option to create a TypeScript project or a TypeScript file ....................... 27
Eclipse............................................................................................................................................ 27

4 | Infor Smart Office Developers Guide

 Contents

Create and configure the project ............................................................................................. 27

Chapter 5 Deploying an application............................................................................................. 35

Common application deployment .................................................................................................. 35
M3 application deployment ............................................................................................................ 35

Chapter 6 Common framework .................................................................................................... 37

Startup............................................................................................................................................ 37
Framework ready state ............................................................................................................ 37
Manually setting the ready state ....................................................................................... 37
Application base class ............................................................................................................. 38
Startup service ......................................................................................................................... 38
Client logging ................................................................................................................................. 38
Components and events ................................................................................................................ 39
Component service.................................................................................................................. 39
Component context ................................................................................................................. 39
Visual state .............................................................................................................................. 40
Layout ............................................................................................................................................ 40
Translation ..................................................................................................................................... 40
Setting language in your application ....................................................................................... 41
How to get language constants from M3 using M3 Batch Translator ..................................... 41
How to translate an application ............................................................................................... 42

Chapter 7 M3 framework ............................................................................................................... 43

Startup............................................................................................................................................ 43
Application base class ................................................................................................................... 43
MI programs ................................................................................................................................... 44
MI Service ................................................................................................................................ 44
MI controller base classes ....................................................................................................... 44
Interactive programs ...................................................................................................................... 44
Interactive session ................................................................................................................... 44
Stateless detail panels............................................................................................................. 45
Stateful list panels ................................................................................................................... 45

Chapter 8 Mashup integration ...................................................................................................... 47

Web Mashup control integration .................................................................................................... 47
Web Mashup integration with event proxy .................................................................................... 47

Infor Smart Office Developers Guide | 5

Contents

Web Mashup Setup ................................................................................................................. 47

Mashup SDK Setup ................................................................................................................. 48

Chapter 9 Additional Tools ........................................................................................................... 49

Chapter 10 Resources ..................................................................................................................... 51

6 | Infor Smart Office Developers Guide

About this guide

Version log
The version log describes the changes between versions of this document.

Version Date Changes

1.0 First version of the document.

Organization
This table shows the chapters of the guide:

Section Description

Contacting Infor
If you have questions about Infor products, go to the Infor Xtreme Support portal at
www.infor.com/inforxtreme.
If we update this document after the product release, we will post the new version on this Web site.
We recommend that you check this Web site periodically for updated documentation.
If you have comments about Infor documentation, contact documentation@infor.com.

Infor Smart Office Developers Guide | 7

 Chapter 1 Introduction
1

Purpose
The purpose of this document is to describe how to set up a development environment and build
web applications using the Mashup SDK.
The purpose of this document is not to describe how to develop web applications in general; instead
it contains information about specific APIs for the Mashup SDK that you can use in your applications.

Disclaimer
Please note that only classes and functions documented in the Mashup SDK API Documentation are
publically available for you to use. Anything that is not documented or explicitly marked with
“internal” in the API documentation should not be used. Classes and functions that are not intended
for public use may be removed or changed in future versions without notice.

Who Should Read This Document

Roles for which this document is primarily intended:

Role Skills

Web application developer JavaScript, TypeScript, AngularJS, Bootstrap

Infor Smart Office Developers Guide | 9

Overview

Chapter 2 Overview
2

The Mashup SDK is used to build web applications with a focus on M3 related products. The SDK is
based on open web technologies such as AngularJS, TypeScript and Bootstrap. Existing M3
functionality can be reused through MI programs or panels from interactive M3 programs. The SDK
is targeted at experienced web developers familiar with HTML 5, CSS and scripting.
The UI uses standard controls in HTML5 and additional controls from the Angular UI implementation
of Bootstrap. The SDK and the examples are built in TypeScript that compiles to standard
JavaScript.

Technologies
The intention of the Mashup SDK is not to create a large framework that tries to solve everything but
rather to reuse existing open source frameworks and add only functionality that is missing or that is
specific to Infor applications such as M3.
The main technologies we have chosen to use for the Mashup SDK are TypeScript, AngularJS and
the Angular UI implementation of Bootstrap.

TypeScript
This is the pitch for TypeScript from http://www.typescriptlang.org/
- TypeScript lets you write JavaScript the way you really want to.
- TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- Any browser. Any host. Any OS. Open Source.
It is our experience that TypeScript gives real benefits for web development. You are more
productive and produce less bugs. The code is also easier to maintain and it is possible to use
refactoring.
If you really don’t want to use TypeScript you don’t have to since the framework is compiled to plain
JavaScript. Note that all our documentation and samples are for TypeScript so you probably need to
be able to read and understand TypeScript code and how it translates to plain JavaScript.

10 | Infor Smart Office Developers Guide

 Overview

AngularJS
AngularJS is an extensible framework for building large web applications. It is open-source and
maintained by Google and the community.
https://angularjs.org

UI Bootstrap
UI Bootstrap is a native AngularJS implementation of Bootstrap. Bootstrap is a framework for
developing responsive, mobile first web applications.
http://angular-ui.github.io/bootstrap

Requirements
 Visual Studio 2013 (Express 2013 for Web or better) or Eclipse
 User account with access to an M3 environment (when using the M3 framework).

Infor Smart Office Developers Guide | 11

Development environment

Chapter 3 Development
environment 3

This chapter describes how to setup the Mashup SDK development environment.

Prerequisites
This section describes the prerequisites for the Mashup SDK. Some of these prerequisites are
optional so you should read this section and determine which prerequisites you really need before
installing them.

NodeJS
A NodeJS installation is required if you want to use the proxy and web server that are part of the
Mashup SDK. The proxy is used to get around cross domain calls during development. The web
server is used for running the samples but can also be used for development. If you already have a
working NodeJS installation or if you don’t intend to use the proxy or the web server you can skip
this section.

Install NodeJS
Download and install NodeJS from http://nodejs.org/
When the installation is complete you can follow the steps in the next two sections to verify that
installations works. Note that these instructions only applies to Windows clients.

Verify the Node package manager

Follow these steps to verify that the Node package manager works.
 Verify that the following folder exists and create it manually if not.
o C:\Users\<userid>\AppData\Roaming\npm
o You need to show Hidden items in Windows Explorer to be able to see the AppData
folder.

12 | Infor Smart Office Developers Guide

 Development environment

 Open a Windows Command Prompt window.

 Run the following command
o npm -version
 Verify that a version number is printed, such as 1.4.21
o If the command fails verify that the npm directory has been created, see previous
step, and create it if necessary.
o When the directory has been created retry the "npm -version" command.
o On some operating systems the command might complete even if the npm folder is
missing. In these cases the installation of the node packages will fail. This can be
solved by manually creating the npm folder.
o On some operating systems you might have to restart the computer after adding the
npm folder.

Verify the Node executable

Follow these steps to verify that Node executable works.
 Open a Windows Command Prompt window.
 Run the following command
o node -v
 Verify that a version number is printed, such as v0.10.30
o If the command fails it could be that the node directory is not on the Windows path.
o Add the following directory to the Windows System Path
 C:\Program Files\nodejs
o Close the command Window, start a new one and test node -v again
 The command should succeed this time.
o To apply the new Windows path the computer might have to be restarted.

Developer tools
You will need some kind of developer tool and if you are using Windows we would recommend
Visual Studio. If you are using another operating system we would recommend Eclipse. These are
just recommendations however and there are other tools that you could use instead.

Infor Smart Office Developers Guide | 13

Development environment

Visual Studio
Microsofts Visual Studio has support for web projects and has a built-in development web server.
Visual Studio 2013 Update 3 and later has support for TypeScript editing, compiling and debugging.
If you have Visual Studio 2012 you can install a TypeScript editor plugin. You will find in on
http://www.typescriptlang.org under Tools.
The sample projects in the Mashup SDK are in Visual Studio format. The contents of the sample
projects can of course be used with other developer tools but that requires some manual setup.

Other tools
In addition to Visual Studio and Eclipse you can use any other tool you might prefer. You could even
use a text Editor such as Notepad++ and the TypeScript Node.js compiler.

Node.js TypeScript compiler

The TypeScript compiler can be installed as a Node.js package.
npm install -g typescript
When the compiler is installed you can compile using the command line or a command file.
tsc helloworld.ts

More information can be found at http://www.typescriptlang.org/

Mashup SDK content

When the Mashup SDK zip file is unzipped you get the following folder structure.
- InforMashupSDK
o Additional
o Documentation
 API
o OpenSourceLicenses
o Samples
 NodeJS
 Projects
 Applications
 Common

14 | Infor Smart Office Developers Guide

 Development environment

 M3
 Web
o Source
 fonts
 odin

This section will give you an overview of the contents of each folder.

Additional
The Additional folder contains additional files that are bundled with the Mashup SDK. The folder
currently only contains one file, the SDK for Mashup Everywhere which is used to implement Web
Mashup controls.

Documentation
The documentation folder contains the Developers Guide in PDF format. This is the document you
are now reading.

API
The API folder contains API documentation generated from the framework TypeScript files. Open
the index.html file in a browser to view the API documentation.

OpenSourceLicenses
License text files for the frameworks used.

Samples
The Samples folder contains samples projects and pre-built sample applications. There is also a set
of command files that can be used to install the NodeJS web server, start the web server, start the
proxy etc. More information about how to test the samples can be found in the Samples and Sample
project sections further down in the document.

Infor Smart Office Developers Guide | 15

Development environment

NodeJS
The NodeJS folder contains the JavaScript source files for the proxy and the web server.

Projects
The Projects folder contains Visual Studio projects for the sample applications. The Common folder
contains samples for the common framework. The M3 folder contains samples for the M3
framework. The Application folder contains small applications samples that use functionality from
both the common and M3 framework.

Web
The Web folder contains pre-built versions of the sample applications and some tools.

Source
The source directory contains the Mashup SDK framework files and external framework files.

External framework versions

The versions of the external framework files are documented in the Source\odin\versions.txt file. If
you need newer version of an external framework you can use the newer versions in many cases
unless there are breaking changes in the new versions.

Angular UI grid
The grid component used by some of the controllers and services in the Mashup SDK is the Angular
UI Grid. This is the successor of the Angular ngGrid. The Mashup SDK contains the v 3.1.0 build of
that component. If you have any issues related to the grid please try and update the UI grid
component to see if that helps. It is also possible that their API will change in the future which might
affect the Mashup SDK.
New versions of the UI Grid can be downloaded from http://ui-grid.info/

Proxy
The Mashup SDK contains basic proxy that runs on NodeJS. The proxy can be used during
development to get around the cross domain request restrictions in browsers. The proxy can be
configured to tunnel traffic from a port on localhost to web server on a remote machine. When
developing the browser loads your application from localhost and therefore it will allow calls to the

16 | Infor Smart Office Developers Guide

 Development environment

proxy that also runs on localhost. The benefit of this is that you don’t have to deploy your application
code to the remote web server during development.
If you use services from an application that has enabled Cross-origin resource sharing (CORS) you
don’t have to use a proxy.

Using a proxy with Chrome

Internet Explorer allows calls to different ports on localhost but Chrome has restrictions for this. To
use the proxy with Chrome you can use the disable-web-security flag. When this flag is used you
could also make cross domain calls directly without the proxy but then you would have to configure
absolute URLs to the remote services. The idea with the proxy is that the application will be
deployed on same server as the services so that relative URLs can be used.
Example of a command file for starting Chrome:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security"
http://localhost:8080/index.html

You can also use a Windows desktop shortcut with the following text in the target field to start an
instance of Chrome without web security:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

When running Chrome without web security you should see a warning similar to the one in the
screenshot below. If you don’t see this message you might have to close all running instances of
chrome.exe. If you closed all Chrome windows there might still be an instance running in the
Windows task bar tray. You can verify that no instances of chrome.exe is running using the Windows
Task Manager. You can also uncheck the “Let Google Chrome run in the background” setting on the
Chrome icon in the Windows task bar tray.

Samples
The sample applications can be tested without any developer tool by using the web server and proxy
that are part of the Mashup SDK. The web server is required for all samples but the proxy is only

Infor Smart Office Developers Guide | 17

Development environment

required for samples that use M3 data. Follow the steps below configure and test the sample
applications.

Web server
To test the samples you need to have a web server installed and started.

Installing the web server

The web server requires some NodeJS prerequisites to be installed. Double-click on the
InstallWebServer.cmd command file and wait for it to complete. If the command file fails verify that
you have a working NodeJS installation.

Starting the web server

The web server can be started by double-clicking on the StartWebServer.cmd command file. If the
command fails verify that you have a working NodeJS installation and that the web server
prerequisites are installed, see previous section.
When the web server has started the following text should be displayed in the command window:
Starting web server at localhost:8080 for directory "../Web"

Stopping the web server

To stop the web server just close the command window using the window close button.

Proxy
To test the M3 samples you need to have a proxy configured and started for an existing M3 BE
installation.

Configuring the proxy

Before configuring the proxy you need to find the host name of the Grid where M3 BE is installed
and the HTTPS port number. Follow the instructions below to configure the npm script command
that is used to start the proxy.

- Open the package.json file, located in the Nodejs folder, in a text editor.

18 | Infor Smart Office Developers Guide

 Development environment

- Change the hostname and the last port number of the script command property named
“proxy” according to your environment.
o Use the same hostname that is used for the certificate on the server.
o Use the HTTPS port number from the Grid.
o Leave the first port number the same (8081) since this should always be the same.
o Example:
 “proxy”: “node proxy.js 8081 server.infor.com 40004”
- Save the file.

All sample applications use port 8081. If you can’t use port 8081 for some reason you must update
the sample applications that use the proxy with the new port number.

Starting the proxy

Once you configured the package.json file you can start the proxy by double-clicking on the
command file StartM3Proxy.cmd.

Stopping the proxy

To stop the proxy just close the command window using the window close button.

Configuring multiple proxies

You can configure multiple proxies in the package.json file if you intend to use or test against more
than one Grid instance. This done by adding a new script command property with a unique name.
Copy and paste the “proxy” property and change the values as described above to match the new
environment – and don’t forget to rename the property. You can also duplicate the
StartM3Proxy.cmd file and rename the new file, for convenient startup of the new proxy. Open the
duplication in a text editor and change the run script to use the new property you added. Start the
proxy by double-clicking on the new command file.
Example:
 package.json
o “proxy-other”: “node proxy.js 8081 server-other.infor.com 40004”
 StartM3ProxyOther.cmd
o npm run proxy-other

Infor Smart Office Developers Guide | 19

Development environment

Testing the sample applications

Once you have configured and started the web server and the optional proxy you can test the
Mashup SDK sample applications in a browser. The URL to sample applications can be seen below.
http://localhost:8080/index.html
You can also use the command file OpenSamples.cmd to open the default browser with the URL
above.
If you want to use Chrome and test samples that requires the proxy use the command file
OpenSamplesChrome.cmd. Note that this command file disables web security in Chrome so only
use that browser instance for the samples.

Sample projects
The Projects folder contains the projects and source code for the sample applications.

Common
Contains sample projects using functionality in the common framework. The HelloWorld project
shows a minimal web application. The Framework projects shows how to use services and directives
from the common framework. The OdinStyle project show how to use the parts of the common
framework related to style and layout.

Applications
Contains a couple of small M3 application projects using the customer entity in M3.

M3
Contains a sample project with M3 specific functionality.

20 | Infor Smart Office Developers Guide

 Development environment

Visual Studio project files

The project files for the samples uses some MSBuild tricks to avoid having to duplicate the
framework files for each sample project. The project files automatically link and copy files from the
Web directory. This means that the sample project will only work if they are located at the same level
relative to the Web directory. If you copy a sample project to a different location it will no longer work
unless you also copy the Web directory and keep it at the same relative level.
We would recommend that you create new projects instead of copying the sample projects. How to
do this is described in a following chapter.

Most sample projects include multiple samples in different folders. Most samples does not have a
default index.html file which means that you must select which sample to run by opening the context
menu on the index.html and select “Set As StartPage”. You can also choose to have the
CurrentPage as start page which means that you have to open a specific index.html before pressing
F5 to debug the solution.

Infor Smart Office Developers Guide | 21

Creating a project

Chapter 4 Creating a project

4

This chapter describes how to create a Mashup SDK project using either Visual Studio or Eclipse.

Visual Studio
This section describes how to create a very simple project from scratch, how to create an application
and how to debug it. The example project is similar to the HelloWorld sample application in the
Samples folder.

Create and configure the project

- Open the New Project dialog
o File > New Project or Ctrl+Shift+N
- Search for typescript in the search box.
- Select the “HTML Application with TypeScript” project template.
o If you don’t have the template make sure that you are using Visual Studio 2013 with
update 3 or Visual Studio 2013 with the extra TypeScript editor plugin installed
- Give the project a name and browse to the location where you want to create the project.
- Uncheck “Create directory for solution” unless you want an additional directory for the
solution.
- Click OK to create the project.

22 | Infor Smart Office Developers Guide

 Creating a project

- Open the Mashup SDK Source folder.

o \InforMashupSDK\Source
- Copy the fonts and odin folders.
- Paste the folders in the Visual Studio project folder.
o Ex: C:\Projects\HelloWorld
o If you selected “Create directory for solution” the project path will be one level
deeper.
 Ex: C:\Projects\HelloWorld\HelloWorld
- Go back to Visual Studio and select the Solution Explorer.
o It can be opened from the View > Solution Explorer menu if it is not visible.
- Select the project by clicking on it.
- Click on the “Show All Files” icon.
- Select the “fonts” and “odin” folders.
- Right-click and select “Include In Project”

Create the application

- Open the app.ts file.
- Delete all the content in the file.
- Copy and paste the TypeScript example code in the following section into the app.ts file.
- Open the index.html file

Infor Smart Office Developers Guide | 23

Creating a project

- Delete all the content in the file.

- Copy and paste the HTML example code in the following section into the index.html file.
- Build the solution
o Build > Build Solution
- Verify that there are no build errors.
o Build errors are shown in the Error List.
 View > Error List

24 | Infor Smart Office Developers Guide

 Creating a project

TypeScript example code

/// <reference path="odin/typings/angularjs/angular.d.ts" />

module HelloWorld {

export class HelloWorldCtrl {

static $inject = ["$scope"];

constructor(private scope: ng.IScope) {

scope["message"] = "Hello World!";
}
}

var app = angular.module("helloworld", ["ui.bootstrap", "odin"]);

app.controller("HelloWorldCtrl", HelloWorldCtrl);
}

HTML Example code

<!DOCTYPE html>
<html ng-app="helloworld">
<head>
<title>HelloWorld</title>
<link href="odin/bootstrap.min.css" rel="stylesheet" />
<link href="odin/bootstrap-theme.min.css" rel="stylesheet" />
<link href="odin/odin-default-min.css" rel="stylesheet" id="odin-theme" />
</head>
<body>
<odin-navbar header="Hello World Application" theme="true"></odin-navbar>

<div class="container-fluid" ng-controller="HelloWorldCtrl">

<h1 ng-bind="message"></h1>
</div>

<script src="odin/jquery.min.js"></script>
<script src="odin/angular.min.js"></script>
<script src="odin/ui-bootstrap-tpls.min.js"></script>
<script src="odin/odin.js"></script>
<script src="app.js"></script>
</body>
</html>

Infor Smart Office Developers Guide | 25

Creating a project

Debug the application

Follow these steps to debug the application. ( See the next Troubleshooting section if there are
issues)
- Select the Solution Explorer.
- Right-click on the index.html page and select “Set As Start Page”
- Open the app.ts file.
- Set a breakpoint in the constructor of the HelloWorldCtrl class.
- Make sure that Internet Explorer is selected as the browser in the toolbar next to the green
play/debug button.
- Press F5 or the Play button to start debugging.
- Verify that the breakpoint is hit, see screenshot below.
- Press F5 to resume.
- Verify that the browser is opened and that the “Hello World!” message is displayed.

26 | Infor Smart Office Developers Guide

 Creating a project

Troubleshooting

Could not create output directory

If the build failed and you get the following warning:
Could not create output directory ''. Specified condition "$(CleanWPPAllFilesInSingleFolder)"
evaluates to "" instead of a boolean.
Try the following:

1. Close Visual Studio

2. Delete your .user and .suo files
3. Re-open the solution.

There is no option to create a TypeScript project or a TypeScript file

Verify that you are using Visual Studio 2013 update 3 or Visual Studio 2012 with the TypeScript
editor plugin. To download the update 3 or the TypeScript editor visit http://www.typescriptlang.org
and look under tools.

Eclipse
This section describes how to create and configure a project using Eclipse. The following
instructions are made for a specific Eclipse plugin so they will not apply if you choose to use another
plugin for TypeScript in Eclipse.

Create and configure the project

1. Java JDK/JRE is required to run Eclipse. The latest version can be downloaded from
http://www.oracle.com/technetwork/java/javase/downloads/
2. Download standard Eclipse from the link below (Currently Eclipse Standard 4.4)
a. https://www.eclipse.org/downloads/
3. Extract the file to some location such as C:\Eclipse
4. Open eclipse by clicking eclipse.exe
5. Browse to where you want to have your workspace
6. Go to Workbench
7. Open Help > Eclipse Marketplace…
8. There are two possible typescript plugins that you can use I recommend Typescript:
a. Typescript: With the Typescript plugin you do not need to add references to all used
typings in the ts files. To Install type typescript and Install the plugin TypeScript 1.0.0.
(Or the latest version)

Infor Smart Office Developers Guide | 27

Creating a project

b. TypEcs: Should be possible to debug. But must add references to all used typings in
the ts files. It’s also difficult to use linked resources/folders.

9. Click Confirm
10. Accept the license agreement
11. After the installation Eclipse will want to restart, let it!
12. Install AngularJS Eclipse from Eclipse Marketplace

28 | Infor Smart Office Developers Guide

 Creating a project

13. Create a project: File > New > Project, Javascript project
14. Name the project and click finish.
15. Right click on the project > Configure > Enable Typescript builder
16. Right click again on the project and select Configure > Convert to AngularJS Project
17. Change properties (Window > Preferences or in Project > Properties) for typescript to:

Infor Smart Office Developers Guide | 29

Creating a project

30 | Infor Smart Office Developers Guide

 Creating a project

18. In Preferences > Tern, change Node.js install to “Native Node.js” and make sure that the
“Native path” is correct.

19. In Typescript preferences you must also specify node path.

Infor Smart Office Developers Guide | 31

Creating a project

20. After Apply, restart Eclipse

21. Add a src folder to the project by right-clicking on the project in the Project Explorer and
select New > Folder.
22. Import the odin folder to the newly created src folder. Right click the src folder, click import,
select General > File System, then locate the odin folder. Select all files and select the option
“Create top-level folder”.

23. Import the Hello World project by right clicking the src folder and selecting import. Locate the
helloworld folder (…\Infor_MashupSDK\Samples\Projects\Common\HelloWorld\helloworld),
select all files and select the option “Create top-level folder”.
24. After you have created your application you can run it by right-clicking the .html file and
select Open With > Web browser
25. To indent use Ctrl+Shift+F

32 | Infor Smart Office Developers Guide

 Creating a project

26. You will probably also get a lot of “The word “x” is not correctly spelled” warnings. To skip
these warning change the settings in Window > Preferences > General > Editors > Text
Editors > Spelling. There you can turn of spellchecking completely.

Infor Smart Office Developers Guide | 33

Creating a project

27. Also change HTML validation properties

34 | Infor Smart Office Developers Guide

 Deploying an application

Chapter 5 Deploying an
application 5

This chapter describes some of the options for deploying an application built using the Mashup SDK.

Common application deployment

If your application do not use parts of the M3 framework you can deploy it anywhere since there are
no issues with cross domain calls. If your application has a server part it makes sense to deploy the
client files as part of that application if possible. Refer to the documentation of the web server /
application server where you will deploy the application.
In addition to your application files you need to include the “fonts” and “odin” folders found in the
Source folder of the Mashup SDK zip. For a deployed application you may choose to skip some files
such as the full script files if you only use the minified script files for example. The TypeScript typings
files are not required when deploying an application either. When the application is deployed on a
test server you can use Fiddler or the browser developer tools to check if you get any 404 responses
for files that are used in your application.

M3 application deployment
If your web application is part of a Grid application it will most likely be deployed as part of the Grid
application and packaged in a GAR-file (Grid Archive). As long as the Grid application is deployed in
the same Grid as M3 you won’t have any issues with cross domain calls.
If your application only consists of client files you have the option to deploy it in the M3 UI Adapter
(MUA) server. The MUA server has support for hosting web applications from version 10.2.2.0 and
later. The functionality is rather basic in that you simply create a zip file of your application and
upload it using the Applications tab in the MUA web based administration tools. The name of the zip
file will be used to create a directory where the application files are stored on the MUA server.
Example:
If you create a zip file called demo.zip that contains a file called index.html in the root and deploy
that in the MUA server it would be accessible using this path:
/mne/apps/demo/index.html

Infor Smart Office Developers Guide | 35

Deploying an application

The files and folders to include in the zip would be:

- fonts
- odin
- index.html
- app.js

36 | Infor Smart Office Developers Guide

 Common framework

Chapter 6 Common framework

6

This chapter is an overview of the different areas of the common framework. To get more details of
each area refer to the API documentation and the sample projects.

Startup
The framework have services and classes that can be used for the startup of the application. The
startup functionality can be used to perform one or many asynchronous operations such as server
requests before the rest of the application is allowed to start. The reason for providing this
functionality is that Angular currently lacks standard support for this.
The startup functionality is optional in most cases but some framework components rely on being
notified of the framework ready state. If you want to use these components but don’t want to use the
startup functionality there are some things you need to do to make the components work.

Framework ready state

The framework is considered to be in the ready state if the startup sequence has completed without
errors. The ready state is indicated by setting the odinReady property to true on the Angular root
scope.
If you are using a subclass of the ApplicationBase class this is done automatically unless you
override the onReady function. If you override onReady you call the setReady function on
IStartupState parameter to set the ready state.

Manually setting the ready state

Some components in the framework rely on the ready state and will watch the odinReady root scope
property. If the startup functionality is not used but you still want to use these components you must
either call the setReady function directly on the IStartupService or manually set the odinReady
property.

Infor Smart Office Developers Guide | 37

Common framework

Ex:
rootScope["odinReady"] = true;

Application base class

The easiest way to use the startup functionality is to create a class that extends
Odin.ApplicationBase. The ApplicationBase has optional functions that you may override and in
many cases you just have to override the onStart function to register your Angular module and other
Angular components such as controllers and directives. To start the application you create a new
instance of your class and calls the start function which is defined in the base class.
The example below shows a minimal example using the ApplicationBase class that registers a
module and a single controller.

module Example {
class App extends Odin.ApplicationBase {
public onStart() {
this.name = "Application Example";
this.version = "1.0.0";
this.module = angular.module("example", ["ui.bootstrap", "odin"]);
this.module.controller("ExampleCtrl", ExampleCtrl);
}
}
new App().start();
}

Startup service
If you don’t want to use the application base class for some reason you can call the startup service
manually. Refer to the API documentation of Odin.IStartupService.

Client logging
The Odin.Log class can be used to log messages on the client. The output of the log is written to the
browser console by default. It is also possible to create a custom log appender and to disable output
to the browser console.
The supported log levels are fatal, error, warning, info, debug and trace. The default log level is info.
The log level can be changed by the application and it can also be changed by executing a function
in the browser console. The example below changes to the debug log level.

38 | Infor Smart Office Developers Guide

 Common framework

Ex:
Odin.Log.setDebug();

Refer to the API documentation of Odin.Log for more information.

Components and events

The component framework was added to solve the following requirements:
- Loosely coupled events for controllers.
- Delay event delivery when a controller is busy.
- Delay event delivery when the UI for a controller is not visible.

The first requirement can be solved by watching properties on the Angular JS root scope and this is
what we use in the implementation. The next two requirements do not have an obvious solution in
AngularJS.
The background for the requirements is that we don't want to issue multiple server requests while a
response is pending and to prevent loading data from a server for parts of the UI that is not visible.
One example is selection changed events in a list that triggers a server request. If the user clicks on
multiple list rows a number of server request may be issued. Another example is a tab control with
multiple tabs. In most cases it does not make sense to load the data for tabs that are not visible until
the user actually selects that tab. Manually implementing support for this in each controller is quite a
bit of work so the component framework is an attempt to reduce the amount of code that is required.
The component framework consists of a couple of different parts such as the component service,
component context, visual state etc.

Component service
The component service (Odin.IComponentService) is used to register components and raise events.
When a component is registered a component context is returned.

Component context
The component context (Odin.IComponentContext) keeps track of the state of the component
(Odin.ComponentState). The component state can be active or busy. When a component is not
active events for that component will be delayed. A component is considered to be active if the
component state is active and the component is visible. A component may not be visible if visual
state handling is enabled.

Infor Smart Office Developers Guide | 39

Common framework

The component context can be used to raise events which is a shortcut to using the component
service.

Visual state
The visual state (Odin.IVisualState) is used to keep track of components that can be activated or
deactivated. A common example are tabs in a tab control. When a tab is selected the visual state is
considered to be active, when the tab is not selected the state is inactive. Another example is an
expander control that can be expanded (active) and collapsed (inactive). The visual state can also
be used for things that are not visible in the UI but can be active/inactive.
The visual state functionality is not automatic so to enable it you must use either the
Odin.VisualStateCtrl class or the Odin.TabCtrl class.

Layout
The Mashup SDK uses the Bootstrap 3.0 grid system for layout.

You can use the Bootstrap CSS classes directly but there are also some directives in the Mashup
SDK that simplifies layout of form elements for example. The OdinStyle sample project contains
examples of how to use the directives and many of the other samples also use the directives.

More information about the Bootstrap grid system can be found here:
http://getbootstrap.com/css/#grid
http://getbootstrap.com/examples/grid/

Translation
The translation solution is based on script files as language file with language constants mapped to
language texts. The Mashup SDK is delivered with a standard.js file that contains a set of common
language texts. Some of them are used within the framework such as OK, Cancel, Yes and No, but
most constants are there for your convenience.
It is recommended that you add your own application.js file with the language constants for your
application. You can choose to copy the constants that you would like to use from standard.js and
only use one language file instead of two by configuring the ILanguageService. The language
constant key has to be unique not only within a single file but also unique when compared to the
constants in the standard.js file. This is because standard.js and application.js files will be mixed
together if the ILanguageService is configured to load both files.

40 | Infor Smart Office Developers Guide

 Common framework

The language files are located in the scripts/localization folder. There is one subfolder per language.

The Samples contains a translation example that shows the use of the service and odin-lang
(LangDirective). See Samples -> M3 -> Translation.
There is currently no support for incremental load of language constants for different pages in a
navigational application.

Setting language in your application

The Odin.ApplicationBase and the M3.ApplicationBase classes takes an ILanguageOptions object.
Use it to set the default language and the supported languages. It is possible to configure the service
to take the language from M3. There is no default “browser language” provided by the framework
since there is no common way to get the browser language cross browsers. We recommend you to
use the M3 language and/or allow the user to change language.

How to get language constants from M3 using M3 Batch

Translator
M3 Batch Translator is a tool that takes JSON as input, communicates with M3 and returns JSON
output that can be used in a language file. The tool is located under the tools section and requires
the M3 proxy to be running.

Infor Smart Office Developers Guide | 41

Common framework

Click Translate

Since there might be conflicting constants in the two files the tools have different options for
adding prefixes. The output from this tool can be copied to your language file.

How to translate an application

Below is a quick checklist for adding localization files to your application. For more information check
the API Documentation.
1. Make sure you use a BaseApplication class and set the ILanguageOptions with the user
language and the available languages. See the API documentation for more information.
2. Add an application.js file to all language folders with the constants
3. Make sure all constants are available in all files. There is no default mechanism for fallback to a
default language which means all files must have all constants.
4. Use the ILanguageService to get the language in controllers and services
5. Use the odin-lang (LanguageDirective) in HTML.

42 | Infor Smart Office Developers Guide

 Chapter 7 M3 framework
7

This chapter is an overview of the different areas of the M3 framework. To get more details of each
area refer to the API documentation and the sample projects.

Startup
The startup functionality for the M3 framework is exactly the same as for the common framework but
it is possible perform some M3 specific operations during startup. If the application requires a M3
user context or an interactive session the framework can ensure that this is available before the
application starts. The other option is to rely on the lazy loading of the user context for example but
the application will have responsibility for waiting until the user context is available.

Application base class

The M3 framework has its own application base class called M3.ApplicationBase. This class extends
the class in the common framework but adds M3 specific functionality.
The example below shows a minimal example using the M3.ApplicationBase class that registers a
module and a single controller. It sets userContext flag to true to make sure that the M3 user context
is loaded before the application starts.

module M3Example {
class App extends M3.ApplicationBase {
public onStart() {
this.name = "M3 Application Example";
this.version = "1.0.0";
this.userContext = true;
this.module = angular.module("m3example", ["ui.bootstrap", "odin", "m3"]);
this.module.controller("M3ExampleCtrl", ExampleCtrl);
}
}
new App().start();
}

Infor Smart Office Developers Guide | 43

M3 framework

MI programs
The M3 framework has support for calling M3 MI programs using the REST endpoint on the BE
server. To be able to call the MI programs the application must be deployed in the same Grid as M3
Foundation. During development you can use the proxy to call MI programs even though the
application is running locally on a developer machine.

MI Service
The MI service can be used to call transactions in M3 MI programs. The MI service can be called
directly or it can be used through the MI controller base classes described below.

MI controller base classes

The MI controller base classes can be used to show data from MI programs in list panels or detail
panels using the M3.MIDetailCtrl and M3.MIListCtrl classes. These classes provide common
functionality and can be extended to create custom controller classes.

Interactive programs
The M3 framework has support for using stateless form detail panels or stateful form list panels. To
be able to use the interactive programs the application must be deployed in the same Grid as the M3
UI Adapter. During development you can use the proxy to call interactive programs even though the
application is running locally on a developer machine.
An interactive M3 program is a regular form based M3 program such as MMS001 or CRS610. You
normally run interactive programs in Smart Office using MForms or in a browser using Ming.le and
H5. The M3 framework can be used to reuse parts of the interactive program functionality in an
application. Note that the functionality that can be reused is limited and that the the full functionality
of the interactive programs can only be used in the MForms or H5 clients.

Interactive session
An interactive user session is required when using stateless detail panels or stateful list panels
described below. When a Mashup SDK application runs in a H5 tab it will try to reuse the existing
interactive user session from H5. If the application is running stand-alone or hosted in some other
container the M3 framework will create an interactive session. Since an interactive session has state
on the M3 server the framework will attempt to log out the session when the browser closes or
navigates to another page.

44 | Infor Smart Office Developers Guide

 M3 framework

Stateless detail panels

Data from detail panels in interactive M3 programs can be accessed using stateless detail panel
bookmarks. A stateless bookmark will start an M3 program on a detail panel, close the program and
then return the result. Since the M3 program is closed when the response is returned to the client we
refer to this as stateless bookmarks. It is also possible to get data from more than one panel in the
panel sequence by specifying additional panels in the panel sequence for the bookmark.

Stateless detail panels can be used by extending the M3.Form.DetailCtrl class and using the m3-
detail-layout directive.

Stateful list panels

List panels from interactive M3 programs can also be used but in this case there will be state on the
backend servers. There will be an M3 program running as long as the list panel is used.

Stateful list panels can be used by extending the M3.Form.ListCtrl class and the m3-list directive.

Infor Smart Office Developers Guide | 45

 Chapter 8 Mashup integration
8

It is possible to integrate Web Mashups and Web Mashup controls with applications created using
the Mashup SDK in a couple of different ways. The most basic integration is to just load a Web
Mashup in an iframe. Other options are to integrate a single Mashup control or to create Web
Mashup using an event proxy control.

Web Mashup control integration

A single Web Mashup control can be used in an application using the odin-mashup-control directive
(Odin.Mashup.ControlDirective) and a controller that extends the Odin.Mashup.ControlCtrl class. To
use a Web Mashup control in this way you must know the URL of the Mashup control, the
parameters required to initialize the control and also the events that the Mashup control supports.
The Mashup control will be hosted in an iframe and it is possible to both send events to the Mashup
control and receive events from the Mashup control.
See an example of how to do this in the mashup-control folder in the sample project
Samples\Projects\Common\MashupIntegration\MashupIntegration.sln.

Web Mashup integration with event proxy

This section describes how to use a custom Web Mashup control to integrate with a Web Mashup.

Web Mashup Setup

Create a web control in your applications XAML. Mashup Designer will automatically create a HTML
file with the name of that control and place it under resources. Copy the content of
OdinEventProxy.html (Samples\Projects\Common\MashupIntegration\MashupProject) and overwrite
the content of the recently added HTML-file. This web control will now act as the proxy between
frameworks.
Declare all the events that will be sent between frameworks in this control.
Deploy the mashup to the mashup server and save the URL.

Infor Smart Office Developers Guide | 47

Mashup integration

Mashup SDK Setup

First, make sure “odin” as set as a dependency in your application module.
Example:
angular.module(“myApp”, [“odin”]);

Extend the Angular controller responsible for Mashup Integration with Odin.MashupCtrl.
Example:
export class myAppCtrl extends Odin.MashupCtrl

Create an event callback in your controller. It’s highly recommended that you filter events based on
the event name (eventName) since the proxy web control will send events that might not be relevant.
The event name will be what you set the TargetEventName to be in the WM XAML, if no
TargetEventName is set then the event name will be the value of SourceEventName.
Example:
public receiveEvent = (e: Odin.IMashupEvent): void => {
if (e.eventName == “myEvent”) {
// Act on this event
}
}

Place an <odin-mashup></odin-mashup> tag where you want your web mashup iframe to be
displayed and set the following attributes:
id – regular html id attribute
src – the source of your web mashup, used the same way as the src attribute in a regular iframe
event-callback – the event callback in your controller
Ex
. <odin-mashup id=”myMashup” event-callback=”ctrl.receiveEvent”
src=”https://mashupserver/mymashup/application”></odin-mashup>
To send events to the WM you use the sendEvent function of the Odin.MashupCtrl class.
Example:
var parameters = [{
“sourceKey”: “CONO”,
“value”: 123
}];
this.sendEvent(“customerList”, “CurrentItemChanged”, parameters);

48 | Infor Smart Office Developers Guide

 Additional Tools

Chapter 9 Additional Tools

9

Here we present you with a list of tools that you might find useful in your own development.

Tool Comment Free

Fiddler2 Network traffic monitoring yes
ReSharper JetBrains productivity plugin for Visual Studio no
Web Essentials Web development plugins for Visual Studio yes

Infor Smart Office Developers Guide | 49

 Chapter 10 Resources
10

TypeScript
http://www.typescriptlang.org

AngularJS
https://angularjs.org

AngularUI Bootstrap
http://angular-ui.github.io/bootstrap

Infor Smart Office Developers Guide | 51