Change a Button Display based on Logged In User

I have been trying to apply this to my app for some time now with no success and have noticed the same thing on the Job Application Default Template too and I am not sure on a solution.

When a Logged in used applies for a Job and goes back to the main search screen, I would like the “Apply” button to recognise that the logged in user has already applied and changes the button to reflect this. Is there a way to do this?

Likewise, if the applicant “deletes/removes” the application from the “my applications” table, then the button returns to the normal “Apply” button, allowing them to apply again if they wish.

This can be done with some custom JavaScript. I believe I have a sample somewhere but I’ll have to check.

Maybe this would be a good feature suggestion? Adding the ability to change button text based on a record value?

2 Likes

@tim.young is right and you certainly would need JS for this, but I think you’ll also require a pipe to pull and see if the user applied to this job already.

I made a video in another post showing a similar concept. You can see that here.

I’ll continue that video and apply it to your concept:

Here’s the JS code I used:

TB.render('component_3', function (data) {
 setTimeout(function() {
   $('#x_element_page_7_3 tr').each(function() {
        var voted = $(this).find(".total").text(); 
        
        if (voted == 1) {
            $(this).find(".link a").text("Voted");
            //$(this).css("background-color", "yellow");
        }
        
     });
 },1)  
});
3 Likes

Thanks very much for this @moe, I have tried to “retro-fit” this to my app but not successfully yet. I need to work back and make sure I am getting the correct table and fields. I will be doing this tonight, so hopefully I will report back with success :slight_smile:

@moe This has worked perfectly with a sample set and I have even got it working so that you can even add the same item more than once (I am actually using it for a collection management tool). I can now add an item to “my collection”. The button changes from “Add to collection” to “add again” and also highlighted the table row to a new Hex colour (thanks to that nice little note your left in the JS.
I had to alter the count of “==1” in the JS to “>0” and that allowed the button to stay as “add again” for any count of 1 or more.

Now comes the fun bit…trying to get this mapped back and replicated into my live app.

1 Like

Glad to hear you got it working with sample data. I shoudl have shared the app I built directly with you so you can see/copy it directly too.

Let me know if you come across any issues getting this implemented in your live app. I’d be more than happy to assist further.

I know Tadabase is a ‘no code’ platform, but sometimes we gotta get our hands just slightly dirty with code. It’s somewhat impossible to build features for every scenario but as these features and requests come in we try and see how we can do this in the future without requiring as much code.

@Moe, so this is why I just love Tadabase and the amazing crew supporting us.

I am a complete novice with ZERO coding skills and this is my first go at creating an app. Thanks to everything you have just shown, I have managed to succesfully now integrate this into the live app and it is working EXACTLY as I wanted it to. The image shows how items not added to the collection have the “+ My Collection” button and the row is not highlighted. Anything that has been added to the collection (the voted for scenario), has the button changed to “add another” and the row highlighted in green.

This has saved me from a number of sleepless nights indeed. Thanks Moe

Moe

2 Likes

@moe, now comes the fun part…How do I do this in a List View component? I can’t see a css class field on any of the fields when using List View. Am I missing something completely obvious (wouldn’t surprise me!!).

@moe, is it possible to have the css class function added to the fields in the list component the way it is in the table component? Or is that only limited to tables? I am getting bald spots trying to replicate the above in the list component (I have chosen to use the list view for mobile devices but still need to try and replicate the above solution if at all possible?). Sorry to keep hiding behind the excuse but I truly am a novice and just need a hand in getting this to replicate.

css

Yes, will add right away. I’ll udpate you here when its done.

1 Like

Hi @moe, sorry to be a pain as I know you guys have a million things going on, but is there any chance for a little help on this one? I have been trying other ways to replicate this function but I am crashing into dead ends with my skillset. If I can get this function working in list view then I can finally get some people to Beta test the app for me.

@JulianMc Sure! It would be my pleasure.

We have a big update coming out shortly which has taken up our resources. I’m sure we will add the card classes to cards right away. For now, can you email me directly with link to your app and/or share it with me directly? I’d be more than happy to assist. Likely not this minute, but for sure over the weekend. Let me know where and what the expected outcome is and I’ll tweak it accordingly.

1 Like

Very Grateful indeed! I will get it to you on Monday because there is no way I am ever making you work on a weekend!!! There is nothing more important than being rewarded with the freedom of two days away from us crazy bunch of loons.

1 Like

@JulianMc I appreciate that :heart_eyes:

This is my freedom- stepping away from the daily grind and checking up on this amazing community.

There’s nothing more rewarding than helping our community build awesome stuff on Tadabase and I’m eager to help.

2 Likes

This is an amazing platform and an amazing community. Thanks @moe, I have sent an email for you to the Support email.

1 Like

@Moe and @Chem,

Thank you for adding the CSS Class to the List view. I am not sure what I am doing wrong but have replicated the JS and the Pipes and have updated all the correct elements and components but I just can’t seem to get the List view to update the background color or change the button text the way it is doing in the table view.

Is there any chance you could give it a try in the “topics and votes” scenario by using the list view and see if you are able to get it working? It is most likely just me being thick again.

Here is my amended JS:
TB.render(‘component_57’, function (data) {
setTimeout(function() {
$(’#x_element_page_199_56 tr’).each(function() {
var collection = $(this).find(".total").text();

    if (collection >0) {
        $(this).find(".collection a").text("Add Another");
        $(this).css("background-color", "#DAF7A6");
    }
    
 });

},1)
});

Here you go:

TB.render('component_57', function (data) {
 setTimeout(function() {
   $('#x_element_page_199_57 .t-list-row').each(function() {
        var collection = $(this).find(".total af-data-table-field").text(); 
        //console.log("Total: " + collection);
        
        if (collection > 0) {
            $(this).find(".collection-button a").text("Add Another");
            $(this).css("background-color", "#DAF7A6");
            
            //To set the background of just one row, use this instead: 
            //$(this).find(".collection-button").css("background-color", "#DAF7A6");
        }
        
     });
 },1)  
});

@Moe, I am going to have a little nap now. I am so exhausted from doing the Happy dance all morning!!!

Seriously, thanks a million for your help on this. This is a major milestone in my app. :smiley:

1 Like