Custom button ribbon

Custom button ribbon

Posted by: pedro.moraes on 27 February 2024, 7:49 am EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 27 February 2024, 7:49 am EST

  Hello, I need to create some new functions in the ribbon, but I would like it to be a styled button, or text. How can I proceed with this?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 27 February 2024, 3:49 pm EST

  Hi,

  You could refer to the following docs on adding a button in a tab: https://developer.mescius.com/spreadjs/docs/spreadjs_designer_component/customizations/add_button_in_tab

  Also, refer to the following docs on the Customizations available in Designer Component: https://developer.mescius.com/spreadjs/docs/spreadjs_designer_component/customizations

  Regards,

  Ankit

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 27 February 2024, 11:03 pm EST - Updated 27 February 2024, 11:08 pm EST

  I need to create a custom component like here

  https://developer.mescius.com/spreadjs/docs/spreadjs_designer_component/customizations/add-custom-component

  but I can’t do it

  the component needs to have a button like this

  

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 28 February 2024, 8:01 pm EST

  Hi,

  Kindly refer to the following sample in which I have added the button similar to the image that you have shared.

  Sample: https://jscodemine.mescius.io/share/1roZQ8j6jUCtgh-1RQPFug/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"%2C"%2Findex.html"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Similar to this, you could add another custom component by overriding various methods as shown in the Docs: https://developer.mescius.com/forums/spreadjs/custom-button-ribbon

  The “css” for the button is defined in the “index.html” file.

  Let me know if you face any issue.

  Regards,
  
  Ankit