Alfresco community 5.1.x 工作流表单动态添加输入字段答案

【问题标题】：Alfresco community 5.1.x workflow form add input fields dynamicallyAlfresco community 5.1.x 工作流表单动态添加输入字段
【发布时间】：2016-06-22 11:25:28
【问题描述】：

我正在使用 Alfresco Community 5.1.x。我想在 + 按钮动态添加文本字段时使用 kickstart 的表单之一创建自定义工作流程。这可能吗？怎么样？

【问题讨论】：

标签： java workflow alfresco alfresco-share alfresco-webscripts

【解决方案1】：

我希望你能从这个控件中得到一些想法。

关于共享配置，

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

userdetails.ftl

<style>
   .yui-dt{
   border: 1px solid #ccc;
   font-weight: normal;
   }
   .yui-dt th {
   margin: 0;
   padding: 0;
   border: none;
   border-right: 1px solid #CBCBCB;
   border-bottom: 1px solid #CBCBCB;
   background: #D8D8DA url(sprite.png) repeat-x 0 0;
   }
   .yui-dt th {
   margin: 0;
   padding: 0;
   border: none;
   border-right: 1px solid #CBCBCB;
   border-bottom: 1px solid #CBCBCB;
   background: #D8D8DA url(sprite.png) repeat-x 0 0;
   }
   .yui-dt td {
   border-top: 1px solid #ccc!important;
   padding: 5px 10px!important;
   }
   .yui-dt td:last-of-type,.yui-dt th:last-of-type {
   border-right: 0px solid #CBCBCB;
   }
   .yui-dt td:last-of-type {
   border-top: 0px solid #CBCBCB;
   }
   .yui-dt-liner {
   margin: 0;
   padding: 0;
   padding: 4px 10px 4px 10px!important;
   }
   .set-title {
   font-size: 116%;
   border-bottom: 1px solid #eeeeee;
   padding-bottom: 0.1em;
   margin-bottom: 0.6em;
   margin-top: 0.2em;
   }
   .buttons{
   background:#fff;
   border:1px solid #ddd;
   padding:4px;
   cursor:pointer;
   }
   .buttons:hover{
   background:#EAE8E8;
   }
   .hyperlink{
   color: blue!important;
   text-decoration: underline!important
   padding:5px;
   }
</style>
<@link href="${url.context}/res/components/workflow/workflow-form.css" group="workflow"/>
<#include "/org/alfresco/components/form/controls/common/utils.inc.ftl" />
<div class="form-field">
   <#if form.mode == "view" || (form.mode == "edit" && field.disabled)>
   <div class="viewmode-field">
      <span class="viewmode-label">${field.label?html}:</span>
      <span class="viewmode-value">
         <div id="divUserList">
            <label>User List:</label>
            <table id="tblUserList" class="yui-dt " style="width:100%">
               <tr>
                  <td>First Name </td>
                  <td>Last Name</td>
                  <td> Email-Id</td>
                  <td>Actions</td>
               </tr>
               <tr id="placeHolderRow">
                  <td colspan="4"><span>No user details are requested.</span></td>
               </tr>
            </table>
         </div>
      </span>
   </div>
   <#else>
   <div id="divUserList">
      <div id="divButtonContainer">
         <label>First Name : <span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></label>
         <input type="text" id="txtFirstName" style="margin-bottom:10px;">
         <label>Last Name : <span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></label>
         <input type="text" id="txtLastName" style="margin-bottom:10px;">
         <label>Email-Id : <span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></label>
         <input type="text" id="emailId" style="margin-bottom:20px;">    <br>        
         <input class="buttons" id="btnAdd" onclick="javascript:addRows();return false;" type="button" value="Add another user" />            
         <input class="buttons" style="background:#fff" id="btnClear" onclick="javascript:clearControls();return false;" type="button" value="Clear all users" />            
      </div>
      <div class="set-title" style="margin-top:20px;"> User List:</div>
      <table id="tblUserList" class="yui-dt " style="width:100%">
         <tr>
            <th style="background: #D8D8DA;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;" class="yui-dt-liner">First Name </th>
            <th style="background: #D8D8DA;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;" class="yui-dt-liner">Last Name</th>
            <th style="background: #D8D8DA;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;" class="yui-dt-liner">  Email-Id</th>
            <th style="background: #D8D8DA;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;" class="yui-dt-liner">Actions</th>
         </tr>
         <tr id="placeHolderRow">
            <td class="yui-dt-liner" colspan="4" style="border-right:none;">
               <span>No user details are requested.</span>
            </td>
         </tr>
      </table>
   </div>
   <#-- Keep the hidden control, to sent the values to the repo -->
   <input type="hidden" id="${fieldHtmlId}" name="${field.name}" />
   </#if>
