Sitecore Speak UI : How to manipulate column value of List Control before displaying in list . - sitecore

Question

I am working in speak UI . I have list of items to display in list . But before that i have to check one column value and need to manipulate this value with a Icon to display . How can I implement this change in SpeakUI . Please help

Answer 1

Simple option:
If the data you receive is directly relateable to the icon you want to display:
Set your DataSource on your ListControl to a ListControl Parameters item with your ColumnField items underneath (as outlined in Sitecore doco or other blogs). In the HTMLTemplate field for your column, you can use the value as the source of an image or CSS class with background image style.
<img src="{{YourField}}" />
or
<span class="{{YourField}}"></span>
where your span class styles your icon.
More complex but customisable:
I'm not sure which datasource you are using, but I am a fan of the JsonDataSource by Anders Laub as it's very simple to use and customise (you only need to add 2 small files).
To your SPEAK renderings you add your JsonDataSource, and ListControl with Items property: {Binding JsonDataSource.Json} (and DataSource as required)
Then in the javascript for your page (defined in your PageCode rendering) you can add items to this datasource and customise as required:
jQuery.ajax({
type: "GET",
dataType: "json",
url: "/yourApiCall" + params,
cache: false,
success: function (data) {
var total = 0;
for (var i = 0; i < data.YourItems.length; i++) {
app.JsonDataSource.add({
Col1: data.YourItems[i][0],
Col2: data.YourItems[i][1],
Col3: data.YourItems[i][2]
});
}
},
Where Col1, Col2, and Col3 are the names of your columns, and YourItems is the array of items you are receiving from your ajax call.