Allow Item Count in Tab Label

  • 3
  • Idea
  • Updated 3 years ago
  • Implemented
I want to be able to show the number of related items contained in the tab label.

Assuming we are using a tab view to replace the SFDC standard related lists, the user has no idea whether the tabs have any data in them.

The ability to use template date {{}} in the tab label would be huge, and let the user know which tabs have information in them.

This comes from my initial interaction with the Account View Starter Page in Skuid sample pages. There are 8 tabs.

Jacob
Photo of Jacob Flatter

Jacob Flatter

  • 1,512 Points 1k badge 2x thumb

Posted 5 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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}})
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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());
});
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
Worked like a charm, thanks!
Photo of Sunny Sharma

Sunny Sharma

  • 678 Points 500 badge 2x thumb
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?
Photo of Sunny Sharma

Sunny Sharma

  • 678 Points 500 badge 2x thumb
got it.
had to specify snippet in model actions for requery event.