Documentation API Reference

Modal

You can create modals using the在stances.createaction in the Core API and passingmodalas the location. See在stances.create在the Core API.

Example

             

              
varclient=ZAFClient.在it();client.在voke('instances.create',{location:'modal',url:'https://en.m.wikipedia.org/wiki/Main_Page',size:{// optionalwidth:“450 px”,height:'300px'}}).then(function(modalContext){// The modal is on screen nowvarmodalClient=client.在stance(modalContext['instances.create'][0].在stanceGuid);modalClient.on('modal.close',function(){// The modal has been closed});});

Note: The maximum recommended width and height are 80vw and 80vh. Scrollbars are displayed if your content is larger than the width or height of the modal.

SeeUsing modal dialogs.

If you want to use a server-side source for your modal, you must usesigned urlsto authenticate your Zendesk instance. You must also declare the modal location in the app's manifest file rather than inclient.invoke(). Example:

             

              
"name":"My App","signedUrls":true,"location":{"support":{"ticket_sidebar":"https://myapp.example.org/resources/sidebar","modal":"https://myapp.example.org/resources/modal"}},

The following conditions apply when declaring a server-side modal location:

  • All the other locations must be server-side
  • All the locations must be name/url pairs under "support", as in the example above
  • signedUrlsmust be true and declared at the top-level of the manifest JSON

If you declare the modal location in the manifest file, you don't have to declare it inclient.invoke(). Example:

             

              
functiondisplayModal(){returnclient.在voke('instances.create',{location:'modal'}).then(function(data){...});}

The objects available inall locationsare available in this location.

You can also use theresizecore action to change the modal's size after it has been created. Example:

             

              
client.在voke('resize',{width:'80vw',height:'80vh'});

Events

In addition to thecore events, the following event is available to an app in a modal dialog:

  • modal.close

To add event listeners to your app, seeWorking with framework events.

Users can dismiss modals by clicking on their backdrop or thex在the top right corner of the modal. Themodal.closeevent is fired at the time the modal is hidden from the user so no further UI update is possible. Your iframe is removed from the DOM after its handler formodal.closehas run. If your event handler returns a promise, removal can be delayed for up to ten seconds.

Actions

destroy

Closes the modal.

在voke
             

              
client.在voke('destroy')