SCell Web Control

Building SCell web application with scell.online

Step 1 - HTML

The SCell Web Component is made using the jpro project, and to make it work correctly, the following css and JavaScript tags should be added to the target site:

<head>
    ...
    <link rel="stylesheet" type="text/css" href="https://scell.online/jpro/css/jpro-fullscreen.css">
    <link rel="stylesheet" type="text/css" href="https://scell.online/jpro/css/jpro.css">
    <link rel="stylesheet" type="text/css" href="https://scell.online/css.css">

    <script src="https://scell.online/appinfo.js" type="text/javascript"></script>
    <script src="https://scell.online/jpro/js/jpro.js" type="text/javascript"></script>
    <script src="https://scell.online/scelljpro.js" type="text/javascript"></script>
    ...
</head>

Then the main tag:

<body>
...
    <jpro-app href="https://scell.online/app/default" fullscreen="true"></jpro-app>
...
</body>

Now in place of the tag jpro-app will be loaded the SCell web-component hosted on the https://scell.online.

Step 2 — Preparation to managing the content

To manage the content of the SCell Web Component it is necessary to get the instance_id and uploadPort. They can be obtained by custom event jpro.scell.ready:

    document.addEventListener("jpro.scell.ready", e => {
        console.log(e.detail.instance_id);
        console.log(e.detail.uploadPort);
    });

There are some other custom events:

  • jpro.scell.changed - raised every time when there on user changed the content
  • jpro.scell.workbook.loaded - raised when a new document is loaded
  • jpro.scell.alert - raised on some error or other alerts from the SCell

With the instance_id and uploadPort in the js code it is possible to load/download xlsx-files, change different modes and so on.

Step 3 — Opening a xlsx-file

Upload and open xlsx-files with the created SCell Web Component can be done making POST HTTP query used instance_id and uploadPort to the following URL (examples with curl CLI):

curl -X POST "http://scell.online:<uploadPort>/file?instance_id=<instance_id>&read_mode=false" \
-H "Content-Type: multipart/form-data" \
-F "file=@/path/to/your.xlsx"

If read_mode is false the file is opened in editing mode and can be changed.

To download opened file as xlsx, csv or pdf should make GET HTTP query:

curl -X GET "http://scell.online:<uploadPort>/file?instance_id=<instance_id>&type=xlsx" -- output output.xlsx

Step 4 - Comparator mode

The SCell Web Component can compare xlsx-files in side-by-side mode.

The comparator mode is turned on by making POST HTTP query to the following URL:

curl -X POST "http://scell.online:<uploadPort>/comparator?instance_id=<instance_id>" \
-H "Content-Type: multipart/form-data" \
-F "file=@/path/to/your.xlsx"

On this request the SCell Web Component will load posted file and open it next to the existing content on the right side.