Pass element value from taskpane to PowerPoint dialog box

Question

I am testing out a PowerPoint add-in and using the Office API to create some functionalities. One of them is taking input from the user (in a textarea tag), clicking a button that open a dialog box, and displaying the input as text in the box.

I attached an ID ('tarea') to the text area:

<textarea id="tarea" rows="2" cols="40"></textarea>

..and the button:

<button id="odi" class="ms-Button ms-Button--primary">
  <span class="ms-Button-label">Open Dialog</span>
</button>

..can read the value:

const query = document.getElementById('tarea').value

..and open the dialog box by pressing a button, a function that points to id=odi:

await Office.context.ui.displayDialogAsync('https://localhost:3000/test.html', {
    height: 70,
    width: 80,
    displayInIframe: true, 
}); 

How would I capture the value of the query and display it in the dialog box after pressing the button? The text area and button are in the taskpane folder, but the dialog box references another folder, test, which displays the content of test.html. So, ideally, I enter a query in the text area, press a button, clear the text area, and a dialog box displaying that query is shown.

Answer 1

You can pass any parameters via URL and get the back on the dialog window using the window.location property which returns a Location object with information about the current location of the document.