How to develop custom field (plugin) having multiple input fields

Question

In custom-Field plugin development, we create a custom field as it should appear as below (which have multiple input fields):

CutomFieldName: <Input Textbox> <Input Textbox> <Input Textbox> <sum of input 1,input 2 & input 2>

I am following the tutorial Creating a Custom Field in JIRA to create the plugin.

Below, I have updated edit.vm as below to include additional two text input but it did not work... Just appear additional textbox... (I m not sure what should be other change require).

 #customControlHeader ($action $customField.id $customField.name $fieldLayoutItem.required     $displayParameters $auiparams)
 <input class="text" id="$customField.id" name="$customField.id" type="text"     value="$textutils.htmlEncode($!value)" /><input class="text" id="$customField.id"     name="$customField.id" type="text" value="$textutils.htmlEncode($!value)" /><input class="text"    id="$customField.id" name="$customField.id" type="text" value="$textutils.htmlEncode($!value)" />
#customControlFooter ($action $customField.id $fieldLayoutItem.fieldDescription     $displayParameters $auiparams)

Can any one suggest me how i should update this to achieve additional field inside a customfield and preserver different values and get total of them.

score 2 · Accepted Answer · answered Jun 20 '13 at 16:21

2

Another approach would be to generate the fields on the client side. You can add code to custom fields that will add the required form fields. for example, to add 2 simple inputs, use the following script:

<script type="text/javascript">
    var table = AJS.$('<table>').append(
            AJS.$('<tr>').append(
                AJS.$('<td>',{text:'first'})
            ).append(
                AJS.$('<td>',{class:'myinput'}).html(AJS.$('<input>'))
            )
        ).append(
            AJS.$('<tr>').append(
                AJS.$('<td>',{text:'second'})
            ).append(
                AJS.$('<td>',{class:'myinput'}).html(AJS.$('<input>'))
            )
        );
    AJS.$("input#customfield_10001").before(table)
</script>

Create a small function to get the form-content:

function collect_data() {
    var content = AJS.$(".myinput input").map(function() {return this.value});
    var json = '{"first":"'+content[0]+'","second":"'+content[1]+'"}';
    AJS.$("input#customfield_10002").val(json);
}

Finally, collect updated information on every change:

AJS.$(".myinput").on('input',function(){ 
    collect_data();
});

If you decide to use this, update all fields ids, modify the input fields as you wish, and add change the form creation code so that it will fill the input with values of your choice.

let me know if you need more information.

answered Jun 20 '13 at 16:21

Kuf

17,318
6
67
91

Can we do sum (total) also and display ? Example: i have put - text inpu1 textinput 2, textinput 3 in one row and second row, again three input and now , in third row, i need to sum of first two row inputs. how could be get such result or summary fields as last row. – dsi Jun 21 '13 at 10:53
Sure you can, read the values , for example `var x = parseInt(AJS.$(".myinput input"));`, sum them and insert their value to the requeired place. – Kuf Jun 21 '13 at 20:47
Thanks @kuf Can you please also see at another related query where have to create cascade month-year picker custom field: http://stackoverflow.com/questions/17270650/how-to-change-custom-field-date-picker-to-appear-as-month-year-picker Thanks. – dsi Jun 24 '13 at 08:06
I have added summary custom field which appears on view screen also. Now, when i do inline edit for other field and save then this summary custom field (appear through client side javascript as our discussion comment) gets disappear and need to refresh screen then after it gets appear and value gets updated. can you suggest me how it should be resolve and also, how i would ensure, that, added javascript object is not already exists then only add other wise, it could be duplicate summary row. thanks. – dsi Jun 25 '13 at 10:20
here, as control get disappear after inline editing on issue view screen. ( looks like due to inline editing as ajax and our javascript is not getting loaded until page is reload again... but not understand, how it could be resolve and preserve custom field which are added through javascript )? – dsi Jun 25 '13 at 10:49
One more thing - In issue view screen and issue edit screen formating does not match and it just get at random place. i've corrected for view template but it gets destruct for edit template. – dsi Jun 25 '13 at 11:26
Is it possible to get which template is this inside field description javascript so, accordingly i can add formatting related to template..? – dsi Jun 25 '13 at 11:41
You asked many question without writing any code, which makes it hard for me to answer them. An easy way to keep the screen open on the client is to use `setInterval` to check if the field is visible, and if not, display it. To tell apart from the screens, find a unique id on each screen and look for it. for example - `if (AJS.$('#edit-issue-dialog').length == 0) {...}` – Kuf Jun 25 '13 at 11:56
Thanks @Kuf. it resolved last issue .but still have issue for - unable to preserve field control while do inline edit and duplicate custom field (it would be really helpfule if you can share some example stuff). .. sorry for stuff was not added. you can refer new issue - http://stackoverflow.com/questions/17297025/issues-facing-on-controls-added-through-custom-field-description-javascript . have added stuff where i face the issue. Thank You – dsi Jun 25 '13 at 12:16

score 2 · Answer 2 · answered Jul 02 '13 at 20:02

2

Chapter 3 of Practical JIRA Plugins has a worked example of storing multiple values in a JIRA custom field. The source code for the example is available for download at https://bitbucket.org/mdoar/practical-jira-plugins

answered Jul 02 '13 at 20:02

mdoar

6,758
1
21
20

Thanks for this tutorial link ,its really helpful. In this multivalue example, extended type of `AbstractCustomFieldType, Carrier>` . I have added " – dsi Jul 03 '13 at 11:52
so basically, just trying to add one dropdown/select picker list align to input textbox in multiple value tutorial as this will the need here. Please let me know on this. Many Thanks. – dsi Jul 04 '13 at 03:35
please see details of facing issue - http://stackoverflow.com/questions/17482619/facing-an-issue-in-jira-custom-field-creation – dsi Jul 05 '13 at 06:43

How to develop custom field (plugin) having multiple input fields

2 Answers2