Custom buttons *outside* Mavo bar don't work for non-basic actions

[GalinhaLX]

While trying to do a custom nav bar,

I'm not able to make work all functions Edit / save /clear => Works import/export and all others => not able them to properly work

Am I missing something, or is this a bug?

https://codepen.io/GATIGA/pen/OJxrrOW

[LeaVerou]

Hi @GalinhaLX, are you trying to create custom buttons that perform these actions in your app, or insert your own custom button elements in the Mavo toolbar? Which docs are you following?

[GalinhaLX]

I'm trying to create custom buttons that perform these actions in my app

I'm using documentation called "Hide the toolbar completely ", from https://mavo.io/docs/ui

[DmitrySharabin]

Hey @GalinhaLX, 👋🏻

please keep in mind that if you want these buttons to work as expected, you should place them inside the Mavo bar, not anywhere inside the app. That means you need an element with a class mv-bar (and optionally with mv-ui, if you need some default styling) where to put your custom buttons, like so:

<div class="mv-bar mv-ui">
        <button class="mv-save">Store</button>
        <button class="mv-import">Upload</button>
        <button class="mv-export">Download</button>
</div>

See the Flashcards app as a more complex example: https://codepen.io/dmitrysharabin/pen/pYwRXW (lines 7 through 41).

One more thing. Don't add mv-bar="none" to the app root if you don't want to hide the Mavo bar (either provided by Mavo or your custom one) completely.

And another one thing. :) mv-status makes sense only for backends that support authentication (like GitHub, Google Sheets, Dropbox, etc.)

Hope it helps.

[LeaVerou]

@DmitrySharabin Look at the docs @GalinhaLX linked to, the functionality is there for core actions, I think it's just implemented ad hoc, only for those. We should probably support this more globally for any Mavo bar action (including those added by plugins), though not sure how, since some of them cannot work with a single element (e.g. Import requires a hidden file input).

[DmitrySharabin]

Oops. My bad. 😅 Thanks, Lea. I'll remove the comment then.

[GalinhaLX]

Hi, I improved the codepen demo: https://codepen.io/GATIGA/pen/OJxrrOW , but I still don't understand what parameters I need to add.

For example, I tried to add <input class="mv-export" hidden type="file">mv-export</input> and download="mavo1.json" for mv-export, but it doesn't work

What's the right way to do it?

[LeaVerou]

Sorry for not explaining it will enough @GalinhaLX. That doesn't currently work for non-basic actions like import and export. @DmitrySharabin and I were discussing how best to support it.

Until that happens, I think your current best course of action is to have them in the Mavo bar, with custom styling. Sorry about that!

[GalinhaLX]

Thank you @LeaVerou and @DmitrySharabin I wasn't sure if it was an issue or not.