[SalesForce] How to select a element using querySelector that has dynamic name

I have a lightning-button-icon with dynamic name and i want to update its selected attribute based on the name. Can someone tell me how can i do that?

my code (UPDATED):

<lightning-layout-item size="3">
                    <lightning-button-icon-stateful
                        data-class="slelectState"
                        data-index1={inx1}
                        data-index2={inx2}
                        data-id={pair.key}
                        name={pair.key}
                        icon-name="utility:check"
                        selected={selectState}
                        alternative-text="True"
                        onclick={handleSelect}>
                    </lightning-button-icon-stateful>
                    <lightning-button-icon-stateful
                        data-class="UnslelectState"
                        data-index1={inx1}
                        data-index2={inx2}
                        data-id={pair.key}
                        name={pair.key}
                        icon-name="utility:close"
                        selected={unSelectState}
                        alternative-text="False"
                        onclick={handleUnSelect}>
                    </lightning-button-icon-stateful>
                </lightning-layout-item>

I tried this code this.template.querySelector([name="${selectedname}"]) as per @sfdcfox answer here but it gave me null value.

Best Answer

As of now, You can only query elements with the attributes that are exposed on the element - in this case lightning-button-icon-stateful. The attribute name is not directly placed on this element but it is on internal element.

If you want to see what items you can query, look at the following example.

For example

<lightning-button-icon-stateful
                                    data-index1={inx1}
                                    data-index2={inx2}
                                    name={pairkey}
                                    icon-name="utility:check"
                                    selected={selectState}
                                    alternative-text="True"
                                    onclick={handleSelect}>
    </lightning-button-icon-stateful>

When you do console.log(this.template.querySelector('lightning-button-icon-stateful'));

Output in console:

<lightning-button-icon-stateful c-app_app="" data-index1="12" data-index2="13"></lightning-button-icon-stateful>

So we can only do querySelector with attributes data-* (data-index1, data-index2) and c-app_app (auto generated based on class).

It cannot retrieve elements with other attributes using querySelector, so the following will always be null.

console.log(this.template.querySelector('lightning-button-icon-stateful[name="12"]'));

So in short, you can only retrieve data attributes in the given example as other elements are actually placed on internal element.

Reference: How to target LWC by name attribute?

Alternatively, you can query based on DOM element and iterate the result and verify the name. something like this.

this.template.querySelectorAll('lightning-button-icon-stateful').forEach(ele => {
            if(ele.name == selectedname){
                //TODO
            }
        });

Related Solutions

[SalesForce] Get record field values and check if a field is null on LWC connectedCallback

Based on your comments:

I want the variable testIfSiteNull to be set to true (if field Site is not null) when loading the page not after clicking a button

You should be using renderedCallback() here instead of connectedCallback().

From documentation for connectedCallback():

connectedCallback() lifecycle hook fires when a component is inserted into the DOM

whereas renderedCallback() mentions:

Use it to perform logic after a component has finished the rendering phase.

Because you want to populate the field after your component has been rendered, using renderedCallback() will allow you to achieve so. So your JS function will look as:

renderedCallback() {
    console.log('TEST 1: '+this.testIfSiteNull)
    ...
    console.log('TEST 2: '+this.testIfSiteNull);
}

Note: Because your record property is a wired property, so you will be able to access this.record.data in any function only after lifecycle hooks. So if you try to use that in any lifecycle function, you will end up getting undefined exception. From documentation:

The property is assigned a default value after component construction and before any other lifecycle event. The default value is an object with data and error properties of undefined.

[SalesForce] querySelector on inner template element

Not sure how you implemented the code (as you are not showing full related code), but you can try below:

Change handlers/connected callback will be invoked before DOM is loaded, so querySelectors will give null.
Use renderedCallback to access elements and implement logic. BUT you should be very careful to implement manual check whether the intended logic needs to run again when re-rendered.

Below logic implementation will work:

Parent.html:

<template>
    <c-child icon="utility:activity"></c-child>
</template>

child.html:

<template>
    <template if:true={condition0}>
        <div id={uniqueId}>
            <div class="slds-class">
                <span class="slds-avatar slds-avatar_large">
                    <template if:true={condition1}>
                        <span style="font-size:32px;">
                            <i class={icon} lwc:dom="manual"></i>
                        </span>
                    </template>
                    <template if:true={condition2}>
                        <lightning-icon class="sf-icon-class" icon-name={icon} size="medium">
                        </lightning-icon>
                    </template>
                </span>
            </div>
        </div>
    </template>
</template>

child.js:

import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api icon;
    renderedCallback() {
        if (!this.iconStyleSetDone) {
            if (this.icon === 'utility:activity')
                this.template.querySelector('.sf-icon-class').style.background = 'white';
            else
                this.template.querySelector('.sf-icon-class').style.background = 'grey';
            this.iconStyleSetDone = true;
        }
    }
    get condition0() {
        return true;
    }
    get condition1() {
        return true;
    }
    get condition2() {
        return true;
    }
}

Best Answer

Related Solutions

[SalesForce] Get record field values and check if a field is null on LWC connectedCallback

[SalesForce] querySelector on inner template element

Related Topic