# How Can I Create Custom Containers

**URL:** <https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 23, 2024, 11:23am UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248 "2024-02-23T11:23:54Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dillon\_H](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@Dillon\_H](https://forum.inductiveautomation.com/u/Dillon_H)\
**Post date:** [February 23, 2024, 11:23am UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/1 "2024-02-23T11:23:54Z")

</div>

I started learning ignition perspective recently, and so far I see no way to achieve this. I'm trying to make reusable view, so that you can take a view, embed it, and place components or other views inside of this embedded view, similar to what you can do with containers. I want to do this so that a single item in a menu can contain an icon, or a row container with icons in it, or maybe a label, etc.

Is there any way to achieve this?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [February 23, 2024, 12:46pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/2 "2024-02-23T12:46:42Z")

</div>

Sounds like you'd need a custom module (via the SDK).

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 23, 2024, 1:29pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/3 "2024-02-23T13:29:29Z")

</div>

You can make any Perspective view reusable. By assigning parameters in the view's properties you can pass in values and the components on the view can be bound to the parameters.

Have a look at [Perspective - Embedding Palette | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-embedding-palette) and, in particular, the Embedded View component and the Flex Repeater component. If there are video links on those pages then I recommend watching those too.

---

<div class="post-metadata">

**Author:** ![Dillon\_H](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@Dillon\_H](https://forum.inductiveautomation.com/u/Dillon_H)\
**Post date:** [February 23, 2024, 1:47pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/4 "2024-02-23T13:47:10Z")

</div>

If I'm not mistaken, I can make a reusable view that supports embedding other views with these components by passing in a url parameter for the view I want to use, but using embedded views etc. won't allow me to use a component (like a row or icon) as an input. I would instead have to create a new view, place the components I want in it, and use that new view as an input url for an embedded view, which isn't ideal. Please let me know if I'm wrong here.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 23, 2024, 1:57pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/5 "2024-02-23T13:57:45Z")

</div>

Mock up a picture of what you're trying to do. You're not passing a URL, you're passing an Ignition project viewpath. (The whole project will run in the same web page with Ignition swapping in and out the views as required.)

> .... won't allow me to use a component (like a row or icon) as an input.

A row isn't a component so I'm not clear what you are proposing here.  
You can't pass an icon into a view but you can pass the icon _path_ as a view parameter and then bind the icon path on an existing icon on that view to the view parameter.

> I would instead have to create a new view, place the components I want in it, and use that new view as an input url for an embedded view, ...

If you have multiple views with very similar layouts you should be able to get away with just one sub-view that can be used in a Flex Repeater. If certain components are not required in some instances of the view then use a visibility parameter and bind that component's visibility property to the view parameter. Then you just enable / disable that component inside each instance of the Flex Repeater view.

---

<div class="post-metadata">

**Author:** ![Dillon\_H](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@Dillon\_H](https://forum.inductiveautomation.com/u/Dillon_H)\
**Post date:** [February 23, 2024, 2:13pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/6 "2024-02-23T14:13:23Z")

</div>

![Screenshot_20240223_150504_Firefox Focus](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b1c8cceadf2576dccc873726dc9ec670e037c472.jpeg)  
I'm only have my phone for this at the moment, so I sketched a basic example. Sorry it's a bit rough

As you can see here there are 2 "views" with similar elements. They both consist of a column with a border, text in the bottom of the column with a border on top of it, and something in the top section of the column. I want to choose what goes into the top of the view, which in this case is an icon in the first view, and a row with 2 icons inside of it in the second view.

Thank you for your suggestion involving the sub-view and repeater, it's a good idea! Not exactly what I was imagining, but if all else fails it may be a good fallback plan.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 23, 2024, 2:32pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/7 "2024-02-23T14:32:38Z")

</div>

> [@Dillon\_H](#):
>
> which in this case is an icon in the first view, and a row with 2 icons inside of it in the second view.

So, create one reusable view. Add the following parameters to it (and give it some initial values to assist during the design phase):  
`caption : Caption goes here`  
`iconPath1 : material/wb_sunny`  
`iconVisibility1 : true`  
`iconPath2 : material/bedtime`  
`iconVisibility2 : true`

Drop two icons and a label onto the view and bind the relevant properties to the view parameters.

- Now create a new view and add a Flex Repeater component.-  
Set the `path` property to the name of the previous view.
- Create an instance of the view using the + button.
- There's another + button beside `instances.0`. Hit it, select Parameters → Sync Parameters.
- Right click on `instances.0` and select Duplicate.
- Edit the parameters on `instances.1` to see it working. Change the caption and set `instances.0.iconVisibility2 : false`. That should make it disappear.

Have fun.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [February 23, 2024, 2:36pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/8 "2024-02-23T14:36:12Z")

</div>

> [@Dillon\_H](#):
>
> if I'm wrong here.

If you want to place an arbitrary number of arbitrary components within your custom container, you aren't wrong. You need to use the SDK to produce a custom container to achieve that.

---

<div class="post-metadata">

**Author:** ![Dillon\_H](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@Dillon\_H](https://forum.inductiveautomation.com/u/Dillon_H)\
**Post date:** [February 23, 2024, 2:37pm UTC](https://forum.inductiveautomation.com/t/how-can-i-create-custom-containers/86248/9 "2024-02-23T14:37:27Z")

</div>

That is my goal, thank you for confirming I'll need a custom solution for this.
