How to implement cascading select boxes with REST Countries API in Joget DX8?

 
1
0
-1

Hello!

I am using Joget DX8 and need help with filtering lists based on country selection.

I have two select boxes:

  1. The first select box loads all countries from: https://restcountries.com/v3.1/all
  2. The second select box should load a filtered list based on the region code selected in the first select box from: https://restcountries.com/v3.1/region/{region}

Example: https://restcountries.com/v3.1/region/asia

I'm not sure how to pass the region value when users select from the first select box to reload the list in the second select box. I have set up the select box trigger.

Could you please guide me on how to implement this?

Best regards

    CommentAdd your comment...

    1 answer

    1.  
      2
      1
      0

      Hi! I understand you're trying to filter regions based on country selection. Here's what I suggest:

      When you call /countries, it returns all countries with their IDs / some unique identifier. You can then call /regions (which returns country_id) and use this country_id as a grouping column for your region select box. Just make sure to enable these key options in your form:

      • Turn on "Use AJAX for Cascade Options?"
      • Set the "Field Id to Control Available Options Based on Grouping" to the country field and map it in the Grouping column. 

      This will create an automatic cascade effect - the region select box will only show options associated with the selected country based on the ID mapping. It's more reliable than trying to chain external API calls.


      Refer the attached Joget App for your reference. Hope this helps!

      APP_jsonApiFormOptions-1-20241204060527.jwa

      1. nghiant13

        Thank you very much Varnaa , your example app helped me better understand Joget. I will apply it to cases where the API returns all data.

        However, in my example, the API needs a parameter for filtering. https://restcountries.com/v3.1/regions => doesn't work This API requires a single parameter (region from API: https://restcountries.com/v3.1/all which is selected by users to filter) Example: When user selects region: Asia The API will reload with: https://restcountries.com/v3.1/region/Asia

        If I use custom HTML script to reload when selecting from country select, it works, but this approach isn't optimal and there will be data returned when viewing details:

        $.ajax({
                url: `https://restcountries.com/v3.1/region/${region}`,
                method: 'GET',
                success: function(countries) {
                    countrySelect.empty();
                    countrySelect.append('<option value="">Select country</option>');
                    countries.sort((a, b) => a.name.common.localeCompare(b.name.common));
                    countries.forEach(country => {
                        countrySelect.append(
                            `<option value="${country.name.common}">${country.name.common}</option>`
                        );
                    });
                    countrySelect.trigger('change');
                },
                error: function() {
                    countrySelect.empty();
                    countrySelect.append('<option value="">Error loading country list</option>');
                }
            });

        Do you have any ideas?

      2. Varnaa

        Maybe you can try a different source of data with all the details. Refer: https://github.com/lukes/ISO-3166-Countries-with-Regional-Codes

        You can use the json file to populate your select box and then use the inbuilt grouping options. 

      3. nghiant13

        Thank you very much ! Varnaa  ^_^

        I understand, I can get the country data, but in my case I need to use 2 select boxes to filter for a different purpose. The API requires a parameter to be passed in order to retrieve the data. Is there any way in Joget to get the data form to pass as I want, is there any way to get form data, besides using custom HTML to handle scripts?

        <script>
        $(document).ready(function() {
            const regionSelect = FormUtil.getField("select_region");
            const countrySelect = FormUtil.getField("select_child");
            const addressField = FormUtil.getField("address");

            function setAddressReadonly() {
                $("input[name='address']").prop('readonly', true);
                $("input[name='address']").prop('disabled', true);
            }
            setAddressReadonly();

            function loadCountriesByRegion(region) {
                if (!region) return;
                
                countrySelect.empty();
                countrySelect.append('<option value="">Đang tải...</option>');
                
                $.ajax({
                    url: `https://restcountries.com/v3.1/region/${region}`,
                    method: 'GET',
                    success: function(countries) {
                        countrySelect.empty();
                        countrySelect.append('<option value="">Chọn quốc gia</option>');
                        
                        countries.sort((a, b) => a.name.common.localeCompare(b.name.common));
                        
                        countries.forEach(country => {
                            countrySelect.append(
                                `<option value="${country.name.common}">${country.name.common}</option>`
                            );
                        });
                        
                        countrySelect.trigger('change');
                    },
                    error: function() {
                        countrySelect.empty();
                        countrySelect.append('<option value="">Lỗi tải danh sách quốc gia</option>');
                    }
                });
            }
            
            
            regionSelect.on('change', function() {
                const selectedRegion = $(this).val();
                if (selectedRegion) {
                    loadCountriesByRegion(selectedRegion);
                } else {
                    countrySelect.empty();
                    countrySelect.append('<option value="">Vui lòng chọn vùng trước</option>');
                }
                updateAddress();
            });
            
            countrySelect.on('change', function() {
                updateAddress();
            });
            
            function updateAddress() {
                
                $("input[name='address']").prop('readonly', false);
                $("input[name='address']").prop('disabled', false);
                
                const region = regionSelect.val();
                const country = countrySelect.val();
                
                if (region && country) {
                    const formattedAddress = `${country}, ${region}`;
                    addressField.val(formattedAddress).trigger("change");
                } else {
                    addressField.val('').trigger("change");
                }

                setAddressReadonly();
            }
        });
        </script>

      4. Varnaa

        Sorry, I can't think of a better alternative for your current setup. However, if you're planning to reuse this country/region/address functionality across multiple apps in your platform, you might want to consider building a separate reference app and importing the data into your database. This way, you can reuse it across all apps without relying on external APIs.

        And hey, don't worry too much about using custom HTML in Joget - it's completely fine! After all, Joget is a low-code platform, not a no-code one, so sometimes custom code is the best way to get exactly what you need.

        If you found this answer helpful, please upvote and accept it! Let me know if you need any other help.

      5. nghiant13

        Thank you for your support Varnaa  Grinning face with smiling eyes

      CommentAdd your comment...