Task edit document preview component Alfresco

Question

First question:

I want to implement a preview of the document in the form of the task-edit of the workflows... How can I do this? I try to adapt the document-details.xml and document-details.ftl to workflow-details.xml and workflow-details.ftl but not works. I tried to copy the components that have web-preview of the document-details files to workflow-details. Any hint to make this?

I have this in workflow-details.ftl:

<#include "include/alfresco-template.ftl" />
<@templateHeader>
   <@script type="text/javascript" src="${url.context}/res/modules/documentlibrary/doclib-actions.js" group="document-details"/>
   <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/document-details/document-details-panel.css" group="document-details"/>
   <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/workflow/task-edit-header.css" group="workflow-details"/>
   <@templateHtmlEditorAssets />
</@>


<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
      <@region id="title" scope="template"/>
      <#if page.url.args.nodeRef??>
         <@region id="path" scope="template"/>
      </#if>
   </div>
   </@>
   <@markup id="bd">
   <div id="bd">
      <div class="share-form">
         <@region id="data-header" scope="page" />
         <div class="yui-gc">
            <div class="yui-u first">
                 <#if (config.scoped['WorkflowDetails']['workflow-details'].getChildValue('display-web-preview') == "true")>
                    <@region id="web-preview" scope="template"/>
                 </#if>
            </div>
         </div>
         <@region id="data-form" scope="page" />
         <@region id="data-actions" scope="page" />
      </div>
   </div>
   </@>
</@>

<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global"/>
      <@region id="data-loader" scope="page" />
   </div>
   </@>
</@>

In workflow-details.xml I add this component:

 <component>
         <region-id>web-preview</region-id>
         <sub-components>
            <sub-component id="default">
               <evaluations>
                  <evaluation>
                     <evaluators>
                        <evaluator type="config.component.evaluator">
                           <params>
                              <element>WorkflowDetails/workflow-details/display-web-preview</element>
                           </params>
                        </evaluator>
                     </evaluators>
                     <url>/components/preview/web-preview</url>
                     <properties>
                        <nodeRef>{nodeRef}</nodeRef>
                        <api>api</api>
                        <proxy>alfresco</proxy>
                        <dependencyGroup>workflow-details</dependencyGroup>
                     </properties>
                  </evaluation>
               </evaluations>
            </sub-component>
         </sub-components>
      </component>

This not shows the web-preview, only creates:

<div id="template_x002e_web-preview_x002e_workflow-details">
<div id="template_x002e_web-preview_x002e_workflow-details_x0023_default"> </div>
</div>

What's my error?

Second question:

In the preview of the Aikau page I get: Warning: unimplemented annotation type: Widget signature in the console of the firebug of the Mozilla Firefox and the document is displayed without the digital signatures... But, for example, if I upload a document with a digital signature, I can see the document with the signature in the page of document-details of the document. The preview of this page is different? How can I implement this preview?

Answer 1

Here is an easier solution that handles multiple documents and uses web-preview component:

1. In your share-config-custom.xml override packageItems field:

   <field id="packageItems" set="items">
       <control template="/com/yourdomain/components/form/controls/workflow/packageitems.ftl" />
   </field>
   

2. Control template (/com/yourdomain/components/form/controls/workflow/packageitems.ftl):

   <#include "/org/alfresco/components/form/controls/workflow/packageitems.ftl" />
   <#assign el>${controlId}-wp</#assign>
   <#assign dependencyGroup="web-preview">
   <#include "/org/alfresco/components/preview/include/web-preview-css-dependencies.lib.ftl" />
   <#include "/org/alfresco/components/preview/include/web-preview-js-dependencies.lib.ftl" />
   
   <div class="yui-g" id="${el}"></div>
   <script type="text/javascript">//<![CDATA[
   (function(){
       var nodeRefs = ("${field.value?html}" || "").split(',');
       for (var ni = 0; ni < nodeRefs.length; ni++) {
           Alfresco.util.loadWebscript({
             url: Alfresco.constants.URL_SERVICECONTEXT + "components/preview/web-preview",
             properties: { nodeRef: nodeRefs[ni], htmlid: "${el}-preview-" + ni},
             target: "${el}"
           }); 
       }
   })();
   //]]></script>
   

Answer 2

For future references. You can do it as follows (example):

Create Share extension and add the following container to the /src/main/amp/config/alfresco/templates/org/alfresco/workflow-details.ftl:

<div class="yui-gc">
    <div class="yui-u first">
    <#if (config.scoped['DocumentDetails']['document-details'].getChildValue('display-web-preview') == "true")>
        <@region id="web-preview" scope="template"/>
    </#if>
    </div>
</div>

Also add the same @templateHeader as in the document-details.ftl. Your workflow-details.ftl will look like this:

<#include "include/alfresco-template.ftl" />
<@templateHeader>
   <@script type="text/javascript" src="${url.context}/res/modules/documentlibrary/doclib-actions.js" group="document-details"/>
   <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/document-details/document-details-panel.css" group="document-details"/>
   <@templateHtmlEditorAssets />
</@>

<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
      <@region id="title" scope="template"/>
      <#if page.url.args.nodeRef??>
         <@region id="path" scope="template"/>
      </#if>
   </div>
   </@>
   <@markup id="bd">
   <div id="bd">
      <div class="share-form">
         <@region id="data-header" scope="page" />
         <@region id="data-form" scope="page" />
         <div class="yui-gc">
            <div class="yui-u first">
                <#if (config.scoped['DocumentDetails']['document-details'].getChildValue('display-web-preview') == "true")>
                <@region id="web-preview" scope="template"/>
                </#if>
            </div>
         </div>
         <@region id="data-actions" scope="page" />
      </div>
   </div>
   </@>
