Allow Item Count in Tab Label

edited September 12, 2019 in Ideas
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
2
2 votes

Implemented · Last Updated

Comments

  • edited September 12, 2019
    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}})
  • edited December 21, 2016
    Here is the link to our Global Merge variable reference: http://help.skuidify.com/s/tutorials/m/11720/l/187263-global-merge-variables
  • edited March 14, 2014
    This is GREAT, Thank you!
  • edited December 1, 2014
    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.
  • edited December 1, 2014
    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?
  • edited December 21, 2016
    Glenn,

    There is an option on the Wizard component called "Defer rendering of step contents" --- do you have that turned on?
  • edited December 1, 2014
    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.
  • edited December 21, 2016
    When you say "I display a template", is the template in the body of the Wizard Step, or is it in the Step Label?
  • edited December 1, 2014
    It's in the body of the wizard step.
  • edited December 21, 2016
    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.
  • edited December 1, 2014
    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".)
  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited November 12, 2015
    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?
  • edited December 21, 2016
    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.
  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited November 12, 2015
    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?
  • edited December 21, 2016
    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());
    });


  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited November 12, 2015
    Worked like a charm, thanks!
  • edited July 28, 2015
    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?
  • edited July 28, 2015
    got it.
    had to specify snippet in model actions for requery event.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!