Allow Item Count in Tab Label

  • 3
  • Idea
  • Updated 4 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,532 Points 1k badge 2x thumb

Posted 6 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,246 Points 50k 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 Zach McElrath

Zach McElrath, Employee

  • 54,246 Points 50k badge 2x thumb
Here is the link to our Global Merge variable reference:

http://help.skuidify.com/s/tutorials/...
Photo of Jacob Flatter

Jacob Flatter

  • 1,532 Points 1k badge 2x thumb
This is GREAT, Thank you!
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,788 Points 5k badge 2x thumb
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.
Photo of Glenn Elliott

Glenn Elliott, Champion

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

Zach McElrath, Employee

  • 54,246 Points 50k badge 2x thumb
Glenn,

There is an option on the Wizard component called "Defer rendering of step contents" --- do you have that turned on?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,788 Points 5k badge 2x thumb
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.
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,246 Points 50k badge 2x thumb
When you say "I display a template", is the template in the body of the Wizard Step, or is it in the Step Label?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,788 Points 5k badge 2x thumb
It's in the body of the wizard step.
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,246 Points 50k badge 2x thumb
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.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,788 Points 5k badge 2x thumb
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".)
Photo of Craig Rosenbaum

Craig Rosenbaum

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

Zach McElrath, Employee

  • 54,246 Points 50k badge 2x thumb
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.
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,970 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

  • 54,246 Points 50k 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,970 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.