Custom Form Show Hide

John_Beasley

Hi All I have a custom form and all that is working but I am teaching myself to code and I need some assistance. I have a checklist  form that I made but I am unsure how to hide or show something. 
So what I am wanting to do is to check a box and an input box comes up for comments. Of course these are extended MP string fields... Could I get an example if possible?

Thank You, 

John  

Shane_White

Hi @John_Beasley,

Just so I can get a better understanding of what you are trying to achieve, are you talking about adding and removing fields on a custom form? And/Or are you trying to add in the extended fields into the form itself?

Or are you trying to run a Custom Task that prompts on the screen for information to be filled in? And if so what information are you trying to add and where would this map to?

Also! A few links that may be useful for what you are trying to achieve in addition to you learning your code:

Creating Custom Forms KB:

https://support.cireson.com/KnowledgeBase/View/51#/

Configuration Item Custom Forms Blog: 

https://systemcenternoise.wordpress.com/2019/03/26/cireson-cmdb-portal-custom-configuration-item-forms/

Dynamic Forms Blog:

https://sethcoussens.com/2016/01/24/cireson-portal-dynamic-forms-by-template-id/

Thanks,
Shane.

John_Beasley

Ok let me explain: I have a Custom Change Request form that I have added extended fields to on a separate tab to create a checklist. Here is what I am looking to do. When someone checks one of the checkbox items a Text input box is shown for comments. When no box is checked then the comments box does not show. Number 2. I need to hide the new tab and only apply that tab to a particular change request. Does this help?

Shane_White

Okay that makes sense I see what you are trying to do, so:
1. This checklist are these text fields ones you have already extended onto the Change Request Class and onto the Portal Form? If so we would need to look at writing some JavaScript to go into Custom.js which will display a checklist of items and only display the required fields once the text box is checked.
If you are able to provide a screenshot of these fields I will try replicate something in my Lab to help you with this.
2. Hiding the Tab to only show on a particular CR is a little bit easier to do but again with involve some JavaScript.

Firstly you would need a function to Show the Tab:

function fn_ShowTab(name,form){
   console.log("This is a Non-Standard Request");
   $('a[data-toggle=tab]').each(function(){
      if(this.innerText === name){
         $(this).trigger('click');
      } else if (this.innerText === "GENERAL") {
         $(this).hide();
      }
   });
}

You would also then need to have a function to Hide the Tab:

function fn_HideTab(name,form){
   console.log("This is NOT a Non-Standard Request");
   $('a[data-toggle=tab]').each(function(){
      if(this.innerText === name){
         $(this).hide();
      }
   });
}

Then you would need to call which ever function depending on if it was required:

/* Change Request Tasks */
app.custom.formTasks.add('ChangeRequest', null, function(formObj, viewModel){
   formObj.boundReady( function () {
      if(viewModel.TemplateId == 'Name of CR Template') {
         fn_ShowTab("name", formObj)
      }else{
         fn_HideTab("name", formObj)
      }
   });
});

Hopefully this helps you with what you are trying to achieve and once you send over the details to point 1. I will see if I can set you something up for this.

Thanks,
Shane.

John_Beasley

Ok here is an example of the checklist that is now a tab. So here is the example code for checkbox 1.1

{ DataType: "Boolean", PropertyDisplayName: "1.1 Configure and add any applications to the Cyber Asset ", PropertyName: "Extended_Bool_01", Required: false, Inline: true },
{ DataType: "String", PropertyDisplayName: "Comments", PropertyName: "Extended_String_01", ColSpan: 2, MinLength: 0, MaxLength: 4000 }

Shane_White

Okay, looking at what you have there it seems like you would be able to achieve the same result by using multiple activities inside a Change Request Template, that way that would only show up for that template which is what you wanted and you could complete the tasks either in an order or have them as parallel activities so you could complete them when you wanted, not necessarily in order.

Or are you trying to achieve a different result which is why you have resorted to custom code?

Thanks,
Shane.

John_Beasley

Yea they didn't want to do it with a bunch of activities. Which is why they wanted the checklist. I think I have it figured out. 

//Textbox Show Hide

function toggleTextboxBasedOnCheckbox(checkboxName, textboxName){

var checkbox = $("input[name='" + checkboxName + "']");

var textbox = $("input[name='" + textboxName + "']");

textbox.hide(); // allways start the textbox as hidden and wait for checkbox to be checked

checkbox.change(function(){ 

if( this.checked){

textbox.show();

}else {

textbox.hide();

}

});

}

toggleTextboxBasedOnCheckbox("Extended_Bool_017","Extended_String_01");

Shane_White

Ahh okay fair enough, I think as long as you have custom classes set for each property, as you will need 1 for the check box and one for the text this will work.

Also bear in mind that you will need to make sure these new properties are added onto the Custom Form.

Let me know if that works.
Shane.