fix broken hyperlinks, update export options documentation

AdobeDocs · Feb 10, 2022 · 67dbf05 · 67dbf05
1 parent 93d23a4
commit 67dbf05
Show file tree

Hide file tree

Showing 10 changed files with 223 additions and 314 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@
   * [Quick Actions API](docs/quick_actions.md)
 * [API References](docs/api_ref.md)
 * [Customization](docs/customization.md)
+* [Sample](sample/README.md)
 #
 
 CC Everywhere SDK is an easy-to-integrate, customizable, all-in-one JavaScript library that brings CC Express (CCX) capabilities to all applications. Designed to support web (and in the future, mobile) platforms, over time it will include live template generation and other modular building blocks for content-first, task-based creative tooling drawn from CCX. 
@@ -54,6 +55,7 @@ After the user launches the CCX editor component upon any user interaction you s
   * Reverse Video
   * Trim Video
 
+Read more about the Quick Actions API [here](docs/quick_actions.md).
 
 ---
 

diff --git a/docs/api_ref.md b/docs/api_ref.md
@@ -18,8 +18,7 @@
   - [EditInputParams](#editinputparams)
   - [ExportOption](#exportoption)
     - [ExportButton](#exportbutton)
-    - [ExportButtonGroup](#exportbuttongroup)
-    - [CustomExportButton: Custom Button Clicks](#customexportbutton-custom-button-clicks)
+      - [__label__](#label)
     - [NativeExportButton: Render a Native Button](#nativeexportbutton-render-a-native-button)
     - [Example](#example)
   - [ModalParams](#modalparams)
@@ -179,7 +178,7 @@ An Asset type has three properties:
 
 | Property | Value(s)
 |:-- | :--
-| type | 'image' or 'video'
+| type | 'image'
 | dataType | 'base64'
 | data | string (base 64 representation of output)
 
@@ -188,7 +187,7 @@ An Asset type has three properties:
 An OutputAsset type has an additional property, and 2 optional properties.
 | Property | Value(s)
 |:-- | :--
-| type | 'image' or 'video'
+| type | 'image'
 | dataType | 'base64'
 | data | string (base 64 representation of output)
 | fileType | 'jpeg', 'pdf', 'png', 'mp4'
@@ -261,38 +260,22 @@ Allows you to specify the project ID the target application (CCX Editor Componen
 
 ---
 ## ExportOption
-This interface describes the base object for export buttons and groups. Allows you to define export buttons and groups for a Quick Action. All the properties are optional.
+Allows you to define export buttons and groups for a Quick Action. All the properties are optional. Must be specified in [QuickActionsInputParams](#quickactioninputparams) - it can be an empty array.
 
 
 ### ExportButton 
-This interface describes the base object that is used to render a button once the quick action has completed the action. 
+This interface describes the base object that is used to render a button once the quick action has completed the action.  
+
 | Property | Value | Description
 | :-- | :--|:--
 |optionType| "button" | QA renders single standalone button
-|label| string | Export label name
+|[label](#label)| string | Export label name
 |variant | "cta"/"primary"/"secondary" | Defines the [style](https://spectrum.adobe.com/page/button/) of a button.
-| buttonType | 'custom' or 'native' | Type of export button ([Custom](#customexportbutton-custom-button-clicks)/[Native](#nativeexportbutton-render-a-native-button))
+| buttonType | 'native' | Type of export button ([Native](#nativeexportbutton-render-a-native-button))
 | optionType | 'button' | Type of ExportOption 
 
-### ExportButtonGroup
-This interface describes the object that is used to render a group of buttons which will be shown as a drop down under a parent button. 
-| Property | Value | Description
-| :-- | :--|:--
-|optionType| "group" | QA renders drop-down button
-|label| string | Export label name
-|variant | "cta"/"primary"/"secondary" | Defines the [style](https://spectrum.adobe.com/page/button/) of a button.
-| buttons | array of [ExportButton](#export-button) | List of buttons under a dropdown menu
-
-
-### CustomExportButton: Custom Button Clicks
-
-This interface describes an object that is used to render a custom button once the quick action has completed the action.  On button click, the id will be passed back in the `onPublish` callback, along with the asset data. 
-| Property | Value | Description
-| :-- | :--|:--
-|id| string | ID of the export button 
-|label| string | Localized text of the export button
-|target | 'Host' | Used to render a custom button. Currently only 'Host'.
-| buttonType | 'custom' | Type of button
+#### __label__
+"label" defaults to "Customize" when the target is "Editor" and "Download" when the target is "Download".
 
 ### NativeExportButton: Render a Native Button
 
@@ -303,29 +286,16 @@ This interface describes an object that is used to render a native button once t
 |          | 'new' | QA handles button click in a new tab/window
 |target | 'Download' | On click will download the asset
 |  | 'Editor' | On click will open the asset in CCX
-| buttonType | 'custom' | Type of button
+| buttonType | 'native' | Type of button
 
 ### Example
 ```
 const exportOptions = [
-    // EXPORT BUTTON GROUP 
-    {
-        label: 'Open In',
-        optionType: 'group',
-        variant: 'cta',
-        buttons: [
-        {
-            target: "Editor",
-            label: "Express",
-            buttonType: "native",
-            optionType: "button"
-        },]
-    },
-        /** target: allows the Quick Task to determine type of export */
+    
+    ** target: allows the Quick Task to determine type of export */
     {
-        target: 'Host',
-        id: '@id/random',
-        label: 'Save in Your App',
+        // Customize in Express button
+        target: 'Editor',
         variant: 'cta',
         optionType: 'button',
         buttonType: 'custom'
@@ -364,15 +334,16 @@ Allows you to specify the asset and export buttons/groups you want to perform a
 ---
 
 ## Table of Contents
-* [Overview](README.md)
+* [Overview](../README.md)
 * Get Started 
-  * [Configuration](docs/configuration.md)
-  * [Local Development](docs/local_dev.md)
-  * [Quick Start](docs/quickstart.md)
+  * [Configuration](configuration.md)
+  * [Local Development](local_dev.md)
+  * [Quick Start](quickstart.md)
 * SDK Components
   * CCX Editor Component
-    * [Create Project API](docs/create_project.md)
-    * [Open Project API](docs/edit_project.md)
-  * [Quick Actions API](docs/quick_actions.md)
-* [API References](docs/api_ref.md)
-* [Customization](docs/customization.md)
+    * [Create Project API](create_project.md)
+    * [Open Project API](edit_project.md)
+  * [Quick Actions API](quick_actions.md)
+* [API References](api_ref.md)
+* [Customization](customization.md)
+* [Sample](../sample/README.md)
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -1,18 +1,19 @@
 # Configuration Steps
 
 ## Table of Contents
-* [Overview](README.md)
+* [Overview](../README.md)
 * Get Started 
-  * [Configuration](docs/configuration.md)
-  * [Local Development](docs/local_dev.md)
-  * [Quick Start](docs/quickstart.md)
+  * [Configuration](configuration.md)
+  * [Local Development](local_dev.md)
+  * [Quick Start](quickstart.md)
 * SDK Components
   * CCX Editor Component
-    * [Create Project API](docs/create_project.md)
-    * [Open Project API](docs/edit_project.md)
-  * [Quick Actions API](docs/quick_actions.md)
-* [API References](docs/api_ref.md)
-* [Customization](docs/customization.md)
+    * [Create Project API](create_project.md)
+    * [Open Project API](edit_project.md)
+  * [Quick Actions API](quick_actions.md)
+* [API References](api_ref.md)
+* [Customization](customization.md)
+* [Sample](../sample/README.md)
 #
 
 

diff --git a/docs/create_project.md b/docs/create_project.md
@@ -1,17 +1,18 @@
 # Creating a Project
 ## Table of Contents
-* [Overview](README.md)
+* [Overview](../README.md)
 * Get Started 
-  * [Configuration](docs/configuration.md)
-  * [Local Development](docs/local_dev.md)
-  * [Quick Start](docs/quickstart.md)
+  * [Configuration](configuration.md)
+  * [Local Development](local_dev.md)
+  * [Quick Start](quickstart.md)
 * SDK Components
   * CCX Editor Component
-    * [Create Project API](docs/create_project.md)
-    * [Open Project API](docs/edit_project.md)
-  * [Quick Actions API](docs/quick_actions.md)
-* [API References](docs/api_ref.md)
-* [Customization](docs/customization.md)
+    * [Create Project API](create_project.md)
+    * [Open Project API](edit_project.md)
+  * [Quick Actions API](quick_actions.md)
+* [API References](api_ref.md)
+* [Customization](customization.md)
+* [Sample](../sample/README.md)
 #
 ## Create Project in CCX Editor: Create Project API
 Users can launch a new project in a CCX editor, using the Create Project API. The CCEverywhere Object exposes this API with the `createDesign()` method.
@@ -26,7 +27,7 @@ This function creates a new design using CCEverywhere and takes an object of par
 * [modalParams](api_ref.md#modalparams): determines size of CCX editor modal
 * [inputParams](api_ref.md#createinputparams) canvasAspectId, template types, template search
 * [outputParams](api_ref.md#ccxoutputparams): output type
-* [Callbacks](api_ref.md#callbacks) 
+* [callbacks](api_ref.md#callbacks) 
 
 ```
 ccEverywhere.createDesign(
@@ -61,59 +62,60 @@ When the "createDesign" button is clicked, the Create Project API is called and
     <title>Create Project Sample</title>
   </head>  
   <body>
-    <button id="createDesign">Create project</button>
-    <img id="savedDesign" height="420" width="420" />
+    <button id="create-project-button">Create project</button>
+    <img id="image-container" height="420" width="420" />
 
     <script type="text/javascript" src="./CCEverywhere.js"></script>
     <script type="text/javascript">
-        // Initialize projectId to null until it gets set by onPublish callback
-        var projectId = null;
-        // Set to null until CCEverywhere object is initialized
-        var ccEverywhere = null;
-        var imageData = document.getElementById("savedDesign");
-        const createButton = document.getElementById("createDesign");
+
+    /* Initialize projectId to null until it gets set by onPublish callback */
+    var projectId = null;
+    /* Set to null until CCEverywhere object is initialized */
+    var ccEverywhere = null;
+    var imageContainer = document.getElementById("image-container");
+    const createButton = document.getElementById("create-project-button");
         
-        ccEverywhere = CCEverywhere.default.initialize(
-            {
-                clientId: YOUR_CLIENT_ID,
-                appName: PROJECT_NAME,
-                appVersion: { major: 1, minor: 0 },
-                platformCategory: 'web'
-            }
-        );
+    ccEverywhere = CCEverywhere.default.initialize(
+        {
+            clientId: YOUR_CLIENT_ID,
+            appName: PROJECT_NAME,
+            appVersion: { major: 1, minor: 0 },
+            platformCategory: 'web'
+        }
+    );
 
-        createButton.onclick = () => {
-            const createDesignCallback = {
-                onCancel: () => {},
-                onPublish: (publishParams) => {
-                    // User clicked "Save"
-                    // Save image data to render in sample
-                    // Save projectId for editing later
-                    const localData = { 
-                        project: publishParams.projectId, 
-                        image: publishParams.asset.data 
-                    };
-                    imageData.src = localData.image;
-                    projectId = localData.project; 
-                },
-                onError: (err) => {
-                    console.error('Error received is', err.toString());
-                },
-            };
+    createButton.onclick = () => {
+        const createDesignCallback = {
+            onCancel: () => {},
+            onPublish: (publishParams) => {
+                /* User clicked "Save"
+                   Save image data to render in sample
+                   Save projectId for editing later */
+                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
-                }
-            );  
-        }
+        ccEverywhere.createDesign(
+            {
+                callbacks: createDesignCallback
+            }
+        );  
+    }
     </script>
   </body> 
 </html>
 ```
 __Notes__:
 - When `onPublish` is called, we save the project ID in a global variable `projectId` so we can use it to modify the same project later.
-- "savedDesign" is the ID of an image element, and its source tag is updated to reflect user's project creations and edits. "createDesign" is the ID of a button element, and click events on this button launch the editor.
+- "imageContainer" is the ID of an image element, and its source tag is updated to reflect user's project creations and edits. "create-project-button" is the ID of a button element, and click events on this button launch the editor.
 
 
 Now that you have created a project and rendered the final design onto your own page, let's explore the [Open Project API](edit_project.md) to see how you can launch the editor to make changes to existing projects.

diff --git a/docs/customization.md b/docs/customization.md
@@ -1,17 +1,18 @@
 # Customization 
 ## Table of Contents
-* [Overview](README.md)
+* [Overview](../README.md)
 * Get Started 
-  * [Configuration](docs/configuration.md)
-  * [Local Development](docs/local_dev.md)
-  * [Quick Start](docs/quickstart.md)
+  * [Configuration](configuration.md)
+  * [Local Development](local_dev.md)
+  * [Quick Start](quickstart.md)
 * SDK Components
   * CCX Editor Component
-    * [Create Project API](docs/create_project.md)
-    * [Open Project API](docs/edit_project.md)
-  * [Quick Actions API](docs/quick_actions.md)
-* [API References](docs/api_ref.md)
-* [Customization](docs/customization.md)
+    * [Create Project API](create_project.md)
+    * [Open Project API](edit_project.md)
+  * [Quick Actions API](quick_actions.md)
+* [API References](api_ref.md)
+* [Customization](customization.md)
+* [Sample](../sample/README.md)
 #
 
 ## Locale