1 Reply Latest reply on Aug 28, 2015 7:47 AM by paic RSS
    hails.alex91@gmail.com Explorer

    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;


              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>" +


                         "<span class=\"message\">" + this.getProperty("Message") + "</span>" +





              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>" +


                         "<span class=\"message_rec\">" + this.getProperty("Message") + "</span>" +






      this.afterRender = function () {

        valueElem_timestamp = this.jqElement.find(".timestamp");


        valueElem_message = this.jqElement.find(".message");


        valueElem_user = this.jqElement.find(".user");


        valueElem_sender = this.jqElement.find(".sender");




    this.updateProperty = function (updatePropertyInfo) {

        if (updatePropertyInfo.TargetProperty === "Timestamp") {


          this.setProperty("Timestamp", updatePropertyInfo.SinglePropertyValue);


        if (updatePropertyInfo.TargetProperty === "Message") {


          this.setProperty("Message", updatePropertyInfo.SinglePropertyValue);


        if (sender_val.localeCompare("Sender") == 0){


          this.setProperty("Sender", updatePropertyInfo.SinglePropertyValue);




      • Re: Re-rendering HTML after updating a property
        paic Collaborator

        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.