SpreadJS Designer Installation

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

  • 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
  • Replied 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
  • Replied 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
  • Replied 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?
  • Replied 3 September 2020, 10:16 pm 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.
  • Replied 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.
  • Replied 22 September 2020, 9:58 pm 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



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

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



    I have left out <link href="../common/common.css" rel="stylesheet" type="text/css" /> because, I add that, the page seems to hang with a spinner.



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

    Please suggest.

    Thanks
  • Replied 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
  • Replied 24 September 2020, 1:00 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



    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,
  • Replied 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