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

转载至：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事件实现动态提醒。