Passing data between components (embed)

[#1]

I need an error modal that works across the entire site. It will be triggered on different pages depending on different scenarios. 

I wrote a component solely for the modal. Then I embedded the modal in another component. Here is my embed code: 

<sly data-sly-resource="${'myPage-modal' @ resourceType= '/apps/store/components/content/modal',

decorationTagName='div', cssClassName='myPage-modal'}" />

I then dropped this modal onto the main language page. I configured there. It worked fine when I need to trigger the modal in the main page. However, when I need to trigger the model that has the custom class "myPage-modal", the modal is triggered, but the content of the modal is not there. When I checked the page source, I saw two modals there: one is the component that I dropped there and another one is embed one. The data is populated into the main component but not populated into the embed one. I am not sure how to make it work. Have I missed anything in my setup? Any help would be appreciated!

[lwang]

Hi @lwang,

Have you configured the modal component after adding the component(in which this modal component is included) to the page? please share modal component html 

[lwang]

Hi @manjunathh, thank you for the reply! Yes, I have configured the modal component. Here is the html code of my modal

[lwang]

<div class="modal-overlay" hidden> <div class="fitbit-modal-wrapper"> <button type="button" class="exit-dialog"></button> <div class="modal-content"> <h1 class="modal-title">${properties.title}</h1> <p class="modal-description">${properties.description}</p> <div class="modal-cta-group"> <button type="button" class="btn-primary-cta" data-sly-test="${properties.primaryCtaLabel}"> ${properties.primaryCtaLabel} </button> <button type="button" class="btn-secondary-cta" data-sly-test="${properties.secondaryCtaLabel}"> ${properties.secondaryCtaLabel} </button> </div> </div> </div> </div> <sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html" data-sly-call="${templates.placeholder @ isEmpty = wcmmode.edit }"></sly>

[Manjunath_K]

@lwang 

You mean to say in main language page

1. modal component is added & configured
2. also added componentA in which this modal component is embedded & that modal component is configured again with different title etc. fields

when you inspect page source 1st modal component showing configured values but 2nd modal component(which is embedded in componentA) does not showing configured values. is that correct? 

[lwang]

Hi @manjunathh

[lwang]

Yes, I added and configured the modal component in the main language page. I didn't configure the embed modal which is inside another component and there is no dialog for the embed modal. When I view the page source. The main modal (configured one) has the content in it, but the embed modal doesn't have content in it which is only the template.

[Manjunath_K]

@lwang 

If you have not configured embedded modal component then as expected it will show markup with blank title etc. fields which are given configurable in modal component. for example in below screenshot Title component is included in Form component unless we configure title component dialog fields it will not show those configurable text on form component. 

[lwang]

That make sense now. The problem is the embed modal doesn't show up in the parent component. I don't know how to configure it.