Create a custom side panel

Create a custom side panel

Posted by: waldo on 8 November 2021, 5:07 am EST

• 

  waldo

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 November 2021, 5:07 am EST

  Hi,

  How does one create a custom side panel that can be shown/hidden via button or programmatically

  What I did so far are the following

  • Create a button that will show the side panel by adding an entry to config.commandMap
  • Registered a template that contains the UI element of the panel
  • added an entry in config.sidePanels referencing the registered template via uiTemplate and also referencing the commandMap entry via command property. Set showCloseButton and, allowResize to true

  So far what I have is a side panel that shows up right away. Clicking the x button does not hide the side panel. The panel is also not resizable. I also noticed that the commandMap.execute callback function is ran when clicking the command button or making changes to any field in the side panel.

  I tried adding visibleContext to the template and control it via setData() but it does not work to hide/show the side panel.

• 

  mackenzie.albitz

  

  • Post Options:
  • Link
    Copy

  Posted 9 November 2021, 8:53 am EST

  Hi Waldo,

  I am currently working on a support case opened from a member of your team with this same question, case ID: CAS-26611-T3Q0C7.

  To ensure that we have all information and notes on in one place I will be providing further information and support on this within the case.

  Best,
  
  Mackenzie

• 

  narender.n

  • Post Options:
  • Link
    Copy

  Posted 21 June 2022, 3:53 am EST

  Can you please provide solution to the above problem . I also have a requirement similar to this.
  
  Can I also have access to case ID: CAS-26611-T3Q0C7?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 22 June 2022, 4:45 pm EST

  Hi Narender,

  We are sorry but you cannot access the mentioned case. You can refer to the following sample for the solution: https://jscodemine.grapecity.com/share/Cyy-rCNu7EmV6_uPSwXapg/

  Important points:

  1. For the close button, you could add visibleContext:“xxx_visible” to trigger the close button, the “xx” here is the commandName.

  2. For the allow resize, it only takes effect for the side panel on the top for now. because changing the width of the right or left panel will break the whole panel UI.

  Please let us know if you need further assistance on this. We would be happy to help you.

  Regards
  
  Ankit