What would be the "correct value" i should be assigning to data.show? Also do you have any info on the data.show or ng-show features? I am new to scripting in the service portal.
Our use case really is rather simple in nature. We have parent and child cases and currently you must scroll to the bottom of the page to see the child cases if you are viewing a parent case. We are trying to make it more evident towards the top of the page when a case is a parent case.
My solution was to add a second line and (Parent Case) to the header for the case record as shown below. We want the (Parent Case) to disappear for cases that are not parents. I am flexible with how we accomplish hiding this text.
Additional I am open to other options to display that a case is a parent vs not. But so far putting (parent case) in a HTML SPAN and trying to hide it is proving to be a difficult task in the service portal. Seems service now has tied our hands behind our back by not letting use the document function as mentioned above and by the linked below w3schools article.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
The correct value would be a truthy or falsy answer.
ngShow/ngHide are AngularJS directives that can be used to determine whether or not an element should display or not. They look for true or false and respectively do as the naming convention suggests.
It's also the same with ngIf. The difference is that ngIf won't just "hide" the element. It will completely not render any of the html markup for the respective element.
If you wanted to stick with classes ngClass could be used also. ngClass will add a class. And Bootstrap already has classes defined to hide/show elements.
References:
AngularJS
Bootstrap 3
An example:
HTML:
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
ngShow/ngHide
</h4>
</div>
<div class="panel-body">
If ngShow has an expression that results in true the elemnent will display else it
won't.
<div ng-show="data.hello" class="bld">
Hello <span ng-show="data.world">World</span>
</div>
<div class="m-t">
For ngHide it would be the reverse.
<div class="bld">
<span ng-hide="data.hello">Hello</span> <span ng-hide="data.world" class="col-md-offset-1">World</span>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
ngClass
</h4>
</div>
<div class="panel-body">
You can also manipulate classes. Bootstrap 3 has it's own class that can be added or
removed to hide/show elements programmatically. ngClass can be set in a few different ways
to help with manipulating classes.
<div ng-class="data.hello" class="bld">
<span ng-class="data.hello? 'show': 'hide'">Hello</span>
<span ng-class="data.world ? 'show': 'hidden'" class="hide">World</span>
</div>
</div>
</div>Server Script
(function() {
data.hello = true;
data.world = false;
})();
Rendered page:
Notice that Hello or World is visible in some places and hidden in others.
