{"id":4426,"date":"2023-01-30T15:48:16","date_gmt":"2023-01-30T15:48:16","guid":{"rendered":"https:\/\/himbap.com\/blog\/?p=4426"},"modified":"2023-01-31T06:12:55","modified_gmt":"2023-01-31T06:12:55","slug":"filtering-gallery-using-radio-button","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=4426","title":{"rendered":"Filtering Gallery using Radio Button"},"content":{"rendered":"

Requirement<\/strong>
\nImplementing Gallery data filtering using radio button.<\/p>\n

Details<\/strong>
\nlet’s say we have requirement to filter gallery data based on the selection of the radio button like below
\n\"filterapp1\"<\/a><\/p>\n

To implement filter, I am using collection here and Dataverse Account entity as data source where I have records of different types (using Relationship Type attribute for customer category) so first let’s create two collection, one which will hold active accounts and another one where we will store filtered accounts based on the radio selection.
\n\"filterapp2\"<\/a><\/p>\n

Now let’s place a radio button and change it’s Layout property to Horizontal and set Items<\/strong> property like below
\n\"filterapp3\"<\/a><\/p>\n

Now let’s place a gallery control and set our second collection under Items <\/strong>property
\n\"filterapp4\"<\/a><\/p>\n

By default you won’t see any data in the gallery control, to load data initially we can run OnStart <\/strong>manually like below
\n\"filterapp5\"<\/a><\/p>\n

Now let’s place below expression Onselect <\/strong>property of radio control<\/p>\n

\r\nIf(\r\n    currentfilter.Selected.Value = 1,\r\n    ClearCollect(\r\n        currentCollects,\r\n        Filter(\r\n            ActiveAccountsCols,\r\n            'Relationship Type' = 'Relationship Type (Accounts)'.Customer\r\n        )\r\n    ),\r\n    currentfilter.Selected.Value = 2,\r\n    ClearCollect(\r\n        currentCollects,\r\n        Filter(\r\n            ActiveAccountsCols,\r\n            'Relationship Type' = 'Relationship Type (Accounts)'.Investor\r\n        )\r\n    ),\r\n    currentfilter.Selected.Value = 3,\r\n    ClearCollect(\r\n        currentCollects,\r\n        Filter(\r\n            ActiveAccountsCols,\r\n            'Relationship Type' = 'Relationship Type (Accounts)'.Partner\r\n        )\r\n    )\r\n)\r\n<\/pre>\n
Finally let’s setup “Customer” under the Default <\/strong>property
\n\"filterapp6\"<\/a><\/p>\n
Now filtering should work like below !
\n\"filterresult\"<\/a><\/p>\n
Summary<\/strong>
\nThis is how we can filter gallery control.<\/p>\n
Hope it will help someone !!
\nKeep learning and Keep Sharing !!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Requirement Implementing Gallery data filtering using radio button. Details let’s say we have requirement to filter gallery data based on the selection of the radio button like below To implement filter, I am using collection here and Dataverse Account entity as data source where I have records of different types (using Relationship Type attribute for customer category) so first let’s… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[817,21,402,728],"tags":[1015,1016,1017,1014],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4426"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4426"}],"version-history":[{"count":7,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4426\/revisions"}],"predecessor-version":[{"id":4445,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4426\/revisions\/4445"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}