Uibuilder toast message

[magicman]

hi,
I am using uibuilder v5 and want to use toast messages I am using the vue template

when i inject this:-
{
"componentRef": "globalNotification",
"options": {
"noAutoHide": true,
"title": "Buttered, Yum!",
"variant": "warn"
}
}

A toast message flashes up but then goes off

not sure what i am doing wrong?
any help would be appreciated
Thank you

[TotallyInformation]

Hi, which version of the client library are you using? The "new" client library does not include the toast functions currently as I wanted to remove all Vue references to keep things clean and I also decided that, for now at least, I wanted to avoid putting UI stuff directly into the library. Rather, the better way seems to be to provide additional web components that are reusable. This keeps the uibuilder client as slim and efficient as possible.

If you are using the older library - which still works fine but is not likely to get more than bug fixes now - still includes both a bootstrap-vue specific toast feature and a raw DOM version for those people not using Vue.

Here is an example toast from my regression test pack as a working example:

Check that you aren't getting any console errors in the browser.

[magicman]

hi @TotallyInformation i am using the new library ok i will look at other options to achieve what i need , thank you for replying

[UnborN]

If you are using Vue2 .. check out bootstrap-vue Toast components

[magicman]

Thank you @UnborN just not sure how to incorporate then into my uibuilder but am working on it

[TotallyInformation]

I you are basing off one of the standard templates, you probably already have bootstrap-vue and all that does is add some nice styles and some useful new components whose tags all start <b-?????>

Toast | Components | BootstrapVue (bootstrap-vue.org)

All the old uib client was doing was detecting whether you were using Vue and bootstrap-vue and if so, sending an appropriate message would dynamically create a toast on screen. If not, it dynamically added something similar just using standard HTML.

For the new client, if you are using bootstrap-vue (or indeed any other framework that has a toast component or perhaps a dialogue component) - you can do something similar by using the dynamic content feature.

BTW, a toast is simply a nicely formatted non-modal dialog box overlaid on the rest of your UI. Often in the top-right corner. Typically, you can have multiple toasts showing at the same time. So you can fairly readily reproduce toasts using dialog boxes and some positioning.

[magicman]

Thanks for the reply @TotallyInformation and i have indeed used the dialog box approach and looks real good , ty for your input