How to bind a data source to a filter component immediately - UI Builder

Daria6
Mega Sage

an hour ago - last edited an hour ago

Looking for any help with binding a data resource to a filter source. I have a data resource that I use to look up records. I have a filter component and in the "Filter source", I bind @Data.look_up_records.results. When I try to use the filter component, it says nothing is available. I have tried all kinds of variations of this to no avail. I have tried to set the entire payload manually in a client parameter and into the filter source just to test and nothing happens.

The documentation for this component has broken links for the usage. Can someone point me in the right direction? I need this data to be loaded in the filter on load of the page.

0 Helpfuls
  • 54 Views
1 REPLY 1

lauri457
Tera Sage

35m ago

One way to find out what the expected payload is for a property is (if the docs is lacking which is often is) to go to the macroponent definition [sys_ux_macroponent] and looking in the properties field for your particular property and finding it's internal name. For the "Filter source" prop in the filter component it would be "datasource" as below.

    {
        "name": "datasource",
        "label": "Filter source",
        "fieldType": "json",
        "interfaceApiName": "parfilterds",
        "valueType": "string"
    },

 Then you can configure the component with a static input and head to your [sys_ux_macroponent] for the page you are developing and finding the corresponding property in the component definition in the composition field

{
    "definition": {
        "id": "226449101138d0dff1abe0e1566c8b2a",
        "type": "MACROPONENT"
    },
    "elementId": "filter_1",
    "elementLabel": "Filter 1",
    //...
    "preset": null,
    "propertyValues": {
    //...
        "datasource": {
            "type": "JSON_LITERAL",
            "value": {
                "payload": {
                    "primaryKey": "sys_id",
                    "table": "sys_user"
                },
                "type": "table"
            }
    //...
        },
        "targets": {
            "type": "JSON_LITERAL",
            "value": [
                {
                    "payload": {
                        "field": "assigned_to",
                        "primaryKey": "sys_id",
                        "table": "incident"
                    },
                    "type": "table"
                }
            ]
        }
    }
}

Now you can use this information to get the data for the filter and define what you are filtering:

//Filter source property
function evaluateProperty({
    api,
    helpers
}) {
    return {
        "payload": {
            "primaryKey": "sys_id",
            "table": "sys_user"
        },
        "type": "table"
    };
}
//Data to filter property
function evaluateProperty({
    api,
    helpers
}) {
    return [{
        "payload": {
            "field": "assigned_to",
            "primaryKey": "sys_id",
            "table": "incident"
        },
        "type": "table"
    }];
}

 

0 Helpfuls