conditional rendering & filtering wait time

  • 1
  • Question
  • Updated 5 years ago
I have a "no related records found" message in a page title. This is configured to conditionally render when another field has no value in it. That other field is a lookup rendered as a required picklist. Normally this lookup field will get automatically populated with a record based on a filter applied to it in Skuid when the page loads. My goal is that if there is no record, the message should appear, and if the field does get populated the message should not appear.

The salient point is that the time it takes for this filter to become active can take anywhere from a quarter second to two seconds or so. I understand that this probably can't really be controlled or sped up much, so I'm not trying to address that issue.

I'm trying to figure out a way to render my message only when the lookup field really truly finds no records, as opposed to that it just hasn't finished processing it's filter yet. Right now, when the page loads, the message appear briefly because the lookup field isn't populated yet, then when the filter gets applied and the lookup field finishes populating, the message goes away.

Any thoughts on how I can have the message appear only once the page or source field is done loading/rendering? The only thing I can think of is that the conditional rendering needs to wait, or be dependent on something else that happens only when the page is totally done, but I can't conceive of a way for either to happen.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,036 Points 20k badge 2x thumb
One approach would be to initially hide the Page Title, then conditionally render it a few seconds after the page has loaded.

This requires giving a Unique Id to your Page Title component by going to its Advanced properties and specifying a Unique Id.

So, assuming that your Page Title's unique Id is "MyPageTitle", here's how you could do this:




(function(skuid){
var $ = skuid.$;
$(function(){
var pageTitle = skuid.component.getById('MyPageTitle');
if (pageTitle) {
pageTitle.element.hide();
setTimeout(function(){
if (pageTitle.conditionallyRender()) {
pageTitle.element.show();
}
},2000);
}
});
})(skuid);