listItem

defines a custom template for comments

object listItem;

Example

webix.ui({
    view:"comments",
    currentUser:4,
    id:"comments",
    url:"./data/comments",
    users:"./data/users",
    listItem:{
        templateText: function(obj){
            return "<div class = 'comment'>"+obj.text+"</div>"
        }
    }
});

Related samples

Details

listItem is an object with the following properties:

Displaying Name

To change the way user names are displayed, redefine the templateUser property:

templateUser:function(obj){
    var name = $$("comments").getUsers().getItem(obj.user_id).value;
    return "<span class='user'>"+name+"</span>";
}

Changing Menu Icon

You can choose a different icon for the context menu. Redefine the templateMenu property for that:

templateMenu:function(obj){
    var html = "";
    if ($$("comments").config.currentUser == obj.user_id)
        html += "<span class='webix_comments_menu mdi mdi-chevron-down'></span>";
    return html;
}

You can also add other icons next to the menu icon, e.g. a star for liking comments:

templateMenu:function(obj){
    var html = "<span class ='webix_comments_icons'>";
    html += "<span class='star mdi mdi-star"+(obj.star?"":"-outline")+"'></span>";
 
    if ($$("comments").config.currentUser == obj.user_id)
        html += "<span class='webix_comments_menu mdi mdi-chevron-down'></span>";
 
    html += "</span>";
    return html;
}

Displaying Date

To change the way the dates are displayed, redefine the templateDate property:

templateDate:function(obj){
    var date = webix.Date.dateToStr("%Y.%m")(obj.date);
    return "<span class='comment_date'>"+date+"</span>";
}

Note that with the template you can change the style or hide the date, but to change the date format, use the format.

Displaying Comment Text

To change the style of the block with the comment inself, redefine the templateText property:

templateText: function(obj){
    return "<div class ='comment'>"+obj.text+"</div>"
}

Displaying Avatar

If you want to change avatars, redefine the templateAvatar property:

//  display user initials
templateAvatar:function(obj){
    var name = $$("comments").getUsers().getItem(obj.user_id);
    var parts = name.value.split(" ");
    var letters = parts[0][0].toUpperCase()+(parts[1]?parts[1][0].toUpperCase():"");
    return "<span class='avatar'>" + letters + "</span>";
}

Defining Menu Position

The context menu is shown to the bottom left of the menu icon. To position it otherwise, pass the desired position and/or offsets to the menuPosition property:

menuPosition:{
    pos:"bottom",
    y:-5
}

All the available positions are available here.

Back to top