How to Use Confluence Dialog Button

I've been struggling to implement a Confluence dialog button in my project, and I'm hoping that by sharing my experience, I can help others who may be facing similar issues.

To begin with, I took an example from and modified it to create the endpoint code. The code is written in JavaScript and uses HTML to display the dialog. However, as a beginner in both JavaScript and HTML, I found myself getting stuck at the beginning, trying to get the JavaScript to cooperate with the HTML part of the script.

In my case, I already have a second REST endpoint script that integrates JIRA with other services. What I need is to create a dialog that requires some information from the user and calls another endpoint when the confirm button is clicked. To achieve this, I will break down the process into several steps.

Step 1: Create the Dialog

The first step is to create a REST endpoint script containing HTML. This script will be used to display the dialog. In Script Runner, create a new custom web item and select 'Run code and display a dialog' as the option.

Step 2: Finish Interaction Details of the Script

In this step, I need to write the JavaScript code that will interact with the HTML part of the script. This code should require some information from the user and call another endpoint when the confirm button is clicked. Here's an example of what the code might look like:

```javascript

import com.atlassian.jira.component.web.Dashboard;

import com.atlassian.jira.component.web.Navigator;

// Create a new dialog with checkboxes and text fields

var dialog = new com.atlassian.gadgets.dialogs.Dialog();

dialog.setTitle('My Dialog');

dialog.setBody('

Checkboxes:

Checkbox 1
Checkbox 2

Text Fields:

');

// Add a confirm button to the dialog

dialog.addButton('Confirm', function() {

// Get the values entered by the user

var checkboxValues = '';

var textfieldValues = '';

for (var i = 0; i < dialog.getBody().getElementsByTagName('input').length; i++) {

var input = dialog.getBody().getElementsByTagName('input')'i';

if (input.type == 'checkbox') {

checkboxValues.push(input.checked);

} else {

textfieldValues.push(input.value);

}

// Call the second REST endpoint with the user's input

$.ajax({

type: 'POST',

url: '/rest/endpoint/script',

data: JSON.stringify({checkboxValues: checkboxValues, textfieldValues: textfieldValues}),

dataType: 'json'

});

```

Step 3: Create the Second REST Endpoint Script

In this step, I need to create a new REST endpoint script that will take the information entered by the user and do something with it. The script should be able to handle the JSON data sent from the dialog.

Here's an example of what the code might look like:

```javascript

import com.atlassian.jira.component.web.Navigator;

// Create a new REST endpoint

$.ajax({

type: 'POST',

url: '/rest/endpoint/script',

data: function(data) {

// Process the user's input here

return JSON.stringify({result: 'success'});

dataType: 'json'

});

```

By following these steps, I was able to create a custom button in Confluence that displays a dialog with checkboxes and text fields. When the confirm button is clicked, the script calls another REST endpoint with the user's input, which can then be processed accordingly.

How to use confluence dialog button