Search

Building custom Workspace widgets

Business Problem

The standard widgets delivered with the Infor Cloudsuite meet many of your business requirements, however you have some situation specific needs to display data. You would like to develop custom widgets to display on an employee Workspace.

This tutorial will help developers setup and configure the Widgets SDK in their local system for building custom workspace widgets.


Solution Components

Solution Requirements

  • Access to an Infor Cloud suite for deploying the sample widgets
  • User privileges to Portal and Workspaces

Tutorial

1. Installation

Download and install the latest version of Node JS from the official Node JS Website in this link.

2. Download the SDK

Download the latest SDK from GitHub.

3. Extract the SDK package

Once the SDK is downloaded, unzip the package using any zip tool like 7zip/winrar/winzip into a Local Folder where you will see the following folder structure. 

4. Install Node Modules

After the package is unzipped in the local server/machine you have to create node modules for which you have to open command prompt as an Administrator from the location <Drive>/ Infor_HomepagesWidgetSDK/Samples/ and type:

npm install

Once this is complete it will add the node_modules folder under Samples folder

5. Install Visual Studio IDE

To be able to work on the building the Widget from Sample SDK , developer need to install any IDE or a simpler version would be visual Studio code from official website, link provided here. Once the Visual studio is installed. Open the Folder Explorer and explore the path where Samples is there like below 

6. Configuration

First step in the Visual Studio code is to Watch build. Once the developer is in Visual studio press Ctrl + Shift+ B which will show the “Select the build task to run“. Then type build and then select 

npm:build:watch

After performing this task the Terminal should show as per below. “Found 0 errors. Watching for file changes”.

7. Starting the Server

Within the visual Studio one the Build:Watch is performed, developer will now click on the PowerShell and start the server using the command:

npm start

Click on Allow Access if prompted by Windows Security. The server should start without any issues as per the below screenshot.

 

More Resources

Product Documentation