Hide custom field from timeline using JS or CSS

(0) Share

Report

Posted on by Sofoklis Papaioannou

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

I have the same question (0)

All responses (5)

Answers (1)

Community Member on at

Like (0)

Report

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?

Was this reply helpful? Yes No
Sofoklis Papaioannou 5 on at

Like (0)

Report

Hello Steve!

1. Yes it is an onload event

2. Yes that element is in the timeline

3. Yes, it returns undefined

Was this reply helpful? Yes No
Verified answer

Community Member on at

Like (1)

Report
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 ); } }

Was this reply helpful? Yes No
Sofoklis Papaioannou 5 on at

Like (0)

Report

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?

Here is the the stage where the element renders

Was this reply helpful? Yes No
Suggested answer

Community Member on at

Like (1)

Report

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.

Was this reply helpful? Yes No