Edit: this tutorial is deprecated, due to changes in Nextcloud 28. There is a new tutorial available for beginners! See Nextcloud
ā original post below-
Hello hello!
We have been working on a tutorial on how to develop a simple files plugin. This tutorial is perfect for everyone who have not developed Nextcloud apps before but who do have a working development environment. (If you donāt have a working development environment yet, then we have a tutorial for that too! See here.)
The tutorial will guide you through the steps to add an extra action if you click on the three-dots icon next to a directory or file:
Hi Daphne,
thank you for the tutorials.
But Iām more looking for a tut, how to connect extern apps like suiteCRM (there is one, but it runs not on the newer Nextcloud 25.0.2/suiteCRM 8.2.2 -versions, also I read on the 7er version it has very few functionality yet).
So a general docs how the connection/authorisation with extern apps works, maybe on the suiteCRM-example would be an idea?
Hey @Daphne,
thank you for the fast reply. I also offer help.
My Boss wants me to have a lot of extern apps connected, so itās great when I can have some tips/docs.
Meanwhile I play a bit with nextcloud and app-skelettons.
I followed the tutorial and it worked without problem. Now though Iām trying to modify the result and despite modifying version number, e.g 0.0.1 to 0.0.2 in appinfo/info.xml and package.json I canāt load the new version in Nextcloud. It would though be the usual development process, namely get some basic scaffolding working, test locally, update, etc until satisfied. Consequently documenting how to update a working app would help a lot.
Thanks for the tutorials, @Daphne! I wish theyād also cover how to run tests. I followed the tutorials but Iāve been struggeling for some time to get phpunit to run in the development environment.
hey, can you give some more details of what you mean you canāt load the app in Nextcloud? Maybe you can outline some exact steps to reproduce with some screenshots?
With the apps in these tutorials you should see the changes appear directly if you are developing in your local Nextcloud environment. No formal update process of upping the version number is necessary for these simple apps. A hard refresh / refresh with cleared browser cache of your browser should suffice to see the changes you made.
Thanks Daphne, Iām not sure why I assumed this was necessary but indeed I restarted from a clean slate, i.e new plugin generated from skeleton, installed it, modified it straight from its location in the container, refreshed the page and voila, the updated code run. Thatās great I now have an environment to iterate fast!
PS: taking the occasion to suggest syntax highlighting on the code files in the tutorial. Even on a short 10 lines example I find it makes understanding a lot easier.
I cannot see the new button action showing up in the contextual menu.
The Javascript file is correctly loaded (it appears in the <head> section of the html with the correct content). Which means the PHP part is working correctly.
But the registerAction JS part seems to have no effect, since no additional button is added.
I have no errors showing up in the console. All the console.debug('---------- directory...) are not showing up.
Nextcloud locally installed on version 28.0.0 dev following tutorial to set up local dev environement with docker.
The console.log calls should only be called as an actionHandler once the user clicked the button. So, unless you see the button in the context menu and click it in the UI, it should not log anything.
I fear there is something else failing. You could add a line like console.log('File filesplugin.js was loaded') to the file which should in fact create a message in the console.
Apart from that, you could check in the dev console of the browser what content is parsed in the js file and set some breakpoint etc eventually (not useful here right now). If the js file is not listed in the console, it is for some reason not found by the browser. You could have a look at the network tab of the file was not found by the browser (404) or similar. This should be visible in the logs as well but you can disable the errors there.
I put some breakpoints in javascript code as you suggested, and everything looks normal. The OCA.Files.fileActions.registerAction seems to do its jobs, i.e. registering the action in the OCA.Files.FileAction.actions array. See screenshot : the three new actions are indeed in this array, after the page is fully loaded, alongside all the other actions.
I put some console.log at begining and enf of file as you suggested, and the code is executed. I also put a breakpoint inside the actionHandler method, but this breakpoint is never reached when I open the three dots menu.
So, from the outside, actions looks to be well registered. But, I still donāt see them on the user interface :
Hi, Iām a new developer to the scene. I am encountering the same issue as @armymen and have obtained the same debugging results. I also tried wrapping the JS code in window.onload, but to no avail. Any guidance would be appreciated. One thing I deviated from the tutorial is that I used a different APP name. The JS script seems to load only when it matches the APP name, but this might not be relevant to the issue under discussion.
Is there an updated tutorial or other kind of example for creating a Nextcloud 30 compatible files plugin app? Is it imperative to use Vue or is there some way to add the action menu options with pure Javascript?
Iām trying to update an app that used a tab view and am not finding any clear documentation or examples.
Vue is no requirement. It is just suggested to simplify development. But in fact it compiles down to plain js and css under the hood. So, this should be fine.
I am not sure, I get where you want to go. There is the library @nextcloud/files that provides some functionality. If you wanted to grab deeper into the UI, this might only be possible by altering the actual Vue code in an effective fashion.
