Hello,
I could use some help further understanding how to access data in a modal iFrame. My goal is to obtain data from a text area from within a modal generated from the ticket properties sidebar in freshservice.
At the moment I am simply trying to test its functionality but I can’t even get a simple “Click” function that console.logs a “Hello World” to run on a button from within the modal. Works fine from within the sidebar app but not the modal, so I assume they function differently.
Any help would be greatly appreciated. This has me stalled in the co
hackathon.
Here is an example of my code:
app.js -
$(document).ready( function() {
app.initialized()
.then(function(_client) {
window.client = _client;
client.events.on('app.activated',
function() {
showModal();
getModalData();
});
});
});
// Function that will create modal and slide out with text area for notes
function showModal() {
client.interface.trigger("showModal", {
title: "New Note",
template: "modal.html",
}).then(function(data) {
console.log(data)
}).catch(function(error) {
console.log(error);
});
}
// Function to get and handle data from modal
function getModalData() {
$('#saveBtn').click(function () {
console.log('Hello World!')
client.instance.context()
.then(function(context){
console.log(context)
}.catch(function(error) {
console.log(error);
showNotification('error', 'Error', 'Unable to retrieve data')
}));
})
}
// Function to handle all notifications (error, success, etc.)
function showNotification(type, title, message) {
client.interface.trigger('showNotify', {
type: `${type}`,
title: `${title}`,
message: `${message}`
}).catch(function (error) {
console.log('Notification Error : ', error);
})
}
modal.html -
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="modal.css"> <link rel="stylesheet" type="text/css" href="https://static.freshdev.io/fdk/2.0/assets/freshservice.css"> <script type="module" src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.esm.js"> </script> <script nomodule src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.js"> </script> </head> <body> <div> <fw-textarea cols=68 rows=30 label="Note Pad" placeholder="Type your notes here..." state="normal" id="textArea"></fw-textarea> </div> <div> <fw-button color="primary" id="saveBtn"> Save <fw-icon name="add-note" color="white"></fw-icon></fw-button> </div> </body> </html>
Thank you
-Zach