1

I have two properties configured through XML, they are two currencies for currency converter app, so they cannot be the same, but I don't know how to prevent this if a user types the same value for both.

When I try to check for value in setter like this:

 _quoteCurrency;
    @api get quoteCurrency() {
        return this._quoteCurrency;
    }
    set quoteCurrency(value) {
        console.log(`_quoteCurrency ${this._quoteCurrency}`);
        if (value === this.baseCurrency) {
            return;
        }

        this._quoteCurrency = value;
    }

_baseCurrency;
    @api get baseCurrency() {
        console.log(`_baseCurrency ${this._baseCurrency}`);
        return this._baseCurrency;
    }
    set baseCurrency(value) {
        console.log(`_baseCurrency ${this._baseCurrency}`);
        if (value === this.quoteCurrency) {
            return;
        }
        this._baseCurrency = value;
    }

It just breaks the view (stops responding correctly) in AppBuilder when I enter something like that - that shouldn't be allowed!

enter image description here

What I would prefer - on entering same value as for the other property, the current property to clean its value or show some kind of error, but I don't know how to do that. Please help :)

0
4

You can't actually stop the user entering bad data (they could even enter values that are not currency names - you might want to think about using a picklist data source, or even have some apex to provide the details), but what you can do is make sure your component renders a nice big error message instead of the conversion UI in this case. Since the Lightning App Builder directly renders the component, the admin will see the error message (which should also tell the admin what to do to correct the issue).

For example:

_quoteCurrency;
_baseCurrency;
badCurrencies;

@api get quoteCurrency() {
    return this._quoteCurrency;
}

set quoteCurrency(value) {
    this._quoteCurrency = value;
    this.checkCurrencies();
}

@api get baseCurrency() {
    return this._baseCurrency;
}

set baseCurrency(value) {
    this._baseCurrency = value;
    this.checkCurrencies();
}

checkCurrencies() {
    this.badCurrencies = (this.baseCurrency === this.quoteCurrency);
}       
<template>
  <template if:true={badCurrencies}>
    Both quote and base currencies are the same. The design attributes for
    this component need to be updated in the lightning page.
  </template>

  <template if:false={badCurrencies}>
    ...
  </template>
</template>
1
  • yeah, I thought about it too, regarding picklists, I think it wouldn't solve my problem when I have two exactly same datasets - they still be able to select same element in both picklists, thank you for the example – Movsar Bekaev Mar 29 at 2:19
1

you can do something like this

  baseCurrency;
  quoteCurrency;
  handleBaseCurrencyChange(event) {
    this.baseCurreny = event.target.value;
  }
  handleQuoteCurrencyChange(event) {
    if (event.target.value === this.baseCurrency) {
      event.target.value = '';
      this.error = "Don't use the same value for the Quote Currency";
    }
    
    this.quoteCurrency = event.target.value;
  }
    <lightning-input type="text" label="Base Currency" onkeypress={handleBaseCurrencyChange}></lightning-input>
    <template if:true={error}>
        <div class="slds-theme_error  slds-p-around_medium">
            {error}
        </div>
    </template>
    <lightning-input type="text" label="Quote Currency" onkeypress={handleQuoteCurrencyChange}></lightning-input>

This will clean up the value and show error on UI (if you add {error} there)

UPDATE:

This option will only work if you want to control values from UI

2
  • This misses the point that the base and quote currencies are API values set via the design attributes editor in Loghtning App Builder and as such is inappropriate. You don't define inputs in your component template for such a case. – Phil W Mar 28 at 17:14
  • ye, you're right need to read more carefully, mb. I'll update the answer to remove confusion. Thanks for correction – ytiq Mar 29 at 6:36

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.