listItem

defines a custom template for comments

Example

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

Related samples

listItem is an object with the following properties:

• templateUser
• templateMenu
• templateDate
• templateText
• templateLinks
• templateAvatar
• templateMentioned
• menuPosition

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='webix_comments_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_icon mdi mdi-chevron-down webix_comments_menu'></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='webix_comments_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 scheme.

Displaying Comment Text

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

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

Displaying Links and Images

Comments can display images and links if there are URLs in the comment text. This works due to the templateLinks template:

templateLinks:function(obj){
    var text = obj.text.replace(/(https?:\/\/[^\s]+)/g, function(match){
        if(match.match(/.(jpg|jpeg|png|gif)$/))
            return "<img class='webix_comments_image' src='"+match+"'/>";
        return "<a target='_blank' href='"+match+"'>"+match+"</a>";
    });
    return text;
}

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='webix_comments_avatar'>" + letters + "</span>";
}

Displaying Mentioned Users

You can redefine styles for users mentioned in chat via the templateMentioned property:

templateMentioned: function(obj, common){
    obj.text = obj.text.replaceAll("@'Corvo Attano'", 
    "<span style='color:red'>Corvo Attano</span>");
    return obj.text;
}

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