ONLYOFFICE Docs working in a single-page-application (SPA)

30 August 2022 By Serge 0 179
Share

ONLYOFFICE Docs is a powerful and versatile solution for your project. It can be easily integrated into a single-page application for demonstrative purposes. This blog post will show you how to integrate ONLYOFFICE Docs into your SPA.

ONLYOFFICE Docs working in a single-page-application (SPA)

 

Prerequisites

Before we begin, let’s make sure that we have all the necessary components ready. Successful integration will require:

  • Running ONLYOFFICE Docs server.
  • A server that can serve documents to our SPA.
  • The single-page application where we intend to use ONLYOFFICE Docs.

For this project, we will install and run ONLYOFFICE Docs as a Docker container. It is the easiest and fastest installation option. However, there are other installation alternatives available.

Setting up the SPA index page

Now we need to set up our SPA. We will be displaying documents, spreadsheets, and presentations on the same page. To do that, we will embed them into a placeholder div and display the requested editor upon clicking the corresponding button.

Note! In the header section, we connected our SPA to Document Server API methods. Where  https://documentserver/ is the name of the server with the ONLYOFFICE Document Server installed.

 

Configuring the SPA

Then we create a JavaScript file where we will be configuring documents displayed in the SPA.

Here’s the configuration of the document editor:

 

In the document section, we specify the fileType, key, title, and url parameters:

  • The fileType parameter specifies the type of the document.
  • The key parameter defines the unique identifier used by the service to recognize the document.
  • The title parameter specifies the name of the document which will also be used as a file name when the document is downloaded.
  • The url parameter defines an absolute URL where the source document is stored.

In the basic section, we configure the documentTypeheight, and width:

  • The documentType parameter defines the document type to be opened.

The word specification is used for opening text documents.

The cell specification corresponds to spreadsheets.

The slide specification is applied to presentations.

  • The height/width parameters define the document height and width in the browser window.

The spreadsheet and presentation editors are initialized accordingly:

Spreadsheet editor:

Presentation editor:

Our configuration contains only the basic and document sections. It is the bare bones needed to display the editors. However, the editorConfig section can also be included. This section allows changing editor interface parameters: opening mode, interface language, additional buttons, etc. Learn more about different sections and additional parameters on our API documentation page.

 

Note! The editorConfig  section includes the callbackUrl parameter which specifies the absolute URL to the document storage service. The callback handler should be implemented by the software integrators on their server. Otherwise, the document saving will not be accessible.

 

Our editors will be displayed in a single div. Every time we click a corresponding button the requested editor will be initialized and loaded. To achieve that, we need to modify our code:

First, we added the destroyEditor method. This method is called to reinitialize the document editor with another configuration. Every time we select a different editor, this method is executed to stop the current editor from displaying in the div.

Then we wrapped each of the editor configurations in an if statement. That allows us to initialize each particular editor by passing “docx”, “xlsx” and “pptx” into the function parameters.

After that, we targeted the button elements and hooked them up to the onclick event with the parameters corresponding to the document, spreadsheet, and presentation editors.

 

Now let’s open our SPA and see how it works!

ONLYOFFICE Docs working in a single-page-application (SPA)

 

ONLYOFFICE Docs working in a single-page-application (SPA)

ONLYOFFICE Docs working in a single-page-application (SPA)

ONLYOFFICE Docs is a powerful yet flexible tool that can be easily integrated into your web application and extend the functionality of your SPA. You can learn more about ONLYOFFICE Docs in the developers’ section of our API Documentation.

Soon we are planning to release React, Angular, and Vue wrappers that might be very convenient and time-saving solutions for your development. Stay tuned for the updates to utilize this feature. Also, feel free to ask questions or share your ideas with us. We are always open to discussion and cooperation. Best of luck in your exploratory endeavors!

Share

Add a comment