---
title: "Working with the object model | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-cs/howto/working-with-object-model/"
---

# Working with the object model

> In the overview, we have learned the basics of [Design Atoms Framework](https://customerscanvas.com/docs/on-premises/design-atoms-cs.md) and how you can [create applications](https://customerscanvas.com/docs/on-premises/design-atoms-cs/getting-started.md). In this topic, you will learn how to work with the object model on the back end.

For reference, you can download our [sample project](https://github.com/aurigma/DesignAtomsSamples) from GitHub.

## The Object Model

The basic entity in this framework is a [Product](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Product.md). Every product contains a collection of surfaces that represent pages of print products. For a [Surface](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Surface.md), you need to add design elements to [Containers](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Container.md) and define a [Print area](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/PrintArea.md) for rendering. This hierarchy is described in the [Back-end modules](https://customerscanvas.com/docs/on-premises/design-atoms-cs.md) topic. Now, let's see how you can work with these classes.

### Creating a Product

For your product design, you need to create an instance of the [Product](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Product.md) class and add a collection of [Surfaces](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Product.md#Surfaces) to this instance.

```csharp title="Creating a Product"
using Aurigma.DesignAtoms.Model;

var product = new Product();
var surface = new Surface(330, 600);

product.Surfaces.Add(surface);
```

### Adding Design Elements

In this model, [containers](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Container.md) store design elements. There are three default containers for the background, main area, and foreground. These containers allow you to display several designs on top of each other in a viewer. The `Main` container allows your users to edit and manipulate design elements in the viewer, whereas the `Background` and `Foreground` containers are locked for users. The names of these containers are defined in the [Configuration](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Configuration/Configuration.md). The Design Atoms Framework also supports [SpotColorContainer](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/SpotColorContainer.md) and [TextureContainer](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/TextureContainer.md) containers for such use cases as design finishing, print embellishments, etc.

To add new design elements to your product, you must first create the `Main` container for them.

```csharp title="The Main container"
var mainContainer = new SurfaceContainer { Name = Configuration.MAIN_CONTAINER_NAME };
surface.Containers.Add(mainContainer);
```

After that, you can create new elements and add them to the [Items](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Container.md#Items) collection. Let us see how you can add such elements as bounded text, image placeholders, and barcodes.

```csharp title="Adding items to a container"
using Aurigma.DesignAtoms.Model.Items;
using Path = Aurigma.DesignAtoms.Model.Math.Path;

// Add an image placeholder with a rectangular frame.
var photoFile = new FileInfo(@"images\c.bennett.jpg"));
var photoImage = new ImageItem(photoFile, new PointF(91, 146), 156, 234);
var photoPlaceholder = new PlaceholderItem()
{
    SourcePath = Path.CreateRectanglePath(new RectangleF(98, 170, 147, 184)),
    ManipulationPermissions = new ManipulationPermissions(false),
    Content = photoImage,
    Name = "photo"
};
mainContainer.Items.Add(photoPlaceholder);

// Add a bounded text item supporting copyfitting.
var nameItem = new BoundedTextItem("Cristopher Bennett", new RectangleF(112, 362, 120, 60), "Roboto-Bold", 25)
{
    Alignment = TextAlignment.Center,
    VerticalAlignment = TextVerticalAlignment.Center,
    OverflowStrategy = OverflowStrategy.FitToBox,
    Name = "employee"
};
mainContainer.Items.Add(nameItem);

// Add a barcode.
var barcode = new BarcodeItem(ZXing.BarcodeFormat.EAN_8, "1234567", 
    new BarcodeItem.EncodingOptions { PureBarcode = true }, new PointF(71, 418), 202, 50)
{
    FillColor = RgbColor.Green,
    Name = "barcode"
};
mainContainer.Items.Add(barcode);
```

### Adding Mockups

The Design Atoms Framework supports [Mockups](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/mockups.md) to visualize a physical representation of a product in the viewer and proof images. Mockups do not appear in the hi-res outputs.

You can add both overlaying and underlying mockups to your product surfaces by adding your images to the [OverContainers](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/SurfaceMockup.md) and [UnderContainers](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/SurfaceMockup.md) collections.

```csharp title="Adding Mockups"
var fileSource= new ImageSource(){ FileSource = new FileInfo(@"images\mugmockup.png")};
var mockupImage = new ImageItem(fileSource, new PointF(0, 0), surface.Width, surface.Height);
var mockupContainer = new MockupContainer(new[] {mockupImage});
surface.Mockup.UnderContainers.Add(mockupContainer);
```

### Changing Design Elements

You can find elements that fit by some criterion and change their content. In the following example, a bounded text element with the `"employee"` name gets new content.

```csharp title="Changing Design Elements"
var item = product.AllItems.OfType<BoundedTextItem>().FirstOrDefault(x => x.Name == "employee");
if (item != null)
{
    item.Text = "John Wood";
}
```

### Deleting Design Elements

The following example illustrates how you can delete a design element by name and a number of design elements by type.

```csharp title="Deleting Design Elements"
var item = product.AllItems.OfType<Item>().FirstOrDefault(x => x.Name == "employee");
if (item != null)
{
    item.ParentContainer.Items.Remove(item);
}

var barcodes = product.AllItems.OfType<Item>(BarcodeItem);
foreach(var item in barcodes)
{
    item.ParentContainer.Items.Remove(item);
}
```

### Defining a Print Area

To define an area to be printed, you need to create an instance of the [PrintArea](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/PrintArea.md) class. Every print area is rendered on a separate page of the output PDF file. Usually, a print area is the same size as its surface. However, you can add a number of print areas to a surface. In this case, your users can see these print areas on a single page and even drag design elements onto them in the viewer.

For print areas, you can specify a bleed zone by using [SafetyLines](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/PrintArea.md), for example:

```csharp title="Specifying a bleed zone"
var printArea = new PrintArea(new RectangleF(0, 0, surface.Width, surface.Height));
var safetyLine = new SafetyLine
{
    Margin = new Margin(10, 70),
    PdfBox = PdfBox.Bleed,
    Color  = RgbColor.Lime,
    StepPx = 3
};

printArea.SafetyLines.Add(safetyLine);
surface.PrintAreas.Add(printArea);
```

Here, the `PdfBox` property applies margins of this safety line to the corresponding PDF page box. In this way, you can define the `"Crop"`, `"Trim"`, and `"Bleed"` boxes.

### Creating a Group of Items

In the Design Atoms Framework, groups of design elements and clipart are implemented in the [GroupItem](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model.Items/GroupItem.md) and [ClipartItem](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model.Items/ClipartItem.md) classes. Now, let's look at how you can work with these items.

You can create a group based on new items as follows:

```csharp title="Creating a Group of Items"
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 title="Creating a Nested Group"
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 title="Changing Colors in Clipart"
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](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model.Items/GroupItemPermissions.md), as follows:

```csharp title="Managing Permissions"
group.GroupItemPermissions.AllowSelectNestedItems = false;
group.GroupItemPermissions.AllowUngroup = false;
group.GroupItemPermissions.AllowReplaceContent = true;
```