How do I pass the content of a text Input to a Blox filter?

[irismaessen]

I'm trying to create a slightly more restrictive text filter using Blox. I want my users to be able to type in a search term to filter on, but I only want them to be able to do a 'contains' filter, not the other free text filter options.

I've managed to get an inputbox that gathers text, and a button that applies a 'contains' filter. What I have not yet managed is to pass information from one to the other. I'm fairly new to BloX, so I'm probably missing something obvious

Snippet of what I've got so far -- this just filters the dashboards to values containing the literal string {New Input.textVal}

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "TextBlock",
                            "horizontalAlignment": "center",
                            "verticalContentAlignment": "center",
                            "wrap": true,
                            "text": "Search Text",
                            "spacing": "small"
                        },
                        {
                            "type": "Container",
                            "items": [
                                {
                                    "type": "Input.Text",
                                    "id": "textVal",
                                    "class": "",
                                    "title": "New Input",
                                    "placeholder": "Your Search Term",
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Filters",
            "title": "Filter (by Dimension)",
            "data": {
                "filters": [
                    {
                        "filterJaql": {
                            "contains": "{New Input.textVal}"
                        },
                        "dim": {
                            "title": "Search",
                            "table": "myTable",
                            "column": "myColumn",
                            "datatype": "text"
                        }
                    }
                ]
            }
        }
    ]
}

[devanisetty]

Hi Iris, 

Below is the widget level script (which need to be added in Blox widget scripts). 

widget.on('ready', function(w){ 

	$('#textVal').blur(function(){
		var applyJaql = {
			'jaql':{
				"table": "TableeName",
				"column": "TableName.ColumnName",
				"dim": "[TableName.ColumnName]",
				"datatype": "text",
				"title": "Your Search Term",
				"filter": {
					"multiSelection": false,
					'members': [$(this).val()],
                    'explicit': true
                }
			},
			'instanceid': 'filterInstanceID'  
		};
		prism.activeDashboard.filters.update(applyJaql,filterOptions);
		
		prism.activeDashboard.refresh();
	});

});
​

filterInstanceID - In the dashboard console type below line, in the console we will have the list of filters on the dashboard with instanceID

prism.activeDashboard.filters.$$items​

Hope the above solution works for your need. 

Thanks, 

Dev

[irismaessen]

Hi,

Thanks for replying. In extremis, this might give me some guide on how to achieve what I would like to do.

But why would I need to resort to Widget scripts for this if Blox allows interaction between actions and input elements in other cases? Surely there must be a way I can pass the value of the inputbox to the Blox filter action without having to use another widget script?

[devanisetty]

Rather in Widget Scripts, I think we can move the scripts to customAction and use it.

[harikm007 · Accepted solution]

Hi @irismaessen ,

Try this blox script (update table and column name in script):

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "TextBlock",
                            "horizontalAlignment": "center",
                            "verticalContentAlignment": "center",
                            "wrap": true,
                            "text": "Search Text",
                            "spacing": "small"
                        },
                        {
                            "type": "Container",
                            "items": [
                                {
                                    "type": "Input.Text",
                                    "id": "data.filters[0].filterJaql.contains",
                                    "class": "",
                                    "title": "New Input",
                                    "placeholder": "Your Search Term"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Filters",
            "title": "Filter (by Dimension)",
            "data": {
                "filters": [
                    {
                        "filterJaql": {
                            "contains": ""
                        },
                        "dim": {
                            "title": "Search",
                            "table": "Records",
                            "column": "Region",
                            "datatype": "text"
                        }
                    }
                ]
            }
        }
    ]
}

-Hari

[irismaessen]

That works! Fantastic! Thank you!

Now to see if I can show what the filtered value *is* once the filter has been applied but I think I saw some examples floating around for that somewhere.

(And, for my own understanding... why does it work?)

[harikm007]

I added one more line in the script which connects text box with filter action 

 "id": "data.filters[0].filterJaql.contains"

 -Hari

[irismaessen]

That's the only thing I actually changed in my own script to make it work, yes. 
I'm wondering how giving a div an id that references a filter jaql passes the value to that filter jaql.

Probably it's not actually a div and I'm misinterpreting what I'm seeing in BloX -- I'm more comfortable with data modeling and formulas than with JS and CSS/HTML 🙂

Thank you again!

[irismaessen]

@harikm007 , if you can give a little bit more information, I would appreciate it.

The fix you proposed works very well, but it will only ever pass this information as a 'contains'. I can achieve the same effect for 'equals' with data.filters[0].filterJaql.equals but then the value the user typed in will not be passed to a filter action that is defined as 'contains'.

I was hoping to add either a tickbox or a second button that would take the user input and apply an 'equals' filter, thereby making it possible to search either an exact match or a containing match, but none of the other options available in the regular free text filter.

That means the problem is really the reverse -- there's not so much an issue that I can't pass to an 'equals' or a 'contains' filter if I  have the buttons for it; it's that I'd have to have two text input fields and that is very inelegant. Probably I will have to resort to widget scripting to make that work.