How can we filter the options of an entity select component in the app config? - shopware6

Question

We have an app and we would like to configure it to send out emails. On app activation a mail template type and a default mail template are created. However in the configuration we would like to be able to select which mail template we should send out. Our config.xml looks contains the following:
<component name="sw-entity-single-select">
<name>customerMailTemplate</name>
<entity>mail_template</entity>
<label>Choose which mail template to be sent to customers on reservation</label>
<labelProperty>description</labelProperty>
<placeholder>Select mail template</placeholder>
</component>
Our question has 2 parts:
Given that not all mail templates have a description, is there a way how we can include Type + description as labels? similar to the mail templates overview in the admin settings.
We would like to filter this list to only show mail templates of a certain type. I see that this component takes a criteria object but we could only transfer strings from the xml file to the component. Would this be possible?
Having a plugin would allow us to create custom components and add them in the admin, but I don't see how we could do this from an app. If the above are not possible is there a way to create a custom vue component from an app?

Answer 1

Unfortunately neither of those things are possible with apps as of today.
The component has a slot to override the label but since you can't access the template directly with apps, you can only define a single property for the label.
While the component does take a criteria, the config.xml schema is not prepared to take and pass a criteria to the component.
If this is a must-have you could go the route of adding a custom module for you app. This is essentially just an iframe with a source to a page you're hosting. On that page you'd have to build a custom select dropdown. To feed the dropdown with data you request the admin api (with the credentials you received in the app registration process). That's also when you can make use of the criteria filters.
POST /api/search/mail-template
{
"associations": {
"mailTemplateType": []
},
"filters": [
{
"type": "equals",
"field": "mailTemplateType.technicalName",
"value": "order_confirmation_mail"
}
]
}
With the data you received from that endpoint you could then also freely set the labels as you like.
Once the user made a selection you can then either save the selection on your app server or send it back to the admin api, e.g. for storing it in the plugin config.
POST /api/_action/system-config
{
"MyApp.config.customerMailTemplate": "cc4996d68d22421081285fe957f85ec7"
}