Pass Key to showModal named action

Support
1

On the first button, the query keys are accessible on the named action which is a showCardmodal action.
However, On the second button, I am calling a showmodal named action but the same query keys are not passed to the hook. I think maybe I should set the key to the app when using showModal?

<td class=""><button 
v-on:click="namedAction('addressmodal', {query: {id: address.address_token, type: 'addressedit'}})"
class="bg-orange-500 text-xs py-1 px-4 text-white border border-gray-400 rounded shadow">  edit </button></td>
            <td class=""><button 
v-on:click="namedAction('deleteAddress' {query: {id: address.address_token, type: 'deleteaddress'}})"
class="bg-red-500 text-xs py-1 px-4 text-white border border-gray-400 rounded shadow">  remove </button></td>
2

Could you post the schema for the named actions?

4 
"addressmodal": [{
        "action": "showCardModal",
        "options": {
            "clickToClose": true,
            "draggable": false,
            "height": "70%",
            "name": "myModal",
            "query": {},
            "resizable": false,
            "slug": "addressModal",
            "type": "modal",
            "width": "50%"
        }
    }],
5 
 "deleteAddress": [{
        "action": "showModal",
        "options": {
            "body": "Are your sure you want to delete this address?<br> This can not be undone.",
            "buttons": [],
            "icon": "warning",
            "overlayTheme": "dark",
            "slots": [{
                "actions": [{
                    "action": "runUtilityHook",
                    "options": {
                        "type": "deleteaddress"
                    }
                }, {
                    "action": "hideModal"
                }],
                "component": "button",
                "slot": "button",
                "styleClasses": "btn btn-danger",
                "text": "Delete"
            }, {
                "actions": [{
                    "action": "hideModal"
                }],
                "component": "button",
                "slot": "button",
                "styleClasses": "btn btn-info",
                "text": "Cancel"
            }]
        }
    }],
6

Thanks for this. When you call a named action like you’ve done, the options that you pass are merged into the root level of the options object. For your first action, this is fine because that’s where you expect the query object to be. However, for your showModal action, you actually want that data in the sub-action under the slots.

I overcome this by adding a function key to the showModal action that copies the data where I want it to go. So your 2nd named action would look something like:

{
  "action": "showModal",
  "function": "action.options.slots[0].actions[0].options = action.options.query",
  "options": {
    [...]
  }
}

The function always runs prior to the actual action, so this way your parameters will be inside the runUtilityHook action if you press the delete button in that modal.

If you have any trouble implementing this, add a debugger; statement to the beginning of that function and open the browser developer tools to debug the Javascript before launching the action. It will pause before executing that code so you can inspect the object and make sure the path is correct.