Integrate SpreadJS in Oracle APEX

Question

Integrate SpreadJS in Oracle APEX

428 views Asked by user3321757 At 25 May 2021 at 09:03

I am new to Oracle APEX, i am using apex version 21.1.0, i just want to upload excel file with password protected, so i have used Spread JS java script plugin, while i am trying to integrate i am getting this below error which attached in screenshot.

I have a Oracle APEX form like below:

I have created one region, and three page items

File Upload type - file
Password Input type - password
Button type - Button

The page properties like below:

I have added the below code in HTML Header

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://www.grapecity.com/spreadjs/demos/en/purejs /node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/spread/source/js/license.js" type="text/javascript"></script>
<script src="https://www.grapecity.com/spreadjs/demos/spread/source/data/excel_data.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("append"),  {calcOnDemand: true});
        spread.fromJSON(jsonData);
        var excelIo = new GC.Spread.Excel.IO();
        document.getElementById('B43349412666678933129').onclick = function () {
            var excelFile = document.getElementById("P2_UPLOAD_FILE").files[0];
            var password = document.getElementById('P2_PASSWORD').value;                                                
            // here is excel IO API
            excelIo.open(excelFile, function (json) {
                var workbookObj = json;                  
                    spread.fromJSON(workbookObj);
            }, function (e) {
                // process error
                alert(e.errorMessage);
                if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
                    document.getElementById('P2_PASSWORD').onselect = null;
                }
            }, {password: password});
        };            
    };
   </script>
  </head>
 <body>
   <div id="append"></div>
 </body>

Please correct me if i am wrong or missed something.

Thanks,

Original Q&A

There are 1 answers

**MESCIUS Team** · Answer 1 · 2021-05-26 19:00:09

I am a Technical Engagement Engineer of GrapeCity supporting SpreadJS. I wanted to note that SpreadJS, as of the current version (V14.1.0), it is not tested for or uses APEX software. If you experience any issues please report them to the SpreadJS team here: https://www.grapecity.com/my-account/my-support/

I was able to integrate SpreadJS to an APEX application following these steps:

We must first include SpreadJS JS and CSS files. When in the App builder select the root element in the tree under the rendering tab, then on the right pane, scroll down through the properties until you find the JavaScript properties section.
Under the JavaScript properties include SpreadJS’s JS and CSS file urls in the specified areas:

Here are the necessary SpreadJS links:

JS:

CSS:

https://www.grapecity.com/spreadjs/demos/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css

Next, create a region named SpreadJS
Within the SpreadJS region, right click, and create the following:

A File Browser type named P1_UPLOAD_FILE
A Password type item named P1_PASSWORD
A Button titled Import with the Static ID being import, the Static ID property can be found under the Advanced properties:

A Sub Region named ss with Static ID set to ss:

Next, besure to select the root element of the tree and navigate to the JavaScript section in the right pane
Initialize SpreadJS under the Function and global variable declaration section. Here is a code snippet I used that will display spreadjs to the ss sub region and trigger the importing using the button, file browser, and password:

GC.Spread.Sheets.LicenseKey = "sjs-distribution key";
window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true});
    var excelIo = new GC.Spread.Excel.IO();
      document.getElementById('import').onclick = function () {
        var excelFile = document.getElementById("P1_UPLOAD_FILE").files[0];
        var password = document.getElementById('P1_PASSWORD').value;
        // here is excel IO API
        excelIo.open(excelFile, function (json) {
            var workbookObj = json;
                spread.fromJSON(workbookObj);
            }
        , function (e) {
            // process error
            alert(e.errorMessage);
            if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
                document.getElementById('password').onselect = null;
            }
        }, {password: password});
    };
}

As I shared previously in my post, please keep in mind that SpreadJS has not been tested within an APEX application so there may be some unexpected behavior. Please reach out to SpreadJS's team if you encounter any issues!

TechQA.

Integrate SpreadJS in Oracle APEX

There are 1 answers

Related Questions in EXCEL

Related Questions in IMPORT

Related Questions in ORACLE-APEX

Related Questions in SPREADJS

Popular Questions

Popular Tags

Trending Questions