Skip to main content
CESDK/CE.SDK/Web Editor/Customization/API Reference

Customizing the Dock

Explore how to customize the dock

There are 2 APIs for getting and setting the order of components in the Dock.

The content of the Dock changes based on the current edit mode ('Transform' (the default), 'Text', 'Crop', 'Trim', or a custom value), so both APIs accept an orderContext argument to specify the mode.

For example usage of these APIs, see also Moving Existing Buttons or Adding New Buttons in the Guides section.

Get the Current Order#

getDockOrder(
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order for the 'Transform' edit mode is returned, e.g.

cesdk.ui.getDockOrder();
// [
//   {
//     id: 'ly.img.assetLibrary.dock',
//     key: 'ly.img.template',
//     icon: '@imgly/Template',
//     label: 'libraries.ly.img.template.label',
//     entries: [ 'ly.img.template' ]
//   },
//   ...
// ]

Set a new Order#

setDockOrder(
  dockOrder: (DockOrderComponentId | DockOrderComponent)[],
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order is set for the default edit mode ('Transform'), e.g.:

// Sets the order for transform mode by default
cesdk.ui.setDockOrder([ 'my.component.for.transform.mode' ]);

Dock Components#

The following lists the default Dock components available within CE.SDK.

Layout Helpers#

Component IDDescription
Component ID
ly.img.separator
Description
Adds a small space (invisible <hr> element) in the Dock to help the visual separation of entries.
Separators follow some special layouting rules:
- If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered.
- Separators that end up being the first or last element in the Dock will not be rendered.
- Separators directly adjacent to the top side of a spacer (see below) will not be rendered.
Component ID
ly.img.spacer
Description
Adds vertical spacing in the Dock.
Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Dock.

Asset Library#

Component IDDescription
Component ID
ly.img.assetLibrary.dock
Description
Asset Library:
A button that opens the Asset Library Panel, showing the content of one or more associated asset entries. Requires additional keys to be set on the object passed to setDockOrder, as described below.

Payload#

KeyTypeDescription
Key
key
Type
string
Description
Needs to be unique within the set of components in the Dock.
Key
label
Type
string
Description
Used as a label for the button. If a matching I18N key is found, the label is localized.
Key
icon
Type
CustomIcon
Description
One of 3 things:
-A URL string pointing to an SVG image, or:
- The string identifier of a custom or built-in icon (see Icons), or:
- A callback returning a URL, which takes a single parameter of type {theme: string, iconSize: 'normal' \| 'large' }.
Key
entries
Type
string[]
Description
List of Asset Entries that will be shown in the Asset Library Panel when pressing the button. A single entry will open that entry directly. Multiple entries will show a group overview.

Example Usage#

// Set the Dock Order to show only the Image Asset Library.
cesdk.ui.setDockOrder([{
  id: "ly.img.assetLibrary.dock",        // Component id
                                         // All other keys are payload / parameters passed to the component
  key: "ly.img.image",
  icon: "@imgly/Image",
  label: "libraries.ly.img.image.label", // Using a I18N key
  entries: [
    "ly.img.image"                       // Only 1 entry is to be shown
  ]
}])

Default Order#

[
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.template",
    "icon": "@imgly/Template",
    "label": "libraries.ly.img.template.label",
    "entries": [
      "ly.img.template"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.video.template",
    "icon": "@imgly/Template",
    "label": "libraries.ly.img.video.template.label",
    "entries": [
      "ly.img.video.template"
    ]
  },
  {
    "id": "ly.img.separator"
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.elements",
    "icon": "@imgly/Library",
    "label": "component.library.elements",
    "entries": [
      "ly.img.upload",
      "ly.img.video",
      "ly.img.audio",
      "ly.img.image",
      "ly.img.text",
      "ly.img.vectorpath",
      "ly.img.sticker",
      "cutout-entry"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.upload",
    "icon": "@imgly/Upload",
    "label": "libraries.ly.img.upload.label",
    "entries": [
      "ly.img.upload"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.video",
    "icon": "@imgly/Video",
    "label": "libraries.ly.img.video.label",
    "entries": [
      "ly.img.video"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.audio",
    "icon": "@imgly/Audio",
    "label": "libraries.ly.img.audio.label",
    "entries": [
      "ly.img.audio"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.image",
    "icon": "@imgly/Image",
    "label": "libraries.ly.img.image.label",
    "entries": [
      "ly.img.image"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.text",
    "icon": "@imgly/Text",
    "label": "libraries.ly.img.text.label",
    "entries": [
      "ly.img.text"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.vectorpath",
    "icon": "@imgly/Shapes",
    "label": "libraries.ly.img.vectorpath.label",
    "entries": [
      "ly.img.vectorpath"
    ]
  },
  {
    "id": "ly.img.assetLibrary.dock",
    "key": "ly.img.sticker",
    "icon": "@imgly/Sticker",
    "label": "libraries.ly.img.sticker.label",
    "entries": [
      "ly.img.sticker"
    ]
  }
]