Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X
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:
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);
}
};
};
I think I mentioned this before, but for what you are doing, I'm not sure why you are not using some of the built-in OOTB capabilities. Returning a value from a Service that does the evaluation, using a Validator Widget, using State Based formatting.
All the behavior (minus Chat) that you mention can be done OOTB, if you really need to apply it to one custom widget though, I recommend you look at how we do it with ours.