Skip to main content

How to add a ribbon button in Adapter for Microsoft Word?

How to add a ribbon button in Adapter for Microsoft Word?

Ribbon Extensibility

This sample demonstrates the capability of adding a new ribbon button, along with handling conditional validation and execution of associated action. The sample also additionally demonstrates the capability of moving the out-of-the-box ribbon buttons of ‘Done Editing’ and ‘Discard changes’ to the ribbon in Home Tab.

In general, using ribbon extensibility following use cases can be achieved

  • Add new ribbon elements with custom validations and actions.
  • Override existing ribbon control actions and validations.
  • Override existing ribbon control icons or strings.

Add-In Extensibility

This sample also demonstrates the capability of tweaking the save routine using the BeforeSave event.

To demonstrate the same, it sets the asset name in the following format: _Test.docx

Enhanced add-in extensibility opens immense possibilities for developers by allowing access to the Application object, also see https://msdn.microsoft.com/en-us/library/office/ff194565.aspx

Developers can register for various native Microsoft Word events and also programmatically override the Ribbon class.

Configuration

To configure the sample, follow the steps mentioned below:

Update publish version

If published version of the Add-in is already installed then create copy of /Application Files/Quark.CMSAdapters.Office.Word_ folder and change the published version (preferably by changing last digit which denotes build revision) e.g. if folder name is Quark.CMSAdapters.Office.Word_11_2_25000_0 then create copy of this folder with name Quark.CMSAdapters.Office.Word_11_2_25000_1.

Note: If you have changed the published version then in the configuration steps below, wherever specified, denotes .

Override the out-of-the-box configuration

  • Copy the following file to the /Application Files/Quark.CMSAdapters.Office.Word_ folder
    • Quark.CMSAdapters.Samples.Office.Word.Extension.dll
  • Modify the Quark.CMSAdapters.config.deploy file as follows
    • Add the highlighted content below to the section:
      
      <appSettings>
      
      <add key="IAddInHostExtension" value="Quark.CMSAdapters.Samples.Office.Word.Extension" />
      
      </appSettings>
      
      
  • Modify the Ribbon.config.deploy file as follows
    • Add the highlighted content above <backstage onShow=”OnBackstageShow”> section:
      
      <ribbon>
        <tabs>
          <tab idMso="TabHome">
            <group id="CMSTabGroupShow" getLabel="GetLabel">
              
              	  <button id="CMSCheckIn4" tag="Id=CMSCheckIn;SaveSilently=false;SaveAsMinorVersion=;KeepMoreOptionsExpanded=" getImage="GetImage" getLabel="GetLabel" getEnabled="IsActionEnabled" onAction="Save" size="large"/>
      		  <button id="CMSCancelCheckout2" tag="Id=CMSCancelCheckout" getImage="GetImage" getLabel="GetLabel" getEnabled="IsActionEnabled" onAction="CancelCheckout" size="large"/>
            <button id="SampleActionId" getImage="GetControlImage" getLabel="GetControlLabel" getEnabled="IsSampleActionEnabled" onAction="SampleAction" size="large" />
            </group>
          </tab>
        </tabs>
      </ribbon>
      
      

Update the ClickOnce VSTO installer

  • Delete <Publish Location>/Application Files/Quark.CMSAdapters.Office.Word_<Publish Version>/ Quark.CMSAdapters.Office.Word.vsto file.
  • Open Visual studio command prompt and run command “Mage” which will open Mage tool
  • Go to File->Open and select <Publish Location>/Application Files/Quark.CMSAdapters.Office.Word_<Publish Version>/Quark.CMSAdapters.Office.Word.dll.manifest file.
  • Go to “Name” and set version number as specified in the name of Quark.CMSAdapters.Office.Word.dll.manifest file’s folder.

  • Go to “Files” and select check box “When populating add the .deploy extension to any file that does not have it” and click on Populate button as shown below

  • Go to File -> Save and select “Yes” in the Validation dialog as shown below.

  • Select option “Sign with certificate file” and provide the certificate file and password and click “OK”.

  • Close Mage tool.
  • Open Visual studio command prompt and run following command

    mage -Update “<Publish Location>/Quark.CMSAdapters.Office.Word.vsto” -AppManifest “<Publish Location>/Application Files/Quark.CMSAdapters.Office.Word_<Publish Version>\Quark.CMSAdapters.Office.Word.dll.manifest” -CertFile “<Certificate Location>\<Certificate>.pfx” -Password “<Password>”

  • Copy the <Publish Location>/Quark.CMSAdapters.Office.Word.vsto to <Publish Location>/Application Files/Quark.CMSAdapters.Office.Word_<Publish Version> folder

Download Sample

How to configure Quark XML Author to use external methods?

How to configure Quark XML Author to use external methods?

Programming for Quark XML Author

Quark XML Author can be configured to call any external application that exposes public methods. The person configuring Quark XML Author simply needs to know the assembly, class, and method name and what parameters the method expects. For example, the following method requires that an XML node and an array of Delegates be passed to it:

public bool IsEditableElement(XmlNode node, Delegate[] delegates)
{
  try
  {
   //read all the delegates here.
   //The namespaces for all delegates are Quark.XA.ExtensibilityDelegates.
   IsEditableElement isEditableElementDelegate = delegates[0] as IsEditableElement;           
   if(isEditableElementDelegate != null && node != null && node is XmlElement)
   {
     // This delegate indicates whether a node is editable or not.
     // This is based on values associated to a proprietary
     // Invision attribute called inv:access where
     // xmlns:inv="urn:xpressauthor:xpressdocument".This attribute is usually
     // applied in another EI method. A typical example would be a document coming
     // from a CMS system with certain nodes
     // tagged as non-editable, On an open, this EI method would read the non-editable
     // tag from this document and add a Quark XML Author
     //tag (inv:access="read-only") identifying it as a readOnly chunk.
     return isEditableElementDelegate(node);
   }
  }
  catch(Exception e)
  {
   System.Diagnostics.Debug.WriteLine("IsEditableElement Exception :" + e.Message + "\nStackTrace:" + e.StackTrace);
  }
  return false;
}

As long as the assembly and class to which this method belongs are known, Quark XML Author can be configured to supply the XML node and any delegates that the method requires. The method would do its work and return a Boolean value to Quark XML Author to be acted upon.

Calling Quark XML Author from an External Method with Delegates

In addition to being able to call external methods, Quark XML Author exposes its own methods that can be called by external methods via delegates. Delegates are function pointers to Quark XML Author methods that can be passed on to external DLLs. The External DLLs may then call the methods to perform operations within the application. Custom methods can accept delegates by implementing the Delegate[] argument type.

For more information, see the System Administrator Guide.

How to implement the support for a new language?

How to implement the support for a new language?

The Microsoft .Net Framework organizes language support in the following way. Each language has a main language resource assembly. For example, English (en). Within each language, there may be culture / locale specific versions of a language resource assembly.  For example, United States English (en-us) or British English (en-gb). Quark XML Author provides the same support for main language and locale specific language resources.

Figure 1: Locale specific versions of English supported by .Net

In addition, we need to differentiate between the Display Language and Editing Language within the context of Microsoft Office applications. The Display Language is the language displayed in the user interface (UI) of the Microsoft Office application. This includes menu items, toolbar buttons, ribbons, ribbon buttons, backstage views and Help. The Display Language only supports main language resources such as English (en), but not locale specific language resources such as United States English (en-us). The Editing Language is the language of the content that you are authoring on the Word canvas. This includes language-specific features such as dictionaries and grammar checking. The Editing Language supports locale specific language resources, “Figure”.

Figure 2: The user can specify both an editing language and a display language

Microsoft and Quark XML Author support using one language for the Display Language and a different language for the Editing Language. However, Quark XML Author does not support the authoring of multiple languages within a single Quark XML Author document.

Presently, Quark XML Author is distributed with the following Display language resources:

  • English main language

  • Spanish main language

  • Japanese main language

  • French main language

Quark XML Author supports the following languages:

Non-IME:

  • English

  • Spanish

  • French

  • Japanese

  • Chinese (Traditional)

  • Chinese (Simplified)

  • Korean

  • Vietnamese

  • Arabic

  • Hebrew

Support for these languages must be enabled in Microsoft Word. East Asian languages will also require IME to input characters.

Figure 3: Choosing an editing language

Bidirectional language support

Bidirectional languages (right-to-left languages) refers to any writing system that is written from right to left and includes languages that require contextual shaping, such as Arabic, and languages that do not. Right-to-Left languages are written and read mainly from right to left, but some portions of the text, such as numbers and embedded Latin languages (e.g. English) are written and read left to right.

Bidirectional language support in Microsoft Office

Microsoft Office supports right-to-left functionality and features for languages that work in a right-to-left (or a combined right-to-left, left-to-right) environment for entering, editing, and displaying text.

Bidirectional language support in Quark XML Author

XML Author supports authoring in LTR and RTL layouts depending on the default editing language set in MS Word.

To support Bidirectional Text in XML Author, the following option must be disabled in Microsoft Word:

Figure 4: The option to automatically switch keyboard to match language of surrounding text must be disabled.

Configuring the XAS to allow support of direction attributes for elements

The Quark XML Author structure must be configured to allow support for direction attributes of elements. Use the directionAttribute datatype to enable Quark XML Author to support bidirectional text.

An example is shown below:

<Attributes><AttributeDef name="dir" datatype="directionAttribute" visible="false"/>
<AttributeDef name="tablestyle" datatype="tableStyle" friendly="" visible="false"/></Attributes>
The following corresponding changes are required in the XpressSchema.xsd file:
<xs:attributeGroup name="fieldAttributes">
…
   <xs:enumeration value="directionAttribute"/></xs:attributeGroup>
<xs:attributeGroup name="tableStyle">
…
   <xs:attribute name="tableDirection" type="xs:string" use="optional" /></xs:attributeGroup>

Configuring the user interface for bidirectional language support

The dir attribute sets the text direction for elements regardless of the text direction of the document. Once this attribute is set, UI controls can be used to set text direction.

For example, the Text Direction buttons can be configured in config.xml to facilitate the insertion of elements with a right-to-left or left-to-right text direction, as in Microsoft Word.

<buttonGroup id="TextDirection">
       <toggleButton id ="TextDirectionLeftToRight"imageMso="TextDirectionLeftToRight">
           <InternalClass name="ToggleReadingDirectionControl" directionAttribute="ltr" />
       </toggleButton>
       <toggleButton id="TextDirectionRightToLeft" imageMso="TextDirectionRightToLeft">
           <InternalClass name="ToggleReadingDirectionControl" directionAttribute="rtl" />
        </toggleButton>
</buttonGroup>

Figure 5: Text direction buttons.

Configuring bidirectional language support at the content level

Use the TextDirection formatting type to format attributes that will allow different text runs within a single paragraph.

Example:

<Formatting>
...
<TextDirection name="ph" friendly="direction" TextDirectionAttributeName="dir"/>
...
  </Formatting>

 

The following changes must be made to the XpressSchema.xsd file:

 

  <xs:element name="XpressSchema">
    <xs:complexType>
      <xs:sequence>
       ...
       ...
       <xs:element name="TextDirection" minOccurs="0">
       <xs:complexType>
       <xs:attribute name="name" type="xs:string" use="required"/>
       <xs:attribute name="friendly" type="xs:string" use="optional"/>
       <xs:attribute name="TextDirectionAttributeName" type="xs:string" use="required"/>
       ...
       ...
        </xs:sequence>
      </xs:complexType>
</xs:element>

Configuring bidirectional language support at the element level

Text runs will be created for blocks of text whose text direction is different as compared to the element.

Root snippet:

<topic id ="" xmlns:inv="urn:xpressauthor:xpressdocument" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:noNamespaceSchemaLocation="BUSDOCS.xsd" xml:lang="ar" dir="rtl">
<title/><body/></topic>

 

The XML snippet generated for left-to-right  text in a paragraph:

<body>
       <p widow-orphan="true" xml:id="IDd3ab0288-d634-4e82-90b1-c1ecd1b3ee5f">سشةحمث <ph dir="ltr">  sample text </ph>
 </p>
</body

 

Add the following to the element definition to support multi-directonal text runs:

<Formatting>
      --------
    <FormattingType name="ph"/>
</Formatting>

Configuring bidirectional language support at the document level

To configure bidirectional language support at the document level, see  dir.

How to access out of the box functions through third-party Excel Add-in?

How to access out of the box functions through third-party Excel Add-in?

This sample demonstrates the capability of hiding all out of the box UI options and accessing same functionality from third-party Excel Add-in. This sample exposes automation service object to allow third-party Add-Ins to communicate with Quark Add-in.

Configuration

To configure the sample, follow the steps mentioned below:

  • Copy the following files to the Platform Adapter installation folder, e.g. “C:\Program Files (x86)\Quark\Platform Adapter for Microsoft Office\Excel
    • Quark.CMSAdapters.Samples.Office.Excel.Extension.Automation.dll
    • Quark.CMSAdapters.Samples.Office.Excel.Extension.Automation.pdb
    • Ribbon.config
  • Modify the Quark.CMSAdapters.config file as follows
    • Add the highlighted content below to the section:
      
      <appSettings>
      <!-- Other -->
      <add key="IAddInHostExtension" value="Quark.CMSAdapters.Samples.Office.Excel.Extension.Automation" />
      <!-- Other -->
      </appSettings >
      
      

Once the configuration is complete you can test automation capability using TestExcelAddIn which is included with this sample.


Download Sample

How to add a ribbon button in Adapter for Microsoft Excel?

How to add a ribbon button in Adapter for Microsoft Excel?

This sample demonstrates the capability of adding a new ribbon button, along with handling conditional validation and execution of associated action.

s3 location

In general, using ribbon extensibility following use cases can be achieved

  • Add new ribbon elements with custom validations and actions.
  • Override existing ribbon control actions and validations.
  • Override existing ribbon control icons or strings.

Add-In Extensibility

This sample also demonstrates the capability of tweaking the save routine using the BeforeSave event.

To demonstrate the same, it sets the asset name in the following format: _

Enhanced add-in extensibility opens immense possibilities for developers by allowing access to the Application object, also see https://msdn.microsoft.com/en-us/library/office/ff194565.aspx

Developers can register for various native Microsoft Excel events and also programmatically override the Ribbon class.

Configuration

To configure the sample, follow the steps mentioned below:

Update publish version

If published version of the Add-in is already installed then create copy of /Application Files/Quark.CMSAdapters.Office.Excel_ folder and change the published version (preferably by changing last digit which denotes build revision) e.g. if folder name is Quark.CMSAdapters.Office.Excel_11_2_25000_0 then create copy of this folder with name Quark.CMSAdapters.Office.Excel_11_2_25000_1.

Note: If you have changed the published version then in the configuration steps below, wherever specified, denotes .

Override the out-of-the-box configuration

  • Copy the following file to the <Publish Location>/Application Files/Quark.CMSAdapters.Office.Excel_<Publish Version> folder

    Quark.CMSAdapters.Samples.Office.Excel.Extension.dll

  • Modify the Quark.CMSAdapters.config.deploy file as follows

    Add the highlighted content below to the section:

    
    <appSettings>
    <!-- Other -->
    <add key="IAddInHostExtension" value="Quark.CMSAdapters.Samples.Office.Excel.Extension" />
    <!-- Other -->
    </appSettings>
    
  • Modify the Ribbon.config.deploy file as follows

    Add the highlighted content below to the <ribbon> section:

    
    <ribbon>
    <tabs>
    <tab idMso="TabHome">
    <group id="CMSTabGroupShow" getLabel="GetLabel">
    <!-- Other -->
    <button id="SampleActionId" getImage="GetControlImage" getLabel="GetControlLabel" 
    getEnabled="IsSampleActionEnabled" onAction="SampleAction" size="large" /> </group> </tab> </tabs> </ribbon>

