@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.
1. There is a widget call "Carousel" add it to your page
2. After adding it to the page. Open the widget record and scroll down to the related list
There will be an entry created in "Instances" related list
3. Open the instance record and scroll down to related lists
In "Carousel Slides" related list add the images you want
Please mark as correct answer if this solves your issue.
