0

In the below method, the getApprovalOrders returns the appURL which then calls this.handleLoad(obj.Id); to get the approval request Id to return the URL ${baseURL}/detail/${this.approvalId}. The issue is that the appURL is unable to get the URL from the handleLoad method. It doesn't return anything when I try to fetch appURL. What could be the issue?

JS:

    listApprovalOrders() {
        let params = {
            page: parseInt(this._pageNumber - 1)
        };

        this._loading = true;

        getApprovalOrders({
            page: parseInt(this._pageNumber - 1)
        }).then(result => {
            this.orders = result.orders.map((obj, index) => {
                let recordUrl = this.handleLoad(obj.Id);
                return {
                    index: ((this._pageNumber - 1) * LIMIT) + (index + 1),
                    id: obj.Id,
                    poNumber: obj.PoNumber || '-',
                    url: `${baseURL}/OrderSummary/${obj.Id}`,
                    appURL: recordUrl,
                    status: obj.Status
                }
            });
        }).catch(error => {
            console.error('getApprovalOrders', error);
        }).finally(() => {
            this._loading = false;
        });
    }

  handleLoad(orderSummaryId) {
        console.log('I am here in button');
          getApprovalRequestId({ orderSummaryId: orderSummaryId })
            .then(result => {
                this.approvalId = result;
                return `${baseURL}/detail/${this.approvalId}`;
            })
            .catch(error => {
                this.error = error;
            });
    }

HTML:

<td class="text-center" data-label="Action">
   <a class="slds-button slds-button_neutral" href={order.appURL}>View Order</a>
</td>
6
  • You should not be constructing URLs yourself; this is never going to fly since the base URL varies between the UI technologies. Use the NavigationMixin instead which will help you generate appropriate URLs for records and various other page types.
    – Phil W
    Dec 21, 2021 at 14:57
  • Okay thanks but my question is on why the URL or anything is not returned to the appURL for that matter. Dec 21, 2021 at 15:00
  • Was the log that you put printed in console ? And if yes then can you try putting a template if:true = {orders} tag in your HTML file and check.
    – Ashay
    Dec 21, 2021 at 19:17
  • Yes it did print in console. Dec 21, 2021 at 23:46
  • I'm assuming the problem is your handleLoad method contains an asynchronous process, so at the time you're assigning it to recordUrl and return your orders map, it doesn't have a value.
    – Nick C
    Dec 22, 2021 at 3:16

2 Answers 2

0

using the navigationmixin from salesforce to generate your url or to navigate to the detail page: first implement the navigationmixin in you class:

import {NavigationMixin} from "lightning/navigation";
export default class YOURCLASS extends NavigationMixin(LightningElement) {

and get the url like so:

this[NavigationMixin.GenerateUrl]({
    type: "standard__recordPage",
    attributes: {
        recordId: recordId,
        actionName: "view"
    }
}).then((url) => {
    return url;
});

to add this to your code this would be the result of the handleLoad:

handleLoad(orderSummaryId) {
    console.log('I am here in button');
      getApprovalRequestId({ orderSummaryId: orderSummaryId })
        .then(result => {
            this.approvalId = result;
            this[NavigationMixin.GenerateUrl]({
                type: "standard__recordPage",
                attributes: {
                    recordId: this.approvalId,
                    actionName: "view"
                }
            }).then((url) => {
                return url;
            });
        })
        .catch(error => {
            this.error = error;
        });
}
}
0

The issue is the promises need to be resolved. the getUrl function returns a promise, so we add that to a promises array to resolve. Here is some example code. If you were only dealing with one record then you could have used an async function with await, but with more than record use promise all. Await shouldn't be used in a loop in most cases.

const DATA = [
    {
        Id: "0050R00000AVZsgQAH",
        Name: "Test User1"
    },
    {
        Id: "0050R00000AVZsgQAJ",
        Name: "Test User2"
    }
];

@track users;

connectedCallback() {
    this.initialize();
}

initialize() {
    const promises = [];
    this.users= DATA.map((user) => {
        promises.push(this.getUrl(user.Id));
        return {
            ...user,
            name: user.Name
        };
    });
    // Values will be all the urls
    Promise.all(promises).then((values) => {
        values.forEach((value, index) => {
            this.users[index].url = value;
        })
    });
}

getUrl(recordId) {
    return this[NavigationMixin.GenerateUrl]({
        type: "standard__recordPage",
        attributes: {
            recordId: recordId,
            actionName: "view"
        }
    });
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .