Clickable List Item (List Data Component)

Hey together,

im looking for a solution to make the entire list item on the List Component clickable. Does someone has a idea how i can realize this?

Thanks in advance!

Hey @toseifert,

Welcome to the community!

I’ve managed to accomplish this by using the HTML option inside a list component along with some extra CSS, and JavaScript code.

I’ll use the sample table that comes with each new app as an example. Here is how the end result will look.

First, we’ll need to add the List component to the page and add nothing but one HTML field inside the List component (Found under “Other”)

Next, edit the HTML field and click on the Source code option

Paste the following code into the Source code box

<div id="{!!id!!}" class="custom-list-card af-card-component shadow-1x">
    <div class="card-inner">
        <div class="header">{Customer}</div>
        <div class="con">
            <p>Status: {Status}</p>
            <p>Date: {Contact Date}</p>
        </div>
        <div class="footer">{Email}</div>
    </div>
</div>

Note: You’ll need to change/remove {Customer}, {Status}, {Contact Date}, and {Email} to the field names in your table.

Now press Ok > Update > Update & Save

Next, let’s add the following code to the CSS section of the page so that when a user hovers over a list item the cursor turns into a pointer indicating that they can click on it.

.custom-list-card{
    cursor:pointer;
}

Now, we’ll add some JavaScript that will direct the user to the detail page for the record clicked.

First, you’ll need to create the details page if you haven’t already. You can create a details page by adding details link to the list component. You can delete the link after the details page has been created and you’ve taken note of the details page URL path.

What we need to take note of is the path after “.tadabase.io/” or whats after your domain name if you have a custom domain. For example, a details page URL can look like this https://yourappname.tadabase.io/my-cool-app#!/landing/sample-data-table-details/5m9N0njzqk
What we need is my-cool-app#!/landing/sample-data-table-details/

And the JavaScript code would be:

var listCardsHaveLoaded = false;
var addClickEventForEachListItem = function(){
    $('.custom-list-card').each(function(){
        var id = $(this).attr('id');
        $(this).click(function(){
            window.location.href = 'my-cool-app#!/landing/sample-data-table-details/'+id;
        });
    }); 
};
function checkifListCardsHaveLoaded() {
    if(listCardsHaveLoaded === false) {
        if ($('.custom-list-card').html() !== undefined) {
            listCardsHaveLoaded = true;
        }
       window.setTimeout(checkifListCardsHaveLoaded, 100);
    } else {
        addClickEventForEachListItem();
        $('button, a').click(function(){
            setTimeout(function(){
                addClickEventForEachListItem();
            },900);
        });
    }
}
checkifListCardsHaveLoaded();

Make sure to change my-cool-app#!/landing/sample-data-table-details/ to your URL

And that’s all! Let me know if you have any questions :slight_smile:

2 Likes

Another solution I use:

(change the #ID of course).

var flag = false;
function checkFlag() {
    if(flag === false) {
        if ($('#x_element_page_6_4') !== null) {
            flag = true;
        }
       window.setTimeout(checkFlag, 100);
    } else {
        var orgLimit = 140;
        $(function(){
            setTimeout(function(){
                $("#x_element_page_6_4 div.list-row-item").click(function() {
                window.location = $(this).find("a").attr("href"); 
                return false;
                });
            },900);
        });
    }
}
checkFlag();
2 Likes

@Mary thanks for sharing.

Just so everyone knows, this approach only works with a single details link inside the component. Chem’s initial response doesn’t require the link to be present.

1 Like