Skip to main content

Notifications

Announcements

Join us in the Community for an AMA: December 12th Register Today
News and Announcements icon
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / How to customize the b...
Customer experience | Sales, Customer Insights,...
Suggested answer

How to customize the behavior of the phone icon button on the phone number field

(0) ShareShare
ReportReport
Posted on by Community member 3
When I click the button, I want to execute custom logic.What should I do?
  • Dengliang Li Profile Picture
    Dengliang Li Microsoft Employee on at
    How to customize the behavior of the phone icon button on the phone number field
    Hi,
     
    Apologies for the defects in the solution, due to my lack of proficiency with JavaScript.
    Thank you very much for being able to make improvements to the solution.

    Best Regards,
    Dengliang Li
     
  • Community member Profile Picture
    Community member 3 on at
    How to customize the behavior of the phone icon button on the phone number field
    I'm glad to receive your reply. Yes, currently, I'm also using this approach. It's an imperfect solution, and adding callbacks can help improve this method as much as possible. Because in the window load event, the elements have not yet been loaded.
     
     TestPhoneNumberBtn: function () {
                // Gets the element of the current button.
                var phoneBtn = top.$('[data-id="mobilephonenumber.fieldControl-phone-action-icon"]');

                if (phoneBtn .length > 0) {  
     
                    // mark
                    phoneBtn .attr("mark", "mark");
                    phoneBtn .on('click', function () {
                        alert("Hello world!");
                    });
                } else {
                    // no mark
                    if (phoneBtn .attr("mark") != "mark") {
                        setTimeout(function () {
                            TestPhoneNumberBtn();
                        }, 100);
                    }
                }
            }
  • Suggested answer
    Dengliang Li Profile Picture
    Dengliang Li Microsoft Employee on at
    How to customize the behavior of the phone icon button on the phone number field
    Hi,
     
    First, find the HTML element where the button is located in the browser's backend, and then add custom logic by getting the button through the element selector.
     
    function onload(executionContext) {
     
        //Set a delay of 3 seconds to wait for the form to finish loading.
        setTimeout(function(){
     
            //Get the Mobile Phone field Button element with the element selector.
            var phone_btn = parent.parent.window.document.querySelector("span[data-id='mobilephone.fieldControl-phone-action-icon']");
     
                //Add the click event to the button
                phone_btn.addEventListener("click",function(){
     
                    //You can write custom logic here
                        alert("Hello, World!");
                   
                })
               
        },3000)
     
    }
     
    The final result is shown below.
     
     
    If my answer was helpful, please click Like, and if it solved your problem, please mark it as verified to help other community members find more.
    If you have further questions, please feel free to contact me .
     
    Best Regards,
    Dengliang Li
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Join us in the Community for an AMA: December 12th Register Today

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Community AMA December 12th

Join us as we continue to demystify the Dynamics 365 Contact Center

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,253 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,188 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans