SCell Web Control
Embedding SCell into a website 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 contentjpro.scell.workbook.loaded
- raised when a new document is loadedjpro.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.