Building Web Applications for Infor M3 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.

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.

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.

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.