Allow Item Count in Tab Label

This is already possible, using Global Merge syntax in the tab label. For instance, if you want to show the number of Contacts in an Account View starter page’s “Contacts” tab, just put something like this in the Tab Label, assuming that your Contacts Model is called “Contacts”: Contacts ({{$Model.Contacts.data.length}})

Here is the link to our Global Merge variable reference: Page Not Found — Skuid v15.1.6 Documentation

This is GREAT, Thank you!

I like this idea. We use custom icons as our tab names, but I might pinch this technique to add record counts to our tool tips that display on hover of each tab. Would save the user clicking through if there’s no data there to view.

Zach: On the matter of returning the number of rows in a model in merge syntax.

I have a wizard that creates work items. At the start of the wizard, the NewWorkItems model has no rows, but by step 3 it has (say) 2 rows. In the console, when I run skuid.$M(‘NewWorkItems’).data.length, I get 2. But in step 3 I display a template that says “Creating {{{$Model.NewWorkItems.data.length}}} work items.” and it always returns 0. Does that merge syntax work for models that are empty at the time of initial page load?

Glenn,

There is an option on the Wizard component called “Defer rendering of step contents” — do you have that turned on?

Yes, that is turned on. Just now I tried turning that off and I retested, but it didn’t change this behaviour. I still got 0.

When you say “I display a template”, is the template in the body of the Wizard Step, or is it in the Step Label?

It’s in the body of the wizard step.

This is strange, I think I’ve replicated this exact same scenario and my template shows data — assuming that there’s data added to the “NewWorkItems” model before the user gets to Step 3, and assuming that “Defer rendering of step contents” is turned ON.

OK, there’s some voodoo happening here. I just tried again with the set up you described and it worked. I get the correct count of 2 now. I may have wasted your time here, but I’m certain it wasn’t working yesterday.

(BTW, “voodoo” in Australian translates as “probable user error”.)

Is there a way to update the numbers in the tab without a refresh? When I add new related objects from another tab and save/update the model, the number doesn’t change. Only a hard refresh of the page updates this. Am I missing something?

Currently the easiest way to do this is to do a full re-render on the Tab Set component. So for instance if your Tab Set has a unique Id of “MyTabSet”, then you could do this:

skuid.component.getById(“MyTabSet”).render();

In the future we’d like to improve the Tab Set component so that Tab labels containing merge data will be updated whenever the merges need to change… but unfortunately the Tab Labels are static right now.

I am not seeing a change after adding the render code above. I know I’m calling the right tab set Id and I even put it in a setTimeout to make sure it was trying to render after the model had queried. Should the component “refresh” completely when calling this or will just the number appear different?

Craig, I’m having to back-track on this one. The Tab Set component’s render() method is actually optimized to prevent full re-renders, making it very difficult to completely rebuild it from scratch. I’m going to mark this as an enhancement and add it to our issue tracker.

Anyway, here’s a more optimized way to forcibly re-run the merges for Tab Labels in a particular Tab Set:

var TAB_SET_ID = ‘MainTabSet’;
var c = skuid.component.getById(TAB_SET_ID);
var tabsXML = c.xmlDefinition.children(‘tabs’).children();
c.element.children(‘.ui-tabs-nav’).children().each(function(i){
    var tabName = tabsXML.eq(i).attr(‘name’);
    skuid.$(this).find(‘.nx-template’).empty().append(skuid.utils.merge(‘global’,tabName).html());
});

Worked like a charm, thanks!

Hi,

A similar requirement for Attachment object. When user is deleting attachment from table and clicks save, then tab title is updated. however, when user is uploading attachment using “file upload” option, it doesn’t refresh as snippet is not executed. Any way of doing this fr attachments?

got it.
had to specify snippet in model actions for requery event.