Skip to main content

Notifications

Announcements

No record found.

Dynamics 365 general forum
Answered

How to show a side form on click of the field using JS

Posted on by 6
When I click on the field, A form should be displayed on the side of the screen. I took care of the creation of the sideform, but it needed to be displayed on click of the field using JS. Any Ideas?
Categories:
  • CU16051521-0 Profile Picture
    CU16051521-0 6 on at
    How to show a side form on click of the field using JS
    I have a custom side form. on adding the addeventlistener, it is showing error addeventlistener is not a function. in the images below, on click of the product name field, the below side form should be displayed.
  • Verified answer
    Dengliang Li Profile Picture
    Dengliang Li Microsoft Employee on at
    How to show a side form on click of the field using JS
    Hi,
     
    In my testing, when clicking on the FirstName input box on the contact form, the side form for the current record is displayed.
     
    The code is below.
     
    function onload(executionContext){
        var formContext = executionContext.getFormContext();
        //get current record ID
        var GUID = formContext.data.entity.getId();
        //get the target field HTML
        var tar_field = window.top.document.querySelector("input[aria-label='First Name']");
        //get current record name
        var name = formContext.data.entity.getEntityReference().name;
     
        //If the target field's HTML is not retrieved, it is retrieved every 10 milliseconds
        if(tar_field ===null){
     
            setTimeout(onload,10,executionContext)
        }else{
            tar_field.addEventListener("click",()=>{
            // If a side pane has already been created for the current record, the side pane will not be created but opened.
            if(Xrm.App.sidePanes.getPane(GUID)!==null){
                Xrm.App.sidePanes.state = 1;
                return;
            }else{
                //Creates a side pane for the current record.
                Xrm.App.sidePanes.createPane({
                    title: "Contact: "+name,
                    hideHeader: true,
                    paneId:GUID,
                    canClose: true,
                    width: 600
                }).then((pane) => {
                    pane.navigate({
                        pageType: "entityrecord",
                        entityName: "contact",
                        entityId: GUID,
                    })
                });
            }
           
        })
        }      
    }
     
    Gets the HTML of the target field.


    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
     

Helpful resources

Quick Links

Can you answer this forum question?

You could make someone's day!

Community Newsletter - May 2024

Kudos to our community stars!

Community Spotlight of the Month

Kudos to Mohamed Amine Mahmoudi!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 283,663 Super User

#2
Martin Dráb Profile Picture

Martin Dráb 224,750 Super User

#3
nmaenpaa Profile Picture

nmaenpaa 101,146

Featured topics

Product updates

Dynamics 365 release plans