2

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?

Petter S
  • 49
  • 8
  • 1
    Where do you see the "Warning: unplemented annotation type" error message? Please clarify what you mean by "document with a signature". What is the error/problem you're experiencing when trying to put the preview in the workflow-details page? – Dave Draper Mar 21 '16 at 09:28
  • I edit my question. I hope it's more clear. If not, please say me and I edit again and try to explain! Thanks for the answer :) @DaveDraper – Petter S Mar 21 '16 at 12:09
  • You need for information? @DaveDraper I give to you all you need, I need help with this. – Petter S Mar 21 '16 at 15:11
  • 1
    I'm not sure that I'm going to help at the moment, we've not done any testing with the Aikau preview against nodes with digital signatures (what are you using to perform the signing?). As for the workflow issue, you've still not really provided the details of why its not working, error messages, displayed output, etc – Dave Draper Mar 21 '16 at 15:42
  • The document use itextpdf (AcroForms). In the workflow, there are not output or error messages... I only tried to copy the component of the preview of the document-details to the workflow-details but nothing happens. I want to know, maybe, a better solution to make this, or how to make. – Petter S Mar 21 '16 at 15:48
  • I edit my question with more details. Can you help me with the preview? You know @DaveDraper how can I make the preview in task-edit at least? – Petter S Mar 23 '16 at 16:55
  • Which version of alfresco you are using? – Krutik Jayswal Mar 27 '16 at 07:40
  • @KrutikJayswal I'm using Alfresco community 5.1 – Petter S Mar 27 '16 at 08:53
  • Can you help me? @KrutikJayswal – Petter S Mar 28 '16 at 08:05
  • yes sure....can you share your code?full code? in git or bitbucket – Krutik Jayswal Mar 28 '16 at 09:40
  • My code is the normal of Alfresco standard but with the `workflow-details.ftl` and `workflow-details.xml` like in the question above. I'm only trying to put in the workflow a preview of the document attached to the workflow. @KrutikJayswal if you need more info please say me, I need this. – Petter S Mar 29 '16 at 08:12
  • 1
    @KrutikJayswal you know the reply? I put the bounty because I need this question too, and the bounty ends in 2 days. I will like to give to a person that knows this. – PRVS Mar 30 '16 at 18:03

4 Answers4

3

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.

Dave Draper
  • 1,837
  • 11
  • 25
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.

Marco Altieri
  • 3,726
  • 2
  • 33
  • 47
  • On my part, I think that helps a lot, so I will give the bounty. I really appreciate the help! – PRVS Mar 31 '16 at 18:15
  • The Alfresco previewers (both the Aikau and the YUI2 versions) both incorporate the pdf.js as well as other libraries for rendering the various MIME types of content. So trying to utilise either of the Alfresco solutions will address all different content types (video, image, audio as well as documents that have been converted to a PDF rendition). This still doesn't solve your basic problems outlined in my answer which is that you're going to need the nodeRef of the documents you actually want to preview which you'll need to obtain from the task data. – Dave Draper Mar 31 '16 at 18:28
  • But i can't suppose that I have only one pdf? I have the nodeRef of the pdf in the task-edit @DaveDraper – Petter S Mar 31 '16 at 19:34
  • @DaveDraper, I thought that the problem of the noderef was solved because the custom code could use the url of the pdf (this is, more or less, already available in the task popup if you show the "package" field). – Marco Altieri Mar 31 '16 at 19:35
  • @MarcoAltieri in the //you can now use pdf here, in the link that you give me, what I have to put ? I.e., what I need to make the preview? – Petter S Mar 31 '16 at 19:39
  • @MarcoAltieri it's not that it can't be done, it's just that once you get the nodeRef (it's available by making an xhr request for the task details using the taskid request parameter) you may as well re-use the Alfresco previewer rather than rolling your own pdf.js solution – Dave Draper Mar 31 '16 at 19:53
  • @DaveDraper the Alfresco previewer of the Aikau has a previous version of pdf.js that does not support digital signatures. – PRVS Apr 01 '16 at 06:27
  • @PRVS the solution that I suggested was only an alternative in the case you do not find how to do it reusing what share already has. Before accepting it as the right answer, try to use what Dave Draper is suggesting. – Marco Altieri Apr 01 '16 at 06:36
  • @PetterS we'll take a look at the digital signature issue and look use a new version of pdf.js in Aikau - however, I can't say for certain when that will get done as it's unlikely to be a high priority item for the team at the moment. – Dave Draper Apr 01 '16 at 08:21
  • Can anyone help me with this? I'm trying to define the PDFJS of the link that @MarcoAltieri gives me, but this gives me PDFJS is undefined. Anyone can help me? – Petter S Apr 01 '16 at 14:22
  • Hey @DaveDraper . How can I put an aikau previewer in the workflow? I have the workflow-details or task-edit for example, but this is not a javascript of an aikau page. – PRVS Apr 01 '16 at 14:51
  • How can I put the nodeRef parameter in the task-edit? I know how can I get the nodeRef of a file but I don't know how can I add a parameter in the task-edit. – PRVS Apr 02 '16 at 11:04
  • If I am not missing something, you can start from the "packageitems.ftl" free marker template. This template uses the "object finder" to show/modify the associated documents. It already retrieves all the info you need. Just intercept when the info is available. If you are not showing the package info in your task, you can try to reuse the same ajax call that the object finder uses. – Marco Altieri Apr 02 '16 at 11:48
  • By the way, the object finder can be customised and you can also easily intercept the list of documents it retrieves. The event "renderCurrentValue" is fired and it receives the list of items. If you want to know how, check in the code of the object finder the method onRenderCurrentValue. You have different options: 1) extends the method onRenderCurrentValue of the object finder to render the items as you want. 2) Just register another listener for the same event – Marco Altieri Apr 02 '16 at 12:31
  • @PRVS: Could you share your code (repo or a gist)? I'm also interested in this use case. – Malte Jacobson Apr 10 '16 at 19:33
0

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.

enter image description here

0

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>
Gercio_J
  • 32
  • 7
LukaszQr
  • 464
  • 5
  • 7