---
title: "Groups of Design Elements"
canonical: https://customerscanvas.com/docs/cc6/working-with-group-items.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Atoms .NET"
    versions: ["6.15.0", "6.x (may differ)"]
  - product: "Design Atoms JS"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Groups of Design Elements

**Applies to:** Customer's Canvas On-Premises; Design Atoms .NET 6.15.0, 6.x (may differ); Design Atoms JS 6.15.0, 6.x (may differ) · **Archived documentation**
 
In the Design Atoms Framework, groups of design elements and clipart are implemented in the **GroupItem** and **ClipartItem** classes. This topic describes how you can work with these items.
 
## Working with Group Items on the Front End
  
### Creating a Group
 
You can group design elements as follows:
 
```
import { GroupItem, ImageItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";

const companyLogo = new ImageItem("", new PointF(100, 100), 200, 200);
const companyName = new PlainTextItem("Printing Company", new PointF(100, 400));
// Group two design elements.
const group = new GroupItem([ companyLogo, companyName ]);
```
 
You can also add items to an existing group.
 
```
// Create an empty group.
const group = new GroupItem();
// Add two items to this group.
group.addItems([ companyLogo, companyName ]);
```
 
When adding items to a group, you can specify their position (index) as the second parameter. The following example illustrates how you can add a single item to the top of a group.
 
```
group.addItem(new PlainTextItem("online services", new PointF(100, 500)), 0);
```
 
In the same way, you can create clipart - a group of vector shapes.
 
```
import { ClipartItem, EllipseItem, ShapeItem } from "@aurigma/design-atoms-model/Product/Items";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

const ellipse = new EllipseItem(new RectangleF(100, 100), 200, 200);
const shape = new ShapeItem();
// Group the ellipse and shape into clipart.
const clipart = new ClipartItem([ companyLogo, companyName ]);
```
 
### Removing Items from a Group
 
Under the hood, the groups and clipart represent collections of **items**. Using the example of removing items, let's see how you can apply this.
 
```
// Take the first two items in the group.
const [ firstItem, secondItem ] = group.items;
// Remove an item from the collection.
group.items.remove(firstItem);
// Remove items from the group.
group.removeItems([ secondItem ]);
```
 
### Manipulating in the Viewer
 
On the front end, you can visualize your product in a [custom viewer](https://customerscanvas.com/docs/cc6/design-atoms-fw.htm.md). You can enable grouping and ungrouping design elements in the viewer by using the Command Manager and the corresponding commands: **ItemsCommand.groupItems** and **ItemsCommand.ungroupItems**.
 
```
import { ItemsCommand } from "@aurigma/design-atoms/Commands/CommandManager";
import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";

const backendUrl = "http://<yourInstanceUrl>";
const holder = document.querySelector("#viewer-container") as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});

viewer.commandManager.execute(ItemsCommand.groupItems, { items: viewer.selectedItems });
```
 
### Managing Permissions
 
Grouped items maintain their permissions. For example, when an item is disallowed for moving, then this item cannot be moved even when it is added to a group. However, such a group can be moved as long as this item remains within the group bounds.
 
In addition to individual permissions, you can define them for the entire group through **groupManipulationPermissions**.
 
```
group.groupManipulationPermissions.allowMoveHorizontal = false;
group.groupManipulationPermissions.allowMoveVertical = false;
```
 
Clipart introduces new permissions:
 
- **allowUngroup** - allows for ungrouping the items in the viewer.
- **allowSelectNestedItems** - allows for choosing a single item in the group.
- **allowReplaceContent** - allows for replacing the entire group.

For clipart, their default values are `false`. You can define them for normal groups in **groupItemPermissions**, for example:
 
```
group.groupItemPermissions.allowSelectNestedItems = false;
```
 
## Working with Group Items on the Back End
  
### Creating a Group
 
You can create a group based on new items as follows:
 
```csharp
using System.Collections.Generic;
using System.Drawing;
using Aurigma.DesignAtoms.Model.Items;

var groupItem = new GroupItem(new List<Item>{ new PlaceholderItem { SourceRectangle = new RectangleF(10, 10, 100, 100) } });
```
 
To create nested groups:
 
```csharp
using Aurigma.DesignAtoms.Model.Math;

var shape = new ShapeItem(Path.CreateRectanglePath(230, 10, 100, 100));
var nestedGroup = new GroupItem { Name = "nestedGroupName" };
var group = new GroupItem {Name = "groupName", Items = new List<Item> { shape, nestedGroup }};
```
 
### Changing Colors in Clipart
 
Clipart allows you to change a color used in the vector image. The **ColorGroups** list contains all the clipart colors. To change a color for all vector shapes at once, you can use the **SetColor** method as follows:
 
```csharp
using System.Linq;
using Aurigma.GraphicsMill;
using Aurigma.DesignAtoms.Model.Items;

// Define shapes.
var redFillShapes = new ShapeItem (Path.CreateEllipsePath(new RectangleF(100, 100, 200, 200)))
                { FillColor = RgbColor.Red };
var redBorderShapes = new ShapeItem(Path.CreateRectanglePath(new RectangleF(100, 450, 100, 100)))
                { BorderColor = RgbColor.Red, BorderWidth = 2 };
var yellowBorderShapes = new ShapeItem(Path.FromSvgString("M 215 396 L 161 396 L 188 287 Z"))
                { BorderColor = RgbColor.Yellow, BorderWidth = 1 };

// Group these shapes into clipart.
var clipartItem = new ClipartItem(new List<Item> { redFillShapes, redBorderShapes, yellowBorderShapes });
// Get the shapes in red and change their color to blue.
var redGroup = clipartItem.ColorGroups.First(colorGroup => colorGroup.Color.Equals(RgbColor.Red));
clipartItem.SetColor(redGroup, RgbColor.Blue);
```
 
### Managing Permissions
 
On the back end, you can define the permissions in **GroupItemPermissions**, as follows:
 
```csharp
group.GroupItemPermissions.AllowSelectNestedItems = false;
group.GroupItemPermissions.AllowUngroup = false;
group.GroupItemPermissions.AllowReplaceContent = true;
```
 
## See Also
  
### Manual
 
- [Design Atoms Framework Overview](https://customerscanvas.com/docs/cc6/design-atoms-fw.htm.md)
- [Using the Design Atoms Framework in IFrame API](https://customerscanvas.com/docs/cc6/introduction-to-iframe-api-v5.htm.md)