# Tab Container tab embedded view state

**URL:** <https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 12, 2024, 9:04pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923 "2024-09-12T21:04:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 12, 2024, 9:04pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/1 "2024-09-12T21:04:22Z")

</div>

I'm using an embedded view as a [Tab Container](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-container-palette/perspective-tab-container) type and I'm wondering whether the state of the tab (active, inactive, disabled) gets passed into the embedded view automatically in some property or if I have to do that myself.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/88c003d57a90e7e696a5286320a33ad488a82771.png)

I doubt that there is an automatic property, but I figure it's worth asking since the Flex Repeater, Table subview and other similar component features DO pass in properties like `value` or `rowIndex` automatically.

I already have an idea of how I'm going to do this manually and if I can confirm that this feature doesn't exist already, I'll share it here.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [September 13, 2024, 10:59am UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/2 "2024-09-13T10:59:35Z")

</div>

After some quick testing in the designer I didn't see any additional properties being passed into the viewParams. I did a `system.perspective.print` of the self.params and just got the params I added.

You can really just pass in the currentTabIndex and use that 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 13, 2024, 12:02pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/3 "2024-09-13T12:02:50Z")

</div>

I'm not sure of the setup here.  
Do you mean you have a an embedded view in a tab container's tab, or that you have an embedded view that contains a tab container ?

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [September 13, 2024, 1:50pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/4 "2024-09-13T13:50:20Z")

</div>

> [@YF129701](#):
>
> gets passed into the embedded view automatically in some property or if I have to do that myself.

I see what you're asking. You can do what you want and more.

The structure of controls properties are derived from json. You can copy/paste the objects from the designer into a text editor to see the json structure and you can populate that json dynamically in a script transform on a binding on the base container (tabs) to dynamically build the structure of your tab container. Hard to explain.

You can populate all of this dynamically from a passed in parameter which could be an indirect tag binding to a UDT instance or you could pass a set of parameters and use an expression structure binding and a script transform (very flexible).

Test this on a blank tap container. I added a blank tab container and changed the tab type to "object" per the documentation. I populated the properties and the json for the "tabs" property of the tab container looks like this:

```python
[
  {
    "text": "tab text",
    "runWhileHidden": true,
    "disabled": true
  },
  "tab 2",
  "tab 3",
  "tab 4",
  "value"
]

```

I can derive this object structure dynamically from a binding using a script transform on the "tabs" property of the tab container like this:

```python
	tabs = [
	  {
	    "text": "tab text",
	    "runWhileHidden": True,
	    "disabled": True
	  },
	  "tab 2",
	  "tab 3",
	  "tab 4",
	  "value"
	]	
	return tabs

```

You can inject whatever values into that structure that you want. It's SUPER flexible. You can pass information to the tab through parameters, message handlers, whatever makes sense for your layout. Then you just populate each object block using the variable data.

You're referring to the documentation and I'll post a link to anyone who stumbles into this in the future to help them understand it.

> **[Perspective - Tab Container | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-container-palette/perspective-tab-container)**
>
> The Tab container uses tabs as navigation buttons arranged together with the selected tab highlighted.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 13, 2024, 2:17pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/5 "2024-09-13T14:17:28Z")

</div>

Yes, these are all good points and similar to how I ended up doing it BUT my question was if there was a built-in object or property that gets passed to each `tab`, similar to how Table subviews get `row`, `rowIndex`, etc or how the Flex Repeater instances get an `index`.

I ended up going with my backup plan - creating a `tabs` custom property on the Tab Container component, then on the container's `tabs` prop, I created an Expression structure binding with two properties: the `currentTabIndex` and `self.custom.tabs` (Tab Container custom properties.

After I had those two, I called a new library script function that returned the appropriate objects for me - here is some pseudo-code:

```python
def get_container_tabs(tabs, currentTabIndex):
    # check which tab is currently active
    for i in range(len(tabs)):
        if i == currentTabIndex:
            tabs[i]["viewParams"]["state"] = "active"
        else:
            tabs[i]["viewParams"]["state"] = "inactive"

```

Doing it this was gives you a ton of flexibility - even just by adding an icon next to the text is already huge.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 13, 2024, 2:20pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/6 "2024-09-13T14:20:30Z")

</div>

I don't think printing `self.params` would show you default properties. For instance, on the Flex Repeater, unless you first go add an `index` property on the view that's getting repeated, it won't get printed either even though that property exists in the background (?).

This is what I'm talking about, but for the Tab Container:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a1cbf20d300a751a6fd46bb048ef7793afd6c92.png)

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [September 13, 2024, 2:33pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/7 "2024-09-13T14:33:32Z")

</div>

That looks like a good approach to me.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [September 13, 2024, 2:45pm UTC](https://forum.inductiveautomation.com/t/tab-container-tab-embedded-view-state/95923/8 "2024-09-13T14:45:01Z")

</div>

Ah, that's my bad. I realize PropertyTreeScriptWrapper is the object type that is returned for `self.params` which will only include the params you put in there. So, if I add `index` to a components params tree in a flex repeater it works fine but does not show up otherwise. My apologies.