Retail Order LWC

Access the RE order data in the LWC layer using the orderExtensionUtils service component.

Namespace

The orderExtensionUtils LWC exposes events and methods to get the order state and extract data from the order, and push new data to the order.

cgcloud

Supported Methods

Here are all the available methods in the orderExtensionUtils service component. You can import these methods in your custom LWC.

getOrderData

Get the order data.

API Version
59.0
Signature
getOrderData(recordId)
Example
import { LightningElement, api } from 'lwc';
import { getOrderData } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderData = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
  }
}

updateOrderData

Update the managed packaged Order sObject (Order__c) fields.

API Version
59.0
Signature
updateOrderData(recordId, srcThisRef, fieldApiName, value)
Example
import { LightningElement, api } from 'lwc';
import { getOrderData, updateOrderData } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderData = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
  }

  // You can invoke this method with the click of a button
  updateOrderFieldValue() {
    const fieldName = 'cgcloud__Delivery_Note__c';
    const newValue = 'test-note';

    updateOrderData(this.recordId, this, fieldName, newValue);
  }
}

getOrderItemData

Get the order item data.

API Version
59.0
Signature
getOrderItemData(recordId)
Example
import { LightningElement, api } from 'lwc';
import { getOrderItemData } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderItemsData = [];

  connectedCallback() {
    getOrderItemData(this.recordId).then((data) => {
      this.initialOrderItemsData = data;
    });
  }
}

updateOrderItemData

Update the managed packaged Order Item sObject (Order_Item__c) fields.

API Version
59.0
Signature
updateOrderItemData(recordId, srcThisRef, itemId, fieldApiName, value)
Example
import { LightningElement, api } from 'lwc';
import { getOrderItemData, updateOrderItemData } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderItemsData = [];

  connectedCallback() {
    getOrderItemData(this.recordId).then((data) => {
      this.initialOrderItemsData = data;
    });
  }

  updateOrderItemFieldData() {
    const orderItemId = this.initialOrderItemsData[0].Id;
    const fieldName = 'cgcloud__Discount__c';
    const value = 9;

    updateOrderItemData(this.recordId, this, orderItemId, fieldName, value);
  }
}

setCustomState

Sets a custom state for the order that is saved. Using the custom state, you can set up additional data to be saved along the order data in the same transaction as the order. This custom state gets forwarded to the Apex class that handles order save customizations.

API Version
59.0
Signature
setCustomState(recordId, customState)
Example
import { LightningElement, api } from 'lwc';
import { setCustomState } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;

  connectedCallback() {}

  setOrderCustomState() {
    setCustomState(this.recordId, {
      customProp: 'Test'
    });
  }
}

getIsOrderInEditMode

Check if the order is in the edit mode or read-only mode. Use this method to render custom LWC components in the read-only or edit mode.

API Version
59.0
Signature
getIsOrderInEditMode()
Example
import { LightningElement, api, track } from 'lwc';
import { getIsOrderInEditMode } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  @track isOrderInEditMode = false;

  connectedCallback() {
    this.isOrderInEditMode = getIsOrderInEditMode();
  }
}

registerListenerForOrderDataUpdates

Listen for the order data changes. Register a callback method, which gets invoked when an order field changes.

API Version
59.0
Signature
registerListenerForOrderDataUpdates(recordId, thisRef, callback)
Example
import { LightningElement, api } from 'lwc';
import {
  getOrderData,
  registerListenerForOrderDataUpdates
} from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderData = {};
  orderDataUpdates = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
    registerListenerForOrderDataUpdates(
      this.recordId,
      this,
      this.handleOrderDataUpdates
    );
  }

  handleOrderDataUpdates(fieldApiName, value) {
    this.orderDataUpdates[fieldApiName] = value;
  }
}

registerOrderDataInlineValidator

Validate the order data changes. Register a callback method, which gets invoked when an order field changes. The method returns an error message if any validation fails.

API Version
59.0
Signature
registerOrderDataInlineValidator(recordId, thisRef, callback)
Example
import { LightningElement, api } from 'lwc';
import {
  getOrderData,
  registerOrderDataInlineValidator
} from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderData = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
    registerOrderDataInlineValidator(
      this.recordId,
      this,
      this.validateOrderDataChanges
    );
  }

  validateOrderDataChanges(fieldName, value) {
    switch (fieldName) {
      case 'cgcloud__Invoice_Note__c':
      case 'cgcloud__Delivery_Note__c':
        return this.validateNoteFields(value);
      default:
        return '';
    }
  }

  validateNoteFields(value) {
    if (value && value.length > 100) {
      return 'This text should be less than 100 characters';
    }
  }
}

registerListenerForOrderItemDataUpdates

Listen for the order item data changes. Register a callback method, which gets invoked whenever any order item field changes.

API Version
59.0
Signature
registerListenerForOrderItemDataUpdates(recordId, thisRef, callback)
Example
import { LightningElement, api } from 'lwc';
import {
  getOrderItemData,
  registerListenerForOrderItemDataUpdates
} from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderItemsData = [];

  connectedCallback() {
    getOrderItemData(this.recordId).then((data) => {
      this.initialOrderItemsData = data;
    });
    registerListenerForOrderItemDataUpdates(
      this.recordId,
      this,
      this.handleOrderItemDataUpdates
    );
  }

  handleOrderItemDataUpdates(itemId, fieldApiName, value) {
    const orderItem = this.initialOrderItemsData.find(
      (_orderItem) => _orderItem.Id === itemId
    );

    orderItem[fieldApiName] = value;
  }
}

registerOrderItemDataInlineValidator

Validate the order item data changes. Register a callback method, which gets invoked whenever any order item field changes. The method returns an error message if any validation fails.

API Version
59.0
Signature
registerOrderItemDataInlineValidator(recordId, thisRef, callback)
Example
import { LightningElement, api } from 'lwc';
import {
  getOrderItemData,
  registerOrderItemDataInlineValidator
} from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderItemsData = [];

  connectedCallback() {
    getOrderItemData(this.recordId).then((data) => {
      this.initialOrderItemsData = data;
    });
    registerOrderItemDataInlineValidator(
      this.recordId,
      this,
      this.validateOrderItemDataChanges
    );
  }

  validateOrderItemDataChanges(itemId, fieldName, value) {
    switch (fieldName) {
      case 'Discount__c':
        return this.validateDiscount(value);
      default:
        return '';
    }
  }

  validateDiscount(value) {
    if (value > 10) {
      return 'Item discount should not be more than 10%';
    }
    return '';
  }
}

registerBeforeAddItemActionHandler

Register callbacks before adding items.

API Version
59.0
Signature
registerBeforeAddItemActionHandler(recordId, thisRef, callback)
Example
import { LightningElement, api } from 'lwc';
import {
  getOrderData,
  registerListenerForOrderDataUpdates,
  registerBeforeAddItemActionHandler
} from 'cgcloud/orderExtensionUtils';

export default class CustomLWC extends LightningElement {
  @api recordId;
  initialOrderData = {};
  orderDataUpdates = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
    registerListenerForOrderDataUpdates(
      this.recordId,
      this,
      this.handleOrderDataUpdates
    );
    registerBeforeAddItemActionHandler(
      this.recordId,
      this,
      this.handleBeforeAddItemCB
    );
  }

  handleOrderDataUpdates(fieldApiName, value) {
    this.orderDataUpdates[fieldApiName] = value;
  }

  handleBeforeAddItemCB(newOrderItems) {
    const orderData = { ...this.initialOrderData, ...this.orderDataUpdates };

    newOrderItems = newOrderItems.map((orderItem) => {
      if (
        orderData.cgcloud__Order_Account__r.Name === '*NTO Store #201' &&
        orderItem['Product__r.Description_1__c'] === 'BBQ'
      ) {
        throw new Error("You can't add BBQ product");
      }

      orderItem.Quantity__c = 2;
      orderItem.Number__c = 10;

      return orderItem;
    });
  }
}

