Oracle Content Management Sites Component - Dynamic Resize of the Properties Panel

Oracle Content Management Sites Component - Dynamic Resize of the Properties Panel

In OCM Sites within a custom component, I needed to add a tab set panel to simplify the editor experience breaking the properties into two tabs "Custom" and "Advanced" but as part of this I also needed to auto-update the iframe settings properties height to prevent either a double scrollbar or having to scroll past a lot of whitespace to get to additional OOTB component settings..

OOTB when you create a new local component it adds the following custom ko.bindingHandlers.scsCompComponentImpl binding code and comment that it will refresh the parent frame within the settings.html - but I couldn't get this to execute nor find it in the documentation for the SitesSDK.setHeight method?

💡
If anyone can shed some light maybe it's some old code that sneaked in from a prior update? You can see methods and documentation here for the Sites SDK -
https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/sites-sdk-reference1.html

Here's what I tried

With the SitesSDK there is a method "setProperty" where you can set the frame height - however; when I tried it the console logs errored with a message saying you can't use this approach to change the settings panel height...  

So back to the drawing board.. Instead I just did it the old fashioned way grabbed the parent iframe and set it's height and updated the parent element max-height style.

I applied this call after the initialize method and also on the tab onclick event.

// note that viewModel is initialized and can start saving data
self.initialized(true);

//force update of settings height
updateHeight();

Hopefully this snippet/Gist helps you if you need to update the settings panel height..