Create a custom side panel

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

    • Post Options:
    • Link

    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.

  • 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

  • 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?

  • 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

Need extra support?

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

Learn More

Forum Channels