Recent searches


No recent searches

Modal content can not be updated



Posted Sep 11, 2024

Hello,

 

I tried, without success so far, to open a modal I can update the content in.

 

There is this example code: https://developer.zendesk.com/api-reference/apps/apps-support-api/modal/

 

Now what I managed to do is open a static HTML page as a modal. But this does not help me, because I need something that can show the details of a problem ticket.

 

There should be a way to do and I even can forward info to the modal, according to my console logs, but still it does not update the content.

 

The content also is fixed when the modal opens, in case it would be an issue to adjust it later. But no solution yet.

I have a button in the iFrame.html that opens the modal:

            <button id="show-problem-details" class="show-details-button">Show problem ticket content</button>


The modal html is:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Problem Ticket Details</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            padding: 20px;

        }

        h2 {

            margin-top: 0;

        }

    </style>

    <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>

</head>

<body>

    <h2>Problem Ticket Details</h2>

    <div id="problem-content">Waiting for message...</div>

 

</body>

</html>


And the matchin JS is:

document.getElementById('show-problem-details').addEventListener('click', function() {

    var selectedOption = document.getElementById('problem-select').options[document.getElementById('problem-select').selectedIndex];

    var problemTicketId = selectedOption.value;

    var parent_guid = client._instanceGuid;


 

    console.log('Creating modal with parent_guid:', parent_guid);


 

    // Anfrage an die Zendesk API, um Details des Problemtickets zu erhalten

    client.request({

        url: `/api/v2/tickets/${problemTicketId}.json`,

        type: 'GET',

        dataType: 'json'

    }).then(function(ticketData) {

        var problemDescription = ticketData.ticket.description || 'No description available';

        var problemSubject = ticketData.ticket.subject || 'No subject available';

        var problemPriority = ticketData.ticket.priority || 'No priority set';

        var problemStatus = ticketData.ticket.status || 'No status set';


 

        var ticketDetails = `

            <h2>Problem Ticket Details</h2>

            <p><strong>Subject:</strong> ${problemSubject}</p>

            <p><strong>Description:</strong> ${problemDescription}</p>

            <p><strong>Priority:</strong> ${problemPriority}</p>

            <p><strong>Status:</strong> ${problemStatus}</p>

        `;


 

        console.log('Ticket details being prepared:', ticketDetails);


 

        // ZAFClient Modal erstellen und direkt die Ticketdaten übergeben

        client.invoke('instances.create', {

            location: 'modal',

            url: `assets/html/problemTicketModal.html`,  // Modal-URL

            size: { width: '1000px', height: '800px' },

            modalData: { ticketDetails: ticketDetails }  // Übergabe der Ticketdaten direkt beim Öffnen des Modals

        }).then(function(modalContext) {

            console.log('Modal created with instanceGuid:', modalContext['instances.create'][0].instanceGuid);

            console.log('Modal data being passed:', ticketDetails);

        }).catch(function(error) {

            console.error('Error creating modal:', error);

        });

    }).catch(function(error) {

        console.error('Error fetching problem ticket data:', error);

    });

});


The console seems to say that the modal receives the data, but the content stays the same static one:

Creating modal with parent_guid: f7de5006-035c-43aa-bf5f-75731075c051
assignProblemTicket.js:67 Ticket details being prepared: 
           <h2>Problem Ticket Details</h2>
           <p><strong>Subject:</strong> 05.09.2024 anniversay message issue</p>
           <p><strong>Description:</strong> PT ticket created to gather all tickets related to the message we sent regarding Anniversary giveaway. Please link them to the PT for analysis.</p>
           <p><strong>Priority:</strong> normal</p>
           <p><strong>Status:</strong> hold</p>
       
assignProblemTicket.js:76 Modal created with instanceGuid: 4d32f7ae-f3a7-4b51-915c-ecf6e1799656
assignProblemTicket.js:77 Modal data being passed: 
           <h2>Problem Ticket Details</h2>
           <p><strong>Subject:</strong> 05.09.2024 anniversay message issue</p>
           <p><strong>Description:</strong> PT ticket created to gather all tickets related to the message we sent regarding Anniversary giveaway. Please link them to the PT for analysis.</p>
           <p><strong>Priority:</strong> normal</p>
           <p><strong>Status:</strong> hold</p>
       

 

Can someone help?

 

Thank you!


0

0

0 comments

Please sign in to leave a comment.

Didn't find what you're looking for?

New post