Filter Records in a Custom Component by Page Record Value

App Development
1

Hi All (cc: @tim.young),

Does anyone know how to or the best approach for filtering records in a Custom Component by the current Page Record Value?

If you’re familiar with this feature in the a Pages Table, see attachment, I’m looking for that exact functionality but for custom components…

Any questions, thoughts or ideas would be gratefully received :slight_smile:

Graham.

2

Hi @GREDDIE!
Did you find a way to overcome this problem?
We just ran into the same problem.
Thanks!
(cc: @tim.young)

3

Hey @doravrahami , in short “no” I didn’t get a solution but it made me review my connections as I realised that if I just put a standard data table with the same fields on the same page it worked as expected without any additional filters which made me realise I had a problem with a join and I actually didn’t require this after all. I doubt this help but I wanted to reply to your post. I hope you find a solution.
Graham.

4

Thanks Graham!
Indeed, I need something else…
Maybe @tim.young will have a solution for us…

5

Hey @doravrahami, did YOU :slight_smile: manage to get a solution to this as I’ve come up against it again and this time I’m stuck (so far)…

6

Hi @GREDDIE ,
Sorry, but we didn’t came to any solution for this problem…

7

Hi guys, this is my solution approach for this:

https://share.vidyard.com/watch/Ab2gnNnLBJUnUQhBjzZ9w8?

8

Here is the code and examples:

https://advertscience.tadabase.io/tada-experts/parent

Child Javascript

var recordId = "{pageField.ID}";
var sample = "{pageField.Sample}";

function getId() {
    return recordId;
}

function getSample() {
    return sample;
}

Custom Table HTML

<table class="main-table" style="width: 100%;">
    <tbody class="main-body-table">
        {{#each records}}
            <tr class="main-row {{field_62}}-{{field_63}} text-center">
                <td style="width: 50%;">{{field_62}}</td>
                <td style="width: 50%;">{{field_63}}</td>
            </tr>
        {{/each}}
    </tbody>
</table>

Custom Table Javascript

var buildClass = getId() + "-" + getSample();

function displayRelatedRecords(){
    var i;
    hideAll = document.getElementsByClassName("main-row");
    for (i = 0; i < hideAll.length; i++) {
        hideAll[i].style.display = "none";
    }
    showRelatedRecords = document.getElementsByClassName(buildClass);
    for (i = 0; i < showRelatedRecords.length; i++) {
      showRelatedRecords[i].style.display = "inherit";
    }
}

function showAll(){
    var i, tabcontent, tablinks;
    subCatContent = document.getElementsByClassName(buildClass);
    for (i = 0; i < subCatContent.length; i++) {
    subCatContent[i].style.display = "inherit";
    }
}

displayRelatedRecords();
//showAll()
1 Like
9

Hey @kruizf201 , wow thank you for taking the time to document and share that video example, that sounds very promising indeed! I’ll take a look and see if I can implement

Once again thanks @kruizf201

1 Like