m3-app-library v0.3.4
Prerequisites
Install NodeJS
Use the instructions on this site: https://nodejs.org/
Install Angular CLI
Run the following from the command line:
npm install -g @angular/cli
Getting started
Create Angular project
Run the following from the command line:
ng new my-m3-app
Use routing if you want to. Using SASS with file extension .scss is suggested
Enter the project
Run the following from the command line:
cd my-m3-app
Install m3-app-library
Run the following from the command line:
npm install m3-app-library
Ignore peer dependecy warnings
Import M3 App Library in module
Open file src/app/app.module.ts
Add this line to the imports at the top of the file:
import { M3AppLibraryModule } from 'm3-app-library';
Add M3AppLibraryModule.forRoot() to the imports section, like this:
imports: [
// ... other modules ...
M3AppLibraryModule.forRoot(), // <-- add this line
],
The forRoot() method can accept an object overriding the default settings, but this is optional.
Configure proxy
In order to call MI API's in a remote M3 installation from your local development environment, you can use the build-in proxy feature in Angular.
Create a new empty file in the Angular project root:
proxy.conf.json
Enter the following JSON into the file:
{
"/m3api-rest": {
"target": "https://your-m3-installation.domain.com:12345",
"secure": false
}
}
Substitute the placeholder URL including port with the one of the M3 installation your want to develop against.
Open the file angular.json in your project root. Search for "serve" (including the quotes). This should take you to the right section. Modify the JSON in the following section by adding an entry for "proxyConfig" in the "options" section. Make sure to add a comma at the end of the line above.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-m3-app:build",
"proxyConfig": "proxy.conf.json"
},
...
}
"Serve" the app using the Angular CLI built-in web server
Run the following from the command line:
ng serve
Then open your browser with the following URL:
Inject the MI API Service into your app component
Open the following file:
src/app/app.component.ts
Add the following line to the import section at the top of the file:
import { MIApiService, MIApiResult } from 'm3-app-library';
Add the following line to the AppComponent class, just under the "title" line:
constructor( private mi:MIApiService ){}
Add code to run an MI API when the component is ready
Add a class field called "userInfo" by adding this line just above the constructor line you just added:
userInfo;
Add OnInit to the existing import statement at the top of the file:
import { Component, OnInit } from '@angular/core'; // <-- just add ", OnInit", the rest is there
Add the OnInit interface to the AppComponent definition, like this:
export class AppComponent implements OnInit { // <-- just add "implements OnInit"
Implement the ngOnInit method by adding this code below the constructor:
ngOnInit(){
}
Then add the following example MI call to the ngOnInit method, like this:
ngOnInit(){
this.mi.executeMI(
'MNS150MI',
'GetUserInfo',
{}
)
.then( result => {
this.userInfo = result.item;
});
}
Modify the component template to show the result of the MI API call
Open the component template file:
src/app/app.component.html
REMOVE all the contents of this file, and replace it with the following line:
<pre>{{userInfo | json}}</pre>
That line inserts the entire userInfo object into an HTML tag that will "preformat" it rather than printing it on a single line. The " | json" part will convert the object to JSON. This is all good for testing, but not something you usually want to do in a real app.
Add a line to print a single field, like this:
Your name is: {{userInfo.USFN}}.
2 months ago
2 months ago
2 months ago
4 months ago
4 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago