Set focus on tab page via microflow

2
Is it possible to 'switch tab's' by clicking on a microflow button? There is no conditional visibility or anything like that. I have my screen split up in 2 halves, where on the right half of the screen I have 4 tabs (A, B, C, D). I would like to open tab C when I click on a microflow on the left half of the screen. Is something like this possible via some HTML/Java inserts/code? Or any other way Edit: The error message I get when opening the tabloader in Mx 5.19 or above (works in lower versions) An error occurred while handling queued requests Error: mxui_widget_TabContainer_0.applyContext: Error: mxui_widget_TabContent_0.applyContext: Error: mxui_widget_DataView_10.applyContext: Error: tabloader_widget_tabloader_0.applyContext: TypeError: Cannot read property 'getAttribute' of undefined {}
asked
5 answers
3

If you're ok with some JS coding, you can do this.

On your 'tab select' buttons, add a css class to identify them, e.g. 'tab-switcher'. Next, use the tab page name (e.g. 'tabPage1') and add that as CSS class to the button that should activate that tab. So now you have e.g. 2 buttons, 1 with class: 'tab-switcher tabPage1' to activate tabPage1 and 1 with 'tab-switcher tabPage2' to activate tabPage2, etc.

Add a css class to your tab widget to identify it, e.g. 'mytab'.

Add the HTML/ Javascript widget from the appstore, set its content to JavaScript and add the following JS code (note: change the names of the searched classes to your own):

require(
   ['dojo/query', 'dojo/on'],
   function(query, on) {
      query('.tab-switcher').forEach(function(btnnode) {
         //bind a click handler on all elements with css class 'tab-switcher'
         on(btnnode, 'click', dojo.hitch(this, function() {
            //find tab controls with classname 'mytab'
            dojo.query('.mytab').forEach(function(tabnode) {
               //get the tab widget from the node
               var tabWidget = dijit.byNode(tabnode);
               //find first match where name in clicked button class corresponds to tabpage name
               tabWidget.getChildren().some(function(tabpageWidget) {
                  if(dojo.hasClass(btnnode, tabpageWidget.tabName)) {
                     //use the showTab method from the widget to activate the tab
                     tabWidget.showTab(tabpageWidget);
                     return true;
                  }
               });
            });
         }));
      });
   }
);

 

answered
1

Not tested by myself, but did you check out this appstore widget? https://appstore.home.mendix.com/link/app/800/Trivento/Tab-Jumper

Regards,

Ronald

answered
1

I've looked ath the suggestion from Ronald, the Trivento tab jumber https://appstore.home.mendix.com/link/app/800/Trivento/Tab-Jumper before, but this just allowed you to jump left/right.

At some point for Mx 5.13 I had made the 'TabLoader' widget that based on an (integer) attribute switches to the actual tab. So you can configure an Int field, and whenever the value of that integer changes the widget tries to open the tab according to that nr (starting at nr 0).
(our use case was that the user needed to jump to the tab page with the most critical validation messages, so during validation we would change the tab page nr and when refreshing the page with validation errors the user would automatically jump to the field with the error)

I haven't used this widget since 5.13 but feel free to try it out and check if it still works in a later version.

https://github.com/jaspervanderhoek/TabLoader

answered
0

You could maybe make a container visible based on an attribute (which you set through your microflow). You could then have in it a HTMLSnippet rendering as JavaScript using JQuery to find the element and then calling the click() function.

answered
0

Please take a look at the widget I created for this, the TabSwitcher widget. It is Mendix 6 proof and you can set the active tabpane of a tabcontainer by a microflow or an attribute on your context dataview entity.

Please let me know if it works for you!

answered