Disable view picker DIV is not accessible in MS CRM

Question

I am trying to disable view picker on account lookup in 2016.

The code works fine I mean I am not getting any error but the code not able to find the particular DIV of "parentaccountid".

Where as I can see it in Elements:

But it's returns {null} when the code try to get the elements of DIV - document.getElementByid("parentaccountid");

My code runs on load of opportunity page.

Even at this step I can see the particular DIV element- id: parentaccountid

Where as I still get {null} value:

Where as in 2013 I have seen it working pretty fine. Sorry I don't have data to share here but it works fine.

Here is the code below:

function DisablePick()
{
	VULoader();
	
	//call this function from OnLoad handler
	function VULoader(){
		var myLookup1;
              alert("Hello..I am Here");
	      var fetch = "<fetch mapping='logical'>"
             +"<entity name='account'>"             
             +"<attribute name='name'/>"                   
             +"<filter type='and'>" 
            +"<condition attribute='name' operator='eq' value='Blue Yonder Airlines (sample)' />" 
            +"</filter>" 
      +"</link-entity>" 
   +"</entity>" 
+"</fetch>";
		
		myLookup1 = new XrmLookupField("parentaccountid");
		myLookup1.AddLockedView(
			//sViewId
			myLookup1.NewGuid() ,
			//sEntityName
			"account",
			//sViewDisplayName
			"My Locked Custom View",
			//sFilterXml
			fetch,
			//sFilterLayout
			layout(1, "name", "accountid")
				.column("name", 200)
			.toString()
		);
	}

	function XrmLookupField(sId) {
		var xlf = this;
		//control instance
		xlf.Ctl = Xrm.Page.getControl(sId);
		//dom instance
		xlf.Dom = document.getElementById(sId);
		//jquery instance
		xlf.$ = $(xlf.Dom);
	  
		/* 2013 addition --- Inline Control instance --- */
		xlf.$i = $("#" + sId + "_i");
	 
		//use that to disable the view picker
		xlf.DisableViewPicker = function () { 
			/* 2013 addition --- The attribute capitalization changed */
			xlf.SetParameter("disableviewpicker", "1"); 
		}
		//use that to enable the view picker
		xlf.EnableViewPicker = function () { 
			/* 2013 addition --- The attribute capitalization changed */
			xlf.SetParameter("disableviewpicker", "0");  
		}
		 
		//set undocumented attributes
			xlf.SetParameter = function (sName, vValue) { 
			xlf.$.attr(sName, vValue);  
	 
			/* 2013 addition --- Also change the inline contorl value */
			xlf.$i.attr(sName, vValue);
		}   
		 
		//add locked view
		xlf.AddLockedView = function (sViewId, sEntityName, sViewDisplayName, sFilterXml, sFilterLayout) {
			//first enable the view picker
			xlf.EnableViewPicker();
			//add the custom view (last parameter set the view as default)
			xlf.Ctl.addCustomView(sViewId, sEntityName, sViewDisplayName, sFilterXml, sFilterLayout, true);
			//lock the view picker
			xlf.DisableViewPicker();
		}
		//create new guid
		xlf.NewGuid = function () {
			var d = new Date().getTime();
			var guid = '{xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx}'.replace(/[xy]/g, function (c) {
				var r = (d + Math.random() * 16) % 16 | 0;
				d = Math.floor(d / 16);
				return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
			});
			return guid;
		}
	}
}

Few points to mention:

I am calling DisablePicker method on load of an opportunity page. Yes, I have already checked whether any duplicate id is there or not but I didn't find any.

I tried to run this method on load of Account field as well but nope no response.

If I change the property disableviewpicker value from 0 to 1 in DIV itself manually from browser after page gets loaded & open the lookup then it will take the effect of the changed value.

Really I am getting no clue why it's behaving this manner, I just need to know where exactly I am going wrong or it's a product bug but I don't think it is. As its a very basic behavior.

PS: For my non MS CRM friends I cannot change the DIV or anything except my JavaScript code.

Answer 1

Your form code executes in a frame that is separate from the actual CRM form; it runs in the ClientApiWrapper.aspx page. Therefore, to access the form element you want to modify from your form script, you form code should do parent.document.getElementById instead of document.getElementById.

When you use your browser's dev tools, the default frame that the console executes against is also not the frame that has your form elements, and it's also not the frame that has your form's code. The simplest way to execute against the correct frame is to use the function in your dev tools to switch frames. In Firefox, that button looks like this:

It's easiest to set your frame to the ClientApiWrapper.aspx one, as it provides access to both the libraries loaded on your form as well as the CRM client-side API.