@Yasin Shaik11 Try below code in widget:
HTML:
<div>
<span class="glyphicon glyphicon-chevron-left" ng-click="c.scrollLeftFunction()"></span>
<span class="glyphicon glyphicon-chevron-right" ng-click="c.scrollRightFunction()"></span>
</div>
<div id="main-container">
<div class="sub-container" style="width:{{data.subContainerWidth}}">
<div class="card" style="width:{{data.divWidth}}px" ng-repeat="movie in data.movies track by $index" ng-click="c.cardClickFunction(movie)">
{{movie.name}}
</div>
</div>
</div>
CSS:
#main-container{
width: 100%;
overflow: auto;
}
.sub-container{
display: flex;
flex-direction: row;
gap: 4px;
}
.card{
background-color: red;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.glyphicon-chevron-left{
top: 110px;
left: 20px;
cursor: pointer;
}
.glyphicon-chevron-right{
top: 110px;
right: 20px;
float: right;
cursor: pointer;
}
Client script:
api.controller=function() {
/* widget controller */
var c = this;
c.scrollLeftFunction = function(){
document.getElementById("main-container").scrollLeft += c.data.divWidth;
}
c.scrollRightFunction = function(){
document.getElementById("main-container").scrollLeft -= c.data.divWidth;
}
c.cardClickFunction = function(movie){
alert("you clicked "+movie.name)
}
};
Service script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.movies = [
{
"name" : "Movie 1"
},
{
"name" : "Movie 2"
},
{
"name" : "Movie 3"
},
{
"name" : "Movie 4"
},
{
"name" : "Movie 5"
},
{
"name" : "Movie 6"
},
{
"name" : "Movie 7"
},
{
"name" : "Movie 8"
},
{
"name" : "Movie 9"
},
{
"name" : "Movie 10"
},
{
"name" : "Movie 11"
},
{
"name" : "Movie 12"
},
{
"name" : "Movie 13"
},
{
"name" : "Movie 14"
},
{
"name" : "Movie 15"
},
{
"name" : "Movie 16"
},
{
"name" : "Movie 17"
},
{
"name" : "Movie 18"
},
{
"name" : "Movie 19"
},
{
"name" : "Movie 20"
},
{
"name" : "Movie 21"
},
{
"name" : "Movie 22"
},
{
"name" : "Movie 23"
},
{
"name" : "Movie 24"
}
];
data.divWidth = 200; //in pixels
data.subContainerWidth = data.movies.length * data.divWidth +"px";
})();
Result:
Note:
Change the code as per your requirement
Please mark as correct answer if this solves your issue.
@Yasin Shaik11 Update the code like below
HTML:
<div>
<span class="glyphicon glyphicon-chevron-left" ng-click="c.scrollLeftFunction()"></span>
<span class="glyphicon glyphicon-chevron-right" ng-click="c.scrollRightFunction()"></span>
</div>
<div id="main-container">
<div class="sub-container" style="width:{{data.subContainerWidth}}">
<div class="list-group-item card" style="width:{{data.divWidth}}px" ng-repeat="a in ::data.articles">
<a href="?id=kb_article&sys_id={{::a.sys_id}}" aria-label="{{::a.ratingAriaLabel}}">{{::a.short_description}}</a>
<div>
<span uib-rating sp-rating ng-model="::a.rating" max="5" readonly="true" aria-hidden="true" state-on="'fa fa-star kb-star-on'" state-off="'fa fa-star kb-star-off'" />
</div>
</div>
</div>
</div>
CSS:
#main-container{
width: 100%;
overflow: auto;
}
.sub-container{
display: flex;
flex-direction: row;
gap: 4px;
}
.card{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 150px;
}
.glyphicon-chevron-left{
top: 90px;
left: 20px;
cursor: pointer;
z-index: 1000;
}
.glyphicon-chevron-right{
top: 90px;
right: 20px;
float: right;
cursor: pointer;
z-index: 1000;
}
@media screen and (-ms-high-contrast: active) {
.panel-body .list-group .list-group-item .glyphicon-star {
color: windowText !important;
}
}
.kb-star-on {
color: $fav-star-color !important;
text-shadow: $fav-star-outline;
}
.kb-star-off {
color: $fav-star-color-off !important;
text-shadow: $fav-star-outline;
}
Client script:
api.controller=function() {
/* widget controller */
var c = this;
c.scrollLeftFunction = function(){
document.getElementById("main-container").scrollLeft += c.data.divWidth;
}
c.scrollRightFunction = function(){
document.getElementById("main-container").scrollLeft -= c.data.divWidth;
}
};
Server script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.articles = [];
options.title = options.title || gs.getMessage("Top Rated Articles");
var z;
var knowledge_bases;
var sys_id = $sp.getParameter('sys_id');
var kb_id = $sp.getParameter('kb_id');
var gr = new GlideRecord("kb_knowledge");
data.sysId = sys_id;
var foundArticle = false;
if (sys_id) { // sys_id specified, try to find an article by sys_id or number
gr.addQuery("sys_id", sys_id).addOrCondition("number", sys_id);
gr.query();
if (gr.next() && gr.canRead()) {
// When sys_id matches a kb_record, get KB of the article
knowledge_bases = String(gr.getValue('kb_knowledge_base'));
foundArticle = true;
}
}
if (!foundArticle) { /* For all other pages this code will get executed. Used on knowledge home page.*/
/*If KB is selected display top rated articles only from that KB*/
if (kb_id != null)
knowledge_bases = String(kb_id);
else {
/*Get all knowledge bases associated with Portal*/
knowledge_bases = String($sp.getKnowledgeBases());
}
}
if (GlideStringUtil.notNil(knowledge_bases))
z = $sp.getAllKBRecords(knowledge_bases);
else //If there are no accessible KBs for logged in user
return;
z.addQuery("rating", ">", "0");
if (options.kb_category)
z.addQuery("kb_category", options.kb_category);
z.orderByDesc('rating');
//z.setLimit(options.max_number || 5);
z.query();
while (z.next()) {
if (!z.canRead())
continue;
var a = {};
$sp.getRecordValues(a, z, 'short_description,sys_view_count,sys_id,published,rating');
a.published_display = z.getDisplayValue("published");
a.rating = Math.round(a.rating);
a.ratingAriaLabel = gs.getMessage('Article, {0}, {1} star rating', [z.short_description, z.rating]);
data.articles.push(a);
}
data.divWidth = 200; //in pixels
data.subContainerWidth = data.articles.length * data.divWidth +"px";
})();
Result:
Please mark all the answers on this question as correct answers.
