Card widget for service portal?

[katie penner]

Hi All - 

I am building a Community Forum Portal from the Community application and wanted to display sn_communities_documents records in a card/grid view rather than a list view.  The only OOB widgets with cards are inextricably linked to the KB tables or the Catalog tables.  The APIs in the widget code are application-specific, so cloning and customizing to hook up the widget to a different table is proving difficult.  I have followed tutorials for 3 custom widgets to accomplish, but they are out of date and none of them work.  Has anyone successfully created a Card Widget to display records from a custom table (or any table other than the KB/SC tables) on cards?  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.