I have reworked my previous example using the concepts from this thread (instead of jQuery) and an array, to leverage the power of App Connect.
The concept here is that the page loads with the first tab rendered (and it can’t be removed), then as the user selects menu choices, a tab is added for each menu choice. If a tab already exists, I’d like that tab to be selected. All added tabs can be removed by clicking the close icon.
Each menu choice adds a unique value to the array and the tabs are bound to the array. The close icon removes an entry from the array, so that tab and it’s contents disappear.
I have a prototype here, and it’s working for the most part, but it has a couple problems.
- The tabs are not automatically selected. I’d like them to be selected automatically as they are added or if the tab already exists.
- When you click the close icon, it closes the wrong tab. It closes the first tab instead of the selected one. (Probably an index or value issue.)
- The contents of the tabs do not always show correctly. If you add one tab, then select it, nothing happens. You can’t select any tab. If you add another tab, you can select it and the original one (Dashboard), but not the first added one. If you add another tab, now you can select all of them correctly.
- This is just a visual thing, but the selected tab does not show as selected. It would be nice if the selected tab would be a different color to show it’s the currently selected tab.
The project is here: dynamic-tabs.zip (351.1 KB)
Could someone please take a look and see how these issues might be resolved.
Thanks, Dan