1

I am fairly new to SF, and I am only moderately well-versed in JS in general. I am attempting to create a LWC that will display a URL based on user input. This URL will eventually be used to retrieve an iFrame and display it, however for now, I only need it to display a string with the URL. The problem I am coming across is that the URLs are created when the page loads, so all the values that I attempted to construct the URL with dynamically are static.

I would like to be able to either add a refresh button that changes the URL, or have the URL change in real-time. So far, I have coded in the refresh button but I'm not sure where to go from here. Extensive googling has turned up nothing for what must surely be a relatively simple answer.

Here is my JS:

import {
    LightningElement,
    api,
    track
} from 'lwc';


export default class ReportComponent extends LightningElement {

    // Variables 
    @track salesNum = null;
    @track customerNum = null;
    @track startDate = null;
    @track endDate = null;
    @track orderURL;
    @track averageURL;


    // Event Handlers

    handleSales(event) {
        this.salesNum = event.target.value;
        console.log('Current SalesNum: ' + event.target.value);
    }

    handleCustomer(event) {
        this.customerNum = event.target.value;
        console.log('Current CustomerNum: ' + event.target.value);
    }

    handleStart(event) {
        this.startDate = event.target.value;
        console.log('Current value of Start Date: ' + event.target.value);
    }

    handleEnd(event) {
        this.endDate = event.target.value;
        console.log('Current value of End Date: ' + event.target.value);
    }

    handleOrderSummary(event) {
        this.orderURL = event.target.value;
        console.log('Current value Order URL: ' + event.target.value);
    }

    handleAverageSummary(event) {
        this.averageURL = event.target.value;
        console.log('Current value averageURL: ' + event.target.value);
    }

    // Order Summary Report

    orderURL = 'https://someReportViewer.&salesforce_salesman_number=' + this.salesNum + 'salesforce_customer_number=' + this.customerNum + '&ship_date_begin=1/1/' + this.startDate + '&ship_date_end=' + this.endDate;

    // Average Selling Price Report

    averageURL = 'https://someReportViewer/averagesellingprice&salesforce_salesman_number=' + this.salesNum + 'salesforce_customer_number=' + this.customerNum + '&ship_date_begin=1/1/' + this.startDate + '&ship_date_end=' + this.endDate;


    get getAverageURL() {
        if (this)
            return this.averageURL;
        else
            return null;
    }

    get getOrderURL() {
        if (this)
            return this.orderURL;
        else
            return null;
    }

    refreshComponent(event){
        eval("$A.get('e.force:refreshView').fire();");
    }


}

And the HTML:


<template>
    <lightning-card title='REPORT GENERATOR'>
        <lightning-layout>
            <lightning-layout-item class="numberBox" size="5" medium-device-size="5" padding="around-small">
                <lightning-input text="Number..." label="Salesmen Number" onchange={handleSales}>
                </lightning-input>
            </lightning-layout-item>
            <lightning-layout-item class="numberBox" size="5" medium-device-size="5" padding="around-small">
                <lightning-input text="Number..." label="Customer Number" onchange={handleCustomer}>
                </lightning-input>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout>
            <div class="row">
                <h2 class="header">Start Date</h2>
                <lightning-input class="numberBox" type="date" name="startDate" label="Enter a date..." onchange={handleStart}>
                </lightning-input>
            </div>
            <div class="row">
                <h2 class="header">End Date</h2>
                <lightning-input class="numberBox" type="date" name="endDate" label="Enter a date..." onchange={handleEnd}>
                </lightning-input>
            </div>
        </lightning-layout>
        
</lightning-card>
           <lightning-layout>
        <lightning-card title="Order Summary:" onchange={handleOrderSummary} >
          {getOrderURL}
        <lightning-button label="Get Report..." onclick={refreshComponenet}></lightning-button>
        </lightning-card>
        </lightning-layout>
        <lightning-layout>
        <lightning-card  title="Average Selling Price:" onchange={handleAverageSummary} >
            {getAverageURL}
            <lightning-button label="Get Report..." onclick={refreshComponenet}></lightning-button>
        </lightning-card>
        </lightning-layout> 

</template>

1

Just make this properties as getter like this:


    // Order Summary Report

  get orderURL() {
   return 'https://someReportViewer.&salesforce_salesman_number=' + this.salesNum + 'salesforce_customer_number=' + this.customerNum + '&ship_date_begin=1/1/' + this.startDate + '&ship_date_end=' + this.endDate;
  }

    // Average Selling Price Report

  get averageURL() { 
    return 'https://someReportViewer/averagesellingprice&salesforce_salesman_number=' + this.salesNum + 'salesforce_customer_number=' + this.customerNum + '&ship_date_begin=1/1/' + this.startDate + '&ship_date_end=' + this.endDate;
  }

this will ensure that your URL values are recalculated dynamically. Or you can set new values in renderedCallback

2
  • Fantastic, exactly what I was looking for. Cheers. Jul 19 at 21:25
  • your welcome, good luck in your LWC journey
    – ytiq
    Jul 19 at 21:51

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.