registerBeforeSaveActionHandler

Register a callback before the save action.

API Version
59.0
Signature
registerBeforeSaveActionHandler(recordId, thisRef, callback)
Example
import { LightningElement, api } from 'lwc';
import {
  getOrderData,
  registerBeforeSaveActionHandler
} from 'cgcloud/orderExtensionUtils';

export default class CustomLWC extends LightningElement {
  @api recordId;
  initialOrderData = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
    registerBeforeSaveActionHandler(
      this.recordId,
      this,
      this.handleBeforeSaveCB
    );
  }

  handleBeforeSaveCB(savePayload) {
    const {
      orderItemsToBeUpserted: orderItems,
      updatedOrder: orderData
    } = savePayload;

    for (let i = 0; i < orderItems.length; i++) {
      const orderItem = orderItems[i];

      if (orderItem.cgcloud__Quantity__c > 90) {
        throw new Error("Order Item Quantity shouldn't be more than 90");
      }
    }

    let headerDiscount = orderData.cgcloud__Header_Discount_Percentage__c;
    headerDiscount = headerDiscount && Number(headerDiscount);

    if (headerDiscount && headerDiscount > 15) {
      throw new Error("Header discount can't be greater than 15");
    }

    let deliveryDate = orderData.cgcloud__Delivery_Date__c;

    if (deliveryDate) {
      deliveryDate = new Date(deliveryDate);
      deliveryDate.setDate(deliveryDate.getDate() + 1);
      orderData.cgcloud__Delivery_Date__c = deliveryDate;
    }
  }
}

registerListenerForEnablingOrDisablingEditMode

Register a callback for the edit action. Render the custom LWC component in the read-only or edit mode.

API Version
59.0
Signature
registerListenerForEnablingOrDisablingEditMode(recordId, thisRef, callback)
Example
import { LightningElement, api, track } from 'lwc';
import {
  getOrderData,
  registerListenerForEnablingOrDisablingEditMode
} from 'cgcloud/orderExtensionUtils';

export default class CustomLWC extends LightningElement {
  @api recordId;
  @track isOrderInEditMode = false;
  initialOrderData = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
    registerListenerForEnablingOrDisablingEditMode(
      this.recordId,
      this,
      (isOrderInEditMode) => {
        this.isOrderInEditMode = isOrderInEditMode;
      }
    );
  }
}
orderExtensionUtils Component Example
<!-- CustomComponent.html -->
<template>
    <!-- Sample button -->
    <lightning-button variant="neutral" label="Update Order Field" onclick={updateOrderFieldValue}></lightning-button>
</template>

<!-- CustomComponent.js -->
import { LightningElement, api } from 'lwc';
import { getOrderData, updateOrderData } from 'cgcloud/orderExtensionUtils';

export default class CustomComponent extends LightningElement {
  @api recordId;
  initialOrderData = {};

  connectedCallback() {
    getOrderData(this.recordId).then((data) => {
      this.initialOrderData = data;
    });
  }

  // You can invoke this method with the click of a button
  updateOrderFieldValue() {
    const fieldName = 'cgcloud__Delivery_Note__c';
    const newValue = 'test-note';

    updateOrderData(this.recordId, this, fieldName, newValue);
  }
}

<!-- CustomComponent.js-meta.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>cgcloud__Order__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
    <runtimeNamespace>cgcloud</runtimeNamespace>
</LightningComponentBundle>
If your org has Lightning Web Security enabled, the runtimeNamespace property on the metadata file isn’t required.

Lightning web security is a feature that must be tested before enabling. LWC Security

Note

When setting the runtimeNamespace property in the metadata file, your component can’t use modules from the @salesforce package (any import whose route starts with @salesforce).