1

I have a reusable modal component where I can pass content into a slot. I've added an instance of it on my page, like:

<c-modal>
    <slot>Sample modal content</slot>
</c-modal>

I also have a datatable with rows of user data. I want to add a button in the last column to view details of the row the button is in. When I click that button, I want it to open the modal I have (above) but dynamically populate data in the main content (right now it's obviously just hard-coded text "Sample modal content").

For example, clicking the button in one of the rows would open the modal with this content, for example:

You've selected user with id 39. The user's name is John Smith, email jsmith@gmail.com

What's the best way to do this?

(here's what I have so far: https://webcomponents.dev/edit/HzXoPNfny8OZBQ0AKoLT/src/todo.html)

5
  • What specifically are you having a problem with? I'm not sure I understand your question.
    – sfdcfox
    May 4 at 13:46
  • @sfdcfox - sorry that was a bit unclear - I've updated the question - please let me know if it's still unclear.
    – jbyrd
    May 4 at 14:03
  • 1
    Why not referencing a variable in the slot then updating that variable with javascript on the click? May 4 at 14:13
  • @MartinLezer - well I guess that's simple enough, lol! You mean like in the parent container js class, having variables, let's say selectedUserId, selectedUserName, and selectedUserEmail, and sticking those in the modal markup (like <p>You've selected user with id {selectedUserId}</p>)
    – jbyrd
    May 4 at 14:46
  • 1
    Exactly ! Or having one variable which concatenate the whole message and just adding that variable in the slot. May 4 at 14:51
2

Add your Modal code here so I can see what is wrong, meanwhile here's how my Util Modal slot looks like :

<div class="slds-modal__content modal-body scrollable slds-p-around_medium"
    id="modal-content-id-1">
    <slot></slot>
</div>

and here's how I pass content to my modal from other LWC :

<c-modal show-modal={showModal} is-large="true" onclosemodal={handleCloseModal}>
            <template if:false={showIllustration}>
                <c-util-lwc-datatable 
                columns={columns}
                records={data}
                onactionclicked={showPdf}
                show-search-box={showsearchbox}
                total-records={totaldata}
                show-pagination={showpagination}
                >
                </c-util-lwc-datatable>
</c:modal>

and this show lwc data table in modal content.

4
  • I'm actually not looking to have a datatable in the modal necessarily - I'm just looking to dynamically pass row data from a datatable row into a single reusable modal.
    – jbyrd
    May 4 at 14:49
  • yeah regardless of what data you pass in, it doesn't matter. Modal shows whatever you pass in the content. can you post your util modal code so I can see? May 4 at 14:51
  • link is at the end of the question. Right now I'm doing what @Martin Lezer suggested in the comment, and just defining variables in the parent js class and referencing those in the content of the modal slot, so I am at least able to get it to work this way.
    – jbyrd
    May 4 at 14:57
  • @jbyrd I just saw that, thanks, seems like you figured it out. May 4 at 14:59

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.