Filter Records in a Custom Component by Page Record Value

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:


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

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.

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

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)…

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

Hi guys, this is my solution approach for this:

Here is the code and examples:

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>

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";

1 Like

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