Re-rendering HTML after updating a property
Hello everyone!
I have a custom extension that I have written. In my this.renderHTML() function, i have a conditional that checks if 2 properties are equal: User & Sender. If the User & Sender are the same, the renderHTML function returns a different block of code than if the User & Sender are different.
My problem/question has to do with re-rendering the HTML based on input. Here is my current situation:
- I have created chat bubble widget that renders a blue background when the User & Sender are the same, and a gray background when they are different
- The default values for the properties User & Sender are the same, so the initial rendering has a blue background
- I use this as my base mashup for a repeater
- I connect my repeater to a data table which has messages from various users
- I want the chat bubble that is rendered to have a different background if the User & Sender are different
- It appears that the initial HTML rendering persists as the messages are fed in
- If someone knows how to re-render the HTML in this way, please let me know!!
- Below is the code for my runtime.js file:
TW.Runtime.Widgets.combinedChat = function () {
var valueElem_timestamp;
var valueElem_message;
var valueElem_user;
var valueElem_sender;
this.renderHtml = function () {
var str1 = this.getProperty("User");
var str2 = this.getProperty("Sender");
var res = str1.localeCompare(str2);
var logic = res==0;
if(logic){
return "<div class=\"container_combo\" style=\"width: 600px; height: 100px;\">"+
"<div id=\"receiver\" class=\"widget-content widget-helloWorld bubble\">" +
"<span class=\"timestamp\">" + this.getProperty("Timestamp") + "</span>" +
"<div></div>"+
"<span class=\"message\">" + this.getProperty("Message") + "</span>" +
"</div>"+
"</div>";
}
else{
return "<div class=\"container_combo\" style=\"width: 600px; height: 100px;\">"+
"<div id=\"sender\" class=\"widget-content widget-helloWorld bubble_rec\">" +
"<span class=\"timestamp_rec\">" + this.getProperty("Timestamp") + "</span>" +
"<div></div>"+
"<span class=\"message_rec\">" + this.getProperty("Message") + "</span>" +
"</div>"+
"</div>";
}
};
this.afterRender = function () {
valueElem_timestamp = this.jqElement.find(".timestamp");
valueElem_timestamp.text(this.getProperty("Timestamp"));
valueElem_message = this.jqElement.find(".message");
valueElem_message.text(this.getProperty("Message"));
valueElem_user = this.jqElement.find(".user");
valueElem_user.text(this.getProperty("User"));
valueElem_sender = this.jqElement.find(".sender");
valueElem_sender.text(this.getProperty("Sender"));
};
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === "Timestamp") {
valueElem_timestamp.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty("Timestamp", updatePropertyInfo.SinglePropertyValue);
}
if (updatePropertyInfo.TargetProperty === "Message") {
valueElem_message.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty("Message", updatePropertyInfo.SinglePropertyValue);
}
if (sender_val.localeCompare("Sender") == 0){
valueElem_sender.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty("Sender", updatePropertyInfo.SinglePropertyValue);
}
};
};