---
title: "Migrating Your Applications"
canonical: https://customerscanvas.com/docs/cc6/migrating-applications.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    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/).

# Migrating Your Applications

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
In the [Upgrading the Design Editor](https://customerscanvas.com/docs/cc6/upgrading-customers-canvas.htm.md) topic, you can learn how to upgrade the web-to-print editor.
 
If you develop an application based on the Customer's Canvas SDK, then you need to update your application when, for example, a new version of the SDK introduces changes to the object model or API.
 
This topic describes how to update applications when you migrate to the SDK 5.0.0 and 5.31.0.
 
## Migrating to Customer's Canvas 5.31
  
### Installing a Separate Model Package
 
In Customer's Canvas 5.31, the object model was separated from the DesignAtoms package. To rebuild your application, you must additionally install the new package:
 
- On the back end: 
```
    Install-Package Aurigma.DesignAtoms.Model
    ```
- On the front end: 
```
    npm install @aurigma/design-atoms-model --save
    ```

After that, replace imports `@aurigma/design-atoms/Model/<class>` with `@aurigma/design-atoms-model/<class>` in your .ts code.
 
### Using Common Classes
 
On the back end, the **Math** class was moved to the **Aurigma.DesignAtoms.Model** namespace.
 
In your .cs code, replace
 
```
using Aurigma.DesignAtoms.Common.Math;
```
 
with
 
```
using Aurigma.DesignAtoms.Model.Math;
```
 
## Migrating from Version 4 to Version 5
  
For the complete list of deprecated and removed features, you can refer to the [breaking-changes-v5.htm](https://customerscanvas.com/docs/cc6/breaking-changes-v5.htm.md). Now, let's see what changes are required in your application.
 
### Removing the Eval Function
 
In Customer's Canvas 4, you could access the Design Editor and the object model through the **spEditor** object in the **eval** function. Although you can still use this way, which is not recommended, the code executed in this function is likely to stop working because of changes in the IFrame API. In the current implementation, you have full access to the object model right through the [IFrame API](https://customerscanvas.com/docs/cc6/introduction-to-iframe-api-v5.htm.md).
 
Let's see in what use cases you could use **eval** and how you can replace this function now.
 
#### Getting the User ID
 
Since the **userId** property has been removed from the object model in version 5, the following call returns `undefined`.
 
```
let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config);
console.log(await editor.eval("spEditor.model.product.userId"));
```
 
Instead, you can get the user ID from the runtime configuration as follows:
 
```
let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config);
console.log(await editor.configuration.getUserId());
```
 
#### Getting the Product Model
 
Instead of using the **spEditor.model**:
 
```
let productModel = await editor.eval(() => {
    return spEditor.model.product;
});
```
 
You can now obtain a product model as follows:
 
```
let product = await editor.getProduct();
let productModel = await product.getProductModel();
```
 
Note that despite the previous way, the model obtained through **getProductModel** represents only a snapshop of the product loaded into the editor. If you change the model, you need to [apply these changes](https://customerscanvas.com/docs/cc6/introduction-to-iframe-api-v5.htm.md) to the product by using the **setProductModel** method.
 
```
product.setProductModel(newProductModel);
```
 
#### Working with Design Elements
 
Instead of using the **spEditor.productHandler** object:
 
```
let item = spEditor.productHandler.getAllItems().find(x => x.name === "Logo");
```
 
For example, you can find an element by its name as follows:
 
```
let item = await product.getItemByName("Logo");
```
 
### Changing the setMockup Calls
 
In Customer's Canvas 5, you can set a mockup to a surface only through the [IMockupTemplate](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.imockuptemplate.htm.md) interface. You can use the **setMockup** method as follows:
 
```
let newProduct = await product.currentSurface.setMockup(
    {
        up: "stamp",
        down: "envelope"
    },
    previewMockups: [{ down: "envelope" }]
);
```
 
### Changing Endpoints of the StateFiles Controller
 
If your application uses the Web API for manipulating state files through the deprecated endpoint:
 `~/api/users/{userId}/{stateId}` 
Then you must replace it with the new endpoint:
 `~/api/users/{userId}/states/{stateId}`
 
## See Also
  
### Manual
 
- [breaking-changes-v5.htm](https://customerscanvas.com/docs/cc6/breaking-changes-v5.htm.md)
- [Upgrading the Design Editor](https://customerscanvas.com/docs/cc6/upgrading-customers-canvas.htm.md)
- [Using the Design Atoms Framework in IFrame API](https://customerscanvas.com/docs/cc6/introduction-to-iframe-api-v5.htm.md)
- [Web API for Manipulating State Files](https://customerscanvas.com/docs/cc6/web-api-for-manipulating-states.htm.md)