</div>
<script>    
   updateControlMode();
   function updateControlMode()
   {      
       var readOnly = "${field.disabled?c}";
       if (readOnly =="true")
       {
           document.getElementById("tblUserList").innerHTML  = '${field.value}';       
           var table = document.getElementById("tblUserList");
           for (var i = 0;i<table.rows.length; i++) {
               var row = table.rows[i];
               for (var j = 0;j<row.cells.length;  j++) {
                   var col = row.cells[j];
                   if (j == 3)
                   {
                       col.parentNode.removeChild(col);  //Removing the action column in readOnly mode
                   }
              }  
           }

       }
   }
   function clearControls()
   {
       document.getElementById("txtFirstName").value="";
       document.getElementById("txtLastName").value="";
       document.getElementById("emailId").value="";

   }

   function deleteRow(btn) {
     var row = btn.parentNode.parentNode;
     row.parentNode.removeChild(row);
     var table = document.getElementById("tblUserList");
     var rowLength = table.rows.length;
     if (rowLength ==1 ) //Only Table header is present
     {
       var placeHolderRow = table.insertRow(rowLength);
       var cell1 = placeHolderRow.insertCell(0);
       cell1.colspan="4";
       cell1.innerHTML="No  user details are requested."    
     }
   }
   function addRows()
   {
       var placeHolderRow = document.getElementById("placeHolderRow");
       if (placeHolderRow)
           placeHolderRow.remove();

       var firstName = document.getElementById("txtFirstName").value;
       var lastName =document.getElementById("txtLastName").value;
       var emailId = document.getElementById("emailId").value;

       if (!(firstName || lastName || emailId || firstName.value.trim().length == 0  || lastName.value.trim().length || emailId.value.trim().length))
       {
           alert("Please enter all the values");
           return false;
       }

       var table = document.getElementById("tblUserList");
       var rowLength = table.rows.length;
       // Create an empty <tr> element and add it to the 1st position of the table:
       var row = table.insertRow(rowLength);
       row.id = Alfresco.util.generateDomId();


       // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
       var cell1 = row.insertCell(0);
       var cell2 = row.insertCell(1);
       var cell3 = row.insertCell(2);
       var cell4 = row.insertCell(3);

       // Add some text to the new cells:
       cell1.innerHTML = document.getElementById("txtFirstName").value;
       cell1.style="color:red";
       cell2.innerHTML = document.getElementById("txtLastName").value;
       cell3.innerHTML = document.getElementById("emailId").value;
       cell4.innerHTML ="<a class='hyperlink' style='margin-right:10px' href='#' onclick='javascript:editRow(this);return false;'> Edit </a>  <a href='#' class='hyperlink' onclick='javascript:deleteRow(this);return false;'> Delete </a> ";

       /* Set the content */
       document.getElementById("${fieldHtmlId}").value = table.outerHTML.replace(/(\r\n|\n|\r)/gm,"");
       clearControls();
   }

   function clear()
   {
       document.getElementById("txtFirstName").value="";
       document.getElementById("txtLastName").value="";
       document.getElementById("emailId").value="";
   }
</script>

如果您希望此控件为只读，则在共享配置中添加read-only="true"。

<field id="myco:userDetails" set="userDetails" read-only="true" label="User Details" >
            <control template="/org/alfresco/components/form/controls/workflow/userdetails.ftl" />
       </field>

请注意：到目前为止，这还没有准备好生产，我们也处于开发模式。我们想改进这个控件，请分享您的想法/cmets/反馈。

【讨论】：

您能提供“myco”内容模型的详细信息吗？只需要我用
给你，这是一个非常简单的字符串/文本文件。用户详细信息d:texttrue

您能否提供一些信息，如何在此处以完整格式存储该数据，以防它以这样的表格格式存储该数据--------------- -------------"myco:userDetails"=:"

名字	姓是的，到目前为止，我们仅将这些值存储为 HTML。是的，它很好，但是从 HTML 中获取数据有点困难，所以如果您提出任何对我有好处的建议，我正在寻找替代解决方案。谢谢

【解决方案2】：

我想就该主题添加几句话。

从Share architecture可以看出：

演示文稿实际上是由两种不同的 JavaScript 框架、Yahoo UI 库 (YUI) 和新的名为爱考……

您可以使用YAHOO! YUI library 的功能（以我的拙见，这是一个出色的库！）

