Get an Office Editor into your OutSystems apps with WOPI

OutSystems

OutSystems is a low-code application platform. A visual development environment supporting your complete application development lifecycle. Low code means that you still can use custom code whether it be JavaScript on the frontend or C# on server-side.

WOPI — Web Application Open Platform Interface

The Web Application Open Platform Interface is a protocol specification by Microsoft. It defines a set of operations to integrate Office for the Web with your application. In other words — WOPI lets Office for the Web read and edit documents that are served by your service.

  • LibreOffice Online by The Document Foundation. A complete open-source Office Suite.
  • Collabora Online — A LibreOffice based enterprise-ready Office Suite.
  • ONLYOFFICE — A complete Office Suite with full support for the Microsoft Office document format (OOXML).
  • Office for the Web Cloud service requires you to become a member of the Office 365 Cloud Storage Partner Program. Integrating with Office for the Web Cloud service is only applicable if you build a SaaS product as ISV.
  • Office Online Server (Self-Hosted) requires you to have access to the software download and needs some preparations before you can use it.

ONLYOFFICE

ONLYOFFICE by Ascensio System SIA offers a powerful office suite that comprises online editors for text documents, spreadsheets, and presentations highly compatible with Microsoft Office and OpenDocument file formats. ONLYOFFICE provides users with multiple editing tools and collaborative features ensuring greater team workflow, and seamless work with complex formatting and objects within your web solution.

The big picture

For ONLYOFFICE to render documents from our application, we need the following building blocks:

  • WOPI Host — The host is an exposed REST API with operations for serving and saving files. In OutSystems this is a set of exposed REST endpoints.
  • WOPI Client — A running instance of ONLYOFFICE. We are going to use the official ONLYOFFICE docker image for that.
  • WOPI Host Page — A web page which does the connection between the host and the client.

Setup development environment

Before we step through the OutSystems reference implementation we must make sure that you have a running development/tryout environment. This is what you need.

Run ONLYOFFICE Docker Desktop

To run an ONLYOFFICE docker container first create some local directories e.g.

  • C:\dev\onlyoffice\logs
  • C:\dev\onlyoffice\data
  • C:\dev\onlyoffice\lib
  • C:\dev\onlyoffice\db
docker run -it -d -p 80:80 --restart=always \
-v C:\dev\onlyoffice\logs:/var/log/onlyoffice \
-v C:\dev\onlyoffice\data:/var/www/onlyoffice\data \
-v C:\dev\onlyoffice\lib:/var/lib/onlyoffice \
-v C:\dev\onlyoffice\db:/var/lib/postgresql onlyoffice/documentserver
ONLYOFFICE Welcome Page

Enable ONLYOFFICE WOPI Support

By default, WOPI support is disabled, so we need to activate it first and set some additional configurations. Start Visual Studio Code with Docker extensions installed and open the file at

/etc/onlyoffice/documentserver/local.json
{
"services": {
"ipfilter": {
"rules": [
{
"address": "*",
"allowed": true
}
],
"useforrequest": true,
"errorcode": 403
}
...
{
"services": {
"CoAuthoring": {
"autoAssembly": {
"enable": true,
"interval": "0m",
"step": "0m"
}
...
{
"wopi": {
"enable": true
}
...
Connect to container terminal
sudo supervisorctl restart all

OutSystems Reference Implementation

You can download the reference implementation application from the Forge. Available here

Application Modules

The reference implementation consists of several modules and should give you a starting point for your own solution to adapt and extend.

  • DocumentStore_CS — A simple implementation of a document storage provider using OutSystems entities to store documents.
  • DocumentStoreUtil_EXT — An extension module to parse a filename. There is only one action which extracts the extension of a document and determines the MIME type based on the extension.
  • WOPI_API — Is the implementation of the WOPI Host. Contains several REST endpoints to Get, Update, Lock and Unlock a document.
  • WOPIUtil_EXT — An extension with an action to validate the “Proof” sent by Office with every request.
  • WOPI_LIB — This library contains a single UI widget to use on the WOPI Host Page.
  • WOPIDemo — A small demo application bringing all pieces together.

Configure the application

Before running the application there are some configuration settings to set. The WOPI_API module exposes some site properties for that.

  • WOPI_ClientBaseUrl — Is the full url to your ONLYOFFICE Wopi Endpoints. When running locally in Docker Desktop this must be set to http://localhost/hosting/wopi.
  • WOPI_HostBaseUrl — Is the full url to your environment's WOPI REST endpoints. Should be https://<DNS of your OutSystems environment>/WOPI_API/rest
  • value to WOPI_Key
  • modulus to WOPI_Modulus
  • exponent to WOPI_Exponent
  • oldvalue to WOPI_KeyOld
  • oldmodulus to WOPI_ModulusOld
  • oldexponent to WOPI_ExponentOld

Tryout

Start the demo application and upload an office document using the Upload Document button. Then click on the name of the document to open it in ONLYOFFICE.

Demo Application
Word Document in Edit mode

WOPI REST Endpoints

Open the WOPI_API module, go to Logic tab and expand the exposed WOPI REST service.

  • CheckFileInfo — Whenever ONLYOFFICE needs to load a document, this endpoint is queried first. The endpoint returns basic configuration data and information about the document itself.
  • GetFile — This endpoint returns the actual binary data of a document.
  • PutFile — Whenever a document is saved this operation receives the binary data.
  • FileOperation — Is primarily used for Locking and Unlocking a document.
  • Retrieves the Proof headers from the request
  • Validates the Proof — provided by the WOPIUtil_EXT module
  • Parses and validates the access token of the request
  • Performs a login of the user given in the access token. (From System).

Document Store

The reference implementation contains a simple document storage using entities — DocumentStore_CS. Personally, i recommend storing documents in an Object Storage. Examples are

WOPI Host Page

Now for the most interesting part. The WOPI Host Page. Open the WOPIDemo Reactive Web, the WOPI_LIB and the WOPI_API module in Service Studio.

  • WOPI_GetDocumentAccessCode — This one creates an access code which is needed by our REST endpoints to identify the user. The access code is handed over to ONLYOFFICE. But! ONLYOFFICE does nothing with the access code but includes it into every request to our API.
  • WOPI_GetDocumentActionUrl — This constructs an URL for letting ONLYOFFICE know what application (Word, Excel, Powerpoint) to open and in what mode (view or edit).

--

--

Head of Citizen Development & Low Code Practice at ISD FENIQS.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stefan Weber

Stefan Weber

Head of Citizen Development & Low Code Practice at ISD FENIQS.