0

In Step 1 on an Omniscript, I have two text elements: "neighborhood" and "city".

There is also the "Search" button made in LWC. I need it to be disabled only if the fields "neighborhood" OR "city" are empty, but I'm not getting it... Can anyone help me? Here's what I tried to do initially:

The omniscript enter image description here

Preview enter image description here

searchButtonLWC.html

<template>
 <div>
  <lightning-button
            variant="destructive" 
            label="Search"
            onclick={handleClick}
            disabled={disableButton}
            class="slds-m-vertical_medium">
  </lightning-button>
 </div>
</template>

​searchButtonLWC.js

import { LightningElement, api} from 'lwc';
import { OmniscriptActionCommonUtil } from "vlocity_cmt/omniscriptActionUtils";
import { getNamespaceDotNotation } from "vlocity_cmt/omniscriptInternalUtils";
import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
 
export default class searchButtonLWC extends OmniscriptBaseMixin(LightningElement) {
 
    @api neighborhood;
    @api city;
   
    _ns = getNamespaceDotNotation();
    _actionUtilClass;
 
    connectedCallback() {
        this._actionUtil = new OmniscriptActionCommonUtil();
    }
 
    handleClick() {
    }   
 
    get requiredFieldsFilled(){
        return (this.neighborhood && this.city);
    }
 
    disableButton(){
        return !(this.requiredFieldsFilled());
    }
 
}
Improve this question

2 Answers 2

Reset to default
0

You will have to use a getter property here and let lifecycle take care of calling it internally when any change in attribute is detected.

I quickly wrote a small example for you. The getter disableButton will always get called when it sees a change in neighborhood or city and will make it enabled if either of these have value and disable it when both are undefined || null || ""

For eg:

HTML:

<template>

    <lightning-input type="text" label="Search neighborhood" name="neighborhood" value={neighborhood} onchange={handleTextChange}></lightning-input>
    <lightning-input type="text" label="Search city" name="city" value={city} onchange={handleTextChange}></lightning-input>
    <div>
        <lightning-button
                variant="destructive"
                label="Search"
                onclick={handleClick}
                disabled={disableButton}
                class="slds-m-vertical_medium">
        </lightning-button>
    </div>
</template>

JS:

export default class Disablesearchbox extends LightningElement {

    neighborhood;
    city;

    
    handleTextChange (event){
        if(event.target.name==='neighborhood'){
            this.neighborhood = event.target.value;
        }else if(event.target.name==='city'){
            this.city = event.target.value;
        }
    }
    handleClick() {
    }

    get disableButton(){
        return ((this.neighborhood === undefined || this.neighborhood === null || this.neighborhood === "") &&
            (this.city === undefined || this.city === null || this.city === ""));
        
    }

}
Improve this answer
2
  • but in your case, the fields are inside the LWC. On mine they are in Omniscript... I guess It makes a little difference... Commented Jan 16, 2022 at 19:59
  • So in that case, is there an event which gets triggered when neighborhood or city is changing, I believe as these are @api attributes, these should change. This you can write something similar to getter attribute above. Commented Jan 16, 2022 at 20:56
0

I changed

    get requiredFieldsFilled(){
        return (this.neighborhood && this.city);
    }
 
    disableButton(){
        return !(this.requiredFieldsFilled());
    }

To

    requiredFieldsFilled(){
        return (this.neighborhood && this.city);
    }
 
    get disableButton(){
        return !(this.requiredFieldsFilled());
    }
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.