Spreadsheet App

From Documentation



Overview

ZK Spreadsheet App is a web-based Excel like application based on the ZK Spreadsheet component. We created it to demonstrate Spreadsheet's numerous powerful features. You can also use this application as a basis of your application and add more functions like authentication.

Please follow these steps to run this application:

  1. Download ZK Spreadsheet App from download page (OSE or EE evaluation).
  2. Unzip the zip file and deploy the Spreadsheet App's WAR file to your application server according to its instruction.
    For Tomcat just put the war file in [CATALINA_HOME]\webapps.
  3. Start your application server and connect it with your browser.
    For Tomcat, just visit http://localhost:8080/zssapp then you can start to experience the power of Spreadsheet App.

After you visit Spreadsheet App, you should see its user interface like the screenshot below:

Zss-essentials-zssapp.png

You might notice that we add a menu on top of Spreadsheet component and 3 leftmost buttons ("New Book", "Save Book", and "Export to PDF") on the toolbar are enabled because we have implemented them in ZK Spreadsheet App.

Features

Here we will focus on those features which we create specially for Spreadsheet App. For the Spreadsheet component's features, please refer to Features and Usage.


File Menu

The "File" menu contains many file operations including load, save, and export.

Zss-essentials-zssapp-file.png

Each menu item and its function description are:

Menu Item
Description
EE Only
New create a book with 2 blank sheets which equals to click Zss-essentials-zssapp-newBook.png on the toolbar
Open or Manage Books open a book list dialog that allows you to open, delete, and upload a file.
Save save current book which equals to click Zss-essentials-zssapp-saveBook.png on the toolbar
Save As save current book as another file
Save & Close save current book then close it
Close close current book
Export export current book as an Excel file
Export PDF export current book as a PDF file which equals to click Zss-essentials-zssapp-exportPdf.png on the toolbar yes


When you select "Open or Manage Books", the dialog below appears and you can open, delete, or upload a book.

Zss-essentials-zssapp-file-booklist.png

Edit Menu

The "Edit" menu has "Undo" and "Redo" item and they also display corresponding action they will perform when you click on them.

Zss-essentials-zssapp-edit.png

Each menu item and its function description are:

Menu Item
Description
EE Only
Undo erase the last change you made yes
Redo revert the effects of the undo action yes


View Menu

The "View" menu can change view effects of current sheet.

Zss-essentials-zssapp-view.png

Each menu item and its function description are:

Menu Item
Description
EE Only
Formula Bar control visibility of the formula bar
Freeze Rows & Columns freeze rows and columns according to current selection. It freezes the rows above and the columns left to the current selected cell. yes
Unfreeze Rows & Columns unfreeze rows and columns yes
Freeze Row shortcut menu to freeze row 1 to row 5 yes
Freeze Col shortcut menu to freeze column A to column E yes


The screenshot below shows a result after selecting "Freeze Rows & Columns" when selection box stays in B2. It freezes the row above and the column left to current selection:

Zss-essentials-zssapp-freeze.png

Configuration

Repository Root

You can assign your own folder as the drive storage via system property.

zssapp.repository.root

For example, in Tomcat server, we can assign the following value into TOMCAT_HOME/conf/catalina.properties. In this case, Cloud Drive folder will be changed into C:\zssapp\books.

zssapp.repository.root=C:\\zssapp\\books

Auto Save

Since 3.8.0

App supports auto save, and it is triggered in the following cases:

  1. Users changes a file content, and time period specified expires.
  2. Last editing user for the book leaves, e.g. open another book or close the browser.
  3. When server shuts down normally.

By default, we save all changes for you every 15 minutes, but you can change this period via configuration. Following example configures the period with 5 minutes.

Example in zk.xml

<library-property>
    <name>zssapp.save.period.second</name>
    <value>300</value>
</library-property>



All source code listed in this book is at Github.


Last Update : 2022/01/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.