How to create non modal Dialog in Photoshop 2022

[defaultseiiesa394z4]

Please help folks. Noob here

I made a simple UI using https://scriptui.joonas.me/
I want to select layers and click on the button to rename.
However since it's a dialog, I am not able to interact with the layer once the dialog is on.
I tried generating the UI by making it pallete but it keeps dissapearing after launch.

Please suggest

// DLGCEEXPORTICONTOOL
// ===================
var dlgCEExportIconTool = new Window("dialog", undefined, undefined, {maximizeButton: true, minimizeButton: true, resizeable: true}); 
    dlgCEExportIconTool.text = "Xporter"; 
    dlgCEExportIconTool.orientation = "column"; 
    dlgCEExportIconTool.alignChildren = ["center","top"]; 
    dlgCEExportIconTool.spacing = 10; 
    dlgCEExportIconTool.margins = [3,7,3,3]; 

// PNLRENAMELAYERS
// ===============
var pnlRenameLayers = dlgCEExportIconTool.add("panel", undefined, undefined, {name: "pnlRenameLayers"}); 
    pnlRenameLayers.text = "Rename Layers"; 
    pnlRenameLayers.preferredSize.width = 250; 
    pnlRenameLayers.orientation = "column"; 
    pnlRenameLayers.alignChildren = ["center","center"]; 
    pnlRenameLayers.spacing = 10; 
    pnlRenameLayers.margins = 10; 

// GRPRENAMEBUTTOMLR
// =================
var grpRenameButtomLR = pnlRenameLayers.add("group", undefined, {name: "grpRenameButtomLR"}); 
    grpRenameButtomLR.orientation = "row"; 
    grpRenameButtomLR.alignChildren = ["left","center"]; 
    grpRenameButtomLR.spacing = 5; 
    grpRenameButtomLR.margins = 0; 

var btnRenameBottomL = grpRenameButtomLR.add("button", undefined, undefined, {name: "btnRenameBottomL"}); 
    btnRenameBottomL.text = "Bottom Left"; 
    btnRenameBottomL.preferredSize.width = 110; 

var btnRenameBottomR = grpRenameButtomLR.add("button", undefined, undefined, {name: "btnRenameBottomR"}); 
    btnRenameBottomR.text = "Bottom Right"; 
    btnRenameBottomR.preferredSize.width = 110; 

// GRPRENAMETOPLR
// ==============
var grpRenameTopLR = pnlRenameLayers.add("group", undefined, {name: "grpRenameTopLR"}); 
    grpRenameTopLR.orientation = "row"; 
    grpRenameTopLR.alignChildren = ["center","center"]; 
    grpRenameTopLR.spacing = 10; 
    grpRenameTopLR.margins = 0; 

var btnRenameTopL = grpRenameTopLR.add("button", undefined, undefined, {name: "btnRenameTopL"}); 
    btnRenameTopL.text = "Top Left"; 
    btnRenameTopL.preferredSize.width = 110; 

var btnRenameTopR = grpRenameTopLR.add("button", undefined, undefined, {name: "btnRenameTopR"}); 
    btnRenameTopR.text = "Top Right"; 
    btnRenameTopR.preferredSize.width = 110; 

// GRPEXPORTICONS
// ==============
var grpExportIcons = dlgCEExportIconTool.add("group", undefined, {name: "grpExportIcons"}); 
    grpExportIcons.orientation = "row"; 
    grpExportIcons.alignChildren = ["left","center"]; 
    grpExportIcons.spacing = 10; 
    grpExportIcons.margins = 0; 

var btnExportIcons = grpExportIcons.add("button", undefined, undefined, {name: "btnExportIcons"}); 
    btnExportIcons.text = "Xport"; 
    btnExportIcons.preferredSize.width = 200; 

dlgCEExportIconTool.show();

[Chuck Uebele]

I believe to get a non modal panel, you have to create it through an extension panel, and not just plain javascript. 

[jazz-y · Accepted solution]

