community Alteryx IO MyAlteryx
alteryx Community

Alteryx IO Discussions

Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.
SOLVED

How to filtering Bool and Numeric type fields in FieldSelector of html gui sdk?

flying008
15 - Aurora
‎02-06-2025 07:30 PM

Dear all and @aneeshnazar & @tlarsen7572 , hello!

 

I am writing a plugin for html gui now. One problem is that I need to filter out Bool and Numeric type fields for DropDown to select, but the default field type of FieldSelector is only "All" (the syntax is similar to fieldType: 'All'). I use the following syntax and it directly causes the GUI to fail to display (fieldType: 'Bool | Numeric').

 

In the link https://help.alteryx.com/developer/APIReferenceDocumentation/class/gui/data-items/FieldSelector.jsx~..., it is introduced that there is a public static setCustomFieldFilter(newFieldFilter: function) that can be used to customize the filter, but there is no specific syntax example, so I don't know how to write the code to achieve the above requirements.

 

I attach part of the GUI.html below. Please help me give the custom function code to achieve the filtering effect. Thank you!

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
    </script>

</head>
<body>

    <form>
        <div id="MapUid">

            <ayx data-ui-props="{type: 'DropDown'}" data-item-props="{dataName: 'FieldSelect', fieldType: 'Bool', dataType: 'FieldSelector', anchorIndex:'0', connectionIndex:'0'}"></ayx>
            <!-- ##########
            
            Please help me with the code syntax for filtering Bool and Numeric type fields in FieldSelector of html gui sdk. 
            
            #########-->
        </div>
    </form>

    <script type="text/javascript">
        window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
            try {

            } catch (err) {
                // nothing to do here either
            };

        window.Alteryx.Gui.AfterLoad = function (manager, AlteryxDataItems) {
        }

        window.Alteryx.Gui.Annotation = function (manager) {
            var annotation = "HTML GUI sDK";
            return annotation;
        }

    </script>
</body>
</html>

 

 

Reply
0 Likes

Accepted SolutionSolved! Go to Solution.

4 REPLIES 4
JarrodT
Alteryx
Alteryx
‎02-07-2025 09:54 AM

I just want to point out that this is referencing the old SDK, which is using outdated technology. It is recommended that new tools be converted to and/or created in the V2 Python SDK instead. It offers a lot more functionality on both the front end and back end. Platform-SDK-Quickstart-Guide 

 

Having said that, to answer your question, the documentation states: 

Function that changes the allowed field types for the data item by specifying a filter. Possible Filters: All, NoBinary, NoBlob, NoSpatial, String, Date, DateOrTime, StringOrDate, NumericOrString, Numeric, SpatialObj, Bool, Time, and Blob. 

 

I don't see an option for "BoolAndNumeric", and it doesn't look like there is a way to specify multiple values.

Reply
0 Likes
flying008
15 - Aurora
‎02-07-2025 07:37 PM

Hi, @JarrodT 

 

For some reason, I have to use this version of the SDK, so as you can see, the optional value of the fieldType parameter itself does not provide the 'BoolAndNumeric' item, but it may be possible to use the custom function setCustomFieldFilter(newFieldFilter: function) to achieve the need to filter both Bool and Numeric field columns at the same time. I hope to get your code help. Thanks again!

Reply
0 Likes
JarrodT
Alteryx
Alteryx
‎02-11-2025 11:24 AM

@flying008 , I'd love to find out more about why v2 can't be used. It's more up to date and flexible, especially for these use cases. 

 

I still want to get your issue resolved, though. After tinkering around with the script a bit more, i was able to filter the field types of "bool" and all numeric types. Let me know if this works for you. Thanks!

 

<script type="text/javascript">
    window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
        console.log("BeforeLoad: GUI is initializing...");
    };

    window.Alteryx.Gui.AfterLoad = function (manager) {
        console.log("AfterLoad: GUI has loaded, attempting to filter FieldSelector...");
        function applyFieldFilter() {
            var fieldSelector = manager.getDataItem('FieldSelect');
            var fields = fieldSelector.getFields();  
            fieldSelector.setCustomFieldFilter(function (field) {
                return ["Bool", "Byte", "Int16", "Int32", "Int64", "FixedDecimal", "Float", "Double"].includes(field.strType);
            });
        }

        setTimeout(applyFieldFilter, 200);
    };

    window.Alteryx.Gui.Annotation = function (manager) {
        return "Filtered FieldSelector for Boolean & Numeric fields";
    };
</script>

 

Reply
flying008
15 - Aurora
‎02-12-2025 12:42 AM

Hi, @JarrodT 

 

Thank you very much! It works fine! 😁
BTW, the reason why I am still using this SDK version is because of backward compatibility, that is, the plugin must be able to run normally on different versions, including old versions.

You are a master! 

Reply
0 Likes