dynamically customize html for OpenWindow (dhtmlx)

[vieridipaola]

Hi,

Is it possible to easily customize the HTML passed to the OpenWindow function without changing the upstream source code?

For instance, I would like to dynamically append html to 'callAnswerHtml' on each incoming call via web_hook_on_invite. Same goes for other 'html' variables.

[InnovateAsterisk]

First, the call answer window only appears when you don't have the buddy selected, so this makes it unsuitable. But you can replace it, and remove the condition. Firstly the window code is non-blocking, so when a window is made, even if it looks like it's "modal" - its not really, the events fires even if there is an existing window open.

Then, all of the events are firing at the last opportunity, and there are no web_hook_on_before_xxx events (yet), it doesn't matter tho.

Also, the windows will not be able to overlap each other, there is a condition that, if you have a window open, and you call another window, the second window is blocked. You have to call the CloseWindow() function first. (There is another layer of windows on top of this layer for alerts, confirms, and prompts - but don't worry about that)

So taking all this into consideration, you could fire your own code in the web_hook_on_invite event that goes something like this:

var web_hook_on_invite = function(session){
    if(session.data.calldirection == "outbound") return; // Only for inbound

    CloseWindow(); // Close any existing windows like Call Answer windows etc.

    var buddyObj = FindBuddyByIdentity(session.data.buddyId); // Grab the buddy

    // Open your own CRM Pop
    OpenWindow("<div id=patientData>Loading...</div>", "Patient Information", 480, 360, true, false, "Answer", function() {
        AnswerAudioCall(buddyObj.identity);
        CloseWindow();
    }, "Decline", function(){
            RejectCall(buddyObj.identity);
            CloseWindow();
    }, function(){
        // Load patient data and display it here. (Remember your CORS policy)
        $.ajax({
            type: "POST",
            url: "https://mycrm/load-patient?buddy-to-patient-id="+ session.data.buddyId,
            success: function(data){
                $("#patientData").html(... define you data here...);
            }
        });
    }, null);
}

(not tested code)

[vieridipaola]

Doesn't the OpenWindow function already close all windows? Maybe the call to CloseWindow() is not necessary.

Would it be possible to add 2 extra params to this function upstream?

For instance, change this:

function OpenWindow(html, title, height, width, hideCloseButton, allowResize, button1_Text, button1_onClick, button2_Text, button2_onClick, DoOnLoad, OnClose) to:

function OpenWindow(html, title, height, width, hideCloseButton, allowResize, button1_Text, button1_onClick, button2_Text, button2_onClick, button3_Text, button3_onClick, DoOnLoad, OnClose)

If button3_* are null then current behavior is preserved.

That would allow to easily configure a 3rd button (eg. CRM / HIS) and its triggering function.

[vieridipaola]

Also, the custom "call answer" window (patient information) is never displayed maybe because by implicitly or explicitly calling CloseWindow(), the buddy is automatically selected, thus effectively showing only: $("#contact-" + buddyObj.identity + "-msg") This is not too bad though, as I can append an html button to that and link to my HIS/CRM. eg. $("#contact-" + buddyObj.identity + "-msg").append("<button in form to post to HIS here>");

EDIT: never mind, my bad. It works as expected now. I can also confirm that I can avoid calling CloseWindow().

EDIT2: I also added my HIS/CRM button within the html passed to OpenWindow + javascript onclick code, so no real need for button3_* for this function anymore... Thanks

[InnovateAsterisk]

Yes, I see it does replace/close the windows... its the Alert, Prompt, and Confirm that don't.

Remember, if you need, the DHTMLX library should be loaded before phone.js and probably before your pre script, so you should be able to make your own version on OpenWindow() in your pre script, and call it... in that MyOpenWindow() function, you can directly call the DHTML elements.

The global variable windowsCollection is the windowing layer, and from there you just call createWindow(...)

var myWindowObj = windowsCollection.createWindow("mywindow", 100, 0, 640, 480);
// Add content
windowObj.attachHTMLString("<p></p>");  //https://docs.dhtmlx.com/api__link__dhtmlxwindowscell_attachhtmlstring.html
or even:
windowObj.attachURL("page.html"); // https://docs.dhtmlx.com/api__link__dhtmlxwindowscell_attachurl.html
// Show the window
windowObj.show();

And this is the DHTMLX object reference: https://docs.dhtmlx.com/windows__index.html