I have defined a custom template file referenced via #theme for my custom webform element.
public function getInfo() {
$class = get_class($this);
return [
'#input' => TRUE,
'#process' => [
[$class, 'processWebformElementSeatbooking'],
[$class, 'processAjaxForm'],
],
'#element_validate' => [
[$class, 'validateWebformSeatbookingElement'],
],
'#pre_render' => [
[$class, 'preRenderWebformSeatbookingElement'],
],
'#theme' => 'input__my_webform_seatbooking_element',
'#theme_wrappers' => ['form_element'],
];
}
This input__my_webform_seatbooking_element is rendered fine in the front end, but I get an error when it is rendered in the back end when looking at a submission cause the icons used in the custom front end theme are missing.
Twig\Error\LoaderError: Template "core/themes/seven/assets/icons/icon_minus.svg" is not defined. in Twig\Loader\ChainLoader->getSourceContext() (line 30 of themes/custom/radix_standard/templates/form/input--number.html.twig).
The template file includes a custom input--number.twig template which contains a reference to two SVG files.
<div class="col-12 col-md-6">
{% include '@hw_radix_standard/form/input--number.html.twig' with {
attributes: attributes.addClass('form-number')
.setAttribute('step', element['#step'])
.setAttribute('min', element['#min'])
.setAttribute('max', element['#max'])
.setAttribute('max', element['#max'])
.setAttribute('oninput', "this.value = this.value.replace(/[^0-9]+/g, '');"),
} %}
</div>
I am using a customized radix-theme in the frontend and default seven-theme in the backend.
I would like to render it as plain input field in the backend.
If I put '#theme' => 'input__number'
, I get the plain input field in the back end, but I need a way to use my custom template file in the front end.
I am stuck here. I checked other render elements and webform code.
How is this normally designed to work?
Maybe I am doing it the wrong way round?
Do I have to put a simple twig inside my custom element module and put the fully featured in the radix?