Make a floating control panel whose size can be changed by mouse in Google Sheets add-ons

Question

I would like to make a Google Sheets add-on. Most of the existing Google Sheets add-ons open a sidebar on the right of Google Sheets. But the sidebar is very narrow (i.e., 300px), we cannot change its width, it's not convenient at all.

So I'm thinking how to propose a bigger panel to host my add-on. I have seen and tried this add-on. It opens a dialog-like window above the content of the sheets, the size is changeable.

On the other hide, I tried the following code in Apps Script. It does open a dialog but the size cannot be changed by mouse.

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('My Custom Menu')
      .addItem('Show Dialog', 'showDialog')
      .addToUi();
}

function showDialog() {
  // Create HTML output object
  var htmlOutput = HtmlService.createHtmlOutput('<p>Hello, World!</p>')
      .setWidth(400) // Set width
      .setHeight(300); // Set height
  
  // Display modal dialog with the title 'My Dialog'
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'My Dialog');
}

Does anyone know how to make a floating panel like the example add-on whose size can be changed by mouse?

Edit 1: I realize that we can change the position for both model dialog and modeless dialog, we just need to drag the right position (where the title is).

Answer 1

From @Mogsdad's answer:

Everything that you can do to the Google Sheets UI via Google Apps Script is documented in Extending Google Sheets.

On the other hand, It is not possible to use the mouse to directly resize or reposition a modal dialog box that has been launched in Google Sheets when using Apps Script.

you can use the setWidth, setHeight methods in Apps Script to set the dialog box's initial size programmatically (as what you have used in your example code).

For more information about the ModalDialog box:Class Ui

Aside from the links I shared in the comment section, Here are additional references:

• Can I reposition a modeless dialog in Google Sheets?
• Can I somehow dock the searchbox (ctrl +f) or create a new searchbox in the top menu in Google Sheets so that it is always visible?

Answer 2

I believe you're asking for Modeless dialog functionality. Try

SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'My Dialog');

To quote the docs,

Modeless dialogs let the user interact with the editor behind the dialog. By contrast, modal dialogs do not