JavaScript

The JavaScript files reside in the js/ folder and should be included in the template:

<?php
// add one file
script('myapp', 'script');  // adds js/script.js

// add multiple files in the same app
script('myapp', array('script', 'navigation'));  //  adds js/script.js js/navigation.js

// add vendor files (also allows the array syntax)
vendor_script('myapp', 'script');  //  adds vendor/script.js

If the script file is only needed when the file list is displayed, you should listen to the OCA\Files::loadAdditionalScripts event:

<?php
$eventDispatcher = \OC::$server->getEventDispatcher();
$eventDispatcher->addListener('OCA\Files::loadAdditionalScripts', function() {
  script('myapp', 'script');  // adds js/script.js
  vendor_script('myapp', 'script');  //  adds vendor/script.js
});

Sending the CSRF Token

If any other JavaScript request library than jQuery is being used, the requests need to send the CSRF token as an HTTP header named requesttoken. The token is available in the global variable oc_requesttoken. For AngularJS the following lines would need to be added:

var app = angular.module('MyApp', []).config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common.requesttoken = oc_requesttoken;
}]);

Generating URLs

To send requests to ownCloud the base URL where ownCloud is currently running is needed. To get the base URL use:

var baseUrl = OC.generateUrl(`);

Full URLs can be generated by using:

var authorUrl = OC.generateUrl('/apps/myapp/authors/1');

Extending Core Parts

It is possible to extend components of the core web UI. The following examples should show how this is possible.

Extending the `new` Menu in the Files App

var myFileMenuPlugin = {
    attach: function (menu) {
        menu.addMenuEntry({
            id: 'abc',
            displayName: 'Menu display name',
            templateName: 'templateName.ext',
            iconClass: 'icon-filetype-text',
            fileType: 'file',
            actionHandler: function () {
                console.log('do something here');
            }
        });
    }
};
OC.Plugins.register('OCA.Files.NewFileMenu', myFileMenuPlugin);

This will register a new menu entry in the New menu of the files app. The method attach() is called once the menu is built. This usually happens right after the click on the button.

Registering file actions

var myFileListPlugin = {
    attach: function(fileList) {
        var fileActions = fileList.fileActions;
        fileActions.registerAction({
            name: 'exampleActionName',
            displayName: 'Action display name',
            altText: 'Alt Text',
            mime: 'text/plain',
            permissions: OC.PERMISSION_READ,
            iconClass: 'icon-details',
            type: OCA.Files.FileActions.TYPE_DROPDOWN,
            actionHandler: function(fileName) {
                // handle action
            },
            render: function(actionSpec, isDefault, context) {
                // handle rendering
            }
        });
    }
};
OC.Plugins.register('OCA.Files.FileList', myFileListPlugin);

This will register an action for all files having the mime type text/plain.

The permissions property defines which permissions are needed to perform this action. The following permissions are available:

OC.PERMISSION_READ
OC.PERMISSION_CREATE
OC.PERMISSION_UPDATE
OC.PERMISSION_DELETE
OC.PERMISSION_SHARE
OC.PERMISSION_ALL

The type property defines where the action will be displayed. There are currently two options available:

OCA.Files.FileActions.TYPE_DROPDOWN in the 3-dots-menu of the file
OCA.Files.FileActions.TYPE_INLINE in the table row

Setting file actions as default

A file action can be set as default action that will be triggered when clicking on the file. The next example sets the action from above as default:

fileActions.setDefault('text/plain', 'exampleActionName');

As the example shows, this is also possible for specific mime types only.

In case multiple actions have been set as default for one mime type, ownCloud will show a context menu when clicking on the file.