How to add a custom button in Workspace?
To add extensible actions to entities:
Create a folder conf in the directory applicationservice in the s3 bucket.
Add the file entity-actions.json to this folder. The file entity-actions.json
contains the following extensible entity actions and blade actions:assetContextMenuActions: These are the actions that Quark Publishing Platform NextGen displays when you select the ellipses icon associated to an entity – asset or collection.
collectionContextMenuActions: These are the actions that Quark Publishing Platform NextGen displays when you select the ellipses icon associated to a collection
assetQuickActions: These are the actions that Quark Publishing Platform NextGen displays next to an asset.
collectionQuickActions: These are the actions that Quark Publishing Platform NextGen displays next to a collection.
otherActions: These are the actions that Quark Publishing Platform NextGen displays across the Workspace User Interface, which could be asset/action specific or universal.
Action Objects
An action object can have the following attributes based on the type of action:
| Attribute | Applicable to action type | Description |
|---|---|---|
| id | All | A unique id of an action |
| type | All | An action type specifies the function an action performs. There are four action types: |
| displayText | All | The name of the action on the User Interface. |
| hidden | All | A Boolean value to show/hide the action button. |
| iconUrl | All | The URL of the icon for an action button |
| VisibilityHandler | All | Name of the function to handle visibility for actions. |
| actionUrl | endpoint | The URL of the API endpoint. |
| dialogUrl | dialog | The location of the iframe index page. |
| dialogConfig {height; width;} | dialog | The attribute to specify the height and width of the dialog box. When you do not specify these dimensions, Quark Publishing. Platform NextGen assign a default dimension of 600px X 600px. |
| tabId | tab | The id of the tab that you select in the accessQuickActions. |
| parentId | menu | The Id of the menu type to which an action in the context menu belongs to. |
| context | All (but specific to topBarViewActions) | Context defines the OTB actions that Quark Publishing. Platform NextGen displays based on the tab you select. In the image below, each of the tabs – Home, Favorites, My Assignments, Continue Editing, Searches, and Browse – has its own context which decides the actions that appear on the top bar.  |
NOTE:
An otherActions action entity only has two attributes – id and visibilityHandler.
Action Type Examples
The following are some basic examples of each of the action types
- Endpoint
{ “id”: “qpp-send-to-sharepoint-id”, “type”: “endpoint”, “hidden”: true, “displayText”: “Send to Sharepoint”, “iconUrl”: “http://icons.iconarchive.com/icons/dakirby309/simplystyled/32/Microsoft-SharePoint-2013-icon.png”, “actionUrl”: “/customer/api/sendToSharepoint” } - Dialog
{ “id”: “qpp-send-email-id”, “type”: “dialog”, “hidden”: false, “displayText”: “Email”, “iconUrl”: “https://icons.iconarchive.com/icons/graphicloads/100- flat/48/email-2-icon.png”, “dialogUrl”: “http://localhost:9000/custom-actiondialog/index.html”, “dialogConfig”: { “height”: 200, “width”: 500 } }Download sample for dialog.
- Tab
{ “id”: “qpp-iframe-tab”, “displayText”: “Send to Sharepoint”, “hidden”: false, “frameUrl”: “http://localhost:9001/custom-actiondialog/index.html”, “iconUrl”: “http://icons.iconarchive.com/icons/dakirby309/simplystyled/32/Microsoft-SharePoint-2013-icon.png”, “type”: “iframe”, “height”: “100%”, “width”: “100%” } - Menu
{ "id": "qpp-menu1", "type": "menu", "displayText": "Menu1", "iconUrl": "https://image.flaticon.com/icons/png/512/561/561184.png" }, { "id": "qpp-menu2", "type": "menu", "displayText": "Menu2", "parentId": "qpp-menu1", "iconUrl": "https://image.flaticon.com/icons/png/512/561/561184.png" }Here qpp-menu2 is a child of qpp-menu1.
Download sample for menu.
Visibility Handler
The visibilityHandler is a function that gets a callback from the context in which
you perform an action through the User Interface. For example, Quark Publishing
Platform NextGen passes an entity object to the function visibilityHandler for
context menu and quick actions, and passes an asset object for tabs.
To load the function visibilityHandler, the file extensibility.json must be the folder conf in the directory applicationservice in the s3 bucket. The file extensibility.json contains JavaScript property, which is an array of the paths of
JavaScript relative to the folder conf. For example, the path for the file entity-actions.js in the folder conf is as follows:
{
“javascripts”: [
“entity-actions.js”
]
}
Download sample for visibilityHandler.
For iconUrl, you can use an absolute URL or you can add a custom image to the
folder conf/assets and then use the protocol “s3://” to load the image from relative
path. For example, the iconUrl “s3://people.png” loads the image people.png
available at the location applicationservice/conf/assets.
The entity-actions config is merged with the default action config listed below.
The Default entity-actions.json
{
"version": "0.0.1",
"assetContextMenuActions": [
{
"id": "qpp-checkout-action",
"displayText": "Edit",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-dropdown-edit.png"
},
{
"id": "qpp-read-only-action",
"displayText": "Read Only",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-read-only.png"
},
{
"id": "qpp-save-revision-action",
"displayText": "Update Revision",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-update-version.png"
},
{
"id": "qpp-download-action",
"displayText": "Download",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-download.png"
},
{
"id": "qpp-reindex-action",
"displayText": "ReIndex",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-reindex.png"
},
{
"id": "qpp-duplicate-action",
"displayText": "Duplicate",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-duplicate.png"
},
{
"id": "qpp-create-branch-action",
"displayText": "Create Branch",
"hidden": false,
"iconCls": "fas fa-code-branch"
},
{
"id": "qpp-branching-action",
"displayText": "Branching",
"hidden": false,
"iconCls": "fas fa-code-branch",
"type": "menu"
},
{
"id": "qpp-branching-new-branch-action",
"displayText": "New Branch",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-new-branch.png",
"parentId": "qpp-branching-action"
},
{
"id": "qpp-branching-edit-branch-label-action",
"displayText": "Edit Branch Label",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-dropdown-edit.png",
"parentId": "qpp-branching-action"
},
{
"id": "qpp-branching-delete-branch-action",
"displayText": "Delete Branch",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-delete.png",
"parentId": "qpp-branching-action"
},
{
"id": "qpp-publish-action",
"displayText": "Publish",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-publish.png"
},
{
"id": "qpp-revert-to-this-version-action",
"displayText": "Revert To This Version",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-revert.png"
},
{
"id": "qpp-discard-changes-action",
"displayText": "Discard",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-discard.png"
},
{
"id": "qpp-delete-action",
"displayText": "Delete",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-delete.png"
}
],
"collectionContextMenuActions": [
{
"id": "qpp-properties-action",
"displayText": "Attributes",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-details.png"
},
{
"id": "qpp-duplicate-action",
"displayText": "Duplicate",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-duplicate.png"
},
{
"id": "qpp-copy-collection-action",
"displayText": "Copy",
"hidden": false,
"iconUrl": "assets/icons/action-icons/collection-duplicate.png"
},
{
"id": "qpp-move-collection-action",
"displayText": "Move",
"hidden": false,
"iconUrl": "assets/icons/action-icons/collection-move.png"
},
{
"id": "qpp-delete-action",
"displayText": "Delete",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-delete.png"
}
],
"assetQuickActions": [
{
"id": "qpp-checkout-action",
"displayText": "Edit",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-dropdown-edit.png"
},
{
"id": "qpp-preview-action",
"type": "tab",
"tabId": "qpp-preview-tab",
"displayText": "Preview",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-preview.png"
},
{
"id": "qpp-properties-action",
"type": "tab",
"tabId": "qpp-properties-tab",
"displayText": "Attributes",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-info.png"
},
{
"id": "qpp-links-action",
"type": "tab",
"tabId": "qpp-links-tab",
"displayText": "Links",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-links.png"
}
],
"collectionQuickActions": [
{
"id": "qpp-properties-action",
"displayText": "Attributes",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-info.png"
}
],
"assetTabs": [
{
"id": "qpp-preview-tab",
"displayText": "Preview",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-preview.png"
},
{
"id": "qpp-history-tab",
"displayText": "History",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-history.png"
},
{
"id": "qpp-properties-tab",
"displayText": "Attributes",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-info.png"
},
{
"id": "qpp-links-tab",
"displayText": "Links",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-links.png"
},
{
"id": "qpp-audit-tab",
"displayText": "Audit",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-audit.png"
},
{
"id": "qpp-all-branches-tab",
"displayText": "Branches",
"hidden": false,
"iconCls": "fas fa-code-branch"
},
{
"id": "qpp-analytics-tab",
"displayText": "Trends",
"hidden": false,
"iconUrl": "assets/icons/action-icons/ico-analytics.png"
}
],
"topbarViewActions": [
{
"id": "qpp-upload-action",
"context": ["favorite","assignment","checkout","search","browse"]
},
{
"id": "qpp-upload-file-action",
"context": ["favorite","assignment","checkout","search","browse"]
},
{
"id": "qpp-upload-folder-action",
"context": ["favorite","assignment","checkout","search","browse"]
},
{
"id": "qpp-go-to-location-action",
"context": ["favorite","assignment","checkout","search"]
},
{
"id": "qpp-more-favorite-action",
"context": ["favorite"]
},
{
"id": "qpp-remove-from-favorites-action",
"context": ["favorite"]
},
{
"id": "qpp-more-asset-action",
"context": ["favorite", "assignment", "checkout","search","browse","asset-detail"]
},
{
"id": "qpp-checkout-action",
"context": ["favorite", "assignment","checkout","search","browse","asset-detail"]
},
{
"id": "qpp-save-revision-action",
"context": ["favorite", "assignment","checkout","search","browse"]
},
{
"id": "qpp-download-action",
"context": ["favorite", "assignment","checkout","search","browse","asset-detail"]
},
{
"id": "qpp-publish-action",
"context": ["asset-detail"]
},
{
"id": "qpp-export-action",
"context": ["assignment","checkout"]
},
{
"id": "qpp-reindex-action",
"context": ["favorite", "assignment","checkout","search","browse","asset-detail"]
},
{
"id": "qpp-duplicate-action",
"context": ["favorite", "assignment","checkout","search","browse"]
},
{
"id": "qpp-update-data-action",
"context": ["favorite", "assignment","checkout","search","browse","asset-detail"]
},
{
"id": "qpp-discard-changes-action",
"context": ["favorite", "assignment","checkout","search","browse","asset-detail"]
},
{
"id": "qpp-delete-action",
"context": ["favorite", "assignment","checkout","search","browse"]
},
{
"id": "qpp-edit-properties-action",
"context": ["assignment","checkout","search","browse"]
},
{
"id": "qpp-new-search-action",
"context": ["search"]
},
{
"id": "qpp-duplicate-search-action",
"context": ["search"]
},
{
"id": "qpp-edit-search-action",
"context": ["search"]
},
{
"id": "qpp-discard-search-action",
"context": ["search"]
},
{
"id": "qpp-share-search-action",
"context": ["search"]
},
{
"id": "qpp-more-search-action",
"context": ["search"]
},
{
"id": "qpp-export-search-action",
"context": ["search"]
},
{
"id": "qpp-delete-search-action",
"context": ["search"]
},
{
"id": "qpp-new-collection-dropdown-action",
"context": ["browse"]
},
{
"id": "qpp-new-collection-action",
"context": ["browse"]
},
{
"id": "qpp-new-collection-template-action",
"context": ["browse"]
},
{
"id": "qpp-new-collection-from-template-action",
"context": ["browse"]
},
{
"id": "qpp-collection-properties-action",
"context": ["favorite","search","browse"]
},
{
"id": "qpp-collection-duplicate-action",
"context": ["favorite","search","browse"]
},
{
"id": "qpp-more-collection-action",
"context": ["favorite","search","browse"]
},
{
"id": "qpp-copy-collection-action",
"context": ["favorite","search","browse"]
},
{
"id": "qpp-move-collection-action",
"context": ["favorite","search","browse"]
},
{
"id": "qpp-delete-collection-action",
"context": ["favorite","search","browse"]
},
{
"id": "qpp-start-workflow-action",
"context": ["asset-detail"]
},
{
"id": "qpp-change-workflow-action",
"context": ["asset-detail"]
},
{
"id": "qpp-revert-to-version-action",
"context": ["asset-detail"]
},
{
"id": "qpp-create-branch-action",
"context": ["asset-detail"]
},
{
"id": "qpp-collapse-expand-collection-tree-action",
"context": ["browse"]
},
{
"id": "qpp-collapse-search-pane-action",
"context": ["search"]
}
],
"otherActions": [
{
"id": "qpp-open-in-read-only-action"
},
{
"id": "qpp-revert-to-version-action"
}
]
}