Automatically refresh render conditions on component

I have a page with a queue component that has tasks. I wrote javascript to refresh the model every 60 seconds, so that any new tasks pop into the view of the sales rep. I’d like to hide the queue component entirely from the page if the model has no data rows. However, right now it looks like the component render conditions are run on page load and not each time the model is refreshed.

I tried to find a solution here in the community, but couldn’t find an answer. Is there a way to refresh the render conditions on the component without reloading the entire Skuid page?

Thanks in advance for any tips.


Hello Andrew -

You should not need to refresh the render conditions, they should automatically re-evaluate as the model data changes.

Since it does not appear to be working correctly for you, you might have stumbled upon a Skuid bug.  Before confirming, a couple of questions:

1) What are the render condition(s) that you have on the queue?
2) How are you “refreshing” the model every 60 seconds?  If you are using javascript, please include the code if you are able to.

I have 2 render conditions:

  1. ABE_researched_by__c = null
  2. Type = “Marketing Interaction”
Here is the inline javascript to refresh the 5min model:

(function(skuid){ var $ = skuid.$; $(function(){ setInterval(function() { var model5min = skuid.model.getModel('5min'); // update the data skuid.model.updateData([model5min], function() { console.log('conditions updated'); }); }, 1000 * 60); }); })(skuid);<br>

Thanks Andrew.

Those render conditions will look to evaluate specific field values in a row.  If I’m understanding your use case correctly, what you want is to show the queue when there are ANY rows in the model and hide if there are no rows, correct?

Assuming yes, rather than use a row field evaluation, you can use a model property evaluation.  Can you try the following:

1) Remove the two render conditions that you have
2) Add a render condition for “Model Property”, select your model and choose “Has Data Rows”

I did find a potential bug with Skuid even when using this approach but let me know how it goes for you and we’ll take it from there.

If I’ve misunderstand your use case, let me know and we’ll continue trying to get your squared away.

Sorry, I gave you the render conditions on the model, not the queue. Your recommendation is exactly how I configured the render conditions on the queue. You also are correct on the use case. Looks like we need to explore if this is a bug. Thanks for the help. Andrew

Thanks for confirming Andrew.  A couple more questions for background to make sure we cover all scenarios.

1) Does the queue render/hide properly on initial page load?
2) If the model has records on initial page load and assuming the queue is visible, when another record is added (in the background), does the queue pick up that new record?

My goal with the questions is to determine if the issue is isolated to only when the queue would need to show/hide completely or if it’s related to updating itself in any way as model data changes.

Hello Andrew -

I dug in to this some more and confirmed my suspicion that you’ve encountered a Skuid bug.  I’ve creating a post to report the issue so that it can be tracked.

Unfortunately, as mentioned in that post, even using the Skuid API to force the queue to render doesn’t work due to the underlying issues with the queue component.

All is not lost though.  Until Skuid releases a fix, here is a workaround:

1) Add a Wrapper component to your page where you want the Queue to display
2) Place the rendering condition for Model Has Rows on the wrapper
3) Put the queue inside of the wrapper
4) remove the condition from the queue

Hope this helps!

Thank you for your diligence Barry. The solution to utilize a wrapper is a solid one in general, apart from being a good workaround in this case. Wrappers are great for this sort of thing. 

Barry - that worked perfectly! Thank you so much for diving into this and coming up with a great solution.


Glad it worked Andrew!