Allow Item Count in Tab Label | Skuid Support Community

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

Jacob Flatter

1,532 Points

Posted 6 years ago

6 years ago

Zach McElrath, Employee

54,246 Points

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}})

Comment

3 people like this

2014-03-14T14:28:16+00:00

Zach McElrath, Employee

54,246 Points

Here is the link to our Global Merge variable reference:

http://help.skuidify.com/s/tutorials/...

2014-03-14T17:01:15+00:00

Jacob Flatter

1,532 Points

This is GREAT, Thank you!

2014-03-20T04:31:35+00:00

Glenn Elliott, Champion

7,788 Points

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.

2014-07-06T21:03:45+00:00

Glenn Elliott, Champion

7,788 Points

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?

2014-07-07T02:44:49+00:00

Zach McElrath, Employee

54,246 Points

Glenn,

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

2014-07-07T05:28:23+00:00

Glenn Elliott, Champion

7,788 Points

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.

2014-07-07T12:19:25+00:00

Zach McElrath, Employee

54,246 Points

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

2014-07-07T20:11:57+00:00

Glenn Elliott, Champion

7,788 Points

It's in the body of the wizard step.

2014-07-07T21:11:12+00:00

Zach McElrath, Employee

54,246 Points

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.

2014-07-07T21:18:50+00:00

Glenn Elliott, Champion

7,788 Points

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".)

2015-03-10T17:18:21+00:00

Craig Rosenbaum

4,970 Points

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?

2015-03-10T17:55:26+00:00

Zach McElrath, Employee

54,246 Points

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.

2015-03-10T18:16:19+00:00

Craig Rosenbaum

4,970 Points

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?

2015-03-10T19:37:27+00:00

Zach McElrath, Employee

54,246 Points

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());
});

2015-03-10T20:16:10+00:00

Craig Rosenbaum

4,970 Points

Worked like a charm, thanks!

2015-07-28T15:34:44+00:00

Sunny Sharma

678 Points

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?

2015-07-28T18:31:05+00:00

Sunny Sharma

678 Points

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