Task edit document preview component Alfresco - 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

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.

Answer 2

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 3

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 4

Here is an easier solution that handles multiple documents and uses web-preview component:
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>
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>