How to mount a Vue component into Filelist Sidebar Tabview?

šŸ’» Development
1

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:

2

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
3

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ā€¦

4

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

5

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:

6

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.

7

@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

8

Yes, but the change is very simple.
You can check it out Move Files Sidebar to proper javascript standard Ā· nextcloud/server@843d799 Ā· GitHub
Feat/files sidebar cleanup standards by skjnldsv Ā· Pull Request #23164 Ā· nextcloud/server Ā· GitHub

9

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: