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 -- >

<--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;

}

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'; };

}