Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Dynamics 365 general forum / Hide custom field from...
Dynamics 365 general forum
Answered

Hide custom field from timeline using JS or CSS

(0) ShareShare
ReportReport
Posted on by Sofoklis Papaioannou 5

Hello everybody.

I would like to hide a custom *required element from my form. That element resides in the timeline and it is actually a check-point that I need to keep secret from the user, but also keep it functional. I understand that by making it visible/invisible, a field loses its required attribute, but I want to act on it with JS, while being hidden.I have the following code with which I tried unsuccessfully do it. I think I am missing some steps in my code to reach my element but I get neither the syntax nor the logic.

function hide_wo_checker(eContext){

formContext = eContext.getFormContext();

var woCheck = formContext.getAttribute("bw_workorderchecker2").getValue();

if { woCheck == null } { parent.document.getElementById("header_process_bw_workorderchecker2-header_process_bw_workorderchecker2-FieldSectionItemContainer").style.display = "none"; }
else {
// get the id of the generated  from the rendered html 
parent.document.getElementById("header_process_bw_workorderchecker2-header_process_bw_workorderchecker2-FieldSectionItemContainer").style.display = "none";
}
}
I tried finding how I could add some CSS but I could not find a something fast. (article/post/video/documentation about Client API & Power Apps on how to reach the css files and modify them or even add my own CSS stylesheet. So eitherway I am working for nailing it. 

Not much to do with the above senario, but with the following code, i managed to change the BPF depending on category selection and is working good, with the auto-save function switched off into the system administration settings of the platform.

// JS source code for switching BPF
// Pass the name of the function to the library too
function onLoadChangeBPFByCategory(eContext){
  //Get form context
  var formContext = eContext.getFormContext();
  //Get the field
  var catype = formContext.getAttribute("bw_categoryid").getValue();
  var catName = catype[0]['name'];
  //Get the Process ID
  var activeProcessID = formContext.data.process.getActiveProcess().getId();
 
  //If category is not null ant the Process ID is not brochures -> set the process id to brochures (" * * ")
  if (catName != null) {
            if (catName == "Brochures" && activeProcessID.toUpperCase() != " * * ") formContext.data.process.setActiveProcess(" * * ", callBackFunction);
          }
      function callBackFunction(result) {
      if (result == "success") {} else {}
      }
  }
Any insight in directions to find more about Client API or a learning sources will be really appriciated and helpful
Thanks in advance
Categories:
Customization / Solutions / SDK and API
  • Suggested answer
    Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Hide custom field from timeline using JS or CSS

    Hi Sofoklis Papaioannou,

    It seems that you want to do something when BPF move to a specific step, correct?

    If so, you could refer to this API doc:

    https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/formcontext-data-process

    There are some events, I think it could help you.

  • Sofoklis Papaioannou Profile Picture
    Sofoklis Papaioannou 5 on at
    RE: Hide custom field from timeline using JS or CSS

    Steve this is great. It does work that way. As it is noted in your editor, I had to replace the curly braces with parenthesis in line 7. I really appreciate what you did there.

    I was trying to somehow force it with onDocument.ready but i think our setup lacks JQuery (It was not my responsibility to set it up).

    Your code is working but I am getting errors until I get to the stage where that field renders. So now I want to make my script "kick in" if it reaches that stage. Do you know where I can find methods and generally documentation/resources on how to manipulate these forms, using JS? 

    2806.Untitled.jpg

    Here is the the stage where the element renders

  • Verified answer
    Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Hide custom field from timeline using JS or CSS

    Hi Sofoklis Papaioannou,

    I ever got undefined when I want to get element by the code parent.document.getElementById(""). This is due to when the onload function is triggered, the Dom isn't got ready. So when you try to get element, it would return undefined.

    You can try this code to test:

    function hide_wo_checker(eContext){

	formContext = eContext.getFormContext();

	var woCheck = formContext.getAttribute("bw_workorderchecker2").getValue();

	if { woCheck == null } { 
		setTimeout(
			function(){ 
				var element = parent.document.getElementById("header_process_bw_workorderchecker2-header_process_bw_workorderchecker2-FieldSectionItemContainer");
				console.log(element);
				element.style.display = "none";
			}, 3000
		);
	}
	else {
		// get the id of the generated  from the rendered html 
		setTimeout(
			function(){ 
				var element = parent.document.getElementById("header_process_bw_workorderchecker2-header_process_bw_workorderchecker2-FieldSectionItemContainer");
				console.log(element);
				element.style.display = "none";  
			}, 3000
		);
	}
}

  • Sofoklis Papaioannou Profile Picture
    Sofoklis Papaioannou 5 on at
    RE: Hide custom field from timeline using JS or CSS

    Hello Steve!

    1. Yes it is an onload event

    2. Yes that element is in the timeline

    3. Yes, it returns undefined

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Hide custom field from timeline using JS or CSS

    Hi Sofoklis Papaioannou,

    Some question:

    1. Is this function an onload event?

    2. Is the element "header_process_bw_workorderchecker2-header_process_bw_workorderchecker2-FieldSectionItemContainer"  in the timeline?

    3. Did you console.log(parent.document.getElementById("header_process_bw_workorderchecker2-header_process_bw_workorderchecker2-FieldSectionItemContainer"))? What's the result? Undefined?

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

Quick Links

Anton Venter – Community Spotlight

Kudos to our October Community Star of the month!

Announcing Our 2024 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Dynamics 365 Community Newsletter - September 2024

Check out the latest community news

more Community News

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 290,564 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 228,651 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans