How to add a custom pane in Workspace?

The entity-actions file contains a JSON object that has the key assetTabs, which contains metadata for the tabs in the asset detail view.

Based on the type, tab objects can have the following attributes:

Tab Type Examples

The following are some basic examples of each of the tab type:
iframe

{
    “id”: “qpp-iframe-tab”,
    “type”: “iframe”,
    “frameUrl”: “http://localhost:9001/custom-actiondialog/index.html”,
    “hidden”: false,
    “displayText”: “Send to Sharepoint”,
    “iconUrl”:”http://icons.iconarchive.com/icons/dakirby309/simplystyled/32/Microsoft-SharePoint-2013-icon.png”
}

library

{
    “id”: “qpp-library-tab”,
    “type”: “library”,
    “extensionPoint”: “workspace/asset-detail/qppextensible-tab”,
    “hidden”: false,
    “displayText”: “Email”,
    “iconUrl”: “https://1000logos.net/wpcontent/uploads/2021/04/Facebook-logo.png”
}

Download sample for tab.

Custom Angular Library Plugin

To create a custom angular library plugin

1. Create a new angular library module A1
2. Add the following dependencies to A1:
   1. @quark/platform-components-ng
   2. @quark/qwc
3. Create a new class component that implements the class component AbstractPlugin in the module platform-components-ng.
4. Override the method onPluginActivated that listens for the callback from
   the custom tab component and carries BehaviorSubject for the event data.
   
5. After you have created an angular library, host the JavaScript UMD file at a
   location of your choice. You can find the location in the distribution folder of your angular project.
   
6. Create the file plugins-config.json and store it in the folder conf in the
   directory applicationservice in the s3 bucket. The file plugins-config.json
   contains an array of plugin objects.

A plugin object has the following attributes:

Sample plugins-config.json

[
    {
        “id”: 1,
        “name”: “Sample Library”,
        “description”: “Plugin load custom angular library plugin.”,
        “extensionPoint”: “workspace/asset-detail/qpp-extensibletab”,
        “url”: “http://localhost:9000/pluginlibrary/bundles/plugin-library.umd.js”,
        “ngLibrary”: {
            “name”: “plugin-library”,
            “module”: “PluginModule”,
            “component”: “SamplePluginComponent”
        },
        “enabled”: true
    }
]

NOTE: To call any application REST API from the iframe, the frame URL must have the same origin (domain + port) as the host application.

When you edit or add any plugin through admin portal, Quark Publishing Platform NextGen reverts the changes.