I have a panel card stack with several panel grids inside. All working okay.
The dataview bound to one of the panel grids (Shop Load) is used for filtering some grids on slide out panels. They are fired from buttons on a panel card external to the panel stack.
I would like to hide the external panel card until the Shop Load grid on the panel stack is selected.
I tried putting an event on expand/collapse on the Shop Load panel grid, but it doesn’t do anything unless I collapse the panel stack itself (or pop the panel grid out of the stack). It seems that expanding/collapsing the panel stack expands/collapses all the panel grids within the stack.
Sound right? Where’s the event when just selecting the panel grid?
The offsetWidth of controls in the stack is nonzero if and only if you are on that tab. Epicor stores dataviews in trans and updates them with setAsync.
Create an event that is triggered sometime as the form is first loading (e.g. Control On Create). In it, put a row-update action and fill the Expression field with this code (edit the two indicated strings):
((fn) => {
setTimeout(fn, 1250);
})(window.tabStackJS = () => {
const outerElement = document.getElementById('Id of your Panel Card Stack goes here');
function updateVisibility() {
const visible = document.getElementById('Id of any control within the tab of interest goes here')?.offsetWidth > 0;
trans.dataView('TransView').setAsync('hiddenProperty', !visible).subscribe();
}
const observer = new MutationObserver(updateVisibility);
observer.observe(outerElement, { childList: true, subtree: true });
updateVisibility();
});
Then, create an event triggered on DataTable Column Changed of TransView.hiddenProperty, and in it use “{TransView.hiddenProperty}” as the Value for property-set.
I’m trying to find the offsetWidth property in the hierarchy of the panel grid control listing on the debug console.
The function looking at the offsetWidth works well the first time through, but if I click back and forth among the tabs in the stack, it might not fire the event hiding or showing the external control until I actually click down on the grid (and not just the header tab) or refresh the grid.
So, I thought I’d take a look in the neighborhood and see if there’s another property to look at.
Or is there maybe a way to expand every item in the list so I can search for it?
With what I’ve tried, TransView.hiddenProperty consistently tracks whether I’m on the tab, but maybe your tab has components I haven’t tested. Which component’s Id did you type in the string? You could try changing that to another component, such as the Id of the outermost panel-card in the tab.
I have the application running with the layer applied to the menu item. That one works just fine in Edge and Chrome. I tab back and forth among seven tabs, of which three have the external controls showing while the tab is active. It’s working great.
In Edge, the same layer in Application Studio and previewed takes a really long time to show the external control when the tab is changed, like in the order of 20-30 seconds. If you don’t wait that long or until you click somewhere, even in another application like Excel, it just looks like it’s not running.
In Chrome/Application Studio, the external control doesn’t show until you click somewhere. Again, it doesn’t seem to matter where you click.
Weird, but okay since it works when applied to the menu.
Wonder what the difference is? Might it be related to the 1250 ms delay somehow? Dunno.
Interesting. That’s a good thought, increasing the delay can’t hurt (it just means the functionality will take slightly longer to go into effect, but if that solves the problem that’s a worthwhile tradeoff). However, it sounds like a timing issue. You could try replacing “const observer = new MutationObserver(updateVisibility);” with “const observer = new MutationObserver(() => { setTimeout(updateVisibility, 25) });” and/or adding a debounce like so: