---
title: "Working with the Object Model"
canonical: https://customerscanvas.com/docs/cc6/using-design-atoms-fw.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/).

# Working with the Object Model

**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 previous topics, we learned the basics of [Design Atoms Framework](https://customerscanvas.com/docs/cc6/design-atoms-fw.htm.md) and how to [create an empty application](https://customerscanvas.com/docs/cc6/deploying-design-atoms.htm.md). In this topic, you can learn how to work with the object model on the back end and front end.
 
For reference, you can download our [sample project](https://customerscanvas.com/docs/cc6/design-atoms-samples.htm.md) from GitHub.
 
## Working with the Object Model on the Back End
  
The basic entity in this framework is a [Product](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_Product.htm.md). Every product contains a collection of surfaces that represent pages of print products. For a [Surface](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_Surface.htm.md), you need to add design elements to [Containers](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_Container.htm.md) and define a [Print area](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_PrintArea.htm.md) for rendering. This hierarchy is described in the [Design Atoms Framework Overview](https://customerscanvas.com/docs/cc6/design-atoms-fw.htm.md). 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** class and add a collection of [Surfaces](https://customerscanvas.com/docs/cc6/P_Aurigma_DesignAtoms_Model_Product_Surfaces.htm.md) to this instance.
 
```csharp
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/cc6/T_Aurigma_DesignAtoms_Model_Container.htm.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/cc6/AllMembers_T_Aurigma_DesignAtoms_Configuration_Configuration.htm.md). The Design Atoms Framework also supports [SpotColor](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_SpotColorContainer.htm.md) and [Texture](https://customerscanvas.com/docs/cc6/T_Aurigma_DesignAtoms_Model_TextureContainer.htm.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
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/cc6/P_Aurigma_DesignAtoms_Model_Container_Items.htm.md) collection. Let us see how you can add such elements as bounded text, image placeholders, and barcodes.
 
```csharp
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/cc6/mockups.htm.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 [SurfaceMockup.OverContainers](https://customerscanvas.com/docs/cc6/P_Aurigma_DesignAtoms_Model_SurfaceMockup_OverContainers.htm.md) and [SurfaceMockup.UnderContainers](https://customerscanvas.com/docs/cc6/P_Aurigma_DesignAtoms_Model_SurfaceMockup_UnderContainers.htm.md) collections.
 
```csharp
var fileInfo = new FileInfo(@"images\mugmockup.png");
var mockupImage = new ImageItem(fileInfo, 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
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
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** 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/cc6/P_Aurigma_DesignAtoms_Model_PrintArea_SafetyLines.htm.md), for example:
 
```csharp
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.
 
Now, let's see how you can perform the same operations on the front end.
 
## Working with the Object Model on the Front End
  
You can work with the object model in your custom viewer as well as in the Customer's Canvas Design Editor through the [IFrame API](https://customerscanvas.com/docs/cc6/introduction-to-iframe-api-v5.htm.md).
 
### Creating a Product
 
To create a product design, you need to create an instance of the **Product** class and add a collection of **Surfaces** to this instance.
 
```
import { Product, Surface } from "@aurigma/design-atoms-model/Product";
const product = new Product([new Surface(800, 800)]);
```
 
### Adding Design Elements
 
This is how you can create the main surface container and add design elements to this container.
 
```
import { SurfaceContainer} from "@aurigma/design-atoms-model/Product";
import { ImageItem, PlaceholderItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";
import { PointF } from "@aurigma/design-atoms-model/Math";

// Create an image placeholder.
const placeholder = new PlaceholderItem();
placeholder.content = new ImageItem(null, new PointF(100, 100), 200, 200);
placeholder.name = "photo";

// Create a main container with the placeholder.
const mainContainer = new SurfaceContainer(placeholder);
mainContainer.name = "main";

// Add a text item to the main container.
const nameItem = new PlainTextItem("Cristopher Bennett", new PointF(100, 400), "Roboto-Bold", 25);
nameItem.name = "employee";
mainContainer.items.add(nameItem);

// Add the main container to the surface.
const surface = product.surfaces.get(0);
surface.containers.setRange([mainContainer]);
```
 
### Adding Mockups
 
In the following example, we add an overlaying mockup to a surface.
 
```
import { MockupContainer } from "@aurigma/design-atoms-model/Product";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

const mockupImg = new ImageItem();
mockupImg.sourceRectangle = new RectangleF(0, 0, surface.width, surface.height);
mockupImg.source = new ImageItem.ImageSource(null, "https://example.com/mugmockup.png");
surface.mockup.overContainers.add(new MockupContainer([mockupImg]));
```
 
### Changing Design Elements
 
You can find elements that fit a certain criterion and change their content. In the following example, the text element `employee` gets a new content.
 
```
const textItem = surface.containers.first().items.first(i => i.name === "employee") as BaseTextItem;
textItem.text = "John Wood";
```
 
### Deleting Design Elements
 
You can remove design elements by names, types, and predicates. In the following example, we remove the `employee` item and all image placeholders.
 
```
product.removeItems(item => item.name === "employee" || item.type === "PlaceholderItem");
```
 
### Defining a Print Area
 
You can specify a print area and a bleed zone as follows:
 
```
import { PrintArea } from "@aurigma/design-atoms-model/Product";

const safetyLine = new SafetyLine();
safetyLine.margin = 10;
safetyLine.pdfBox = PdfBox.Bleed;
safetyLine.color = new RgbColor("lime");

const printArea = new PrintArea(new RectangleF(0, 0, surface.Width, surface.Height));
printArea.safetyLines.add(safetyLine);

surface.printAreas.add(printArea);
```
 
Now, you may want to learn more details about:
 
- [Using dependency injection](https://customerscanvas.com/docs/cc6/using-dependency-injection.htm.md)
- [Loading product templates](https://customerscanvas.com/docs/cc6/loading-templates-in-daf.htm.md)
- [Saving products](https://customerscanvas.com/docs/cc6/saving-products-in-daf.htm.md)
- [Rendering products](https://customerscanvas.com/docs/cc6/rendering-products-in-daf.htm.md)
 
## See Also
  
### Manual
 
- [Design Atoms Framework Overview](https://customerscanvas.com/docs/cc6/design-atoms-fw.htm.md)
- [Creating Applications with Design Atoms Framework](https://customerscanvas.com/docs/cc6/deploying-design-atoms.htm.md)
- [Using the Design Atoms Framework in IFrame API](https://customerscanvas.com/docs/cc6/introduction-to-iframe-api-v5.htm.md)

### Other
 
- [Design Atoms sample project↗](https://github.com/aurigma/DesignAtomsSamples)