Home Analyst Portal

How do you hide form elements dynamically?

Martyn_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

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

Best Answer

Answers

  • james_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    edited August 2016
    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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_FearnMartyn_Fearn Customer Adept IT Monkey ✭✭

    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

Sign In or Register to comment.