Update the ClickOnce VSTO installer

  • Delete <Publish Location>/Application Files/Quark.CMSAdapters.Office.Excel_<Publish Version>/ Quark.CMSAdapters.Office.Excel.vsto file.

  • Open Visual studio command prompt and run command “Mage” which will open Mage tool

  • Go to File->Open and select <Publish Location>/Application Files/Quark.CMSAdapters.Office.Excel_<Publish Version>/Quark.CMSAdapters.Office.Excel.dll.manifest file.

  • Go to “Name” and set version number as specified in the name of Quark.CMSAdapters.Office.Excel.dll.manifest file’s folder.

    s3 location

  • Go to “Files” and select check box “When populating add the .deploy extension to any file that does not have it” and click on Populate button as shown below

    s3 location

  • Go to File -> Save and select “Yes” in the Validation dialog as shown below.

    s3 location

  • Select option “Sign with certificate file” and provide the certificate file and password and click “OK”.

    s3 location

  • Close Mage tool.

  • Open Visual studio command prompt and run following command

    mage -Update “<Publish Location>/Quark.CMSAdapters.Office.Excel.vsto” -AppManifest “<Publish Location>/Application Files/Quark.CMSAdapters.Office.Excel_<Publish Version>\Quark.CMSAdapters.Office.Excel.dll.manifest” -CertFile “<Certificate Location>\<Certificate>.pfx” -Password “<Password>”

  • Copy the <Publish Location>/Quark.CMSAdapters.Office.Excel.vsto to <Publish Location>/Application Files/Quark.CMSAdapters.Office.Excel_<Publish Version> folder.


Download Sample

How to configure out of the box actions?

How to configure out of the box actions?

You can configure OTB actions in Quark Publishing Platform NextGen through the file application-config.json at the location application/conf in the s3 bucket. If you are doing the configuration for the first time, you may have to create the folder conf and the file application-config.jsonThe file application-config.json allows the following configurations:

  • To create revision on property update:

    • createRevisionOnPropertyChange: true/false (default value is true)
  • Tableau based audit tab for asset in asset detail view

    • showAssetAuditTab: true/false (default value is false)
    • assetAuditWordbook: Path of the Tableau worksheet (default value is “views/CE-Audit-Workspace-Dashboard/Audit_Asset_Dashboard”)
  • To display all the links to an asset version:

    • showAllLinksWithVersion: true/false (default value is false)
  • To make workflow mandatory while checking in an asset:

    • workflowMandatory: true/false (default value is false)
  • To enable the hide collection feature:

    • enableHideCollection: true/false (default value is false)
  • To configure custom date format in Properties pane:

    • propertiesDateFormat: string (default value is ‘M dd, yy‘)
    • propertiesDateTimeSeparator: string (default value is ‘,‘)

    Date format can have the following notations:

    d - day of month (no leading zero)  
    dd - day of month (two digits)  
    o - day of the year (no leading zeros)  
    oo - day of the year (three digits)  
    D - day name short  
    DD - day name long  
    m - month of year (no leading zero)  
    mm - month of year (two digits)  
    M - month name short  
    MM - month name long
    y - year (two digits)  
    yy - year (four digits)  
    @ - Unix timestamp (ms since 01/01/1970)  
    ! - Windows ticks (100ns since 01/01/0001)  
    '...' - literal text  
    '' - single quote  
    anything else - literal text  
    
  • To disable check-in through drag and drop action:

    • disableCheckinDragAndDrop: true/false (defaukt value is false)

How to configure callback hooks/events?

How to configure callback hooks/events?

A custom JavaScript file that registers callback hooks/events must be available in the file extensibility.json in the folder conf in the directory applicationservice in the s3 bucket. The sample code to register an event is as follows: (Purpose: Prevent check-in in collection.)

window.CallbackService.registerCallback(BEFORE_SAVE_SUBMIT,
    (data) => {
        console.log(BEFORE_SAVE_SUBMIT, data);
        if (data.assetInfo.collectionId === 1) {
        window.alert(“Not allowed”);
        return false;
    }
});

Download sample for callback hooks.


