CODEWITHSUNDEEP
jirajira-plugin
dsi
dsi

Reputation: 3359

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

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.

Upvotes: 1

Views: 3839

Answers (2)

mdoar
mdoar

Reputation: 6881

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

Upvotes: 2

Kuf
Kuf

Reputation: 17828

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.

Upvotes: 2

Related Questions