Add only actions from the respective set to the list

Hello friends, how do I organize a list, type, get and add to it, only the items corresponding to the set selected in your list?
Here I managed to make a small working UXP dashboard with codes obtained from this post:
Link:Any efficient way to get all actions list?

However, the result was not quite satisfactory! Thanks.
html:

<sp-dropdown size="s" class="main" placeholder="Select Action Set" >
    <sp-label slot="label">Select Action Set</sp-label>
    <sp-menu slot="options"  id="list_AS" size="s"></sp-menu>
</sp-dropdown>
 <!-- /////////////// xxxxxxxxxx -->
<sp-dropdown size="s" class="main" placeholder="Select Action" >
    <sp-label  slot="label">Select Action</sp-label>
    <sp-menu slot="options"  id="list_MD" size="s"></sp-menu>
</sp-dropdown>

js:

const actionList = []
const actionsSetList= []
    
for (let actionSet of app.actionTree ?? []) {
    for (let action of actionSet.actions ?? []) {
        const item = {
            title: action.name,
            data: {path: [actionSet.name, action.name]},
            description: actionSet.name,
        }
        actionList.push(item)
    }
}

for (let actionSet of app.actionTree ?? []) {
        const item = { Set: actionSet.name}
        actionsSetList.push(item)
}

itensActionsSet = actionsSetList.map(function (itemList) { return itemList.Set});
for (var i = 0; i < itensActionsSet.length; i++) {
     document.getElementById("list_AS").insertAdjacentHTML("beforeend", `<sp-menu-item>${itensActionsSet[i]}</sp-menu-item>`); 
}

itensActions = actionList.map(function (itemList) { return itemList.title});
for (var i = 0; i < itensActions.length; i++) {
     document.getElementById("list_MD").insertAdjacentHTML("beforeend", `<sp-menu-item>${itensActions[i]}</sp-menu-item>`); 
}

document.querySelector("#importIMG").addEventListener("click", async evt => {
	await core.executeAsModal( async() => {
        try {
            const list_AS = document.getElementById("list_AS").value;
            const list_MD = document.getElementById("list_MD").value;
            await app.batchPlay([{"_obj":"play","_target":[{"_name": list_MD,"_ref":"action"},{"_name": list_AS,"_ref":"actionSet"}]}], { });
          } 
          catch (err) { alert("SELECT A SET OF ACTIONS AND AN ACTION!")}
        })
})

No chance of this post being resolved?

Your actionList contains all actions from all sets and you populate the dropdown with them and never update. You need to listen to a change event for sets dropdown and populate second dropdown only with actions from the selected set

Hi @Karmalakas you, as always very attentive to us, thanks for showing up! Man, I must confess that even today I’m looking for this, but this is already far beyond my knowledge, that’s why I resorted here, I’ll be grateful if someone more experienced can show this, in practice. The code structure is in the post, I believe that with what we already have and someone with good knowledge we can try to find a solution. Thanks.

I think same algorithm is used in Alchemist when you select actionSet → action → command. But I think there is no copy paste solution you could use and it is probably better to write it from scratch.

Thanks @Jarda I’ll dive into that and see if I can come up with something.

Hi @Jarda, man I tried to follow the links you indicated, but it left my head with bugs, I’m not at that level of understanding such complex code. I tried something with the codes at the end of this link however, I was not successful.
I ended up finding the solution in this other post:Execute a script via a button - #8 by ddbell
The result was quite satisfactory:

const getActionSet = require('photoshop').app.actionTree;
const ActionSet = document.getElementById("list_AS")
const AcrionList = document.getElementById("list_AC")

for (let i=0; i<getActionSet.length; i++){
     ActionSet.insertAdjacentHTML("beforeend", `<sp-menu-item>${getActionSet[i].name}</sp-menu-item>`); 
}

ActionSet.addEventListener("change", evt => {
    AcrionList.innerHTML ="";
    for (let i=0; i<getActionSet.length; i++){ var getActionItens = getActionSet[evt.target.selectedIndex]}
    for (let i=0; i<getActionItens.actions.length; i++){
         AcrionList.insertAdjacentHTML("beforeend", `<sp-menu-item>${getActionItens.actions[i].name}</sp-menu-item>`); 
         AcrionList.selectedIndex = 0;
    }
})

document.querySelector("#btnRun").addEventListener("click",  evt => {
    core.executeAsModal( async() => {
      const list_AS = ActionSet.value; list_AC = AcrionList.value;
      await app.batchPlay([{"_obj":"play","_target":[{"_name": list_AC,"_ref":"action"},{"_name": list_AS,"_ref":"actionSet"}]}], { });
    })
})

Here I share the 100% working plugin, maybe someone might find this useful.
ACTIONS-LIST_PS.ccx (6.7 KB)

Mauricio, as always very dedicated. Congratulations on the effort! I’ll take a look at the plugin.