Adobe Express Editor Component: Create New Project

This guide will demonstrate how to launch an Adobe Express editor component. The editor will appear in an iframe and open a new project in a folder named appName, as specified when the SDK is initialized.

createDesign()

The CCEverywhere object exposes the createDesign() method, which loads the editor component in an iframe.

Flow:

User triggers createDesign() function from within the host application, and an editor is loaded in an iframe.
A pop-up window will appear and the user has to create or log into their Adobe Express account.
Any projects are automatically created/saved in a new project folder ('app_name' specified in SDK initialization) within Adobe Express.

// Initialize SDK and save CCEverywhere object as ccEverywhere 
ccEverywhere.createDesign(
    // CreateDesignParams
    {
        modalParams: {},
        callbacks: {
            onCancel: () => {},
            onError: (err) => {},
            onLoadStart: () => {},
            onLoad: () => {},
            onPublishStart: () => {},
            onPublish: (publishParams) => {},
        },
        outputParams: { 
            outputType: "base64"
        },
        inputParams: { 
            canvasAspectId: "1:2",
            templateType: "Flyers",
        }
    }
); 
Copied to your clipboard
1// Initialize SDK and save CCEverywhere object as ccEverywhere 
2ccEverywhere.createDesign(
3    // CreateDesignParams
4    {
5        modalParams: {},
6        callbacks: {
7            onCancel: () => {},
8            onError: (err) => {},
9            onLoadStart: () => {},
10            onLoad: () => {},
11            onPublishStart: () => {},
12            onPublish: (publishParams) => {},
13        },
14        outputParams: { 
15            outputType: "base64"
16        },
17        inputParams: { 
18            canvasAspectId: "1:2",
19            templateType: "Flyers",
20        }
21    }
22);

CreateDesignParams

createDesign() takes an object of parameters, CreateDesignParams, composed of:

Property	Description	Type
modalParams	Define size of editor modal	ModalParams
inputParams	Specify template layout ratio, template types, template search	CreateInputParams
outputParams	Configure output type	CCXOutputParams
callbacks	Callback functions	Callbacks

All the properties in CreateDesignParams are optional.

Example

Step 1: User clicks the "Create project" button

The createDesign() function is called and passed createDesignCallback.
An Express editor component is launched in an iframe.

Step 2: User completes design and clicks "Save"

The project is saved to the user's Express account in project folder (appName) designated in the initialize() function.
The onPublish callback function is called. It passes the host application an object publishParams that includes the Express project ID (projectId) and image data representation (asset).
- The asset is saved and displayed in the image tag image-container. The associated project ID is also saved in a global variable so that we can pre-load it in an editor component later via editDesign().

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Create Project Sample</title>
  </head>  
  <body>
    <button id="create-project-button">Create project</button>
    <img id="image-container" height="420" width="420" />

    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
    <script type="text/javascript">

    /* Initialize projectId to null until it gets set by onPublish callback */
    var projectId = null;
    
    var imageContainer = document.getElementById("image-container");
    const createButton = document.getElementById("create-project-button");
    
    (() => {
        if (!window.CCEverywhere) {
            return;
        }
        const ccEverywhere = window.CCEverywhere.initialize({
            clientId: YOUR_CLIENT_ID,
            appName: PROJECT_NAME,
            appVersion: { major: 1, minor: 0 },
            platformCategory: 'web', 
            redirectUri: YOUR_REDIRECT_URI
        });
    })();
    

    const createButton = document.getElementById("create-project-button");
        createButton.addEventListener('click', () => {
            const createDesignCallback = {
                onCancel: () => {},
                onPublish: (publishParams) => {
                    const localData = { project: publishParams.projectId, image: publishParams.asset.data };
                    imageContainer.src = localData.image;
                    projectId = localData.project;
                },
                onError: (err) => {
                    console.error('Error received is', err.toString());
                },
            };
            
            ccEverywhere.createDesign(
                {
                    callbacks: createDesignCallback, 
                    outputParams: {
                        outputType: "base64",
                    }
                }
            );  
    });
    </script>
  </body> 
</html>
Copied to your clipboard
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>Create Project Sample</title>
5  </head>  
6  <body>
7    <button id="create-project-button">Create project</button>
8    <img id="image-container" height="420" width="420" />
9
10    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
11    <script type="text/javascript">
12
13    /* Initialize projectId to null until it gets set by onPublish callback */
14    var projectId = null;
15    
16    var imageContainer = document.getElementById("image-container");
17    const createButton = document.getElementById("create-project-button");
18    
19    (() => {
20        if (!window.CCEverywhere) {
21            return;
22        }
23        const ccEverywhere = window.CCEverywhere.initialize({
24            clientId: YOUR_CLIENT_ID,
25            appName: PROJECT_NAME,
26            appVersion: { major: 1, minor: 0 },
27            platformCategory: 'web', 
28            redirectUri: YOUR_REDIRECT_URI
29        });
30    })();
31    
32
33    const createButton = document.getElementById("create-project-button");
34        createButton.addEventListener('click', () => {
35            const createDesignCallback = {
36                onCancel: () => {},
37                onPublish: (publishParams) => {
38                    const localData = { project: publishParams.projectId, image: publishParams.asset.data };
39                    imageContainer.src = localData.image;
40                    projectId = localData.project;
41                },
42                onError: (err) => {
43                    console.error('Error received is', err.toString());
44                },
45            };
46            
47            ccEverywhere.createDesign(
48                {
49                    callbacks: createDesignCallback, 
50                    outputParams: {
51                        outputType: "base64",
52                    }
53                }
54            );  
55    });
56    </script>
57  </body> 
58</html>

Now that you have created a project and rendered the final design onto your own page, let's explore loading pre-existing projects into a Adobe Express editor.

Embed Express Editor

Edit Existing Project