3

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 [email protected]

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
    Commented May 4, 2021 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
    Commented May 4, 2021 at 14:03
  • 1
    Why not referencing a variable in the slot then updating that variable with javascript on the click? Commented May 4, 2021 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
    Commented May 4, 2021 at 14:46
  • 1
    Exactly ! Or having one variable which concatenate the whole message and just adding that variable in the slot. Commented May 4, 2021 at 14:51

1 Answer 1

3

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.

5
  • 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
    Commented May 4, 2021 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? Commented May 4, 2021 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
    Commented May 4, 2021 at 14:57
  • @jbyrd I just saw that, thanks, seems like you figured it out. Commented May 4, 2021 at 14:59
  • @anxiousAvocado, Do you have a working example of a modal with a Data table? I'm working on something very similar and would love to see the code.
    – Bryan
    Commented Jan 11, 2022 at 16:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .