Dynamic Tab selection

0
In our application, we have view and edit pages for each object. In these view/edit pages we have tabs to organize the data. Both View and Edit pages contain the same tabs.    When users go from view page to edit page, we want the tab they were in to be the same tab in the other page.    For example: Let’s say we have an object called Customer. So, we have Customer_Edit and Customer_View pages. In both pages, we have 3 tabs called; Tab1, Tab2, and Tab3. If the user in the Customer_View page is in Tab2 and then presses Edit Customer button (which will open the Customer_Edit page) the Tab2 in Customer_Edit page should be active.    I tried a few Tab Switchers widgets using the tab onclick widgets to change the Tab index numbers. However, could not achieve the functionality as we wanted.    Any suggestions on how we can achieve this result?
asked
4 answers
1

Have a look at the tabswitcher widget: https://marketplace.mendix.com/link/component/2964/Valcon/TabSwitcher this will allow you to achieve exactly what you describe

answered
1

Hi Ayaz,

If marketplace modules aren't working for you can try the following:

1. Have the page opened via microflow. This microflow will create a non-persistent object containing a boolean attribute for "editable". (Default false). Wrap the entire page in a dataview pointing too this object.
2. For each tab, have two containers. Each container has the exact same attributes but show and hide the container based on the "editable" boolean being true or false.
3. For the view container make the attributes editable = false. For the edit container make editable = true.
4. Somewhere on the page, have a switch widget, when clicked, triggers a nanoflow to update the NPE object to either true or false.

This should allow the containers to swap in and out on the page seemlessly and shouldn't take you away from the tab you're on.

answered
0

Have you tried this widget? I think it would work for this kind of what you want to do. https://marketplace.mendix.com/link/component/204732

answered
0

Hi Ayaz,


You can achieve this without using a Tab Switcher widget.

In current Mendix versions, the Tab Container has an Attribute property that can be used to control the active tab programmatically. The attribute must be an Integer and the tab index is 1-based. When the attribute value changes to a valid tab index, the active tab changes accordingly.

For example, add an integer attribute to the object used by both pages:

ActiveTabIndex : Integer

Configure the Tab Container on both Customer_View and Customer_Edit to use this attribute in its Attribute property.

Then the flow would be:

Customer_View
    Tab 1
    Tab 2  <-- user is here
    Tab 3
       |
       | Click Edit
       v
Set ActiveTabIndex = 2
       |
       v
Open Customer_Edit
       |
       v
Tab 2 is active

The important part is that the value needs to be set before opening the Edit page.

For example, if the user is currently on Tab 2, your Edit button can call a microflow/nanoflow that sets:

$Customer/ActiveTabIndex = 2

and then opens Customer_Edit.

Since both pages use the same Customer object, Customer_Edit will read the same value and the Tab Container will open on Tab 2.

I would prefer this approach over the older TabSwitcher widget. The old TabSwitcher implementation is based on an older Tab Container implementation and is explicitly marked as not working from Mendix 9.6 onwards.

There is also a Mendix Community question with essentially the same View → Edit use case, where TabSwitcher was historically suggested. For newer Mendix versions, however, the built-in Tab Container → Attribute property is the cleaner approach.

One thing to keep in mind: if the user can change tabs and you need to remember the current tab automatically, make sure the integer attribute is updated when the active tab changes. Otherwise, you only know the tab you explicitly set before navigation.

So I would model it as:

Customer
 ├── ActiveTabIndex
 │
 ├── Customer_View
 │      └── Tab Container → Attribute = ActiveTabIndex
 │
 └── Customer_Edit
        └── Tab Container → Attribute = ActiveTabIndex

This keeps the tab state with the object and avoids JavaScript or a third-party widget. The Mendix page parameter mechanism can also be used when the tab state should be passed independently rather than stored on the business object.

For your exact example, if the user is on Tab2 in Customer_View, set ActiveTabIndex = 2 before opening Customer_Edit; configure both Tab Containers to use that attribute. That should give you the same active tab on both pages.

answered