我正在使用 Alfresco Community 5.1.x。我想在 + 按钮动态添加文本字段时使用 kickstart 的表单之一创建自定义工作流程。这可能吗？如何？
问问题
1405 次
2 回答
4
我希望你能从这个控件中得到一些想法。
在共享配置上，
<field id="myco:userDetails" set="userDetails" label="User Details" >
<control template="/org/alfresco/components/form/controls/workflow/userdetails.ftl" />
</field>
用户详细信息.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>
请注意：截至目前，这还没有准备好生产，我们也处于开发模式。我们想改进此控件，请分享您的想法/评论/反馈。
于 2016-06-23T04:22:05.313 回答
0
我想就这个主题补充几句话。
从Share 架构中可以看出：
该演示文稿实际上是与两种不同类型的 JavaScript 框架组合在一起的，雅虎 UI 库 (YUI) 和名为 Aikau 的新框架......
您可以使用YAHOO 的功能！YUI 库（以我的卑微经验，这是一个很棒的库！）
请注意带有标识符的容器'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小部件的所有功能，例如排序、分页、列重新排序、调整大小、内联编辑等等……此外，由于 html 减少，您的代码变得更加简洁。
要了解 YUI 是如何工作的，我可以向您推荐 Daniel Barreiro 和 Dan Wellman 所著的优秀书籍—— “YUI 2. 8 Learning the Library: Develop Your Next-Generation Web Applications with the YUI Javascript Development Library”
于 2017-05-08T14:16:58.610 回答