I’m trying to show progress of the process when the button is clicked
But the problem is that the html is updated after all process has finished
even though I put the code right at the top
I’m trying to change html by using
document.getElementById("divProgress").innerHTML = "started";
Would there be other way to make it happen?
Thanks in advance
Yes I think that modal execution has something for progress dialog. https://developer.adobe.com/photoshop/uxp/2022/ps_reference/media/executeasmodal/#progress-bar
Thanks, I have tried it but getting an error
index.js:470 Uncaught SyntaxError: await is only valid in async function
but I’m using it on async function
async function selectAll()
Can you post more of the surrounding code?
The function in which you’re using await has to be async, too.
Panel HTML changes do NOT have to be included inside the executeAsModal code. You could call the HTML changes and then invoke the execuateAsModal function afterwards. HTML panel changes do not need to be asychronous so they don’t need to “await” anything.
I’m using it as
document.getElementById("btnPopulate").addEventListener("click", start);
async function start() {
require("photoshop").core.executeAsModal(showLayerNames, {"commandName": "User Cancel Test"})
}
but selectAll and rasterizeLayers function is not being executed (or maybe it’s doing something wrong)
async function rasterizeLayers() {
const batchPlay = require("photoshop").action.batchPlay;
const result = await batchPlay(
[
{
_obj: "rasterizeLayer",
_target: [
{
_ref: "layer",
_enum: "ordinal",
_value: "targetEnum"
}
],
_options: {
dialogOptions: "dontDisplay"
}
}
],{
synchronousExecution: false,
modalBehavior: "fail"
});
}
async function selectAll() {
const batchPlay = require("photoshop").action.batchPlay;
const result = await batchPlay(
[
{
_obj: "selectAllLayers",
_target: [
{
_ref: "layer",
_enum: "ordinal",
_value: "targetEnum"
}
],
_options: {
dialogOptions: "dontDisplay"
}
}
], {
synchronousExecution: false,
modalBehavior: "fail"
});
}
I wasn’t using executeAsModal at first, but html changes always happen after all process has finished
Actually I think when I use executeAsModal, batchplay doesn’t work because it can’t select the layers with batch play
All I want to do is just change html when button is clicked, not when process is finished after the button is clicked
I would advise that you go and study how asynchronous JavaScript works as that’s where your problem lies (and not with anything UXP related).
It can be a tricky thing to get your head around at first, but you are going to keep hitting up against it.
In a nutshell - using the await keyword will cause code execution to wait until the awaited code is completed.
Here’s a rough pseudocode example for you:
async function exampleFunc () {
// no await
console.log("foo");
// await function that takes time to complete
await anotherExampleFunc() {
// Do stuff that takes time - e.g. API call
console.log("donk")
}
// no await
console.log("bar")
}
The output will be:
foo
donk
bar
because the final log has to wait for anotherExampleFunc to complete.
Without async/await the output would be:
foo
bar
donk
because the JavaScript engine will start executing the anotherExampleFunc and move straight on to the final log before it completes.
It also appears that you are asking two questions in this thread - your original HTML update one, and then a batchPlay/executeAsModal question. You’d be better served creating a new thread so as not to confuse the issue.
executeAsModal() calls the showLayerNames function in your code, but I don’t see where you’ve defined that function. I just see “rasterizeLayers()” and “selectAll()” functions. Are these two within the showLayerNames function?
Also, both “rasterizeLayers()” and “selectAll()” functions contain
{synchronousExecution: false,
modalBehavior: "fail"}
Since changes like this that affect the image have to occur inside executesAsModal(), and executesAsModal() creates a modal state,
modalBehavior: "fail"
will insure that these functions FAIL to execute.
I’m still not sure what your entire code looks like, but try replacing
{
synchronousExecution: false,
modalBehavior: "fail"
}
with
{}