How to refresh a Template Component?

  • 2
  • Question
  • Updated 2 years ago
I can refresh a Field Editor with something like 

model.registeredLists[17].renderedItems[1].fields[0].render() ;

Is the template component a list like the Field Editor and Table components?

Jacob
Photo of Jacob Flatter

Jacob Flatter

  • 1,512 Points 1k badge 2x thumb

Posted 5 years ago

  • 2
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
Hey Jacob, I'm not clear on what the problem is here, so I'm going to change this to a question. Also, what are you trying to do? If you're running our latest nightly build (4.11), you're able to add custom id's to template components. Once you do that you can render a template (or any component) by using this:

skuid.component.getById('MyCustomId').render();


Photo of Jacob Flatter

Jacob Flatter

  • 1,512 Points 1k badge 2x thumb
This looks helpful, although I haven't gotten it to work.

I have created a default value for a field which concatenates the user alias with today's date (using inline JS).

I then update the fields to show the value.

I probably need to save to the model. (missing step in underpants gnomes scheme)

Then I would like to re-render the Template Component using this new value.

Does that sound feasible? I need to look at the value in the model, is it possible that the field value being shown is not reflected in the skuid model?

Thanks,

Jacob
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
Yeah, that's definitely possible. Your template is going to reflect the current state of your model. So if you're updating something that's showing in a template -- that is, updating the corresponding row(s) in the model -- using JS, it should show as italic and tan-colored if the value is in fact being updated. And that's pre-save. I would look in your dev console to make sure the model's being updated with your desired value. 
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
When you say you've created a default value for a field... then you say you update the fields, which are you doing? Are you concatenating the values and updating one field? Or are you doing something with the two source fields? And which are in the template?
Photo of Jacob Flatter

Jacob Flatter

  • 1,512 Points 1k badge 2x thumb
(function(skuid){   
   var $ = skuid.$;
   
   $(function(){
      var userModel = skuid.model.getModel('User'),
      
      user = userModel.getFirstRow(),
      
      weekUpdateModel = skuid.model.getModel('WeeklyUpdate'),
      
      weekUpdate = weekUpdateModel.getFirstRow();
      
      var userAlias = user.Alias + ' Update - ' + $.datepicker.formatDate('dd/mm/yy', new Date());
      
      weekUpdateModel.updateRow(weekUpdate,'Note__c',userAlias);
      
      $.each(weekUpdateModel.registeredItems,function(){
          
          this.refreshFields();
          
      });
       
   });
    
})(skuid);

Note__c is what I am trying to show in the Template Component.

The JS above successfully changes the value of Note__c in the field editor, not the Template Component on the same page.

I tried your suggestion:
skuid.component.getById('MyCustomId').render();

In the console with no luck.

Jacob


Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
Stupid question, but did you double check that the template is pointed to the right model? If the FE and the template are using the same model, the template should update as soon as you run weekUpdateModel.updateRow();

Do you want grant Skuid login access for a day? Then I could just take a look at your page. 
Photo of Jacob Flatter

Jacob Flatter

  • 1,512 Points 1k badge 2x thumb
The model is the same.

Can we do a quick screen share (join.me)?  my email is jflatter at gmail.

I am only admining here for a few more days.

Thanks,

Jacob
(Edited)
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
I'm having the same issue where I'm updating a field in javascript, but the template doesn't update every time. It seems to only update the first time. I've checked the value in the console and ensured that the template's model is pointed to the right place.
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
skuid.component.getById('MyCustomId').render(); 
worked for me