Hi Katie,
You can simple use bootstrap cards to make it work, please check below widget:
HTML
<div class="row">
<div class="col-sm-6 col-md-4" ng-repeat="item in data.items" ng-if="item.image_url != 'false'">
<div class="thumbnail">
<img src="/{{::item.image_url}}" style="height:100px" alt="...">
<div class="caption">
<h3 style="height:60px">{{::item.title}}</h3>
<p style="height:60px">{{::item.short_description}}</p>
<p><a href="/sp?id=sc_cat_item&sys_id={{::item.sys_id}}" class="btn btn-primary" role="button">Order Now</a> </p>
</div>
</div>
</div>
</div>
Server Script
data.items = [];
data.table = 'sc_cat_item';
var items = new GlideRecord(data.table);
items.query();
while (items.next()) {
var item = {
"sys_id": items.sys_id+'',
"title": items.name+'',
"short_description": items.short_description+'',
"image_url": getItemPicture(items.sys_id)
};
console.log('test'+item);
data.items.push(item);
}
console.log(data.items);
function getItemPicture(itemID) {
var picture = new GlideRecord('sys_attachment');
picture.addEncodedQuery('table_sys_id='+itemID+'^file_name=picture');
picture.query();
if (picture.next()) {
return picture.sys_id +'.iix';
} else return 'false';
}Output:
Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Cuong Phan
DXC Consultant.
