How to add condition builder on UI Page?

[gratziela]

Hi,

I created an UI page and I wanted to add the condition builder on it.

I read this article Condition Builder   and added these lines of code to my UI page:

Test 1:

<g:ui_element table="sys_script" field="collection" id="0e66a301dd2003003399d83d70be0205"></g:ui_element>  

<g:ui_element table="sys_script" field="filter_condition" id="8a66a301dd2003003399d83d70be0211"></g:ui_element>

Test 2:

<g:ui_element table="x_doitw_msteams_ih_condition_builder" field="collection" id="c3a5264e4f13030009fdb5e18110c795"></g:ui_element>  

<g:ui_element table="x_doitw_msteams_ih_condition_builder" field="condition" id="6b65a24e4f13030009fdb5e18110c717"></g:ui_element>

As you see, I tested it both with sys_script table and my custom scoped table (called x_doitw_msteams_ih_condition_builder) and in the first case it works, but in the second one - it doesn't.

My custom table is in a scoped application. It has a field of type "conditions" called "condition" and a field of type "table name" called "parent_table".

The condition field uses as a dependent field "parent_table" field.

I also want to make the table static. I don't want the user to be able to change different table. I just want he/she to be able to create a filter for my specific table.

That is why I added as a default value of "parent_table" field the name of my table.

I don't know is there a way not to use the first (table selection) input from the condition builder. For example, to autopopulate it and hide it or just to remove it (see on the picture).

Thanks in advance. If somebody has an advice, I will be glad to try it.

[User159565]

Hi Deepak,

Great solution! I've leveraged parts of your code, and was able to set the default table selector and retrieve fields for the condition builder. The struggle I'm running into now is executing/setting the filter when a user clicks a button. Do you have any insight on how I can achieve this?

Appreciate any help you can provide!

[Deepak Ingale1]

Hi Tachai,

Glad to see it helped you !!!

You can get the filter by referring to artcle

Condition Builder    

I have also referred to below article to set the records in left slush bucket which we get via filter.

Mini-Lab: Add a Slush Bucket Control to a Dialog Box

[Community Alums]

Hi Deepak,

It works when I am using the sys_script table but doesnt work for other tables. In my case, in the UI page, i wanted to set the table to alm_asset & add the filter conditions with the fields in the asset table. I have below code written but it doesnt work. Can you please assist?

HTML Section:

<div style=""><g:ui_element table="alm_asset" field="collection" id="93e1da65dbc200102d9f7b3868961981"></g:ui_element> </div>
<g:ui_element table="alm_asset" field="u_filter_condition" id="ad63947e2f0ac510c085d0e62799b693"></g:ui_element>

On Load Event in Client Script:

document.getElementById("alm_asset.collection").value = "alm_asset";
//document.getElementById("select2-chosen-1").innerHTML = "Asset [alm_asset]";
loadFilterColumns('alm_asset.u_filter_condition.collection', 'u_filter_condition');

[Jason Niu]

Hey guys,

Not sure whether you guys can see it, but still want try my luck. I have the same request adding a filter on an ui page, the filter need control a slushbucket on the page. I'm stuck when I try to add the condition builder to the ui page.

The issue is

The filter input fields is missing in my case. No responses on clicking Add Filter Condition button as well.

Please help.......

I tried the following things:

The codes in HTML of the ui page

<g:ui_element table="sys_script" field="collection" id="6bba30024f1002005c485535f310c792"></g:ui_element>

<g:ui_element table="sys_script" field="filter_condition" id="efba30024f1002005c485535f310c796"></g:ui_element>

and  the javascript in html as well as in client script field in the ui page without <script> tags

<script>

addLoadEvent( function() {

document.getElementById("sys_script.collection").value = "incident";

document.getElementById("select2-chosen-1").innerHTML = "incident [incident]";

document.getElementById("s2id_sys_script.collection").hide();

loadFilterColumns('sys_script.filter_condition', 'collection');

});

</script>

I got error message in console saying

js_includes_last_doctype.jsx?v=04-25-2018_0908&lp=Thu_Feb_15_17_05_15_PST_2018&c=4_90:4797 Uncaught ReferenceError: GlideConditionsHandler is not defined
at createCondFilter (js_includes_last_doctype.jsx?v=04-25-2018_0908&lp=Thu_Feb_15_17_05_15_PST_2018&c=4_90:4797)
at getFilterColumnsResponse (js_includes_doctype.jsx?v=04-25-2018_0908&lp=Thu_Feb_15_17_05_15_PST_2018&c=4_90:12443)
at processReqChange (js_includes_doctype.jsx?v=04-25-2018_0908&lp=Thu_Feb_15_17_05_15_PST_2018&c=4_90:1046)
at XMLHttpRequest.req.onreadystatechange (js_includes_doctype.jsx?v=04-25-2018_0908&lp=Thu_Feb_15_17_05_15_PST_2018&c=4_90:1013)

Any suggestions or help would be much appreciated. 🙂

Thanks guys

[davidgilmore]

You need to include the following line in your  UI Page HTML:

<g:requires name="elements/element_conditions.jsx"></g:requires> 

(Notice that without this line, using the 'Try it' UI action on your UI page entry, no error is thrown.  The script is dynamically included)

Then in the UI page client script, you access the filter with getFilter('sys_script.filter_condition')