Skip to content

Instantly share code, notes, and snippets.

@msztorc

msztorc/modal.html

Forked from dpawluk/modal.html
Created May 19, 2022 21:12
Show Gist options
  • Save msztorc/90bb56fb9587e0fc7480dbb40d2fb3ae to your computer and use it in GitHub Desktop.
Save msztorc/90bb56fb9587e0fc7480dbb40d2fb3ae to your computer and use it in GitHub Desktop.
Download ZIP
Establishing a modal instance and communicating with it from the parent instance
Raw
modal.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="view_container">
</div>
<!-- https://github.com/zendesk/zendesk_app_framework_sdk -->
<script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<script>
// Initialise the Zendesk JavaScript API client
// https://developer.zendesk.com/apps/docs/agent/zaf_v2
var client = ZAFClient.init();
client.invoke('resize', { width: '500px', height: '800px' });
client.on('app.registered', function(){
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);
}
}
});
ticketClientPromise.then(function(ticketClient) {
//send a message back to the parent client to let it know the modal is now ready for events to be triggered
ticketClient.trigger('modalReady');
});
});
client.on('drawData', insertModalHtml);
function insertModalHtml(data){
$("#view_container").html(data);
};
</script>
</body>
</html>
Raw
sidebar.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="app_nav">
<ul>
<li>
<a class="active" href="#">Text</a>
</li>
<li>
<a href="#">Attachments</a>
</li>
</ul>
</div>
<div id="view_container">
</div>
<!-- https://github.com/zendesk/zendesk_app_framework_sdk -->
<script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<script>
// Initialise the Zendesk JavaScript API client
// https://developer.zendesk.com/apps/docs/agent/zaf_v2
var client = ZAFClient.init();
client.invoke('resize', { width: '300px', height: '250px' });
client.on('app.registered', init);
function init(){
var html = "<div><h1>A Title!</h1></div>";
popModal(html);
};
function popModal(html){
client.invoke('instances.create', {
location: 'modal',
url: 'assets/modal.html'
}).then(function(modalContext) {
// The modal is on the screen now!
var modalClient = client.instance(modalContext['instances.create'][0].instanceGuid);
client.on('modalReady', function(){
modalClient.trigger('drawData', html);
});
modalClient.on('modal.close', function() {
// The modal has been closed.
});
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment