Log in to start a topic

SpreadJS Designer Installation

Posted by: dave.welch on 2 September 2020, 3:37 am EST

  • dave.welch

    Posted 2 September 2020, 3:37 am EST

    hello,

    I have recently purchased the Spreadjs designer and am having difficulty installing it. Are there installation instructions that come with it? I have gone through the README and the steps do not work.

    Thanks,

    Dave

  • sharad.tomer

    Posted 2 September 2020, 6:22 pm EST

    Hi Dave,

    You could refer to the “To install the SpreadJS designer,” section of the following doc:

    https://www.grapecity.com/spreadjs/docs/v13/readme/installation.html

    Further, could you please explain what is the exact issue you facing?

    Regards

  • dave.welch

    Posted 2 September 2020, 8:27 pm EST

    Thanks for your reply.

    I have SpreadJS installed already and am incorporating it into an application (on AWS) I am building and this is working correctly. I have downloaded the designer (link sent by sales team) including the source code which I was sent and which I have purchased and am trying to install this.

    The installation instructions in the link provided seems to be for a local installation on my machine however I am looking to install the designer and ribbon on to the aws server so I can incorporate it into my app.

    There is no error appearing at present, the readme file with the designer says to do the following:

    How to use
    1. Copy gc.spread.sheets.all...*.min.js to “./src/lib/spread”.
    2. Copy gc.spread.sheets.excel2013white...*.css to “./src/lib/spread”.
    3. Copy gc.spread.sheets.print...*.min.js to “./src/lib/spread/pluggable”.
    4. Copy gc.spread.excelio...*.js to “./src/lib/spread/interop”.
    5. Deploy the whole src folder to web server. such as “localhost:xxx/designer”.
    6. Access “http://localhost:xxx/designer/index.html”.

    However we have completed these steps above and put the files onto the server but the ribbon still doesn’t appear.

    Regards,

    Dave

  • sharad.tomer

    Posted 3 September 2020, 5:58 pm EST

    Hi Dave,

    Sorry, I misunderstood the last time. The link I shared was for the designer application for windows and not for the spread web designer.

    For the web designer, the readme steps you have shared are all the steps you need to correctly host the web designer. It seems like there is some problem with hosting the designer, would you please answer the following:

    • Are you able to access the index page after hosting the designer?

    • Are there any errors on the dev console?

    • Are there any 404 errors in the network tab of dev tools?

    • Are you able to host the designer on a local server like IIS?

  • dave.welch

    Posted 3 September 2020, 10:16 pm EST - Updated 3 October 2022, 1:10 am EST

    Hi - Can you confirm that we must load all js and css files in all of the folders within the src folder onto the web server? See screenshot attached.

    936×676 237 KB

  • sharad.tomer

    Posted 7 September 2020, 5:07 am EST

    Yes, you need to load the js/css files in all folders within the src folder onto the webserver. Also, please note that the folder structure needs to be preserved too.

  • dave.welch

    Posted 22 September 2020, 9:58 pm EST - Updated 3 October 2022, 1:10 am EST

    Hi Sharad,

    I have added all the js/CSS files correctly on the webserver with the correct folder structure.

    …/grapecity/lib/jquery-ui/css/smoothness/jquery-ui-1.10.3.custom.min.css

    …/grapecity/lib/gcui.css

    …/grapecity/lib/spread/gc.spread.sheets.excel2013white.13.1.4.css

    …/grapecity/lib/zTreeStyle/css/zTreeStyle.css

    …/grapecity/widgets/colorpicker/colorpicker.css

    …/grapecity/widgets/fontpicker/fontpicker.css

    …/grapecity/widgets/comboframe/comboframe.css

    …/grapecity/widgets/borderpicker/borderpicker.css

    …/grapecity/widgets/sliderpanel/sliderpanel.css

    …/grapecity/dialogs/dialogs.css

    …/grapecity/dialogs/dialogs2.css

    …/grapecity/dialogs/chartDialogs.css

    …/grapecity/formatDialog/formatDialog.css

    …/grapecity/dialogs/subtotalDialog/subtotalDialog.css

    …/grapecity/dialogs/hyperlinkDialog/hyperlinkDialog.css

    …/grapecity/ribbon/ribbon.css

    …/grapecity/formulaBar/formulaBar.css

    …/grapecity/spreadWrapper/spreadWrapper.css

    …/grapecity/statusBar/statusBar.css

    …/grapecity/contextMenu/contextMenu.css

    …/grapecity/fileMenu/fileMenu.css

    …/grapecity/chart/chartColorPicker/chart-colorPicker.css

    …/grapecity/chart/addChartElement/chartAddChartElement.css

    …/grapecity/chart/chartTypePicker/chartTypePicker.css

    …/grapecity/chart/chartLayoutPicker/chartLayoutPicker.css

    …/grapecity/shape/insertShape/insertShapePopup.css

    …/grapecity/shape/shapeStylePreview/shapeStylePreview.css

    …/grapecity/lib/jquery-2.0.2.min.js

    …/grapecity/lib/jquery-ui/js/jquery-ui-1.10.3.custom.min.js

    …/grapecity/lib/knockout-2.3.0.min.js

    …/grapecity/lib/zTreeStyle/js/jquery.ztree.all-3.5.min.js

    …/grapecity/lib/spread/gc.spread.sheets.all.13.1.4.min.js

    …/grapecity/lib/spread/pluggable/gc.spread.sheets.print.13.1.4.min.js

    …/grapecity/lib/spread/plugins/gc.spread.sheets.pdf.13.1.4.min.js

    …/grapecity/lib/spread/plugins/gc.spread.sheets.charts.13.1.4.min.js

    …/grapecity/lib/spread/plugins/gc.spread.sheets.barcode.13.1.4.min.js

    …/grapecity/lib/spread/plugins/gc.spread.sheets.shapes.13.1.4.min.js

    …/grapecity/lib/spread/interop/gc.spread.excelio.13.1.4.min.js

    …/grapecity/lib/FileSaver.min.js

    …/grapecity/common/app.js

    …/grapecity/common/resources.js

    …/grapecity/common/resources.en.js

    …/grapecity/widgets/gcui/gcui.js

    …/grapecity/widgets/colorpicker/colorpicker.js

    …/grapecity/widgets/fontpicker/fontpicker.js

    …/grapecity/widgets/comboframe/comboframe.js

    …/grapecity/widgets/borderpicker/borderpicker.js

    …/grapecity/widgets/sliderpanel/sliderpanel.js

    …/grapecity/chart/chart-templates.js

    …/grapecity/chart/chartColorPicker/chart-colorPicker.js

    …/grapecity/chart/chartLayoutPicker/chartLayoutPicker.js

    …/grapecity/chart/chartTypePicker/chartTypePicker.js

    …/grapecity/common/colorHelper.js

    …/grapecity/common/util.js

    …/grapecity/common/asyncLoader.js

    …/grapecity/common/metadata.js

    …/grapecity/spreadWrapper/spreadMeta.js

    …/grapecity/spreadWrapper/spreadWrapper.js

    …/grapecity/spreadWrapper/spreadActions.js

    …/grapecity/spreadWrapper/actions.js

    …/grapecity/spreadWrapper/ceUtility.js

    …/grapecity/spreadWrapper/spreadUtility.js

    …/grapecity/statusBar/statusBar.js

    …/grapecity/chartPreviewer/chartPreviewer.js

    …/grapecity/chart/addChartElement/chartAddChartElement.js

    …/grapecity/dialogs/baseDialog.js

    …/grapecity/dialogs/dialogs.js

    …/grapecity/dialogs/dialogs2.js

    …/grapecity/dialogs/chartDialogs.js

    …/grapecity/formatDialog/formatDialog.js

    …/grapecity/dialogs/subtotalDialog/subtotalDialog.js

    …/grapecity/dialogs/hyperlinkDialog/hyperlinkDialog.js

    …/grapecity/formulaBar/formulaBar.js

    …/grapecity/chart/chartSliderPanel.js

    …/grapecity/chart/chartWrapper.js

    …/grapecity/shape/utils.js

    …/grapecity/shape/setShapeWidthAndHeight.js

    …/grapecity/shape/shapeStyleTemplates.js

    …/grapecity/shape/insertShape/insertShapePopup.js

    …/grapecity/shape/insertShape/insertShapePreview.js

    …/grapecity/shape/shapeStylePreview/shapeStylePreview.js

    …/grapecity/shape/shapeSliderPanel.js

    …/grapecity/ribbon/ribbon.js

    …/grapecity/contextMenu/contextMenu.js

    …/grapecity/fileMenu/fileMenu.js

    …/grapecity/index/index.js

    1680×1050 67.5 KB

    I can access them correctly when I see the page-source.

    However, I get below error. The CSS also doesnot look right

    1224×465 19.5 KB

    I have left out because, I add that, the page seems to hang with a spinner.

    1079×526 18.8 KB

    Is there anything I am missing? Why is the Ribbon not appearing?

    Please suggest.

    Thanks

  • sharad.tomer

    Posted 23 September 2020, 10:29 pm EST

    Hi Dave,

    Could you please dev console and network tab for error and share if there are any errors?

    Also please share a zip file of the complete designer code you are using so that we may investigate it and assist you accordingly. Since designer is a private resource, I would request you to create a new ticket on our private support portal(https://supportone.componentone.com) and share the zipped folder there.

    Thank you

  • dave.welch

    Posted 24 September 2020, 1:00 am EST - Updated 3 October 2022, 1:10 am EST

    Hi Sharad

    General

    Request URL: https://my-server:port/ribbon/ribbon.html

    Request Method: GET

    Status Code: 404

    Remote Address: 52.18.153.65:443

    Referrer Policy: strict-origin-when-cross-origin

    Response Headers

    content-language: en

    content-length: 773

    content-type: text/html;charset=utf-8

    date: Thu, 24 Sep 2020 13:49:46 GMT

    status: 404

    Request Headers

    :authority: app.planr.io

    :method: GET

    :path: /ribbon/ribbon.html

    :scheme: https

    accept: /

    accept-encoding: gzip, deflate, br

    accept-language: en-US,en;q=0.9

    referer: https://server:port/page

    sec-fetch-dest: empty

    sec-fetch-mode: cors

    sec-fetch-site: same-origin

    user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Mobile Safari/537.36

    x-requested-with: XMLHttpRequest

    1479×309 23.2 KB

    I can see that the ribbon.html exists in /src/ribbon/ribbon.html

    But the server seems to be trying to access it from a different path. I might be wrong.

    Thanks,

  • sharad.tomer

    Posted 27 September 2020, 8:16 pm EST

    Hi Dave,

    We have posted our response on the support one case, please refer to the same.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.