Teams UI Macro Working Not properly

[siva44]

I have created UI Macro for teams integration it is working fine but whenever click the web teams app then it is showing message twice and whenever click the teams app then working fine

UI Macro script :

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core"

xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');">

              <img src="teams.png" width="30"  title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />

</a>

<script>

function invokeChat(reference) {

var prefix = 'https://teams.microsoft.com/l/chat/0/0?users=';

var firstname = g_form.getReference('caller_id').first_name;

var user = g_form.getReference('caller_id').email;

var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your Incident ' + g_form.getValue('number') + ': ' + g_form.getValue('short_description');

var w = getTopWindow();

var url = prefix + user + subject;

w.open(url);

}

</script></j:jelly>

[Rajesh Chopade1]

hi @siva44 

Could you try bellow script once and let me know:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core"
xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}', this);">
    <img src="teams.png" width="30" title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>
<script>
function invokeChat(reference, element) {
    // Check if the button was already clicked
    if (element.disabled) {
        return;  // Prevent running the function again
    }
    
    // Disable the button to prevent further clicks
    element.disabled = true;

    var prefix = 'https://teams.microsoft.com/l/chat/0/0?users=';
    var firstname = g_form.getReference('caller_id').first_name;
    var user = g_form.getReference('caller_id').email;
    var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your Incident ' + g_form.getValue('number') + ': ' + g_form.getValue('short_description');

    var w = getTopWindow();
    var url = prefix + user + subject;

    w.open(url);

    // Optionally, re-enable the button after a timeout (if desired)
    setTimeout(function() {
        element.disabled = false;
    }, 3000); // Re-enable after 3 seconds (or adjust time as needed)
}
</script>
</j:jelly>

i hope my answer helps you to resolve your issue, if yes please mark my answer helpful and correct.

thank you

rajesh

[siva44]

Hi @Rajesh Chopade1  okay I will Try 

[siva44]

Hi @Rajesh Chopade1  I have try not working same issue there like twice message popualte

[Rajesh Chopade1]

Hi @siva44 

ok, could you try once bellow script:

Add event.preventDefault(): This can prevent any default behavior of the anchor tag that may be causing the issue.

function invokeChat(reference, event) {
    event.preventDefault();  // Prevents duplicate execution
    var prefix = 'https://teams.microsoft.com/l/chat/0/0?users=';
    var firstname = g_form.getReference('caller_id').first_name;
    var user = g_form.getReference('caller_id').email;
    var subject = '&message=Hi ' + firstname + ', this is regarding your Incident ' + g_form.getValue('number') + ': ' + g_form.getValue('short_description');
    var w = getTopWindow();
    var url = prefix + user + subject;
    w.open(url);
}

Pass the Event Object: Modify the anchor tag to pass the event to the invokeChat function.

<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}', event);">
    <img src="teams.png" width="30" title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>

thank you