The following events are available in Workspace:

  • BEFORE_SAVE_SUBMIT
    Triggers before asset/folder checkin
    Event data:

    • assetInfo: CheckinEventData – user modifiable
    • isFolder: boolean – readOnly
    • assetId: number – readOnly

    Return { assetInfo } to update payload or false to cancel the event

  • AFTER_SAVE_SUBMIT
    Triggers after asset/folder checkin
    Event data:

    • files: Set – Set of files checked in
    • assetInfo: CheckinEventData
    • isFolder: boolean – isFolder or not
    • assetIds: number[] – Updated/Created Asset ids
    • collectionIds: number[] – Created Collection ids
    • assetId: number – Asset Id – only applicable for save resvision.
    • attributes: Object – Attributes – only applicable for save resvision.
  • BEFORE_ASSET_DETAIL_ACTION
    Triggers before asset details open like info/detail
    Event data:

    • entity: Entity – Entity of Asset
    • assetId: number – Asset Id
    • tabId: string – Id of the tab to be opened
    • actionId: string – Id of the action

    Return false to cancel the event

  • BEFORE_ASSET_PREVIEW_ACTION
    Triggers before asset preview action
    Event data:

    • entity: Entity – Entity of Asset
    • assetId: number – Asset Id
    • tabId: string – Id of the tab to be opened
    • actionId: string – Id of the action

    Return false to cancel the event

  • BEFORE_ASSET_LINKS_ACTION
    Triggers before asset links/refernces action
    Event data:

    • entity: Entity – Entity of Asset
    • assetId: number – Asset Id
    • tabId: string – Id of the tab to be opened
    • actionId: string – Id of the action

    Return false to cancel the event

  • BEFORE_ASSET_PROPERTIES_ACTION
    Triggers before asset properties action
    Event data:

    • entity: Entity – Entity of Asset
    • assetId: number – Asset Id
    • tabId: string – Id of the tab to be opened
    • actionId: string – Id of the action

    Return false to cancel the event

  • BEFORE_COLLECTION_DETAIL_ACTION
    Triggers before collection details
    Event data:

    • entity: Entity – Entity of Collection
    • collectionId: number – Collection Id

    Return false to cancel the event

  • BEFORE_PUBLISH_ASSET_ACTION
    Triggers before asset publish action
    Event data:

    • entity: Entity – Entity of Asset

    Return false to cancel the event

  • BEFORE_PUBLISH_ASSET_SUBMIT
    Triggers before asset submit/done for publishing
    Event data:

    • entity: Entity – Entity of Asset
    • publishingChannels: object[] – Information about selected publishing channels

    Return { entity, publishingChannels } to update payload or false to cancel the event

  • AFTER_PUBLISH_ASSET_SUBMIT
    Triggers after asset published successfully
    Event data:

    • entity: Entity – Entity of Asset
    • downloadInfo: object[] – Information about published content like downloadUrl.
  • BEFORE_SAVE_REVISION_ACTION
    Triggers before save revision action
    Event data:

    • entity: Entity – Entity of Asset

    Return false to cancel the event

  • BEFORE_SAVE_REVISION_SUBMIT
    Triggers before save revision submit/done
    Event data:

    • assetId: number – Asset Id
    • attributes: object – Contains attributes information

    Return { attributes } to update payload or false to cancel the event

  • BEFORE_EDIT_ASSET_ACTION
    Triggers before asset checkout/edit action
    Event data:

    • assetId: number – Asset Id
    • contentType: string – Content Type of Asset
    • entity: Entity – Entity of Asset

    Return false to cancel the event

  • AFTER_EDIT_ASSET_ACTION
    Triggers after asset checkout/edit action
    Event data:

    • assetId: number – Asset Id
    • contentType: string – Content Type of Asset
    • entity: Entity – Entity of Asset
    • editDirectly: boolean – Whether the asset is checkedout directly or in context of document
  • BEFORE_DOWNLOAD_ASSET_ACTIO
    Triggers before asset download action
    Event data:

    • assetIds: number[] – Asset Ids

    Return false to cancel the event

  • AFTER_DOWNLOAD_ASSET_ACTION
    Triggers after asset download action
    Event data:

    • assetIds: number[] – Asset Ids
    • downloadUrl: string – Url to download asset
  • BEFORE_DISCARD_ASSET_ACTION
    Triggers before asset cancel checkout/discard action
    Event data:

    • entities: Entity[] – Array of Entity objects
      OR
    • assetInfo: Object – Asset Info

    Return false to cancel the event

  • AFTER_DISCARD_ASSET_ACTION
    Triggers after asset cancel checkout/discard action
    Event data:

    • entities: Entity[] – Array of Entity objects
    • assetInfo: Object – Asset Info
  • BEFORE_REINDEX_ASSET_ACTION
    Triggers before asset redindex action
    Event data:

    • assetInfos: Object[] – Asset Infos

    Return false to cancel the event

  • AFTER_REINDEX_ASSET_ACTION
    Triggers after asset redindex action
    Event data:

    • assetInfos: Object[] – Asset Infos
  • BEFORE_DELETE_ASSET_ACTION
    Triggers before asset delete action
    Event data:

    • entities: Entity[] – Array of Entity objects

    Return false to cancel the event

  • BEFORE_DELETE_ASSET_SUBMIT
    Triggers before asset delete submit/done
    Event data:

    • entities: Entity[] – Array of Entity objects

    Return false to cancel the event

  • AFTER_DELETE_ASSET_SUBMIT
    Triggers after asset delete submit/done
    Event data:

    • entities: Entity[] – Array of Entity objects
  • BEFORE_DELETE_COLLECTION_ACTION
    Triggers before collection delete action
    Event data:

    • entity: Entity – Collection Entity object

    Return false to cancel the event

  • BEFORE_DELETE_COLLECTION_SUBMIT
    Triggers before collection delete submit/done
    Event data:

    • entity: Entity – Collection Entity object

    Return false to cancel the event

  • AFTER_DELETE_COLLECTION_SUBMIT
    Triggers after collection delete submit/done
    Event data:

    • entity: Entity – Collection Entity object
  • BEFORE_MOVE_COLLECTION_ACTION
    Triggers before collection move action
    Event data:

    • entities: Entity[] – Array of Entity objects

    Return false to cancel the event

  • BEFORE_MOVE_COLLECTION_SUBMIT
    Triggers before collection move submit/done
    Event data:

    • sourceCollectionIds: number[] – Array of source collection ids
    • targetParentCollectionId: number – Target collection id

    Return false to cancel the event

  • AFTER_MOVE_COLLECTION_SUBMIT
    Triggers after collection move submit/done
    Event data:

    • sourceCollectionIds: number[] – Array of source collection ids
    • targetParentCollectionId: number – Target collection id
  • BEFORE_COPY_COLLECTION_ACTION
    Triggers before collection copy action
    Event data:

    • entity: Entity – Collection Entity object

    Return false to cancel the event

  • BEFORE_COPY_COLLECTION_SUBMIT
    Triggers before collection copy submit/done
    Event data:

    • copyWithAssets: boolean – Copy with assets or not
    • sourceCollection: Entity – Source collection entity
    • newCollection: Object – Collection info like name.

    Return { newCollection } to update payload or false to cancel the event

  • AFTER_COPY_COLLECTION_SUBMIT
    Triggers after collection copy submit/done
    Event data:

    • copyWithAssets: boolean – Copy with assets or not
    • sourceCollection: Entity – Source collection entity
    • newCollection: Object – Collection info like name.
  • BEFORE_DUPLICATE_ASSET_ACTION
    Triggers before asset duplicate action
    Event data:

    • entity: Entity – Asset Entity object

    Return false to cancel the event

  • AFTER_DUPLICATE_ASSET_ACTION
    Triggers before asset duplicate action
    Event data:

    • entity: Entity – Asset Entity object
    • newAssetInfo: Object – Contains information about newly created asset
  • BEFORE_DUPLICATE_COLLECTION_ACTION
    Triggers before collection duplicate action
    Event data:

    • entity: Entity – Collection Entity object

    Return false to cancel the event

  • BEFORE_DUPLICATE_COLLECTION_SUBMIT
    Triggers before collection duplicate submit/done
    Event data:

    • collection: Object – Collection to be created with inputs

    Return { collection } to update payload or false to cancel the event

  • AFTER_DUPLICATE_COLLECTION_SUBMIT
    Triggers after collection duplicate submit/done
    Event data:

    • collection: Object – Data about Newly created collection
  • BEFORE_EDIT_COLLECTION_PROPERTIES_ACTION
    Triggers before edit collection properties action
    Event data:

    • collectionMeta: Object – Data about collection

    Return false to cancel the event

  • BEFORE_EDIT_COLLECTION_PROPERTIES_SUBMIT
    Triggers before edit collection properties submit/done
    Event data:

    • attributes: Object[] – Array of collection attributes

    Return { attributes } to update payload or false to cancel the event

  • AFTER_EDIT_COLLECTION_PROPERTIES_SUBMIT
    Triggers after edit collection properties submit/done
    Event data:

    • attributes: Object[] – Array of collection attributes
  • BEFORE_EDIT_ASSET_PROPERTIES_ACTION
    Triggers before edit asset properties action
    Event data:

    • assetMeta: Object – Data about asset – when invoked from asset detail
      OR
    • entities: Entities[] – Array of Entity objects

    Return false to cancel the event

  • BEFORE_ASSET_PROPERTIES_SUBMIT
    Triggers before edit asset properties submit/done
    Event data:

    • entities: Entities[] – Array of Entity objects, only in case of multi select
    • attributes: Object[] – Array of asset attributes

    Return { attributes } to update payload or false to cancel the event

  • AFTER_ASSET_PROPERTIES_SUBMIT
    Triggers after edit asset properties submit/done
    Event data:

    • entities: Entities[] – Array of Entity objects, only in case of multi select
    • attributes: Object[] – Array of asset attributes
    • successEntities: Entities[] – Array of Entity objects, only in case of multi select
    • failureEntities: Entities[] – Array of Entity objects, only in case of multi select
  • BEFORE_WORKFLOW_ASSET_SUBMIT
    Triggers before workflow asset submit/done
    Event data:

    • assetId: number – Asset Id
    • attributes: Object – Asset attributes

    Return { attributes } to update payload or false to cancel the event

  • AFTER_WORKFLOW_ASSET_SUBMIT
    Triggers after workflow asset submit/done
    Event data:

    • assetId: number – Asset Id
    • attributes: Object – Asset attributes
  • BEFORE_ASSET_UPLOAD_ACTION
    Triggers on file upload action

    Return false to cancel the event

  • BEFORE_UPLOAD_FOLDER_ACTION
    Triggers on folder upload action

    Return false to cancel the event

  • BEFORE_ASSET_PREVIEW_TAB_ACTION
    Triggers on Preview tab select
    Event data:

    • assetMeta: Object – Data about asset

    Return false to cancel the event

  • BEFORE_ASSET_HISTORY_TAB_ACTION
    Triggers on History tab select
    Event data:

    • assetMeta: Object – Data about asset

    Return false to cancel the event

  • BEFORE_ASSET_LINK_TAB_ACTION
    Triggers on Links tab select
    Event data:

    • assetMeta: Object – Data about asset

    Return false to cancel the event

  • BEFORE_ASSET_PROPERTIES_TAB_ACTION
    Triggers on Properties tab select
    Event data:

    • assetMeta: Object – Data about asset

    Return false to cancel the event

  • BEFORE_ASSET_AUDIT_TAB_ACTION
    Triggers on Audit tab select
    Event data:

    • assetMeta: Object – Data about asset

    Return false to cancel the event

  • BEFORE_WORKFLOW_DIALOG_OPEN
    Triggers before workflow dialog is opened on uploading new file/folder.
    Event data:

    • attributes: Object – Data about asset
    • silentSubmit: Boolean – Default false – Set true to silently checkin the file.

    Additional Option that can be set:

    • attributes.assetAttributes: Array[Object]- Pass this when asset form attributes needs to be updated.

      Format – { “attributeId”: 1XX, “attributeValue”: { “value”: “”}}

      For example, for different type of attributes, the value key contains a different value.

      Domain – Contains the array of domainValue values for multiple type domain attributes or contains the single object of the domainValue value for single type domain attribute.
      Text – Contains a text string.
      Date, DateTime, Time – Contain date, datetime, and time string, respectively.
      Boolean – Contain true or false.
      Number, Measurement – Contain Int and double type of value.

    • attributes.versioning: “major“ | “minor“ | “custom“ – Default “minor“ – This option is to create a minor, a major, or a custom version.

    • atrtibutes.initialMajorVersion: number – Defaullt 0 – This option is to specify the initial major version when versioning is of type “custom“.

    • atrtibutes.initialMinorVersion: number – Defaullt 1 – This option is to specify the initial minor version when versioning is of type “custom“.

    Return false to cancel the event

  • BEFORE_READ_ONLY_ACTION
    Triggers before read only action
    Event data:

    • assetId: number – Id of the asset
    • contentType: string – Content type of asset
    • majorVersion: number – Major version of asset
    • minorVersion: number – Minor version of asset

    Return false to cancel the event

  • BEFORE_REVERT_TO_VERSION_ACTION
    Triggers before revert to version action
    Event data:

    • assetId: number – Id of the asset
    • revertVersion: Object – Contains major and minor version of the revert version
    • latestVersion: Object – Contains major and minor version of the current latest version
    • createMinorVersion: boolean – whether to create major or minor version

    Return { createMinorVersion } to update the payload false to cancel the event

  • AFTER_REVERT_TO_VERSION_ACTION
    Triggers after revert to version action
    Event data:

    • attributes: Object[] – attributes of new create version

