Tutorial for starting app developers: Developing a simple files plugin

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:


Figure 1: “My directory action” added.


Figure 2: “My file action” and “My pdf action” added.

You can find the tutorial here in the folder ‘Developing a simple files plugin’:
https://cloud.nextcloud.com/s/iyNGp8ryWxc7Efa

How difficult is it?
This is not difficult.

Will there be tutorials for developing other types of apps?
Yes, stay tuned :slight_smile:

Will there be video tutorials?
Yes! As a first step, we are looking for people who want to make screen recordings of the steps.

How to contribute?
See the readme. Basically you can just download the source file, make your proposed changes, upload the file, and write me a mail.

We really hope this will be helpful for some of you :pray:

7 Likes

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 @hermetic ! that sounds like a good idea indeed. I’ll discuss it to see if we can add it to the roadmap for the tutorials :slight_smile: thank you:)

1 Like

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. :wink: :+1:

1 Like

Hi, how does one update their app?

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.

1 Like

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.

1 Like

this is on the roadmap!

1 Like

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.

1 Like

glad to hear it worked for you!

Hello, thank you for this tutorial.

However, it does not work for me.

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.

Can you help me please ? Thanks !

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.

Thank you for your response @christianlupus

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.

On this second screenshot, we can see what options are loaded for the action linked to PDF files. For me, everything looks normal, isn’t it ?

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 :

Any ideas ? Thanks for your help
.

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.

Hi everyone!

Unfortunately, regarding the file actions there was a breaking change in NC 28 which is why this tutorial no longer works and it has been deprecated.

I’m sorry for the trouble; we’re in the process of getting a replacement tutorial out as soon as possible.

Regards,
Sami from Nextcloud

1 Like