通过HTML/JS植入来美化JIRA表单

来源：互联网发布：革命烈士知乎编辑：程序博客网时间：2024/06/15 18:25

转载至：http://42.121.86.193/thread-3159-1-1.html

JIRA是个很cool的平台。

我们常常会把现实中的工作流程抽象出来，放到JIRA上。以达到所谓的规范化流程管理，而不是整天盯着邮件或者其他低效的方式。
随之未来的问题就是：大家不知道怎么填写JIRA表单。特别是一旦用户数量达到一定程度后，开培训讲座也不太现实。
所以JIRA页面拥有一个友好的提示就变得十分重要的。

但悲剧的是，JIRA没有提供方便的提示信息自定义字段类型。虽然插件“JIRA Toolkit Plugin”，里面的“Message Custom Field (for view)”，“Message Custom Field (for edit)”可以显示支持HTML/JS的只读文本。但是其局限性很大，一旦表达验证失败（如：必填字段没填写），“Message Custom Field (for edit)”的字段就不会再显示。这一点实在无法接受。大家有兴趣可以试试。

下面我向大家演示一下我是怎么使用其他方式实现的。
我的灵感来自以下两个地方：
http://www.divingintothedetails.com/jira/jira-tip-using-message-fields/
https://confluence.atlassian.com/display/JIRA/Displaying+a+Field+Based+on+Another+Field+Selection

原理如下：
（1）JIRA的字段配置的“描述”是支持HTML和JavaScripts的。
（2）HTML DOM和Javascripts几乎可操作页面内的任何HTML元素。

思路如下：
（1）“主题”是每个JIRA问题肯定存在的字段，所以我们可以在“主题”的字段配置里做文章（也可以使用其他字段来锚定）。
（2）怎么让提示文本的显示效果和JIRA本身看起来一致呢？很简单！直接使用JIRA自己的的CSS（你可以用firebug找到到JIRA的CSS文件），主要用到如下CSS定义：
.aui-message, .aui-message.warning, .aui-message.error, .aui-message.info, .aui-message.success, .aui-message.hint {
color: #333333;
font-weight: normal;
}
form.aui .aui-message .aui-icon, .aui-message .aui-icon { background-image: url("images/icons/aui-message-icon-sprite.png");
background-repeat: no-repeat;
border: medium none;
display: block;
height: 14px;
left: 10px;
padding: 0;
position: absolute;
text-indent: -9999px;
top: 0.9em;
width: 14px;

}

实例1：
在“主题”的字段配置描述里加入下面代码，以达到JIRA项目的不同问题类型有不同使用说明：
<script type="text/javascript"> var issueType = document.getElementById('issue-create-issue-type');
var issueTypeValue = issueType.innerHTML;
var userGuide = document.createElement('div');
userGuide.className = 'aui-message info';
userGuide.style.lineHeight = '100%';
if (issueTypeValue == "问题类型1") {
userGuide.id = 'user-guide1';
userGuide.innerHTML = '<span class="aui-icon icon-info"></span><p><b>使用说明：</b></p>';
issueType.parentNode.appendChild(userGuide);
}
if (issueTypeValue == "问题类型2") {
userGuide.id = 'user-guide2';
userGuide.innerHTML = '<span class="aui-icon icon-info"></span><p><b>使用说明：</b></p>';
issueType.parentNode.appendChild(userGuide);
}
</script>

实例2：
植入方法同上。利用Javascript事件，动态显示提示信息：
<div class="aui-message info" style="min-width:500px;width:86%;line-height:80%;overflow:auto;display:none" id="XXXmessage">
<span class="aui-icon icon-info"></span>
<p><b>提醒：xxxxxxxxxxx。</b></p>
</div>
<script type="text/javascript">
var customfield_10363 = document.getElementById('customfield_10363');
if (customfield_10363) {
var XXXmessage = document.getElementById('XXXmessage');
customfield_10363.onfocus=function() {
XXXmessage.style.display='block';
}
customfield_10363.onblur=function() {
XXXmessage.style.display='none';
}
}
</script>
备注：“customfield_10363”是某个自定义字段的ID，可以使用firebug找你想要的字段的HTML DOM ID。这里利用onfoucs和onblur事件实现动态提醒。

0 0