Customize the FormFieldPanel

Technical Support WebViewer
, ,
1

WebViewer Version: 11.2

I tried adding a tabPanel using the same dataElement of ‘formFieldPanel’ but it will not render correctly. Is it possible to extend the built-in panels like the formFieldPanel? Below is the code I am using as a test:
const tabPanel = new instance.UI.Components.TabPanel({
dataElement: ‘formFieldPanel’,
panelsList: [
{
dataElement: ‘defaultFormFieldPanel’,
icon: ‘/path/to/icon.svg’,
render: “formFieldPanel”
},
{
dataElement: ‘extendedFormFieldPanel’,
icon: ‘/path/to/icon.svg’,
render: () => {
const div = document.createElement(‘div’);
div.innerHTML = ‘My custom panel’;
return div;
}
},

                      ],
                      location: 'right'
                    });
                    var panelList = instance.UI.getPanels();
                    const panel = panelList.find(panel => panel.dataElement === 'formFieldPanel');
                    //delete existing panel
                    panel.delete();
                    instance.UI.addPanel(tabPanel);
1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems you’re having trouble extending the built-in formFieldPanel in WebViewer. The issue might be related to how you’re trying to replace or extend the existing panel. Adding custom panels requires a proper setup to ensure the new components are correctly integrated.

Some things you can try:

  • Ensure that the dataElement for each panel is unique to avoid conflicts with existing panels.

  • Check that the render function for custom panels returns a valid DOM element.

  • After deleting the existing panel, verify that the new panel is correctly instantiated and added to the UI.

  • Use the instance.UI.addPanel method to register your custom panel after removing the existing one.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hello @brianjasinski,

Thank you for posting on our forum.

Currently we do not support extending built-in panels with existing APIs to create modified versions of them. When using an existing dataElement, render must correspond to a reserved identifier. For more information, see our helpful guide here: https://docs.apryse.com/web/guides/modular-ui/panels#integrating-prebuilt-panels

In this use case, we would recommend creating a custom panel altogether. You can find out how to do so here: https://docs.apryse.com/web/guides/modular-ui/panels#adding-custom-panels
If you are curious as to how we render the Form Field Panel, you can find our public repo page for it here: https://github.com/ApryseSDK/webviewer-ui/blob/11.4/src/components/FormFieldPanel/FormFieldPanel.js

Let us know if you need further clarification!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.