Client-side show/hide based on a javascript function

[Pizzadude]

I have a child UX called "Docs" that contains a Tab control with three tab panes.

The Docs UX is launched from one of four parent UXs.

I am attempting to show/hide the tab panes based on which parent UX the Docs UX is launched from.

I have a state variable... e._state.showHideTabs = "" in the Docs UX,

and the value is set in the onRenderComplete event....

var po = {dialog.Object}.getParentObject();
if(po) {

var poAlias = {dialog.object}.parentComponentAlias;

if(poAlias == "BILLTOUX") {

{dialog.object}.setStateInfo({showHideTabs: 'BillToUX'});
}
}

And I have this function....

function showHideTabPanes() {

var showHideStateInfo = ({dialog.Object}.stateInfo.showHideTabs);

if(showHideStateInfo == "BillToUX") {

return "showOnlyCustomerDocs";
}
}

And finally, in the client-side show/hide property for one of the tab panes, I have this....

showHideTabPanes() = "showOnlyCustomerDocs"


All the parent UXs run in a Tabbed UI.

The first time the Docs UX is launched, it works as expected, when launched from any parent.

But once the tab pane is hidden, is will not show again, even when launched from a parent where it is supposed to show (and does show, if the pane has not been previously hidden).

Once hidden, I have to reload the tabbed UI to make it show.

I am sure I am missing something somewhere, or there is a better way to do this.

[Pizzadude]

Re: Client-side show/hide based on a javascript function

Here is a video that demonstrates this...

http://screencast.com/t/O3LQyPwUa

[Davidk]

Re: Client-side show/hide based on a javascript function

The problem you're running into is one of concept and timing.

You've got code in your onRenderComplete event. But... you have code in the show/hide expression as well. The show/hide code runs first... because it is being rendered. Your tab panes are being rendered and firing the show/hide expressions. Then... when all is rendered, the onRenderComplete event is run. This is proven by putting an alert statement into onRenderedComplete and into your function.

I also think it's a little over complicated. Try this as your show/hide function...

function showHideTabPanes() {

	var poAlias = {dialog.Object}.parentComponentAlias;
	
	if(poAlias == "PARENT1") {
		return true;
	}else{
		return false;
	}
}

And in your show/hide expression of your tab pane...

showHideTabPanes()=true

http://www.youtube.com/watch?v=tyiKPDIMHcQ

[Pizzadude]

Re: Client-side show/hide based on a javascript function

David, I started with that approach, and I just tried it again. It seems like it should work, and it obviously does, as your video demonstrates.

But I am still getting the same strange behavior in my UX.

So there must be some other code that is interfering.

I need to track it down.

Thanks for your help.

[Davidk]

Re: Client-side show/hide based on a javascript function

You've removed that onRenderComplete code? You don't need that.
Any Javascript errors? Have you stepped through the code using the javascript debugger?

[Pizzadude]

Re: Client-side show/hide based on a javascript function

I made a simple child UX to test this, and I am still seeing the same behavior.

So it seems that there is nothing in the child UX that would cause this.

I need to do some debugging, but here is another video...

http://screencast.com/t/JthyEEqjuj

[kotinkarwak]

Re: Client-side show/hide based on a javascript function

Pizzadude,
Please find attached.
I have worked through putting together the said scenario from the conversation above as part of my learning AA and so far, I am able to open each tab's child UX which will display designated content based on the parent data. I have an extra tabpane called "granpa 01" which is available throughout. Not sure if it will assist you in figuring out the code.
As from Davidk's suggestion, I am only using the javascript portion but not including

}else{
	return false;

with the tabpanes control similar to this

showHideTabPanes() = "show_parent01"

withParent.zip

[Pizzadude]

Re: Client-side show/hide based on a javascript function

What I found using a very simple UX was that it worked with 2 tabs, but failed when there are 3 tabs.

I used a different method to solve my problem and have moved on.

But I appreciate the response.

[kotinkarwak]

Re: Client-side show/hide based on a javascript function

withParent.zip

I understand. Been beavering away on this for own understanding and have a further update. Did you need to "auto refresh on focus" of the tabbed UI panes? The earlier zip file showed me up in that when revisiting the tab second time around, the whole layout got jumbled up. Anyway here is a fresh one, this time it works and have learnt loads from this exercise. Might be of interest for next person stopping by here.