Hide/Unhide Property based on a different properties input

David_Morris1

I've started building custom forms in the portal,

Im wondering if its possible to hide/unhide a property on a form based on the input to a different property 

I.E if the select support group is X then hide the impact property from the view

I would need this to be dynamic on the form as the property is changed not based on it being saved and the form reloaded

john_doyle

Try this in the custom.js file:

app.custom.formTasks.add('Incident',null, function(formObj, viewModel){ 
    formObj.boundReady(function () {
        var facilitiesGroupId = "df3896f5-3145-0546-4d25-e485de6765af";
        var hide = (viewModel.TierQueue.Id == facilitiesGroupId);
        hideUrgency(hide);
       
        viewModel.bind("change", function (e) {
            if (e.field === "TierQueue") {
                var hide = (viewModel.TierQueue.Id == facilitiesGroupId);
                hideUrgency(hide);
            }
        });
       
        function hideUrgency(state) {
            if (state) {
                $('.control-label[for="Urgency"]').parent().parent().hide();
            }
            else {
                $('.control-label[for="Urgency"]').parent().parent().show();
            }
        }
    })
});

Change the guid on line 3 to match the Id of your support group.

Konstantin_Slavin-Bo

You should be able to bind to the change event of the input box, and then hide the elements you want to hide, when the value matches something specific. I don't have time to try it out right now, but the input box should be available by something among the lines of

$("label[for='tierQueue']").next().find("input") and then you can bind the change event and get the new value by bind("change", function(e) { e.sender.val().Name });

Or something like that...

john_doyle

Try this in the custom.js file:

app.custom.formTasks.add('Incident',null, function(formObj, viewModel){ 
    formObj.boundReady(function () {
        var facilitiesGroupId = "df3896f5-3145-0546-4d25-e485de6765af";
        var hide = (viewModel.TierQueue.Id == facilitiesGroupId);
        hideUrgency(hide);
       
        viewModel.bind("change", function (e) {
            if (e.field === "TierQueue") {
                var hide = (viewModel.TierQueue.Id == facilitiesGroupId);
                hideUrgency(hide);
            }
        });
       
        function hideUrgency(state) {
            if (state) {
                $('.control-label[for="Urgency"]').parent().parent().hide();
            }
            else {
                $('.control-label[for="Urgency"]').parent().parent().show();
            }
        }
    })
});

Change the guid on line 3 to match the Id of your support group.

john_doyle

I just realised you wanted to hide the Impact. The code remains the same, just change the label selectors.

David_Morris1

that's awesome thank you, Just for my knowledge as i'm prob going to want to do this in the future how would i change this from a list to say a checkbox as i cant seem to get the same thing to work 

would it be 

Viewmodel.Checkboxclassname.Value == true

rather than stating the guid id of the enumeration?

Sorry I'm new to JS 

john_doyle

Hi @David_Morris1

If your check box control is bound to a boolean property called MyCheck, then it would be

viewModel.MyCheck

That will be true if the checkbox is ticked and false if not.

The simplest thing to do is open the form in your browser and then open Developer Tools from the browser tools menu. Click on the Console tab and enter: pageForm.viewModel
You can expand the object and view the properties and objects related to the form.

David_Morris1

Awesome, thanks appreciate your help

Alex_Marsh

@john_doyle what if we just wanted to disable the field rather than hide it?

Konstantin_Slavin-Bo

@Alex_Marsh
Then you need to add the "disabled" attribute on both the input element and the a element, associated with the dropdown-arror like so:

$('.control-label[for="Urgency"]').parent().parent().find('input').attr("disabled", true)<br>$('.control-label[for="Urgency"]').parent().parent().find('a').attr("disabled", true)

and to enable it again:

$('.control-label[for="Urgency"]').parent().parent().find('input').attr("disabled", false)<br>$('.control-label[for="Urgency"]').parent().parent().find('a').attr("disabled", false)

This is at least the best way I found to do it.

Alex_Marsh

Konstantin_Slavin-Bo said:

@Alex_Marsh
Then you need to add the "disabled" attribute on both the input element and the a element, associated with the dropdown-arror like so:

$('.control-label[for="Urgency"]').parent().parent().find('input').attr("disabled", true)<br>$('.control-label[for="Urgency"]').parent().parent().find('a').attr("disabled", true)

and to enable it again:

$('.control-label[for="Urgency"]').parent().parent().find('input').attr("disabled", false)<br>$('.control-label[for="Urgency"]').parent().parent().find('a').attr("disabled", false)

This is at least the best way I found to do it.

And I guess that would be the same for required?

Konstantin_Slavin-Bo

@Alex_Marsh
Without having tested it, I'm guessing yes. But it wouldn't give you the "(Required)" label, so you would have too add that too. Look at Tom Hendricks example in this thread for a more complete solution: https://community.cireson.com/discussion/comment/8619/#Comment_8619 (I haven't tested this either).

Alex_Marsh

So I think I've got something working. I've posted it on this discussion as where it started (https://community.cireson.com/discussion/comment/8619/#Comment_8619. Feedback/improvements welcome!