Having an Embedded Spreadsheet Is Handy

Spreadsheets are used everywhere. There’s no doubt that a spreadsheet application like Excel is one of the most popular business applications in the world. It is so easy that anyone can use it, yet it is so powerful that it enables experts in different fields to “code” their business logic in the simplest way possible.

A standalone spreadsheet is great for personal use, but it’s hard to share. That is why Google Sheets was born. With Google Sheets, it becomes much easier to share and collaborate. But people want more — they want to have the sheet directly on their web pages; whether it is a web application, a wiki page, or a company website.

An easy way, like what Google Sheets offers, is to use an iframe to embed a spreadsheet into your web page. With a single iframe tag, you can easily display a spreadsheet on your web page. This is convenient if you wish to just “display” a sheet – but if your web page needs to interact with the spreadsheet, then iframe becomes a barrier you need to cross.

Here, I’d like to introduce an example embedding a Keikai spreadsheet into any web page and interact with your page, no matter on which platform your web application is based, e.g. Node.js, Python, or PHP.

The Story

Assume you have an existing web application managing the inventory of your products, and now you are adding a new feature called “Stock Search.” Users can input some criteria to search for in-stock goods from a database, and the application will show the result in a spreadsheet. Then users can edit the list and process it as needed. For example, a user can search for low-stock goods and edit and export the search result as an XLSX or PDF file and send it to the vendor to place an order. Also when the user clicks on a specific good, it will show the vendor’s contact information on the same row.

Prerequisite

In this article, I will focus on “embedding” a Keikai spreadsheet in an external app, and “the interaction” between the spreadsheet and the external page. Hence, I will assume the Keikai application is already built for “embedding” and “interaction.” The external web page can be served by any non-Java server, e.g. a Node.js server.

For those who are interested in learning to build a Keikai application, please read the following articles:

Architecture

The image below shows the relationship between the two applications and how the process of embedding Keikai works. Under this architecture, you still need to implement spreadsheet-related application logic in Java instead of other programming languages.

The process is:

  1. A browser requests an HTML page of the stock search app.
  2. The HTML page requests a zul file of the Keikai-based app.
  3. Download Keikai-related JavaScript and render Keikai on the page.

Page Layout

I designed the page with the Bootstrap grid system and divided the page into rows.

Only the spreadsheet is embedded with Keikai at <div id="embed">, so it’s empty. Other HTML elements are already created on this page.

How to Embed

Keikai is based on the ZK UI framework, which supports a feature to embed any zul page into HTML via a JavaScript API. Here, I briefly describe the major steps. For details, please refer to ZK Developer’s Reference Guide.

ZK embedded.js

First, you need to load a JavaScript API for embedding the Keikai-based application from a URL:



Source link

Write A Comment