</@>

<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global"/>
      <@region id="data-loader" scope="page" />
   </div>
   </@>
</@>

Add the WebPreview component to the \src\main\amp\config\alfresco\site-data\template-instances\workflow-details.xml:

<!-- WebPreview -->
<component>
 <region-id>web-preview</region-id>
 <sub-components>
    <sub-component id="default">
       <evaluations>
          <evaluation>
             <evaluators>
                <evaluator type="config.component.evaluator">
                   <params>
                      <element>DocumentDetails/document-details/display-web-preview</element>
                   </params>
                </evaluator>
             </evaluators>
             <url>/components/preview/web-preview</url>
             <properties>
                <nodeRef>{nodeRef}</nodeRef>
                <api>api</api>
                <proxy>alfresco</proxy>
                <dependencyGroup>document-details</dependencyGroup>
             </properties>
          </evaluation>
       </evaluations>
    </sub-component>
 </sub-components>
</component>      

Your workflow-details.xml will look like this:

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
   <template-type>org/alfresco/workflow-details</template-type>
   <properties>
      <pageFamily>documentlibrary</pageFamily>
   </properties>
   <components>

      <!-- Site Navigation -->
      <component>
         <region-id>navigation</region-id>
         <sub-components>
            <sub-component id="default">
               <evaluations>
                  <!-- if referred from my tasks page: Task toolbar -->
                  <evaluation id="tasks">
                     <evaluators>
                        <evaluator type="equals.component.evaluator">
                           <params>
                              <referrer>{referrer}</referrer>
                              <tasks>tasks</tasks>
                           </params>
                        </evaluator>
                     </evaluators>
                     <url>/components/workflow/task-toolbar</url>
                  </evaluation>
                  <!-- if referred from my workflows page: Workflows toolbar -->
                  <evaluation id="workflows">
                     <evaluators>
                        <evaluator type="equals.component.evaluator">
                           <params>
                              <referrer>{referrer}</referrer>
                              <workflows>workflows</workflows>
                           </params>
                        </evaluator>
                     </evaluators>
                     <url>/components/workflow/workflow-toolbar</url>
                  </evaluation>
                  <!-- if in site: Site navigation -->
                  <evaluation id="site">
                     <evaluators>
                        <evaluator type="site.component.evaluator"/>
                     </evaluators>
                     <url>/components/navigation/collaboration-navigation</url>
                  </evaluation>
               </evaluations>
            </sub-component>
         </sub-components>
      </component>

       <!-- WebPreview -->
      <component>
         <region-id>web-preview</region-id>
         <sub-components>
            <sub-component id="default">
               <evaluations>
                  <evaluation>
                     <evaluators>
                        <evaluator type="config.component.evaluator">
                           <params>
                              <element>DocumentDetails/document-details/display-web-preview</element>
                           </params>
                        </evaluator>
                     </evaluators>
                     <url>/components/preview/web-preview</url>
                     <properties>
                        <nodeRef>{nodeRef}</nodeRef>
                        <api>api</api>
                        <proxy>alfresco</proxy>
                        <dependencyGroup>document-details</dependencyGroup>
                     </properties>
                  </evaluation>
               </evaluations>
            </sub-component>
         </sub-components>
      </component>      

      <!-- Path -->
      <component>
         <region-id>path</region-id>
         <sub-components>
            <sub-component id="default">
               <evaluations>
                  <!-- if in site: Site title -->
                  <evaluation id="site">
                     <evaluators>
                        <evaluator type="site.component.evaluator"/>
                     </evaluators>
                     <url>/components/document-details/path</url>
                  </evaluation>
                  <!-- otherwise: Repository title -->
                  <evaluation id="repo">
                     <url>/components/document-details/repo/path</url>
                  </evaluation>
               </evaluations>
            </sub-component>
         </sub-components>
      </component>

   </components>
</template-instance>

If you want to place the component in an arbitrary region, you may need to use JavaScript, for example:

...
var container = YAHOO.util.Dom.get('user-list');
var web_preview = YAHOO.util.Dom.get('template_x002e_web-preview_x002e_workflow-details_x0023_default');
YAHOO.util.Dom.insertAfter(web_preview, container);
...

The container with ID==user-list I placed in the userdetails.ftl which added to the share-config-custom.xml as follows:

... 
<field id="mswf:userDetails" set="userDetails" label="...">
    <control template="/org/alfresco/components/form/controls/workflow/userdetails.ftl" />
</field>
...

The result may look as shown below.

Answer 3

It can be easier to just use the javascript previewer that is integrated in share (pdf.js). If you use directly the javascript library, it shouldn't be difficult to open a preview.

There are examples in the official site of the project: pdf.js

you can use the share webscript to initialise the javascript with the list of urls of the documents attached to the workflow. If the document attached is not a pdf, you will need to use its pdf rendition.

Answer 4

The main problem you have here is that the you don't have any nodeRef request parameter when viewing a workflow task (this is mapped to the {nodeRef} token that is assigned to the <nodeRef> element in the web-preview component. As a result the web-preview WebScript will not have a node to render.

You are either going to need to make a customization such that the nodeRef of the attached file is included as a request parameter when viewing the workflow task or use your own WebScript (other than the web-preview WebScript) in order to access the nodeRef of the document to preview.

A couple of other things to consider here, is that it is entirely possible to have more than one document assigned to a workflow, so you'd need to handle that scenario (i.e. which document is previewed, or how to preview all documents).

I don't think that this is going to be a simple customization though.