How do you hide form elements dynamically?

Martyn_Fearn

Scenario:  Ihave created 4 Change templates, one of which is a Standard Change.  I have extended the Change class to include a new enum list which contains all of our standard changes.

I have created a custom Change form to expose the extended list which works fine.  However, what we would like to do is hide the list if anything other than the Standard Change template is selected.

I've had a look at this https://community.cireson.com/discussion/61/dynamic-forms which seems to be similar to what I want but not quite.

Can anyone help me adapt this to dynamically show/hide a form element based on template ID?

TIA

Martyn

james_kleinschnitz

Martyn
Sorry for the delay I was on vacation. So below is the full solution, does this answer your questions?

app.custom.formTasks.add('ChangeRequest', null, function(formObj, viewModel){  
        formObj.boundReady( function () {
                //the CR template id is in the URL
                if(pageForm.viewModel.TemplateId == 'TemplateStringId') {
                    //do what you need here, hide fields etc
                    var StandardChangeLabel = $(".form-group label[for='StandardChange']");
                    var StandardChangeInput = StandardChangeLabel.next(); 
                    StandardChangeLabel.hide();
                    StandardChangeInput.hide(); 
                }
        });
});

james_kleinschnitz

Martyn

You are correct you will want to do something similar to the linked discussion, using an onReady custom task.  Read more about it in this KB Article: https://support.cireson.com/KnowledgeBase/View/1188#/

But just off the top of my head

app.custom.formTasks.add('ChangeRequest', null, function(formObj, viewModel){  
        formObj.boundReady( function () {
                //the CR template id is in the URL
                if(window.location.href.indexOf("bbc23e92-31d0-4c7c-90ff-9eca27936287") > -1) {
                    //do what you need here, hide fields etc
                }
        });
}); 

Martyn_Fearn

Hi James,

Thanks for your response. I've sort of got this working in so much that I can get it to display a screen prompt if the Standard Change template is selected and a different one if not.

However, it's the code needed to hide my Enum list on the form that I'm struggling with.  Would you be able to help with this?

Martyn_Fearn

In addition to not knowing the code to actually hide the form element, I've discovered another problem.

When I create a new change using the Standard Change template it shows me the corresponding message.  If I create a new change using a non standard template I get the corresponding message for that.

However, if I open up an existing Standard CR to edit, it doesn't recognise the template ID and so shows the 'non standard request' message every time regardless.

Martyn_Fearn

Okay so I've done a bit of Google research and can see that this:-

if(window.location.href.indexOf("6bb4646f-c726-aa02-27e1-2ee514e6c16d") > -1)

is looking in the URL for the Template GUID.  This of course is there when you create a new CR from a template but not there when you edit an existing CR. 

Is there a way to check for the Template ID of an existing CR?

Brett_Moffett

This section:

<div>app.custom.formTasks.add('ChangeRequest', null, function(formObj, viewModel){ &nbsp;<br></div><div><pre class="CodeBlock"><code>        formObj.boundReady( function () {
            *<Your Code Here>*
        }
        });
}); 

Identifies that the for you have open is a Change Request. Therefore this will only run when a change request is open.
The other code that you listed in your previous post then limits the code to only run when a particular template is in use.
If you are after just some code that allows you to trigger when a Change Request is open then this code should work fine for ALL Change Requests

Martyn_Fearn

Thanks Brett,

What I want is for the code to run on creation of a work item using a particular template and also when an existing work item is opened that has previously been created using that template.

james_kleinschnitz

Martyn This should work for both new and existing WI created from a template

app.custom.formTasks.add('ChangeRequest', null, function(formObj, viewModel){  
        formObj.boundReady( function () {
                //the CR template id is in the URL
                if(pageForm.viewModel.TemplateId == 'TemplateStringId') {
                    //do what you need here, hide fields etc
                }
        });
}); 

To figure out your template id string, create a new CR from the desired template Then in the js console (https://www.wickedlysmart.com/hfjsconsole/) Type:

pageForm.viewModel.TemplateId

hit enter

Martyn_Fearn

Thanks James,

I have this part of it working now.

Are you able to help with the code required to hide a field?

Thanks

Martyn_Fearn

Can anyone help with this?  I can hide as many 'tabs' as I like but cannot seem to hide fields.

I'm looking for some code that will hide a form field.

TIA

Martyn_Fearn

I just stumbled across a solution for this. There may well be a more elegant way of doing it but it works so I'm happy. 

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var StandardChangeLabel = $(".form-group label[for='StandardChange']");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var StandardChange = StandardChangeLabel.next();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;StandardChangeLabel.hide();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;StandardChange.hide(); </p>

Thanks everyone for the help with this

james_kleinschnitz

Martyn
Sorry for the delay I was on vacation. So below is the full solution, does this answer your questions?

app.custom.formTasks.add('ChangeRequest', null, function(formObj, viewModel){  
        formObj.boundReady( function () {
                //the CR template id is in the URL
                if(pageForm.viewModel.TemplateId == 'TemplateStringId') {
                    //do what you need here, hide fields etc
                    var StandardChangeLabel = $(".form-group label[for='StandardChange']");
                    var StandardChangeInput = StandardChangeLabel.next(); 
                    StandardChangeLabel.hide();
                    StandardChangeInput.hide(); 
                }
        });
});