Load child UX in parent panel and set active panel in child

[gregincolumbus]

I am using a complex hierarchical menu (sql based) that uses 3 levels of nesting and want to minimize the number of ux components I need so selecting a nested menu item to go to a specific panel card is important in allowing me to break things down a bit without adding lots of UX components

I am loading a child UX in a panel in my parent UX via a JavaScript action. When loading it I am giving the child UX an explicit alias ('MYCHILDUX'). After loading the child and setting focus to the panel in the parent I am adding an inline javascript step as part of the JavaScript Action (and running the actions synchronously)

var cObj = {dialog.Object}.getChildObject('MYCHILDUX');
 cObj.panelSetActive('PANELCARD_2');

When I run the JavaScript action I get this error:

Object doesn't support property or method 'panelSetActive'



If I remove the child panel set active code from the Javascript action and place the code on a button in the parent AFTER the JavaScript action has run, the code works fine.


Any suggestions?

Thanks!

[Nate Mitchell]

Re: Load child UX in parent panel and set active panel in child

Greg, just ran a quick test and got the same result.

By adding a set timeout method around your js it fired as expected, which tells me it's a timing issue.

Can't tell you why, but can at least confirm it isn't just you!

[Davidk]

Re: Load child UX in parent panel and set active panel in child

You should always test for the object you're getting...

var cObj = ...
if(cObj){
...
}

That'll trap the error nicely, but doesn't help get what you want.

cObj probably just isn't there yet because it takes a bit of time to load. Your button test proves that.

You could try the Embended Component Definition property "onLoadComplete Javascript".

This way you'll be sure that the child ux is loaded and ready.

But... you need to set a specific panelCard depending on who loaded the child. So, where ever you're loading the embedded component, set a {dialog.Object} namespace variable...

{dialog.Object}.__loadChildPC = "PANELCARD_2";

In the onLoadComplete Javascript section, reach back into the Parent, grab this variable, and set the PanelCard.

var pObj = ... get the parent object
if(pObj}{
   var loadPC = pObj.__loadChildPC;
   ...set your PC
}

[gregincolumbus]

Re: Load child UX in parent panel and set active panel in child

Hey Nate....thanks for the tip on the timer....will give that a try. Glad to know its not just me!

[gregincolumbus]

Re: Load child UX in parent panel and set active panel in child

Thanks David....will take a closer look at your suggestion...much appreciated!

[Davidk]

Re: Load child UX in parent panel and set active panel in child

I do use setTimeout() but never for anything that is dependent upon loading or data or a server... you simply don't know how much time you'll need... and it's just waiting to fail. Utilize events or callbacks rather than a guess at how much time something might take... particularly while developing with no load.

[gregincolumbus]

Re: Load child UX in parent panel and set active panel in child

David

Thanks again for your input. The server load will vary greatly but most certainly will have peak times that impact timing....so your advice is good.


I am not using an embedded object so the onLoadComplete event is not available to me (at least as far as I can tell). I am opening a child ux in a panel card in the parent ux. I use the same panel for loading all my child ux components...this keeps my panel number low. If I use embedded components....won't I need to add lots of other panels?

[Davidk]

Re: Load child UX in parent panel and set active panel in child

Then you could use onRenderComplete in the child UX. It really comes down to what the child UX is doing.

[gregincolumbus]

Re: Load child UX in parent panel and set active panel in child

David,

Thank you so much. Placing the code in the onRenderComplete in the child works perfectly and should be reliable regardless of the server load. Much appreciated!