Change the default record count text

Showcase Tips and Tricks
1

In this example, we will be using some code to change the text where it says “3 Records” on the table component to “3 Projects.”

image
image1004×285 8.51 KB

Start by finding the ID of the component as shown in the image below

image
image1334×795 51.7 KB

Once you find the ID, copy and paste the following code into the JavaScript section of your page.

TB.render('component_3',function(data){
    var number = parseInt(data.ele.find('.t-records-button').text());
    data.ele.find('.t-records-button').text(number + ' Projects');
});

Change component_3 to the ID of your component and the “Projects” text to any custom text you would like.

image

1 Like
2

Hey Chem,
Hope you are well - worked perfectly in table mode, I didnt have quite the same success in a list view (I get NaN) - any pointers?

TB.render(‘component_20’,function(data){
var number = parseInt(data.ele.find(‘.btn-sm’).text());
data.ele.find(‘.btn-sm’).text(number + ’ Customers’);
});

3

All is well @Roger, thanks! :smiley: Here’s the code you can use for list components.

TB.render('component_X',function(data){
    var target = 'div.table-actions.no-print > div.pull-right > button.btn.btn-default.disabled.btn-sm';
    var number = parseInt(data.ele.find(target).text());
    data.ele.find(target).text(number + ' Projects');
});
4

Hi Chem,
That worked like a charm :slight_smile:

5

This works for me… sort of…
If I add the code to my Events table, for instance, it will show the number of Events alright. But then I navigate via a menu to a page that does not have any such code - like a page that shows a table of Countries, for instance – that page of Countries says 52 Events. It seems like I need to add this type of code to every page that has a table component or add it to none at all. Only if I refresh the page, will the correct label show up. Am I missing something?

6

I ran into other problems where changing the label from, say, “50 records” to “50 Events” looked good until I clicked a Filter Tab. Then my count was off, although the count is correct with the default “50 records” it is not correct when the deafult label is changed…To remedy this, looking further, I found posts to simply hide the count, but yet hiding table actions removes pagination, refresh and other things I need. …Is there some CSS to simply remove the record count and only the record count? And if remove the record count (default or not), when I open my Event Schedule with Group Bys on Year/Month, I still get “Counts” on each Group, which is another level of complexity. How do I simplify all this? Ideas? Thanks

7

Hi, I wrote some simply JQuery (I’m not expert in it). To hide the record count button:

TB.render(‘component_3’,function(data){
data.ele.find(’.t-records-button’).hide();
});

Seems to work and preserve the other elements. If there are any pitfalls I’m not seeing or if there is an easier way, please let me know. Thanks

8

Hey @tbf, I believe this is caused when you have the same component ID on the destination page. I’m going to look into this more and will respond here with any updates.

9

For working with Filter Tabs, you’ll need to update the code to the following. I’ve also added an option so that when the Count is “1” it will display “1 Project” instead of “1 Projects”.

Table Component

TB.render('component_3',function(data){
    $('.custom-count-table').remove();
    var number = parseInt(data.ele.find('.t-records-button').text());
    data.ele.find('.t-records-button').hide();   
    var countElement = $('<button class="custom-count-table btn btn-default btn-sm"></button>');
    if(number === 1){
        countElement.html(number + ' Project'); //Singular 
    } else{
        countElement.html(number + ' Projects'); //Multiple
    }
    data.ele.find('.table-actions .pull-right').append(countElement);
});

List Component

TB.render('component_4',function(data){
    $('.custom-count-list').remove();

    var target = 'div.table-actions.no-print > div.pull-right > button.btn.btn-default.disabled.btn-sm';
    var number = parseInt(data.ele.find(target).text());
    ata.ele.find(target).hide(); 
     var countElement = $('<button class="custom-count-list btn btn-default btn-sm"></button>');
     if(number === 1){
        countElement.html(number + ' Project'); //Singular 
    } else{
        countElement.html(number + ' Projects'); //Multiple
    }
    data.ele.find(target).append(countElement);
});
10

Thank you for following up, Chem.

1 Like
11

Hey @Chem, this seems to work on the first two tabs of the filter tabs but look what happens on the third and greater:

Second Tab looks great

image
image1588×132 9.96 KB

Third tab and greater

image
image1573×133 12.5 KB

Here is my javascript tab:

        TB.render('component_3',function(data){
            $('.custom-count-table').remove();
            var number = parseInt(data.ele.find('.t-records-button').text());
            data.ele.find('.t-records-button').hide();   
            var countElement = $('<button class="custom-count-table btn btn-default btn-sm"></button>');
            if(number === 1){
                countElement.html(number + ' Appointment'); //Singular 
            } else{
                countElement.html(number + ' Appointments'); //Multiple
            }
            data.ele.find('.table-actions .pull-right').append(countElement);
        });

image

12

@Chem Upon further inspection it appears it has nothing to do with which tab, I believe the problem shows up when the pagination is in play. If the pagination is displayed then it shows duplicate records count.

13

I think it makes the most sense to simply add an option that will allow you to change this in the builder. We’ll do this asap.

2 Likes
14

We’ve made a minor update to tables and lists where you can change the singular and plural record name.

3 Likes