0 votes

Dear,

I need to create an automatic street lookup: after filling in country, city and postal code when you try to fill in the street you should get a list with suggestions.

I think extending the editview.js is a solution here.

Is this a good solution or is there a better one?

Thanks in advance!

asked in Efficy/ Client side by (174 points)

3 Answers

+1 vote
Best answer

Dear All,

As Anthony suggested I created new functions to create the street lookup. For the ones interested here is my custom editView.js file

define([
    'standard/views/editView',
    'base/constants'
], function (StandardEditView,Const) {
        StandardEditView.start = function() {
            /*Standard start function added __initStreetLookup*/
            this._initStreetLookup();
        },
    StandardEditView._initStreetLookup = function(){
        var entity = Model('entity');
        if(entity == 'Cont' || entity == 'Comp'){
            var selectTwo;
            selectTwo = $('#STREET').select2(this._getStreetLookupSelect2Json('STREET')).data('select2');
            selectTwo.clearSearch = function () { return false; };
            $('.select2-input', selectTwo.searchContainer).val($('#STREET').val()).width('100%');

        $('#STREET')
        .on('change', this._onChangeStreetLookup.bind(this))
        .on('select2-close', this._onCloseCityLookup);  
        }
    },
    // Provides json used by select2: init ajax and behaviours
    //CUSTOM for STREET LOOKUP
    StandardEditView._getStreetLookupSelect2Json = function (type) {
            return {
                containerCssClass:    'select2-input-lookup',
                minimumInputLength:   2,
                maximumSelectionSize: 1,
                multiple:             true,
                width:                '100%',
                ajax:                 {
                    url:          'dialog',
                    cache:        true,
                    quietMillis:  Const.INPUT_KEYUP_DELAY_SHORT,
                    data:         function (term) { return this._getStreetLookupAjaxData(term); }.bind(this),
                    results:      function (data) { return {results: data}; }
                },
                formatResult:         function (data) { return data.STRAAT; },
                initSelection :       function () { return false; }
            };
        },
        StandardEditView._onChangeStreetLookup = function (event) {
            var
                value,
                element = event.target,
                $element = $(element),
                selectTwo = $element.data('select2'),
                $selectTwoInput = $('.select2-input', selectTwo.searchContainer),
                $tagToRemove = $('li', selectTwo.selection).first(),
                newDatas = event.added;

            if (!newDatas) {
                value = $element.val();
            }

            // Update select2 input value
            $selectTwoInput.val(value);
            $selectTwoInput.trigger('keyup');
            if (newDatas) {
                // Remove multi-select <li> to have simple input render
                $tagToRemove.remove();
                // Update form inputs value
                $('#STREET').val(newDatas.STRAAT);
                // Show the selected value!
                $selectTwoInput.val(newDatas.STRAAT);
            } else {
                $element.val(value);
            }
        },
        StandardEditView._getStreetLookupAjaxData = function (term) {
            var
                params,
                val = term,
                countryId = parseInt($('#COUNTRY').val(), 10) || -1,
                postcode = $('#POSTCODE').val(),
                macro = 'JsonStreetLookup';
            if (val){
                params = {'_macrofile': 'MacroAjax', '_macro': macro, 'country': countryId, 'postcode':postcode, 'filter': val.toLowerCase()};
            }
            return params;
        };

    return StandardEditView;

});

JsonStreetLookup {[<%Delay(0)%>RunQuery(id='StreetQuery', store='1',
    SQL='select top 25 K_STRATEN, STRAAT from <#table name="LK_STRATEN"> where K_COUNTRY=:param1 and POSTCODE=:param2 and STRAAT like :param3"',
    param1='%%GetArgument("country")', param2='%%GetArgument("postcode")', param3='%<%GetArgument("filter")%>%')%><%Delay(0)%>GetDataGrid(query='StreetQuery', count=-1, norecords='', nolinefeed=T, templatetext=|[<#repeat>
    {
         "id":<#N>
        ,"K_STRATEN":"<#F=K_STRATEN;nospace=T>"
        ,"STRAAT":"<#F=STRAAT;jsontext=T;nospace=T>"
    }<#S=;SEPARATOR=,></#repeat>
]|)%>]}

Tom

answered by (174 points)
edited by
Nice work :)
I think the JsonStreetLookup is missing in your solution presentation, can you add it please?

And I think the post "Efficy 2014: How to create an associated field ?" also talk about this matter.
Yes it is indeed, I added the macro JsonStreetLookup
0 votes

Hey Tom,

If the street depends of the postal code, can't you make a master/detail on those 2 fields? If it's not possible, I think that you will be obliged to modify editview.js

Geoffrey

answered by (663 points)
0 votes

Hell Tom,

Extending the city/postcode functions will be too complicated for your needs since you just need to filter the street depending on the postcode.
I suggest you to create new functions, using small parts of codes from city/postcode functions.

Or as Geoffrey, use a master/detail mechanism but it will remove select2 functionalities (such as the typing filter)...

Do not hesitate to share your solution once working :)

Kind regards,
Anthony

answered by (968 points)
1,249 questions
1,519 answers
1,859 comments
328 users