The Widget will help you to show less characters if you have a field in you table which contain 200-300 words of data in it and it is making you layout look like text page. and you have to scroll down for reading it. e.g.- The Change Management form have fields like "Justification , Risk and impact analysis" e.t.c.
you can use the functionality to show less data on load and having buttons called "ShowMore" and "ShowLess".
<--HTML -- >
<div><h4 class="light field field-label">${Change Justification}</h4>
<div class="text-muted light field change" id="changed1">{{data.justification}} </div>
<button type="button" class="btn btn-secondary" id="seeMore1" ng-click="seeMore('1')" data-placement="right">
Show more
</button>
<button type="button" class="btn btn-secondary" id="seeLess1" ng-click="seeLess('1')" data-placement="right" style="display:none">
Show Less
</button>
<h4 class="light field field-label">${Risk and Impact Analysis}</h4>
<div class="text-muted light field change" id="changed2">{{data.riskImpact}}</div>
<button type="button" class="btn btn-secondary" id="seeMore2" ng-click="seeMore('2')" data-placement="right">
Show more
</button>
<button type="button" class="btn btn-secondary" id="seeLess2" ng-click="seeLess('2')" data-placement="right" style="display:none">
Show Less
</button>
</div>
<--css -->
.change{
height: 20px;
overflow:hidden;
}
.myStyle{
height: 100%;
overflow:unset;
}
.btn-secondary{
padding: 9px 8px !important;
font-size: 10px !important;
background-color: transparent;
color: #009aff !important;
border: none;
}
.ticket-status {
padding: 4px 20px;
border-radius: 500px;
display: inline-block;
color: #fff;
font-size: 1rem;
font-family: $font-light;
}
.fields-top {
margin-top: 24px;
margin-bottom: 56px;
}
.field {
font-size: 1.5rem;
}
.field-label {
margin-top: 10px;
margin-bottom: 4px;
}
<!-- Server Script -->
var gr = new GlideRecord('change_request');
gr.addQuery();
gr.query;
if(gr.next()){
var i = $sp.getField(gr, 'justification');
if (i != null)
data.justification = i.display_value;
var k = $sp.getField(gr, 'risk_impact_analysis');
if (k != null)
data.riskImpact = k.display_value;
}
<!-- Client Controller -- >
function ($scope, spUtil) {
var c = this;
$scope.seeMore = function(i){
document.getElementById("seeMore"+i).style.display = 'none';
document.getElementById("seeLess"+i).style.display = 'block';
document.getElementById("changed"+i).style.height = "100%";
document.getElementById("changed"+i).style.overflow = "unset !important";
};
$scope.seeLess = function(i){
document.getElementById("changed"+i).style.height = "20px";
document.getElementById("changed"+1).style.overflow = "hidden";
document.getElementById("seeMore"+i).style.display = 'block';
document.getElementById("seeLess"+i).style.display = 'none';
};
}
