0

Sorry, hoping I'm just doing something dumb here, but I'm really struggling with my first attempt at a lightning web component and was wondering if anyone can see what I'm doing wrong.

So my objective here is to simply get the Status of an Order using @wire getRecord. This is to run in a lightning partner community, but it seems to be showing the same outcomes in standard lighting.

Here is some stripped back code.

Wrapper Aura (as it will be a quick action):

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes">

    THIS IS A TEST

    <c:orderActivate orderId="8010k000000XgoDAAS"/>

</aura:component>

LWC HTML

<!-- Order Activate -->
<template>

    <lightning-combobox
            label="How will the order be paid?"
            options={paymentOptions}
            value={paymentOption}
            onchange={handlePaymentOptionChange}
            required
    ></lightning-combobox>

    orderStatus:  {orderStatus}

    isLoading: {isLoading}

        <div if:true={isOption2}>
            <div if:true={wiredOrder.data}>

            <label class="slds-text-heading_medium">
                Please confirm your vendor's details:
            </label>

            <div class="slds-form">
                <div class="slds-text-heading_small">
                    Vendor Details
                </div>
            </div>
        </div>
    </div>
</template>

LWC Controller

import {LightningElement, api, track, wire} from 'lwc';
import {getRecord, getFieldValue} from 'lightning/uiRecordApi';

const OPTION_1 = 'OPT 1',
    OPTION_2 = 'OPT 2';

const PAYMENT_OPTIONS = [
    {
        value: OPTION_1,
        label: "Option 1"
    },
    {
        value: OPTION_2,
        label: "Option 2"
    }
];

//Fields
import FIELD_ORDER_STATUS from "@salesforce/schema/Order.Status";

const ORDER_FIELDS = [
    FIELD_ORDER_STATUS
];

export default class OrderActivate extends LightningElement {

    @track
    paymentOptions = PAYMENT_OPTIONS;

    @track isOption2;

    @api orderId;

    @wire(getRecord, {recordId: '$orderId', ORDER_FIELDS})
    wiredOrder;

    get isLoading() {
        console.log("isLoading", this.wiredOrder.data);
        console.log("isLoading", this.wiredOrder.error);
        return !this.wiredOrder || (!this.wiredOrder.data && !this.wiredOrder.error);
    }

    __paymentOption;

    connectedCallback() {
        console.log(ORDER_FIELDS);
        console.log(this.orderId);
    }

    get orderStatus() {
        console.log(getFieldValue(this.wiredOrder, FIELD_ORDER_STATUS));
        console.log(JSON.stringify(getFieldValue(this.wiredOrder, FIELD_ORDER_STATUS)));
        return getFieldValue(this.wiredOrder, FIELD_ORDER_STATUS);
    }

    handlePaymentOptionChange(event) {
        this.__paymentOption = event.detail.value;
        if(!this.__paymentOption) {
            this.option2 = false;
            return;
        }
        if(this.__paymentOption === OPTION_2) {
            this.option2 = true;
            return;
        }
        this.option2 = false;
    }

    errorCallback(error, stack) {
        console.error(error, stack);
    }

}

So what happens is the console prints this on connectedCallback():

Array [ "Order.Status" ]
orderActivate.js:4:1801
8010k000000XgoDAAS orderActivate.js:4:1816
Proxy { <target>: {}, <handler>: {…} }
orderActivate.js:4:1873
{} orderActivate.js:4:1921
isLoading undefined orderActivate.js:4:1624
isLoading undefined

The "orderStatus" in the HTML prints as [object Object] and isLoading returns as true.

Then when Option 2 is selected the following prints to the console and there is no change on the page:

Object { "InstrumentationResult :  ( RECEIVED = 9 , Topic = AILTN )  , TracingResponse : ( AsyncResults )": {…} }
BeaconLibrary.js:35:44
Proxy { <target>: {}, <handler>: {…} }
orderActivate.js:4:1873
{} orderActivate.js:4:1921
isLoading undefined orderActivate.js:4:1624
isLoading undefined

Its almost like the "$orderId" in the getRecords function never gets passed through. However, this parameter is set no later than the connectedCallback as is shown in the console.

This is driving me mad, as it appears correct as far as I can tell. The order record here definitely exists and is visible to the user.

Any help would be much appreciated

4

added from comments:

In this link, they did not actually miss fields, its shorthand notation for Object initializer in ES2015

So, both below options are valid:

var o = { 
  a: a,
  b: b,
  c: c
};

is same as below in ES2015

var o = {a, b, c};

  1. You are missing fields attribute in getRecord
  2. Wired service returns data and error, so you need to pass the data from getRecord to getFieldValue:

getRecord:

@wire(getRecord, { recordId: '$orderId', fields: ORDER_FIELDS })
wiredOrder;

order status getter:

get orderStatus() {
    if (this.wiredOrder.data) {
        let fieldVal = getFieldValue(this.wiredOrder.data, FIELD_ORDER_STATUS);
        console.log(fieldVal);
        console.log(JSON.stringify(fieldVal));
        return fieldVal;
    }
    return '';
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.