How to mount a Vue component into Filelist Sidebar Tabview?

Some time ago I created an unpublished app that allows a user to use a simple form to write a specific file to a folder by using the sidebar. Simplified here’s what it does:

  • Registers a new tab view in the sidebar if selected item is a directory
  • Shows a form to enter some information in the tab view
  • Sends the information to a Nextcloud REST endpoint
  • Backend saves a specific file to the folder with the user input properly formatted for an external script

However, I’ve been adapting a lot of code from the versions app back then.

Now I’d like to update the app, because some JS APIs broke over time. But I’d like to do so in a future-proof way. Actually, I’d like to mount a Vue component into a tab view. Is that even possible? Is there any app that does that already?

For example registerTabView is now deprecated. But no-where it says how to register your tab view instead. Core apps still seem to be using it on master. How’s the way forward? Where do I find references to the future of interacting with the filelist?

Also, @skjnldsv, you’ve been editing the sidebar class recently and added the warning or moved it over to a new version (https://github.com/nextcloud/server/blame/cb2695df8d47f9d5b08a7d6f1a9dbc55f63b6e59/apps/files/js/filelist.js#L3700). Hope I’m allowe to ping you. Can you help? :wink:

Hey!

See some example: https://github.com/nextcloud/server/blob/6fcd075730dbd63d5dbb69da0ca5983b51a7240e/apps/files_sharing/src/files_sharing_tab.js
https://github.com/nextcloud/server/blob/4485cb30a1bd4b86492203b20c43e0c8fdd47f71/apps/files_sharing/src/views/SharingTab.vue

Your tab needs to provide a Name and an id



1 Like

Hey! This was such a helpful pointer, thanks a lot! :heart_eyes:

The tricky part was to set up webpack, because the structure is a bit different in the server repository than it would be for a simple app, but it’s do-able.

It feels like a lot less code to interface with the sidebar component than it used to be…

A bit late, but yes! :slight_smile:
Have a look at though https://github.com/nextcloud/webpack-vue-config

That’s really helpful! :slight_smile:

One more question that came up just now: How do I implement the previous canDisplay method?

It seems like there’s a isEnabled method that is being called on the component, but if I pass it as a prop to the component for me it’s not being executed. How does this work? :thinking: