How to display records in Card view

[katie penner]

Hi All - 

I am throwing this question out to the Community because I have been running my head against a wall on it.  I would like to display records from the sn_communities_document table (or a custom table) on cards in a grid or slide view.  There are card widgets for the Catalog and the KB but the APIs in their code is application-specific and cannot be cloned and customized to work for different tables.  I have gone through several tutorials online for creating custom card widgets, but all of them are out-of-date and no longer represent what is available/usable in SNow.  Has anyone successfully created  widget to display records on cards (rather than a list) from a table OTHER than a Request Catalog or KB table and successfully dsplayed it on the portal?  Any help is much appreciated!

Warmest,

Katie

[Cuong Phan]

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.

[Ritu11]

Can you tell me how to display only 4 items out of it and ceating a button to display all items in one go?