Branch Selector Field Soy template

As of Bitbucket Data Center 10.0, the component does not self initialize due to changes to comply with Content Security Policy. See example below on how to initialize with javascript.

bitbucket.component.branchSelector.field

Renders a full AUI form field with label, hidden input, and branch selector. In order to read the value selected in the branch selector you can get the value of the hidden input, which is automatically populated when users interact with the paired branch selector, or listen for the bitbucket.component.branchSelector.change event.

Non repository-hook users of this field will need to add a plugin dependency on com.atlassian.bitbucket.server.bitbucket-web-api:branch-selector-field to ensure required components are loaded.

Example usage

In your Soy template:

1
2
{call bitbucket.component.branchSelector.field}
  {param id: 'test-selector' /}
  {param labelText: 'Branch' /}
{/call}

In your JavaScript:

Since 10.0:

1
2
require([
    'bitbucket/util/events'
], function (events) {
    const selector = $('#test-selector');

    if (selector.length) {
        const { id, ...data } = selector.data();
        // Trigger event to initialize passing id and data from data attributes
        events.trigger('bitbucket.internal.DO_NOT_USE.widget.branchselector.inputAdded', null, id, data);
    }

    var branch = $('#test-selector').val();
    
    // alternatively
    events.on('bitbucket.component.branchSelector.change', function (data) {
        console.log("The branch selector with id " + data.elementId + " was changed to  " + data.ref.displayId);
    });
})

Prior to 10.0:

1
2
var branch = $('#test-selector').val();

Or alternatively listen for the bitbucket.component.branchSelector.change event. Note that this assumes the web resource containing your JavaScript depends on com.atlassian.bitbucket.server.bitbucket-web-api:events:

1
2
require([
    'bitbucket/util/events'
], function (events) {
    events.on('bitbucket.component.branchSelector.change', function (data) {
        console.log("The branch selector with id " + data.elementId + " was changed to  " + data.ref.displayId);
    });
});

Parameters

Name	Required?	Description
`id`	Yes	The id of the input. Will default to `name`. At least one of `id` and `name` is required.
`name`	No	The name of the input. Will default to `id`. At least one of `id` and `name` is required.
`labelText`	Yes	The text to use as the label for this field
`isRequired`	No	Whether this field is required
`descriptionText`	No	Description string for the field
`errorTexts`	No	A list of strings for any errors that need to be displayed.
`showTags`	No	Whether to allow the user to select tags, as well as branches. False by default
`initialValue`	No	a branch name (fully qualified with the `refs/heads/` prefix) that is initially selected (or null)

bitbucket.component.branchSelector.input

Renders a hidden input and branch selector. The input will be automatically populated when users interact with the paired branch selector.

Parameters

Name	Required?	Description
`id`	Yes	The id of the input. Will default to `name`. At least one of `id` and `name` is required.
`name`	No	The name of the input. Will default to `id`. At least one of `id` and `name` is required.
`initialValue`	No	a branch name (fully qualified with the `refs/heads/` prefix) that is initially selected (or null)
`showTags`	No	Whether to allow the user to select tags, as well as branches. False by default