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:

Just check the Tab model, everything is explained there:

I’m changing the api for 21 btw https://github.com/nextcloud/server/pull/23164
So it’s a bit more easier to understand.

@skjnldsv Cool, thanks, I wasn’t realizing that this would be done through the constructor. I’ll check it out. My issue is more that it requires async operations for this app (to load app settings). So I’ll probably stick with the current solution: Having the tab be always enabled and then show a helpful message when the app is not active in that folder.

Quick question at the end: Will this change be breaking? So I need to refactor the Vue component again? :sweat_smile:

– Thomas

Yes, but the change is very simple.
You can check it out https://github.com/nextcloud/server/commit/843d799a2e2c884026883e3f41b81066801a877d#diff-91cd7c7f024a3f52536789f769ad017e1b60f17806d42a8342f19f67caaee4ee
https://github.com/nextcloud/server/pull/23164

Btw we have a public channel for community on our company instance, are you in?
If not, you can and ask us questions if you have any for this sidebar migration :slight_smile: