Manual Inventory Position Changes through the UI

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

How-to Guide

Extend

Authors:

Alan Jackson, Andrew Shaw, Randy Chan

Changed on:

4 July 2024

Key Points

This article gives System Integrator (SI) Partners and Businesses a high-level idea of where new features can be built on top of the OMS reference solution to support the customer's requirement within Fluent OMS.
This idea/solution will provide an extended new feature where the Store User can update the Store inventory through the UI to ensure the OMS has the most accurate product inventory.
New custom UI component and rules to capture the user input in the UI user Action screen. Then, the backend will create a new Inventory Quantity entity and update the Inventory Position and the downstream workflow.

Prerequisites

Debugging the Component SDK

Component SDK - Overview

Rules SDK - Debugging Rules

Create a new Rules SDK Plugin Project

Updating a Workflow

Workflow Framework Overview

Deploy and Run your Rules SDK project

Steps

Extend Knowledge Content Terms and Conditions

PART 2 of the Extend Knowledge Terms and Conditions apply to and govern this Content Item. Please read it before using this Content.

Use Case

As a Store Associate, I need to update my inventory manually. I select a product in my location and increment/decrease the total stock count using a condition code.

The result is an updated inventory position quantity line item.

Solution Approach

On the product UI, the user action drawer should provide the following key aspects:

Item Condition text field
Quantity Adjustment number picker - allows user to increase/decrease quantity
A list of Locations with current Available Quantity with a radio box to allow the user to select the location

Upon submission, the OMS will create a new Inventory Quantity entity and update the Inventory Position and the downstream workflow.

Technical Design Overview

To support the business solution design, the following technical areas need to be enhanced:

A new custom UI component (by using Component SDK) -
```
`StockAdjustmentDetails`
```

Two custom rules (by using Rule SDK):

```
`StockAdjustmentRequest`
```

`SendEventToInventoryPositionForInventoryQuantity`

Create a new Ruleset in Product workflow (
```
`CreateInventoryCorrection`
```
)
Update Rulesets in Inventory workflow (
```
`CREATE`
```
)

Each of these tasks will be described below in steps

UI Component: StockAdjustmentDetails

We will use the OMX actions feature of a page to display an interactive form to complete the user action registered with the Product workflow. The form will be registered with OMX through the field registry by defining the name ("STOCK_ADJUSTMENT_DETAILS") to match the rule's payload (StockAdjustmentDetails).

`src/index.tsx`

`src/forms/fields/StockAdjustmentDetails.tsx`

Provide the form implementation. The form will look up (using GQL) the inventory positions for the given product reference (taken from the calling entity reference). A list will then be displayed for the user to select the appropriate store to adjust (note stores without current inventory positions aren't shown as we can only add to an existing inventory position using this solution)

1 return (
2    <div>
3      <div className={classes.textLabel}>
4        <TextField
5          name={'condition'}
6          label={translateOr([
7            'fc.field.registry.stockadjustmentdetails.condition.placeholder',
8            'Item Condition',
9          ])}
10          onChange={(e) => conditionHandler(e)}
11        />
12      </div>
13      <div className={classes.quantitySelectorContainer}>
14        <QuantitySelector
15          name={'qs'}
16          label={translateOr([
17            'fc.field.registry.stockadjustmentdetails.quantityselector.label',
18            'Quantity Adjustment',
19          ])}
20          value={1}
21          onChange={setQuantity}
22          onBlur={() => ''}
23        />
24      </div>
25      <div className={classes.splitColumns}>
26        <span className={classes.quantityLabel}>
27          {translateOr([
28            'fc.field.registry.stockadjustmentdetails.location.label',
29            'Location',
30          ])}
31        </span>
32        <span className={classes.quantityLabel}>
33          {translateOr([
34            'fc.field.registry.stockadjustmentdetails.availability.label',
35            'Available',
36          ])}
37        </span>
38      </div>
39      <div className={classes.locationWrapper}>
40        <RadioGroup
41          value={locationRef}
42          onChange={updateSelectedLocationHandler}
43        >
44          {filteredAvailabilityNodes.map((node, index) => (
45            <FormControlLabel
46              key={index}
47              control={<Radio />}
48              classes={{
49                root: classes.radioWrapper,
50                label: classes.locationLabelWrapper,
51              }}
52              label={
53                <span className={classes.splitColumns}>
54                  <span>
55                    {
56                      availabilityResult.data?.locations.edges.find(
57                        (edge) => edge.node.ref === node.locationRef,
58                      )?.node.name
59                    }
60                  </span>
61                  <span className={classes.availableQty}>{node.onHand}</span>
62                </span>
63              }
64              value={node.locationRef}
65            />
66          ))}
67        </RadioGroup>
68      </div>
69    </div>
70  );

Language: typescript

Name: StockAdjustmentDetails sample return output

Description:

The form will look up (using GQL) the inventory positions for the given product reference (taken from the calling entity reference). A list will then be displayed for the user to select the appropriate store to adjust (note stores without current inventory positions aren't shown as we can only add to an existing inventory position using this solution)

Custom Rules

Two custom Rules need to be added:

StockAdjustmentRequest

Property	Value
Plugin name	<yourPluginName>
Rule API Client	GraphQL
Rule Info Description	Create a new inventory quantity entry with the given quantity for the current product at the given location
Supported Entities	PRODUCT, VARIANT_PRODUCT

New Ruleset in PRODUCT_CATAGLOGUE workflow

Add a new ruleset that contain the user action to allow user to update the quantity:

1 {
2      "name": "CreateInventoryCorrection",
3      "type": "PRODUCT",
4      "subtype": "VARIANT",
5      "eventType": "NORMAL",
6      "rules": [
7        {
8          "name": "{{fluent.account.id}}.{packageName}.StockAdjustmentRequest",
9          "props": {}
10        }
11      ],
12      "triggers": [
13        {
14          "status": "CREATED"
15        },
16        {
17          "status": "ACTIVE"
18        },
19        {
20          "status": "INACTIVE"
21        }
22      ],
23      "userActions": [
24        {
25          "context": [
26            {
27              "label": "Inventory Correction",
28              "type": "PRIMARY",
29              "modules": [
30                "servicepoint",
31                "adminconsole"
32              ],
33              "confirm": false
34            }
35          ],
36          "attributes": [
37            {
38              "name": "StockAdjustmentDetails",
39              "label": "Stock Adjustment Details",
40              "type": "stockAdjustmentDetails",
41              "source": "",
42              "defaultValue": "",
43              "mandatory": false
44            }
45          ]
46        }
47      ]
48    }

Language: json

Name: New ruleset CreateInventoryCorrection

Description:

Add a new ruleset CreateInventoryCorrection to call rule: StockAdjustmentRequest with user action: stockAdjustmentDetails

Update INVENTORY workflow

In the CREATE ruleset of INVENTORY_QUANTITY, register a new rule

`SendEventToInventoryPositionForInventoryQuantity`

that executes a

`CalculateOnHandForInventoryPosition`

event. This will recalculate the current on-hand position given the updated quantity (and any other adjustments that may have occurred).

Result

The result of this idea is the store associate can manually adjust Store Quantity through the UI.

Related Sources

Component

Plugin

Workflow