diff --git a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
index 776e705627d..d9fd12ab27b 100644
--- a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
+++ b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
@@ -90,6 +90,9 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, {
columns: 1,
name: 'optionGroup',
items: this.getItems()
+ }, {
+ xtype: 'v-alert',
+ label: i18n._('Please choose an option.')
}]
}]
}];
diff --git a/tine20/Tinebase/translations/de.po b/tine20/Tinebase/translations/de.po
index a89aa5c9e68..5884c893822 100644
--- a/tine20/Tinebase/translations/de.po
+++ b/tine20/Tinebase/translations/de.po
@@ -2401,6 +2401,9 @@ msgstr "Passwort generieren"
msgid "What would you like to do?"
msgstr "Was möchten Sie machen?"
+msgid "Please choose an option."
+msgstr "Bitte wählen Sie eine Option aus."
+
#: js/widgets/dialog/MultiOptionsDialog.js:32
#: js/widgets/dialog/MultiOptionsDialog.js:179
#: js/widgets/dialog/FileListDialog.js:32
diff --git a/tine20/library/ExtJS/ext-custom.js b/tine20/library/ExtJS/ext-custom.js
index 23f3179186a..bbaaac7825f 100644
--- a/tine20/library/ExtJS/ext-custom.js
+++ b/tine20/library/ExtJS/ext-custom.js
@@ -227,6 +227,7 @@ require('./src/widgets/form/FieldSet');
require('./src/widgets/form/HtmlEditor');
require('./src/widgets/form/TimeField');
require('./src/widgets/form/Label');
+require('./src/widgets/form/VueAlert');
require('./src/widgets/form/Action');
require('./src/widgets/form/VTypes');
diff --git a/tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue b/tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue
new file mode 100644
index 00000000000..f3a26e7192c
--- /dev/null
+++ b/tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue
@@ -0,0 +1,13 @@
+
+
+ {{label}}
+
+
+
+
diff --git a/tine20/library/ExtJS/src/widgets/form/VueAlert/index.js b/tine20/library/ExtJS/src/widgets/form/VueAlert/index.js
new file mode 100644
index 00000000000..7557147ddb4
--- /dev/null
+++ b/tine20/library/ExtJS/src/widgets/form/VueAlert/index.js
@@ -0,0 +1,32 @@
+import BootstrapVueNext from 'bootstrap-vue-next'
+
+Ext.form.VueAlert = Ext.extend(Ext.BoxComponent, {
+ vueHandle: null,
+ label: '',
+ props: null,
+
+ initComponent: async function() {
+ const {createApp, h, reactive} = window.vue
+ const {default: VueAlert} = await import(/* webpackChunkName: "Tinebase/vue/VueAlert"*/'./VueAlert.vue')
+ this.props = reactive({
+ label: this.label
+ })
+ this.vueHandle = createApp({
+ render: () => h(VueAlert, this.props)
+ });
+ this.vueHandle.use(BootstrapVueNext)
+ this.vueHandle.mount('#'+this.el.id)
+ },
+
+ beforeDestroy: function() {
+ this.vueHandle.unmount()
+ },
+
+ setText: function(t){
+ // in case the props or vueHandle is not initialized
+ if(!this.props || !this.vueHandle) return;
+ this.props.label = t
+ }
+})
+
+Ext.reg('v-alert', Ext.form.VueAlert)
\ No newline at end of file