Add projects to project picker field

[Alexander]

Hi Atlassian answers! I need help with one tricky question:
How can I add JIRA project picker field on my pop-up like on "create issue" dialog?
I tried this:

<div class="field-group">
            <label for="project">Project<span class="aui-icon icon-required">Required</span></label>

            
            <input style="display: none;" data-container-class="project-ss" class="project-field aui-ss-select"
                   value="10203" id="project" name="pid" type="text">

            <div id="project-options"
                
 data-suggestions="[{"label":"Recent 
Projects","items":[{"label":"Test","value":"10203","icon":"http://unix02-app:8080/secure/projectavatar?size=xsmall&avatarId=10011","selected":true},{"label":"testdev (TESTE)","value":"11600","icon":"http://unix02-app:8080/secure/projectavatar?size=xsmall&avatarId=10011","selected":false} ....]}]"></div>
        </div>

But this is not working correctly, as you see: project suggestions is a constant...
and this:

<select data-container-class="project-ss" class="project-field aui-ss-select" id="project" name="pid">
                #if (!$recentProjects.empty)
                    <optgroup label="$i18n.getText('menu.project.recent')">
                        #foreach ($pr in $recentProjects)
                            #set ($avatarUrl = "/secure/projectavatar?pid=$!{pr.id}&size=small" )
                            <option style="background-image:url(#getNormalizedUrl($avatarUrl))" #if ($projectId && $projectId == $pr.id) selected="selected"#end value="$!{pr.id}">
                                $textutils.htmlEncode($pr.name)
                            </option>
                        #end
                    </optgroup>
                #end
                    #if(!$recentProjects.empty)<optgroup label="$i18n.getText('menu.project.all')">#end
                    #foreach ($pr in $projects)
                        #set ($avatarUrl = "/secure/projectavatar?pid=$!{pr.id}&size=small" )
                        <option style="background-image:url(#getNormalizedUrl($avatarUrl))" #if ($projectId && $projectId == $pr.id) selected="selected"#end value="$!{pr.id}">
                            $textutils.htmlEncode($pr.name)
                        </option>
                    #end
                    #if(!$recentProjects.empty)</optgroup>#end
            </select>

But it doesn't work, project field is empty (every time "No Matches"), but I see hidden select with all needed projects.

[Deniz Oğuz · Accepted solution]

Don't forget to change write_id_of_your_picker_field_here with your field id in html. Projects are retrieved from JIRA's REST endpoint so user only see the projects they have browse permission.

Put following lines inside your html:

<select ref="targetSelectCombo" className="aui-field-select select wp-ts-avatar-target" name="filter"
                                        id="write_id_of_your_picker_field_here" style={{display:"none"}}>
                                </select>

Write following lines inside your JS.

var ProjectPicker = AJS.SingleSelect.extend({
    init: function (options) {
        function formatResponse(response) {
            var ret = [];
            var groupDescriptor = new AJS.GroupDescriptor({
                weight: 1,
                label: "Projects"
            });
            ret.push(groupDescriptor);
            AJS.$(response).each(function(i, project) {
                groupDescriptor.addItem(new AJS.ItemDescriptor({
                    value: project.key,
                    label: project.name,
                    html:  "<div><span>" + project.name + "</span></div>",
                    icon: project.avatarUrls[project.avatarUrls.length - 1]
                }));
            });
            return ret;
        }
        AJS.$.extend(options, {
            errorMessage: "Missing Project",
            ajaxOptions: {
                url: contextPath + "/rest/api/2/project",
                query: true,
                formatResponse: formatResponse
            }
        });
        this._super(options);
    }
});
 
new ProjectPicker({
            element: AJS.$("#write_id_of_your_picker_field_here"),
            itemAttrDisplayed: "label",
            width: 300
        });

[GermanBaitinger]

Hi Deniz Oguz! I didn't understand your answer, can you explain it again pls? I am using only velocity .vm, but when I created .js file with your code and included this file in .xml as a resource - I got an empty select box.

[Deniz Oğuz]

This should display a single select project field. It should display empty but as soon as you click on the dropdown icon it should show projects. Could you check your JS files are working by adding a AJS.log statement and check it from developer console.

[Deniz Oğuz]

By the way you should but them inside a page load event.