0

I want to open a modal for each button inside an Accordion, I think I must set an unique ID for each modal, but I don't know how to do this

My code:

JS

    @track showModal = false;
    @track listaExecutivos = [];
    @api recordId;
    
    openModal(){
        this.showModal = true;
    }
    closeModal(){
        this.showModal = false;
    }
    
    async getListaExecutivos(){
        try{
            this.listaExecutivos = await getListaExecutivos();
            console.log(this.listaExecutivos);
        }catch (error){
            console.error(error);
        }
    }

connectedCallback(){
    this.getListaExecutivos();
}

HTML

<template>
    <lightning-card title="Carteirização KA" icon-name="standard:avatar" variant="base">
        <div slot="actions"></div>
        <div slot="footer"></div>
        <div class="slds-card__body_inner">
            <template for:each={listaExecutivos} for:item="executivo" for:index="index">
            <lightning-accordion allow-multiple-sections-open key={executivo.Id}>
                <lightning-accordion-section label={executivo.Name} name="-MS42bgWMGoUNNz8FtG9">
                    <div slot="actions">
                    </div>
                    <lightning-button key={executivo.Id} class="slds-theme_brand" variant="brand" label="Adicionar Assistente" onclick = {openModal}></lightning-button>
                </lightning-accordion-section>
            </lightning-accordion>
        </template>
        </div>
    </lightning-card>

    <!-- INICIO MODAL NOVO ASSISTENTE -->
<template if:true={showModal}>
    <div>
        <section role="dialog" tabindex="-1" aria-modal="true" class="slds-modal slds-fade-in-open slds-modal_small">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close"
                            alternative-text="close"
                            variant="inverse"
                            size="small" ></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <div class="slds-text-heading_medium">Adicionar Assistente</div>
                </header>
                <div class="slds-modal__content slds-p-around_medium">
                    <lightning-input label="O assistente será adicionado para o seguinte executivo:" value = 'oi' disabled placeholder="d" type="text" variant="standard"></lightning-input>
                    <lightning-combobox label="Assistentes" options={previewOptions} placeholder="Select an Option" dropdown-alignment="left" variant="standard"></lightning-combobox>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button class="slds-theme_brand" variant="brand" label="Salvar"></lightning-button>
                    <lightning-button label="Cancelar" onclick={closeModal}></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
</template>
    <!-- FIM MODAL NOVO ASSISTENTE -->
</template>```
2
  • Why do you want to do this? You know that each modal will overlay the next, and only one will win, right?
    – sfdcfox
    Jan 28, 2021 at 15:07
  • I need to get the value inside "executive.Name" and put it's value in the modal inputField, so when I change the value inside modal, I will also change outside the name of the accordion
    – Marco Huf
    Jan 28, 2021 at 16:08

1 Answer 1

0

In your template, use a data attribute to reference the Id of the executivo:

<lightning-button 
  data-key={executivo.Id} 
  class="slds-theme_brand" 
  variant="brand"
  label="Adicionar Assistente"
  onclick={openModal}>
</lightning-button>

Define a variable representing the currently-selected executive. Modify your openModal() function to set this variable's value based on the key of the target button:

@track atualExecutivo = {};

openModal(evento){
  this.atualExecutivo = this.listaExecutivos.find(e => 
    e.Id === evento.target.dataset.key
  );
  this.showModal = true;
}

Now, in your modal, you can do this:

<lightning-input 
  label="O assistente será adicionado para o seguinte executivo:" 
  value={atualExecutivo.Name}
  disabled 
  type="text" 
  variant="standard"
></lightning-input>

Note: you don't currently have any onchange event handler defined for your lightning-combobox in the modal, so you'll still need to implement something there. What that looks like depends on what you plan to do with those combobox values.

Another note: since you're considering the use of comboboxes inside modals, you may want to look at this thread.

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.