Software Development

How to build web applications for Infor M3 Web SDK and Odin Framework

Share

Introduction to Web SDK and Odin framework 

In the context of M3 H5, Web SDK is a technology introduced by Infor to build web applications using Angular technologies. As the name explains, Web SDK is a browser-based application, and it can run on any modern web browser. This Angular web application can deploy and run on the M3 H5 client, and the application can call M3 programs. Additionally, the SDK will provide standard UI components to build the HTML views. Odin is a framework for building web applications for M3, but this is not a framework of UI components. This provides the necessary libraries to access logged-in user information and call M3 APIs. The Odin framework has three parts:
  1. A command-line interface (CLI) to create new projects and to do other development-related tasks like building and executing the project;
  2. A core API without any Angular dependencies that only require RxJS; and
  3. Angular services for M3-related functions, including executing MI programs and bookmarks, retrieving user context and launching programs in the H5 client.
If you are familiar with Angular technologies and HTML, CSS and typescript, it is easy to create, build and deploy the SDK to M3. This blog will explain how to develop and run a web SDK application, build and deploy it in an H5 client, and a few tips on adding shortcuts. For this tutorial, we are going to use Web SDK 5.0.

Setting up the environment

To create and run Web SDK, you need Node Package Manager (NPM). You can download and install npm from the Node.js download page: https://nodejs.org/en/download/. NPM will be installed with Node.js

Tip: To verify that your installation was successful, use the following command (npm -v). If it is installed correctly, this will display the npm version.

Next, we need to install Odin packages. Execute the below command to install Odin CLI globally on  your local computer.

Installing Odin globally means you can execute Odin commands from any of your folders. Use the below command to verify the installation.  

Development

Web SDK can be created easily using Odin CLI. The below points describe how to create an Odin application with a few easy steps:
  1.  Open the Command Prompt window and navigate to the folder where you would like to create the project.
  2.  Execute ‘odin new’ command and answer all the questions. Please refer to the below screen for the wizard of questions.
  3. Navigate to the project folder in the command line and install dependencies for the application.
  4. Start the project and access it in a browser using http://localhost:8080.
  5. You can open the created project using VS (Visual Studio) Code or any other editor and start editing the code.
The ‘odin serve’ command will load an application like the example given below. If the M3 URL is set up correctly, clicking on the Load button will prompt you to enter user credentials. Then, it will retrieve user details and display them in the application.
Since this is an Angular application, you can also use ‘ng serve’ to start the project. The difference is that if you use ng serve, the Odin-related libraries will not load. Hence you will not be able to execute any M3 transactions or access user context. In step 2, I have added the default URL (https://example.com:8080) for the M3 environment. This URL is used to execute M3 transactions. This URL can be modified anytime in the code, which you can find in the odin.json file below. Ensure the name adheres to the specified naming convention when selecting a project name. For example, it allows only letters, numbers and dashes; no spaces are allowed.

User context

The web SDK runs within the H5 client and most of the time, we have to access user objects. This can be accessed using the API MNS150/GetUserData, but the Odin framework provides built-in services to access user objects.

The MIService will use and pass the current company as a parameter to the M3 programs, unless specific CONO and DIVI are mentioned in the MIRequest. The following code snippet explains how to access user context. Loading the UserContext as part of the application initialization is recommended rather than calling this multiple times.

Ensure the name adheres to the specified naming convention when selecting a project name. For example, it allows only letters, numbers and dashes; no spaces are allowed.

Here we are not calling MNS150 API explicitly, but the inbuilt user service is calling the API. If you can open the developer tools in the browser, you can notice the service call in the network tab.

Calling M3 APIs

Calling M3 APIs using web SDK is very easy with Odin. We can call get, list and change transactions. By default, the framework will pass the current company and the division as the parameters if the user context has already been retrieved. The below example code will retrieve customer details using CRS610MI/ GetBasicData.

The MI transaction may return a lot of data. Therefore, always specify the output fields to increase performance and reduce bandwidth.

Deployment

Web SDK can be created easily using Odin CLI. The below points describe how to create an Odin application with a few easy steps:
  1.  Open the Command Prompt window and navigate to the folder where you would like to create the project.
  2.  Execute ‘odin new’ command and answer all the questions. Please refer to the below screen for the wizard of questions.
  3. Navigate to the project folder in the command line and install dependencies for the application.
  4. Start the project and access it in a browser using http://localhost:8080.
  5. You can open the created project using VS (Visual Studio) Code or any other editor and start editing the code.
The ‘odin serve’ command will load an application like the example given below. If the M3 URL is set up correctly, clicking on the Load button will prompt you to enter user credentials. Then, it will retrieve user details and display them in the application.
Since this is an Angular application, you can also use ‘ng serve’ to start the project. The difference is that if you use ng serve, the Odin-related libraries will not load. Hence you will not be able to execute any M3 transactions or access user context. In step 2, I have added the default URL (https://example.com:8080) for the M3 environment. This URL is used to execute M3 transactions. This URL can be modified anytime in the code, which you can find in the odin.json file below. Ensure the name adheres to the specified naming convention when selecting a project name. For example, it allows only letters, numbers and dashes; no spaces are allowed.

Creating shortcut

Use the following steps to create a shortcut in M3:

  1. Open the program where a shortcut must be created (ex: mms001) and click Shortcuts.
  2. Add the name and target URL
  3. Click Add and then Save
  4. The shortcut will be displayed as shown below

At times you may need to pass a few parameters to the URL. For example, select a style from MMS001  and click on a shortcut to open the selected style information. The following steps allow passing a parameter to an application:

  1. Open Tools > Link Manager
  2. Add the Title and click Next
  3. Add the parameter as shown below:

https://<your-url-here>/mne/apps/tech-talk/#?itno=<MMITNO>

This will pass the selected style number into the field as an input.

Written by:

Mohamed Akbar
Technical Lead, Fortude

Related Blogs

View more

fashion

ASP.NET Core Dependency Injection and Service Lifetimes

Infor Integrations & Extensibility

Building business-ready applications with Infor Mongoose: 4 success stories

fashion

Building low-code feature-rich applications for CloudSuite with Infor Mongoose