# Example Card or Result List Custom Widget
[Deprecated](../../../getting/release/squirro-release-process.md#getting-squirro-process)
This article describes the process for customizing the **Cards** widget but this same example could apply to the **Result List** widget.
A common request in Squirro is the ability to display additional information in the **Cards** and **Result List** widgets, we can do this quite easily with a custom template and by modifying the collection request so that the facets are returned with the items in the item list request.
If you are not familiar with custom widgets then please follow the [basic custom widget tutorial](tutorials/index.md#backbone-tutorials) first.
## Start by Extending the Cards widget
```javascript
return Widgets.Cards.extend({
... // Other code goes inside the class here
});
```
## Include a Custom Template for Rendering the Additional Data
In the **afterInitialise** function, we can reference our custom template and attach it to the **itemTemplate** pointer. This HTML file will now be used for each item in our list.
```javascript
afterInitialize: function () {
this.itemTemplate = this.customResources['itemTemplate.html'];
},
```
## Modify the Collection Request to Include All Facets
By harnessing **getCustomCollectionParams** the returned object will be added to the collection request, we need to pass **keywords: true** to fetch the additional facets.
```javascript
getCustomCollectionParams: function() {
return {
keywords: true,
};
},
```
## Create the itemTemplate.html File
The content of this file will replace each item. We can use a **debugger** to see what fields are available for display by using the following code and then typing **item** into the console. Item is automatically passed into the template so we can reference it directly in the console during this breakpoint.
```rhtml
Hello World
<% debugger %>
```
Below you can see the output of **item**, notice the keywords object which contains all of that item’s facet values.
### image1
## Implement the Custom HTML
Here is an example of the custom HTML used to generate the following image, showing the additional facet fields in the view.
```rhtml
<%
function getKeywordValue (item, kw) {
var keywords = item.get('keywords') || {},
value = keywords[kw] || [];
if (!_.isEmpty(value)) {
return value[0];
} else {
return '';
}
}
%>
```
[](https://s3.amazonaws.com/download.squirro.net/docs/migrated-attachments/1494089729/1515585537.png)
## The Complete Widget.js File
Below is a complete example of the widget.js file, here you can see all the pieces above coming together to have a complete piece of code.
```javascript
return Widgets.Cards.extend({
afterInitialize: function() {
this.itemTemplate = this.customResources['itemTemplate.html'];
},
getCustomCollectionParams: function() {
return {
keywords: true,
};
},
});
```
## The Complete Widget.css File
Below is a complete example of the widget.css file.
```css
.custom-custom_recommendations .vItemListCards .vItemCards .detail {
width: 100%;
float: none !important;
}
.custom-custom_recommendations .vItemListCards .vItemCards .source {
width: 60px !important;
}
.custom-custom_recommendations .vItemListCards .vItemCards .item .detail {
height: 50px !important;
}
.custom_spacer::after {
content: " · ";
}
@media only screen and (max-width: 992px) {
#icon_row {
display: none;
}
}
@media only screen and (min-width: 1200px) {
.custom-custom_recommendations .row .col.l10 {
width: 90%;
}
.custom-custom_recommendations .row .col.l2 {
width: 10%;
}
}
.custom-custom_recommendations .widget-header {
margin: .5rem 0 1rem 0;
background-color: #fff;
transition: box-shadow .25s;
border-radius: 2px;
box-shadow: 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.custom-custom_recommendations .total {
padding-left: 24px;
}
.custom-custom_recommendations .toggle_preference {
padding-right: 24px;
line-height: 64px;
}
.switch label input[type=checkbox]:checked+.lever:after {
background-color: #009e91 !important;
}
.switch label input[type=checkbox]:checked+.lever {
background-color: #009e91 !important;
}
```
## The Complete Widget.css File
Below is a complete example of the config.js file. We did not modify the config in this example, we simply return the original Squirro **Cards Widget Config** object.
```javascript
return Pages.Cards;
```
## Simple Small Modifications
If you just want to make a small modification to the existing view, then you should contact a member of the frontend team at Squirro to get the most up to date HTML for the current **itemTemplate**.