How to add a custom button in Workspace?

How to add a custom button in Workspace?

To add extensible actions to entities:

  1. Create a folder conf in the directory applicationservice in the s3 bucket.
    s3 location

  2. 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.
      asset context menu

    • collectionContextMenuActions: These are the actions that Quark Publishing Platform NextGen displays when you select the ellipses icon associated to a collection
      collection context menu

    • assetQuickActions: These are the actions that Quark Publishing Platform NextGen displays next to an asset.
      asset quick actions

    • collectionQuickActions: These are the actions that Quark Publishing Platform NextGen displays next to a collection.
      collection quick actions

    • otherActions: These are the actions that Quark Publishing Platform NextGen displays across the Workspace User Interface, which could be asset/action specific or universal.
      other actions

      other actions 1

Action Objects

An action object can have the following attributes based on the type of action:

AttributeApplicable to action typeDescription
idAllA unique id of an action
typeAllAn action type specifies the function an action performs. There are four action types:
displayTextAllThe name of the action on the User Interface.
hiddenAllA Boolean value to show/hide the action button.
iconUrlAllThe URL of the icon for an action button
VisibilityHandlerAllName of the function to handle visibility for actions.
actionUrlendpointThe URL of the API endpoint.
dialogUrldialogThe location of the iframe index page.
dialogConfig {height; width;}dialogThe 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.
tabIdtabThe id of the tab that you select in the accessQuickActions.
parentIdmenuThe Id of the menu type to which an action in the context menu belongs to.
contextAll (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. diff-blades

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-library-action”,
      “displayText”: “Library”,
      “hidden”: false,
      “iconUrl”: “https://1000logos.net/wpcontent/uploads/2021/04/Facebook-logo.png”,
      “type”: “tab”,
      “tabId”: “qpp-library-tab”
    }
    
  • 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-publish-action",
            "displayText": "Publish",
            "hidden": false,
            "iconUrl": "assets/icons/action-icons/ico-publish.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": "Properties",
            "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": "Properties",
            "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": "Properties",
            "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": "Properties",
            "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"
        }
    ],
    "topbarViewActions": [
        {
            "id": "qpp-upload-action",
            "context": ["favorite","assignment","checkout","search","browse"]
        },
        {
            "id": "qpp-upload-file-action",
            "context": ["favorite","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": ["assignment", "checkout","search","browse","asset-detail"]
        },
        {
            "id": "qpp-checkout-action",
            "context": ["assignment","checkout","search","browse","asset-detail"]
        },
        {
            "id": "qpp-save-revision-action",
            "context": ["assignment","checkout","search","browse"]
        },
        {
            "id": "qpp-download-action",
            "context": ["assignment","checkout","search","browse","asset-detail"]
        },
        {
            "id": "qpp-export-action",
            "context": ["assignment","checkout"]
        },
        {
            "id": "qpp-reindex-action",
            "context": ["assignment","checkout","search","browse","asset-detail"]
        },
        {
            "id": "qpp-duplicate-action",
            "context": ["assignment","checkout","search","browse"]
        },
        {
            "id": "qpp-update-data-action",
            "context": ["assignment","checkout","search","browse","asset-detail"]
        },
        {
            "id": "qpp-discard-changes-action",
            "context": ["assignment","checkout","search","browse","asset-detail"]
        },
        {
            "id": "qpp-delete-action",
            "context": ["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": ["browse"]
        },
        {
            "id": "qpp-collection-duplicate-action",
            "context": ["search","browse"]
        },
        {
            "id": "qpp-more-collection-action", 
            "context": ["search","browse"]
        },
        {
            "id": "qpp-copy-collection-action",
            "context": ["search","browse"]
        },
        {
            "id": "qpp-move-collection-action",
            "context": ["search","browse"]
        },
        {
            "id": "qpp-delete-collection-action",
            "context": ["search","browse"]
        },
        {
            "id": "qpp-start-workflow-action",
            "context": ["asset-detail"]
        },
        {
            "id": "qpp-change-workflow-action",
            "context": ["asset-detail"]
        }
    ],
    "otherActions": [
        {
            "id": "qpp-open-in-read-only-action"
        },
        {
            "id": "qpp-revert-to-version-action"
        }
    ]
}

How to add a custom pane in Workspace?

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.

asset tabsBased on the type, tab objects can have the following attributes:

AttributeApplicable to action typeDescription
idAllA unique id of an tab.
typeAllA tab can be of the following two types:
displayTextAllThe name of the tab on the User Interface.
hiddenAllA Boolean value to show/hide the tab.
frameUrliframeThe URL of the destination that you want to open in the iframe.
extensionPointlibraryThe extension point to use to load a custom angular library plugin.
VisibilityHandlerAllName of the function to handle visibility for tabs.

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.
    library code
  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.
    library bundle
  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:

AttributeDescription
idA unique id of a plugin.
nameThe name of a plugin.
descriptionThe description of a plugin.
extensionPointA custom extenstionPoint tells where to load a plugin. For custom library type, you should use the same extensionPoint.
urlThe complete URL to the single JavaScript UMD bundle in an angular library module
ngLibraryThis contains the following three fields:
enabledattribute to enable/disable a plugin.

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.

How to add custom branding?

How to add custom branding?

Quark Publishing Platform NextGen supports custom branding through extensibility. There are two ways you can customize branding elements:

  1. Through extensibility.json
  2. Through CSS

Through extensibility.json

To change branding elements through extensibility.json, you have to work with the following services:

  • Authservice
  • Applicationservice

Process

  1. Add extensbility.json to the folder conf of both the services.
  2. Add the following properties to extensbility.json of the respective services:
  • Authservice

    {
        "fullLogoUrl": "s3://fullLogo.svg",
        "favIconUrl": "s3://favIcon.png",
        "backgroundUrl": "s3://background.svg"
    }
    
  • Applicationservice

    {
        "fullLogoUrl": "s3://fullLogo.svg",
        "favIconUrl": "s3://favIcon.png",
        "shortLogoUrl": "s3://shortLogoUrl.svg"
    }
    

Positions of the Custom Branding Elements

You can customize the branding elements at two locations – on the Login screen and on the About dialog. The position of customizable branding elements are as follows:

PropertyServiceRecommended RatioPosition and Sample
fullLogoUrlAuthservice8:1Displayed on the Login dialog of the Login screen
Full logo login page
fullLogoUrlApplicationservice8:1Displayed on the About dialog
Full logo about dialog
favIconUrlAuthservice and Applicationservice1:1Displayed as a favicon of the tab on a web browser
Full logo about dialog
shortLogoUrlApplicationservice1:1Displayed on the top-left corner of the header bar
Full logo about dialog
backgroundUrlAuthservice16:9Displayed as the background of the Login screen

Pros and Cons of Using extensibility.json

Pros

  1. For custom logos, you can use an absolute URL or you can add a custom image to the folder conf/assets of your respective services 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 {service}/conf/assets.

Cons

  1. You must add logos only of the recommended aspect ratio for proper rendering.

Through CSS

To change branding elements through CSS, you have to work with the following services:

  • Authservice
  • Applicationservice
  • Qaservice

Process

  1. Add the file content.css to the folder {service}/conf of the respective services.
  2. Add your CSS properties to make any user interface changes.
  • Authservice

    • Full logo:
         .login-content-header {
             background: url("./images/ce-logo.svg") center bottom / contains no-repeat padding-box padding-box
         }    
      
    • Background:
        body {
            background: url("./images/login-page-background.png") 0% 0% / covers no-repeat
        }    
      
  • Applicationservice

    • Full logo:
         .about-banner-logo {
             background: url("./images/ce-logo.svg") center bottom / contains no-repeat padding-box padding-box
         }    
      
    • Small logo:
        .app-logo {
            background: url("assets/images/logo.svg") center center / contains no-repeat padding-box padding-box
        }    
      

      Note: For Applicationservice, you have to move the file content.css to the folder conf/{applicationName}. The applicationName here could be “workspace” or “admin”. You can override the CSS of the respective applications.

  • Qaservice

    • Full logo:
         .about-banner-logo {
             background: url("./images/ce-logo.svg") center bottom / contains no-repeat padding-box padding-box
         }    
      
    • Short logo:
        .app-logo {
            background: url("assets/images/logo.svg") center center / contains no-repeat padding-box padding-box
        }    
      

Pros and Cons of Using CSS

Pros

  1. You can manage position of your logos through CSS.
  2. You can update color scheme of any DOM elements. Like buttons, header bar, and so on.

Cons

  1. You must provide absolute URL to update logos.
  2. You cannot update the favicon with CSS.

Download Sample