注意带有'bd' 标识符的容器，您通常可以在WebScripts 中找到它。这就是 YUI 在 Alfresco 中的工作方式。这里将创建您的表和其他东西...

<html>

<head>
    <title>Adding and deleting rows dynamically</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/datatable/assets/skins/sam/datatable.css">
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script>    
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datatable/datatable-min.js"></script>
</head>

<body id="doc" class="yui-t1 yui-skin-sam">
    <div id="hd">
        <h1>Adding and deleting rows dynamically</h1>
    </div>
    <div id="bd"></div>
    <div id="ft">
        <button id="addRow">Add Row</button>
    </div>
    <script type="text/javascript">
        YAHOO.util.Event.onDOMReady(function() {
            var Event = YAHOO.util.Event,
                DT = YAHOO.widget.DataTable,
                DS = YAHOO.util.DataSource;

            var myDS = new DS([{
                    FirstName: 'John',
                    LastName: 'Paul',
                    EmailId: 'jpaul@example'
                },
                {
                    FirstName: 'michael',
                    LastName: 'raj',
                    EmailId: 'mraj@example'
                }
            ], {
                responseType: DS.TYPE_JSARRAY,
                responseSchema: {
                    fields: ['FirstName', 'LastName', 'EmailId']
                }
            });

            var myDt = new DT(
                'bd', [{
                        key: 'FirstName',
                        label: 'First Name',
                        sortable: true
                    },
                    {
                        key: 'LastName',
                        label: 'Last Name',
                        sortable: true
                    },
                    {
                        key: 'EmailId',
                        label: 'Email-Id',
                        formatter: 'email',
                        sortable: true
                    },
                    {
                        key: 'delete',
                        label: ' ',
                        formatter: function(elLiner,
                            oRecord, oColumn, oData) {
                            elLiner.innerHTML =
                                ' <button > Delete <\/button>';
                        }
                    }
                ],
                myDS,
                {
                   draggableColumns:true
                }
            );

            myDt.on('cellClickEvent', function(oArgs) {
                var target = oArgs.target,
                    oRecord = this.getRecord(target),
                    oColumn = this.getColumn(target);

                switch (oColumn.key) {
                    case 'delete':
                        this.deleteRow(oRecord);
                        break;
                }
            });

            var i = 0;
            Event.on('addRow', 'click', function() {
                myDt.addRow({
                    FirstName: 'first name' + i,
                    LastName: 'last name' + i,
                    EmailId: 'email' + i + '@example'
                });
                i++;
            });
        });
    </script>
</body>

</html>

Share 的众多示例之一是工作流程历史记录。可以看到，有一个标识符为${el}-workflowHistory-form-section的容器：

...
<div id="${el}-workflowHistory-form-section" class="workflow-history">
    <h3>${msg("header.history")}</h3>
    <div class="form-element-background-color"></div>
</div>
...

然后使用此容器构建小部件。

...
var historyContainerEl = Dom.get(this.id + "-workflowHistory-form-section"),
    historyTasksEl = Selector.query("div", historyContainerEl, true);

var historyColumnDefinitions =
[
    { key: "name", label: this.msg("column.type"), formatter: this.bind(this.renderCellType) },
    { key: "owner", label: this.msg("column.completedBy"), formatter: this.bind(this.renderCellCompletedBy) },
    { key: "id", label: this.msg("column.dateCompleted"), formatter: this.bind(this.renderCellDateCompleted) },
    { key: "state", label: this.msg("column.outcome"), formatter: this.bind(this.renderCellOutcome) },
    { key: "properties", label: this.msg("column.comment"), formatter: this.bind(this.renderCellComment) }
];

var workflowHistoryDS = new YAHOO.util.DataSource(this.historyTasks,
{
    responseType: YAHOO.util.DataSource.TYPE_JSARRAY
});

this.widgets.historyTasksDataTable = new YAHOO.widget.DataTable(historyTasksEl, historyColumnDefinitions, workflowHistoryDS,
{
    MSG_EMPTY: this.msg("label.noTasks")
});
...

通过使用 YUI，您可以获得 DataTable 小部件的所有功能，例如排序、分页、列重新排序、调整大小、内联编辑、and more... 此外，由于 html 减少，您的代码变得更加简洁。

要了解 YUI 的工作原理，我可以向您推荐 Daniel Barreiro 和 Dan Wellman 的优秀书籍 - "YUI 2. 8 Learning the Library: Develop Your Next-Generation Web Applications with the YUI Javascript Development Library"

【讨论】：