How to add content to a tab created at runtime?

I was using the Tab Container widget and I have a use-case where I need to create a new tab on press of a button and populate it with data. I am able to create a new tab by using a javascript action and calling that action using a nanoflow. Javascript action code:   export async function Add_Tab() {     // BEGIN USER CODE     let node = document.createElement('li');     node.setAttribute('role', 'presentation');     node.setAttribute('data-id', '3');     node.innerHTML = `<a href="#" class="mx-name-tabPage4" id="mxui_widget_TabContainer_0_tab-3" aria-controls="mxui_widget_TabContent_3" role="tab" aria-selected="false" data-roving-tabindex="" tabindex="0">Page 4</a><span class="mx-tabcontainer-indicator" style="display: none;">0</span>`;     document.getElementsByClassName('nav-tabs')[0].appendChild(node);     // END USER CODE } Is there a way for me to create a page in mendix, populate the contents based on the context data that I get on the click of a button and then render it using javascript?
2 answers

The trouble with this approach is you are just creating the HTML, but the Mendix application doesn’t know about it, or how to target it. 

If you are only creating a known number of tabs, then you may be able to do something with conditional visibility. You could pre-create all the tab containers, and you then hide them if there is no data to show.


Hi Ridhwik,

I suggest to fetch the data to a datagrid and create a dataview with datasource as Listen to Widget, and inside that dataview you can show all the object related data.

This way you can achieve dynamic population of data for each object, kind of like vertical Tabs.