Parameterize WebComponent

General
1

Hello,

I do have the following WebComponentExporter (Vaadin 24.3.12):

public class NewsletterSubscriptionExporter extends WebComponentExporter<NewsletterSubscription>
{
    public NewsletterSubscriptionExporter()
    {
        super("newsletter-subscription");
        addProperty("media-url", "").onChange(NewsletterSubscription::openWidget);
    }

    @Override
    protected void configureInstance(WebComponent<NewsletterSubscription> webComponent,
                    NewsletterSubscriptionExporter newsletterSubscriptionExporter)
    {
        // Not needed...
    }
}

On the other side I try to use this component in some javascript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type='module' src="/vaadin-app/web-component/newsletter-subscription.js"></script>
    <title>Backoffice</title>
</head>
<body>
    <h1>Backoffice</h1>
	<button onclick = "openMediaWidget()">Open Newsletter Subscription</button>
	<div id="div1" style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">	    
        
    </div>
	
	<script type="text/javascript">
		function openMediaWidget() {
			const parentDiv = document.getElementById("div1");

			const existingWidget = parentDiv.querySelector("newsletter-subscription");
			if (existingWidget) {
				parentDiv.removeChild(existingWidget);
			}
		  
		    const mediaWidget = document.createElement("newsletter-subscription");
			mediaWidget.setAttribute("media-url", "hallo");
			mediaWidget.setAttribute("style", "width: 80vw; height: 80vh;");
			parentDiv.appendChild(mediaWidget);
		}
	</script>
</body>
</html>

The problem now is that the widget is opening but the parameter media-url is not set. How can I open a WebComponent with a parameter or at least change it?

Thanks,
Karsten

2

I found the solution on my own:

const mediaWidget = document.createElement("intershop-mediawidget");
mediaWidget["media-url"] = "work/63649419-f605-4017-82f6-20836db88c50.webp";

With this the openWidget function is triggerd.

1 Like
3

Also check the web component properties chapter for more information if you need to pass information to the component