- ownCloud Web on ownCloud Server
- Main Navigation on Top
- Collapsible Left Sidebar and New Icons
- Context Menu Accessible via Right-Click
- Easier Document Sharing
- Improved Accessibility
- Deploying ownCloud Web
- Configure Authentication
- Server Configuration
- Configuring ownCloud Web
- Integrate Traditional ownCloud 10 Features in ownCloud Web
- ONLYOFFICE Integration
- Collabora Online Integration
- Configuring the Preview App
- Accessing ownCloud Web
- Enable index.php-less URLs
- Prerequisites
- Configuration steps
- Troubleshooting
- Configure index.php-less URLs
- Prerequisites:
- Enable index.php-less URLs
ownCloud Web on ownCloud Server
ownCloud web is available for ownCloud Server as an app. To ease the transition from ownCloud Server to Infinite Scale, we recommend deploying the new user interface. It can be downloaded from the marketplace as Web app.
ownCloud users will benefit from the following additions and improvements:
Main Navigation on Top
- The most significant change to the basic layout is that the top bar is now instantly recognizable as the main navigation bar. Here you find the app switcher, global search, dark mode and new account menu.
- On the left, you will find the ’app switcher’, which allows you to switch between different applications in the ownCloud interface, such as files and chat tools. It will also be possible to switch to more apps in the future.
- In the middle of the top bar is the search bar. The new global search is prepared for searching not only for files, but also for content in other apps like chat messages.
- On the right side, you can now turn on the new dark mode for ownCloud – an option that many users asked for.
- On the far right of the top bar is the redesigned account menu, which now also shows the amount of storage space still available (personal quota).
Collapsible Left Sidebar and New Icons
The application-specific navigation is located in the left sidebar as before. The sidebar has been made collapsible by request of many users, so that the area of the application main window can be maximized.
For all icons in the sidebar and the main window, we use a new unified design set. In addition, the filetype icons are color-coded for example, PDF files are red, spreadsheets are green and zip archives are yellow.
Context Menu Accessible via Right-Click
The context menu with the most important app functions can now be opened via right click, a usability feature welcomed by many test users. This allows users to perform typical actions even faster, for example, downloading documents or opening documents in the Collabora and OnlyOffice office apps.
Easier Document Sharing
The new Web UI makes sharing content easier. Quick Action icons enable you to open files and folders with a single click. It’s just as easy to invite users as viewers or editors to view or collaborate on documents.
Improved Accessibility
We have added new accessibility features to the ownCloud user interface. The new Web UI can be controlled completely via keyboard, offers improved color contrast for better readability, and supports navigation and operation via screen reader. We are thus meeting the requirements of many users in the public sector, such as educational and government institutions.
In addition to these new features, we also optimized a few other features in the frontend design of ownCloud. These include, among others, the rounded windows and the “shimmer effect” while the data of a directory is loaded from the server.
Deploying ownCloud Web
ownCloud Web can be deployed as an app. Download it from the Marketplace and run the command:
sudo -u www-data ./occ market:install web
Alternatively, log in to the server as admin and install the Web app via the Marketplace app.
Configure Authentication
ownCloud Web works with OAuth2 and OpenID Connect.
If you’re using OpenID Connect, add ownCloud Web as a new client to your identity provider.
If you prefer to use OAuth2, log in as admin, go to the User Authentication settings, add ownCloud Web as a new client and provide the redirect URL: https:///index.php/apps/web/oidc-callback.html .
Server Configuration
A few configuration steps are necessary on the ownCloud 10 server:
- Set the ownCloud Web address so it gets displayed in the app switcher by adding the following line to the config/config.php file:
'web.baseUrl' => 'https:///index.php/apps/web',
While it is possible to make ownCloud Web the default interface, the decision should be carefully evaluated. Features are still being added to ownCloud Web and users might need to use the regular web interface for certain tasks. |
Configuring ownCloud Web
There are a few configuration settings necessary for ownCloud Web to work correctly. Copy the example config below into the config/config.json file (create one if it does not exist) and adjust it for your environment:
< "server" : "https://", "theme": "https:///themes/owncloud/theme.json", "auth": < "clientId": "", "url": "https:///index.php/apps/oauth2/api/v1/token", "authUrl": "https:///index.php/apps/oauth2/authorize" >, "apps" : [ "files", "preview", "draw-io" ], "applications" : [ < "title": < "en": "Classic Design", "de": "Klassisches Design", "fr": "Design classique", "zh_CN": "文件" >, "icon": "swap-box", "url": "https:///index.php/apps/files" >, < "icon": "settings-4", "menu": "user", "target": "_self", "title": < "de": "Einstellungen", "en": "Settings" >, "url": "https:///index.php/settings/personal" > ] >
If you use OpenID Connect instead of OAuth2, you need to replace the «auth» part with the following configuration:
"openIdConnect": < "metadata_url": "/.well-known/openid-configuration", "authority": "", "client_id": "", "response_type": "code", "scope": "openid profile email" >
If any issues arise when trying to access the new design, a good start for debugging is to let a json validator check your config.json file. |
theme to be used in ownCloud Web pointing to a json file in the themes folder
Client ID received when ownCloud Web was added in the User Authentication section by the admin
List of internal extensions to load
Additional apps and links to be displayed in the application switcher or in the user menu
Title visible in the application switcher or user menu, localizable
Use user if the menu item should be displayed in the user menu (defaults to app switcher).
Do not place the config.json file in the app folder. If you do, the integrity check of the app will fail and issue warnings. |
Integrate Traditional ownCloud 10 Features in ownCloud Web
ownCloud features that are not deeply integrated in the regular web interface can be added to the app switcher and to the user menu.
All apps that are listed in the ownCloud app switcher of the regular web interface will be added as links to the app switcher of the new ownCloud Web automatically. All those links will open in a new browser tab on click. |
To add new elements, open the config.json file in an editor, go to the applications section and add entries like the following example:
< "title": < "en": "Custom Groups", "de": "Benutzerdefinierte Gruppen" >, "icon": "settings-4", "url": "https:///settings/personal?sectionid=customgroups" >
This method can also be used to link external sites like help pages. Apps and links will be opened in a new browser tab. |
Entries for the user menu look like this:
This will add a link to the specified URL in the user menu. The link will open in the same tab. If you want it to open in a new tab, remove the line «target»: «_self»,. |
ONLYOFFICE Integration
For ONLYOFFICE there is a native integration available for ownCloud Web when it is used with an ownCloud Server. It fully integrates the ONLYOFFICE document editors and allows users to create and open documents directly in ownCloud Web.
To use ONLYOFFICE in ownCloud Web, you need:
Make sure that ONLYOFFICE works as expected in the regular UI then add the following to the config.json file to make it available in ownCloud Web:
"external_apps": [ < "id": "onlyoffice", "path": "https:///apps/onlyoffice/js/web/onlyoffice.js" > ]
Collabora Online Integration
There is a native Collabora Online integration available for ownCloud Web when it is used with an ownCloud Server. It fully integrates the Collabora Online document editors and allows users to create and open documents directly in ownCloud Web.
Make sure that Collabora Online works as expected in the regular UI, then add the following to config.json to make it available in ownCloud Web:
"external_apps": [ < "id": "richdocuments", "path": "https:///apps/richdocuments/js/richdocuments.js" > ]
Configuring the Preview App
In case there are additional preview providers configured in the backend, there is no mechanism to announce those to the Preview app in ownCloud Web. However, you can add the additional supported mimeTypes to the Preview app by following these steps:
- Remove the «preview» string from the «apps» section in your config.json file.
- Add the following config to your config.json file:
If you already have an «external_apps» section, just add the Preview app to the list. Adjust the «mimeTypes» list to match your additional preview providers.
See Managing Your Preview Settings for advice on how to add preview providers to the backend.
The Preview app needs to be moved from the apps section to the external_apps section because only external apps support additional configuration. There are plans to change the configuration of apps to give you a coherent admin experience in that regard. |
Accessing ownCloud Web
After following all the steps, you should see a new entry in the application switcher called New Design which takes you to ownCloud Web.
Enable index.php-less URLs
Since ownCloud 9.0.3 you need to explicitly configure and enable index.php-less URLs (e.g. https://example.com/apps/files/ instead of https://example.com/index.php/apps/files/ ). The following documentation provides the needed steps to configure this for the Apache Web server.
Prerequisites
Before being able to use index.php-less URLs you need to enable the mod_rewrite and mod_env Apache modules. Furthermore a configured AllowOverride All directive within the vhost of your Web server is needed. Please have a look at the Apache manual for how to enable and configure these.
Furthermore these instructions are only working when using Apache together with the mod_php Apache module for PHP. Other modules like php-fpm or mod_fastcgi are unsupported.
Finally the user running your Web server (e.g. www-data ) needs to be able to write into the .htaccess file shipped within the ownCloud root directory (e.g., /var/www/owncloud/.htaccess ). If you have applied Set Correct Permissions, the user might be unable to write into this file and the needed update will fail. You need to revert this strong permissions temporarily by following the steps described in setting permissions for updating.
Configuration steps
The first step is to configure the overwrite.cli.url and htaccess.RewriteBase config.php options (See config_sample_php_parameters). If you’re accessing your ownCloud instance via https://example.com/ the following two options need to be added / configured:
'overwrite.cli.url' => 'https://example.com', 'htaccess.RewriteBase' => '/',
If the instance is accessed via https://example.com/owncloud the following configuration is needed:
'overwrite.cli.url' => 'https://example.com/owncloud', 'htaccess.RewriteBase' => '/owncloud',
As a second step ownCloud needs to enable index.php-less URLs. This is done:
- during the next update of your ownCloud instance
- by manually running the occ command occ maintenance:update:htaccess (See occ_command)
Afterwards your instance should have index.php-less URLs enabled.
Troubleshooting
If accessing your ownCloud installation fails after following these instructions and you see messages like this in your ownCloud log:
The requested uri(\\/login) cannot be processed by the script '\\/owncloud\\/index.php'
make sure that you have configured the two config.php options listed above correctly.
Configure index.php-less URLs
If you want URLs without the trailing «index.php», e.g., https://example.com/apps/files/ instead of https://example.com/index.php/apps/files/ , you can enable it by following these steps:
Prerequisites:
Log in to the Docker container running ownCloud, and execute the following command on the host system of the appliance:
univention-app shell owncloud
Your web server needs to have the following modules enabled: mod_rewrite and mod_env . If you have not yet enabled these modules, or are not sure if you have, execute these commands:
You need an owncloud.conf in your /etc/apache2/sites-available/ directory.
Open /etc/apache2/sites-available/owncloud.conf in nano, Vim, or your editor of choice, and paste the following:
Alias /owncloud "/var/www/owncloud/" Options +FollowSymlinks AllowOverride All Dav off SetEnv HOME /var/www/owncloud SetEnv HTTP_HOME /var/www/owncloud
Then create a symlink to /etc/apache2/sites-enabled , as follows:
ln -s /etc/apache2/sites-available/owncloud.conf /etc/apache2/sites-enabled/owncloud.conf
Enable index.php-less URLs
Adjust your config.php to look like the following:
'overwrite.cli.url' => 'https://example.com/owncloud', 'htaccess.RewriteBase' => '/owncloud',
sudo -u www-data ./occ maintenance:update:htaccess
Restart or reload your Apache server, by running the following command:
Now you should have index.php-less URLs.