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)

Improve this question
5
  • What specifically are you having a problem with? I'm not sure I understand your question. 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. 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>) 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

Reset to default
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.

Improve this answer
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. 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. 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. Commented Jan 11, 2022 at 16:50

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.