Dynamic PolymerTemplate

In the Documentation I have to use @HtmlImport as an annotation for a PolymerTemplate. Is there a way to ‘load’ a Template and bind Components later on? The use case is, that I would like to define the components (e.g. textfield1 and button1) and load a Template … like

Template1:

<div id="textfield1"/>
<div id="button1" />

Template2:

<div id="textfield1" />
<hr/>
<h1>Test</h1>
<div id="button1" />

I want to choose the Templated base on the selected data (like customer_id).

What would be the best way to realise it?

Hello Andre,

I think it is possible to add it dynamically too:

UI.getCurrent().getPage().addHtmlImport();
UI.getCurrent().getPage().addJavaScript();
UI.getCurrent().getPage().addStyleSheet();
UI.getCurrent().getPage().executeJavaScript()

You can’t load a PolymerTemplate’s HTML import dynamically - you should have a separate server-side component for each template and use e.g. slots in a parent template to display the child content.

Is there any plan to add this feature? I think it could be useful to have dynamic customer layout (based on Database)

You can have a dynamic content views even as is. For example, you could switch the contents in Java code in the AfterNavigationEvent (see https://vaadin.com/docs/v12/flow/routing/tutorial-routing-lifecycle.html).

You just should consider PolymerTemplate server-side Java classes and their particular HTML imports a package deal. So A.html should be connected to A.java and B.html should be connected to B.java. Otherwise, you may end up in trouble with PolymerTemplate-specific features like template Model or @Id binding. If you don’t use these features, you should just use Component instead of PolymerTemplate.