[00:00] In this lesson, we'll discuss the concept of grouping components on a Vision window. Grouping components so they can be moved around as one logical unit is a common action when you're developing windows in Ignition. So we'll see how that is done. Let's start out by dragging a cylindrical tank and a linear scale component onto our empty Vision window. Right now, they're two separate components. We can move them around, resize them, or configure them independently of one another. Of course, we can select both of them together, and then we can move them around as one unit. But, then we need to remember to select them both every time. Suppose we decide that some components really do need to belong together in some logical grouping or arrangement. For example, let's position this linear scale directly aside the cylindrical tank like so. We'd like to maintain this pairing at all times. What we can do is select both components, then right click and select Group, which groups these components into one logical unit. Over in our Project Browser, now we see a new group container added, and both components are in it.

[01:20] Now we can move around both components together as one logical unit. Next, suppose we need to configure one of the components. There are two ways to select one specific component inside such a grouping. The first way is to head over to the Project Browser and simply select one of the grouped components. The second way is to click on the group to select it. Then double click to get a red outline. Now we can go inside the group and select one of the individual components. Either way, now we can configure the selected component down in the Property Editor. If we want to, we can reverse the grouping by simply clicking on our component group to select it, then right clicking Ungroup. Our components are now separate again, and we see in the Project Browser that the added hierarchy level is removed.

[02:10] Both components are back under the root container again. So of course we can include as many components in a group as we wish. Let's drag a few more components onto the screen. How about a label and a numeric label, and maybe an LED display, like so. Then once again, we can select them all, right click and select group. And we see again that they can be moved around as one grouping. And the new group appears in the Project Browser. Next, let's consider resizing behavior. If we select a group and resize it, we see that all the contained components are going to resize at a relative rate, just like any other component on the pallette would. But maybe this isn't what we want, and also we can add more components to the group. But what we'd have to do is go back into the group by double clicking, then resize a few components to make room for some more.

[03:12] Then we can drag in some more new components from the palette into our group. So instead, we could convert this group into a container. We'll simply select the group, right click and select Convert to Container. Now the resizing behavior changes. If we resize the outer container, now nothing inside of it will resize. So a group and a container are both the same concept. All the components inside are grouped together as one logical unit, but a container doesn't resize the components inside it like a group does, which is ideal if we want to add more components into it. For example, now we could directly drag a Meter component into our container. A couple fine points about a container. First, when we converted our group to a container, the name of the Project Browser didn't change, but it's easy enough to rename it to something more useful by right clicking on it and giving it a name such as New Container. And we'll expand it back out like so. Second, if we right click on the container itself, we notice there is no converse operation to convert back into a group, but this can be done by cutting components out of the container, pasting them elsewhere, and then regrouping them. And third, to move a container, we first need to hold down the Alt key, then click and drag to move the entire container. Otherwise, if you don't hold down Alt first, one of two things will happen.

[04:46] If you're in an open area, you'll see something like this, which means that nothing is happening, or else if you're on a component, it will select and move that instead of the entire container as intended. So a group and a container are both similar concepts. Each one takes multiple components and groups them together as one logical unit, separate from other components, that can be manipulated as one entity. The main difference is in their resizing behavior: a group resizes its internal components, whereas a container only resizes its outer boundary.