任务编辑文档预览组件Alfresco

Question

第一题：

我想以工作流任务编辑的形式实现文档预览...我该怎么做？我尝试将 document-details.xml 和 document-details.ftl 调整为 workflow-details.xml 和 workflow-details.ftl 但不起作用。我试图将具有文档详细信息文件的 Web 预览的组件复制到工作流详细信息。有什么提示吗？

我在工作流程中有这个-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>
   </@>
</@>

在工作流中-details.xml 我添加了这个组件：

 <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>

这不显示网络预览，只创建：

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

我的错误是什么？

第二题：

在 Aikau 页面的预览中，我得到：Warning: unimplemented annotation type: Widget signature 在 Mozilla Firefox firebug 的控制台中，文档显示没有数字签名...但是，例如，如果我上传带有数字签名的文档，我可以在文档的 document-details 页面中看到带有签名的文档。这个页面的预览不一样？我怎样才能实现这个预览？

Answer 1

这里的主要问题是您在查看工作流任务时没有任何 nodeRef 请求参数（这映射到分配给 <nodeRef> 元素的 {nodeRef} 标记网络预览组件。因此，网络预览 WebScript 将没有要呈现的节点。

您要么需要进行自定义，以便在查看工作流任务时将附加文件的 nodeRef 作为请求参数包含在内，要么使用您自己的 WebScript（网络预览 WebScript 除外）以按顺序访问要预览的文档的 nodeRef。

这里需要考虑的其他几件事是，完全有可能将多个文档分配给一个工作流程，因此您需要处理这种情况（即预览哪个文档，或者如何预览所有文档）。

我认为这不会是一个简单的自定义。

Answer 2

仅使用共享中集成的 javascript 预览器 (pdf.js) 会更容易。如果直接使用javascript库，打开预览应该不难。

项目官网有例子：pdf.js

您可以使用共享网络脚本来初始化 javascript 以及附加到工作流的文档的 URL 列表。如果附件不是 pdf 文件，您将需要使用其 pdf 版本。

Answer 3

供将来参考。您可以按如下方式进行（示例）：

创建共享扩展并将以下容器添加到 /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>

还添加与 document-details.ftl 中相同的 @templateHeader。您的 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"/>
   <@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>
   </@>
</@>

将 WebPreview 组件添加到 \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>

您的 workflow-details.xml 将如下所示：

<?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>

如果要将组件放置在任意区域，可能需要使用JavaScript，例如：

...
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);
...

带有ID==user-list的容器我放在了userdetails.ftl中添加到share-config-custom.xml如下：

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

结果可能如下所示。

Answer 4

这是一个处理多个文档并使用网络预览组件的更简单的解决方案：

在您的 share-config-custom.xml 覆盖 packageItems 字段：

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

控件模板(/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>

任务编辑文档预览组件Alfresco

Task edit document preview component Alfresco

alfresco

alfresco-share

pdf.js

alfresco-webscripts