var bt = new BridgeTalk();
bt.target = BridgeTalk.getSpecifier('photoshop');
bt.body = "var f=" + runPaletteInSeparateThread.toSource() + "; f();";
bt.send();
function runPaletteInSeparateThread() {
  var dlgCEExportIconTool = new Window("palette", undefined, undefined, {resizeable: true });
  dlgCEExportIconTool.text = "Xporter";
  dlgCEExportIconTool.orientation = "column";
  dlgCEExportIconTool.alignChildren = ["center", "top"];
  dlgCEExportIconTool.spacing = 10;
  dlgCEExportIconTool.margins = [3, 7, 3, 3];
  var pnlRenameLayers = dlgCEExportIconTool.add("panel", undefined, undefined, { name: "pnlRenameLayers" });
  pnlRenameLayers.text = "Rename Layers";
  pnlRenameLayers.preferredSize.width = 250;
  pnlRenameLayers.orientation = "column";
  pnlRenameLayers.alignChildren = ["center", "center"];
  pnlRenameLayers.spacing = 10;
  pnlRenameLayers.margins = 10;
  var grpRenameButtomLR = pnlRenameLayers.add("group", undefined, { name: "grpRenameButtomLR" });
  grpRenameButtomLR.orientation = "row";
  grpRenameButtomLR.alignChildren = ["left", "center"];
  grpRenameButtomLR.spacing = 5;
  grpRenameButtomLR.margins = 0;
  var btnRenameBottomL = grpRenameButtomLR.add("button", undefined, undefined, { name: "btnRenameBottomL" });
  btnRenameBottomL.text = "Bottom Left";
  btnRenameBottomL.preferredSize.width = 110;
  var btnRenameBottomR = grpRenameButtomLR.add("button", undefined, undefined, { name: "btnRenameBottomR" });
  btnRenameBottomR.text = "Bottom Right";
  btnRenameBottomR.preferredSize.width = 110;
  var grpRenameTopLR = pnlRenameLayers.add("group", undefined, { name: "grpRenameTopLR" });
  grpRenameTopLR.orientation = "row";
  grpRenameTopLR.alignChildren = ["center", "center"];
  grpRenameTopLR.spacing = 10;
  grpRenameTopLR.margins = 0;
  var btnRenameTopL = grpRenameTopLR.add("button", undefined, undefined, { name: "btnRenameTopL" });
  btnRenameTopL.text = "Top Left";
  btnRenameTopL.preferredSize.width = 110;
  var btnRenameTopR = grpRenameTopLR.add("button", undefined, undefined, { name: "btnRenameTopR" });
  btnRenameTopR.text = "Top Right";
  btnRenameTopR.preferredSize.width = 110;
  var grpExportIcons = dlgCEExportIconTool.add("group", undefined, { name: "grpExportIcons" });
  grpExportIcons.orientation = "row";
  grpExportIcons.alignChildren = ["left", "center"];
  grpExportIcons.spacing = 10;
  grpExportIcons.margins = 0;
  var btnExportIcons = grpExportIcons.add("button", undefined, undefined, { name: "btnExportIcons" });
  btnExportIcons.text = "Xport";
  btnExportIcons.preferredSize.width = 200;
  btnExportIcons.onClick = function () {dlgCEExportIconTool.close()};
  dlgCEExportIconTool.show();
}

* bridgeTalk takes your code as a string and executes it independently of the main script. This method has many pitfalls - be careful with code formatting and look for other examples in this community. Note that the window instance you launch in palette mode exists until you restart Photoshop. After the window has been closed, you can find it and re-show it with the code:

var w = Window.find('palette', 'Xporter');
if (w) w.show();

[defaultseiiesa394z4]

Thank you for you time to explain. Appreciate it

[Stephen_A_Marsh]

@defaultseiiesa394z4 – Peter Kahrel wrote in "Beginning ScriptUI":

There are some differences in the behaviour and appearance of ScriptUI windows in the different CS/CC applications. A substantial difference is that palettes can't be used in Photoshop (but see Davide Barranca's blog for a workaround; for links, see the resources on p. 121).

https://www.davidebarranca.com/2012/10/scriptui-window-in-photoshop-palette-vs-dialog/