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;

       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);

        }

      };

    };

      • 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.