Daniel Wennerdahl

Hi Corentin BERTEAU

You can send parameter along with the invoke of the modal, then read them in the modal/iframe.

var modalContext = await client.invoke('instances.create', {
        location: 'modal',
        url: 'assets/modal.html?jsonObject=' + this.jsonObject,
        size: {
            width: '450px',
            height: '230px'
        }
    });

var jsonObject = encodeURIComponent(JSON.stringify(jsonData));

function getDataFromUrl(){

    const searchParams = new URLSearchParams(window.location.search);

    if(searchParams && searchParams.has("jsonObject")){
        var t = searchParams.get("jsonObject");
        const jsonData = JSON.parse(t);
        
        // Do things with jsonData

    }
}

Hi Corentin BERTEAU

I found a solution for this, it not pretty, but it works =)

I have an async method in the client.on event that runs a while loop, and every sec checks for status variabels set from the modal through custom triggers.

This post show how these custom triggers can be created: 

// --- Modal flags
var modalCancel = false;
var modalSave = false;


client.on("ticket.save", async () => {      

    // Open modal window
    var modalResult = await openModal();

    // If the agent has clicked Save & Close return true so that the ticket can save
    // Or if ticket is to be saved due to errors in the app
    if(modalResult === true){
        resetModal(); // Resets the modalFlags
        return Promise.resolve(true);
    } 
...

});


async function openModal(){
    var modalContext = await client.invoke('instances.create', {
        location: 'modal',
        url: 'assets/modal.html',
        size: { 
            width: '450px',
            height: '230px'
        }
    });

    var modalClient = await client.instance(modalContext['instances.create'][0].instanceGuid);
    
    client.on('modalSaveAndClose', () => {
        console.log("Event: Save and Close");
        modalSave = true;
    });

    // if the user closes the modal by clicking the X or clicks outside the window
    // Note that this listens to the modal instance and not the base client.
    modalClient.on('modal.close', () => {
        console.log("Event: modal.close Fired");
        modalCancel = true;
    });
    
    // This is a timer that waits for user action. Cancel or save
    // It checks every second if anything has changed.
    var open = true;
    while(open){
        if(modalCancel == true && modalSave == false){
            console.log("Modal Canceled");
            modalCancel = false; 
            return false;
        }

        if(modalSave == true){
            console.log("Modal OK / Save and Close");
            modalSave = false;
            return true;
        }

        await new Promise(r => setTimeout(r, 1000));
    }
}

...

// --- Get the parent instance ID ------------------------------------
var ticketClientPromise = client.get('instances').then(function(instancesData) {
    var instances = instancesData.instances;
    for (var instanceGuid in instances) {
        if (instances[instanceGuid].location === 'ticket_sidebar') {
            return client.instance(instanceGuid);
        }
    }
});

// --- Create custom trigger for the save and close process. This is then listened for in the app
function saveAndClose(){
    // Create OK trigger for app to save ticket
    ticketClientPromise.then(function(ticketClient){
        console.log("Event: modalSaveAndClose created");
        ticketClient.trigger("modalSaveAndClose");
    });

    client.invoke('destroy');
}

Hi, Greg Katechis

Thank you for the example. However I cant get this to work since I'm within the client.on('ticket.save'). The app has functionality that cant be loaded in the modal window so can't use the same JS file there. 

Even if the listeners could be registered, there needs to be a promise to "pause" the save process, that in turn needs to be resolved to proceed.

I cant find anything in the documentation that covers this more then the events them self's. Maybe I'm just bad at searching :D 

client.on("ticket.save", async () => {      
    /**
     * 1. pause the save process through a promise
     * 2. wait for user ok/cancel
     * 3. on ok => save
     * 4. on cancel => abort save
    */
});

I'm working on using a modal window to pop up when saving, that waits for the agents confirmation before continuing, but can't find a way to pause the save process and resume it on command.

I've got the modal down, and communicating back to the parent sidebar, but since the ticket submit button (client.on(ticket.save)) triggers the modal, I can't trigger anything to go ahead with the save process?

sidebar events: https://developer.zendesk.com/api-reference/apps/apps-support-api/ticket_sidebar/#ticket-save-hook-events

In short: (the bold below is the issue)

• on ticket update/save
• open modal window and ask user to confirm value X
• if ok then continues the save process
• if cancel then notify that confirmation is needed. Do not save

Ahmed Zaid awesome! Thank you for such a quick response.

I'm creating a custom app and there are scenarios where I need to show an error message to the user, in that ticket. So those small notifications that popup in the upper right corner would be use full in this case. I cant find anything on these in the documentation (ZAF or API's) though.

Are these even customizable? =) 

Hi Ahmed Zaid

Thank you for getting back to me.

I'm in contact with an zendesk now for troubleshooting. The apps works on their end so seem to be some issue with my end, they are unsure on what though.

Hi again Ahmed Zaid

I've testat with:

• actively broken manifest; Same error
• the default generated file; Same error
• only required elements; Same error
• and all the above on another computer; Same Error

The only thing that create a new error was removing the manifest file =)

Hi Ahmed Zaid,

Thank you for your reply.
Its a private app for our company at the moment. It is the default generated manifest so has not been modified, except author details and app name. But will double check =) 

I'm building a small app that works perfect when testing locally (when apps:server is running), but validating only returns "Error", nothing more. 

zcli apps:validate
 »   Error: Error

Anyone got any ideas on where to even start troubleshooting this =) ?