Customization in SuiteCRM 7 is not working in SuiteCRM 8

[waraikobuot]

Hello Everyone,

I customize my address field using select2 js/Ajax. Now my select 2 JS/Ajax is not working anymore on SuiteCRM 8.

In SuiteCRM 7

In SuiteCRM 8

How did I implement on Suite 7!
First, I extends Account Edit View by adding view.edit.php in custom/modules/Accounts/views/

<?php

require_once 'modules/Accounts/views/view.edit.php';

class CustomAccountsViewEdit extends AccountsViewEdit
{
    public function display()
    {
        $this->setDefaults();

        parent::display(); // TODO: Change the autogenerated stub

        $this->assignVariables();
    }

    /*
     * Assign Variables and Display TPLs
     * */
    protected function assignVariables()
    {
        $this->ss->display('custom/modules/Accounts/tpls/Address.tpl');
    }
}

Second, I created a custom tpl in custom/modules/Accounts/tpls/Address.tpl

<link rel="stylesheet" href="custom/include/javascript/select2/dist/css/select2.min.css" type="text/css">
<script src="custom/include/javascript/select2/dist/js/select2.min.js"></script>
<script>
    {literal}
    var locationViewEdit = {
        init: function () {
            locationViewEdit.attachEvents();
            locationViewEdit.initSelect2();
            locationViewEdit.readOnlyFields();
            locationViewEdit.copyAddress();
        },
        attachEvents: function () {
            $(document).on('select2:open', () => {
                document.querySelector('.select2-search__field').focus();
            });

            $(document).on("change", "#shipping_address_state", function () {
                $('#shipping_address_city')
                    .val('')
                    .trigger('change')
                    .html('');

                $('#shipping_address_barangay')
                    .val('')
                    .trigger('change')
                    .html('');
                locationViewEdit.copyAddress();
            });

            $(document).on("change", "#billing_address_state", function () {
                $('#billing_address_city')
                    .val('')
                    .trigger('change')
                    .html('');

                $('#billing_address_barangay')
                    .val('')
                    .trigger('change')
                    .html('');
            });

            $(document).on("change", "#shipping_address_city", function () {
                $('#shipping_address_barangay')
                    .val('')
                    .trigger('change')
                    .html('');

                locationViewEdit.copyAddress();
            });

            $(document).on("change", "#billing_address_city", function () {
                $('#billing_address_barangay')
                    .val('')
                    .trigger('change')
                    .html('');
            });

            $(document).on("change", "#shipping_address_barangay", function () {
                locationViewEdit.copyAddress();
            });

            YAHOO.util.Event.addListener("same_as_business_address", "change", locationViewEdit.readOnlyFields);
            YAHOO.util.Event.addListener("shipping_address_country", "change", locationViewEdit.copyAddress);
            YAHOO.util.Event.addListener("shipping_address_postalcode", "change", locationViewEdit.copyAddress);
            YAHOO.util.Event.addListener("shipping_address_street", "change", locationViewEdit.copyAddress);
        },
        /*
        * Make fields readonly
        * */
        readOnlyFields: function () {
            if ($('#same_as_business_address:checked').length) {
                $("#billing_address_street").attr({readonly: true});
                $("#billing_address_city").attr({readonly: true, disabled: true});
                $("#billing_address_state").attr({readonly: true, disabled: true});
                $("#billing_address_barangay").attr({readonly: true, disabled: true});
                $("#billing_address_postalcode").attr({readonly: true});
                $("#billing_address_country").attr({readonly: true});
                locationViewEdit.copyAddress();
            } else {
                $("#billing_address_street").removeAttr('readonly');
                $("#billing_address_city").removeAttr('readonly');
                $("#billing_address_city").removeAttr('disabled');
                $("#billing_address_state").removeAttr('readonly');
                $("#billing_address_state").removeAttr('disabled');
                $("#billing_address_barangay").removeAttr('readonly');
                $("#billing_address_barangay").removeAttr('disabled');
                $("#billing_address_postalcode").removeAttr('readonly');
                $("#billing_address_country").removeAttr('readonly');
            }
        },
        /*
        * Copy Business Address to Billing Address
        * */
        copyAddress: function () {
            if (!$('#same_as_business_address:checked').length) return;

            $(['street', 'state', 'city', 'barangay', 'postalcode', 'country']).each(function (i, field) {
                var value = $('#shipping_address_' + field).val();
                value = value || '';
                
                if (['state', 'city', 'barangay'].indexOf(field) > -1) {
                    $('#billing_address_' + field).val(value).trigger('change').html('<option value="' + value + '">' + value + '</option>');
                } else {
                    $('#billing_address_' + field).val(value);
                }
            });
        },
        initSelect2: function () {
            // PROVINCE
            $('#billing_address_state').replaceWith('<select name="billing_address_state" id="billing_address_state"><option value="' + $('#billing_address_state').val() + '">' + $('#billing_address_state').val() + '</option></select>');
            $('#billing_address_state').select2({
                placeholder: 'Province',
                allowClear: true,
                width: '90%',
                ajax: {
                    url: "index.php?entryPoint=addressDirectoryEntryPoint&type=province",
                    type: 'POST',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                        };
                    }
                }
            });

            $('#shipping_address_state').replaceWith('<select name="shipping_address_state" id="shipping_address_state"><option value="' + $('#shipping_address_state').val() + '">' + $('#shipping_address_state').val() + '</option></select>');
            $('#shipping_address_state').select2({
                placeholder: 'Province',
                allowClear: true,
                width: '90%',
                ajax: {
                    url: "index.php?entryPoint=addressDirectoryEntryPoint&type=province",
                    type: 'POST',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                        };
                    }
                }
            });

            // CITY
            $('#billing_address_city').replaceWith('<select name="billing_address_city" id="billing_address_city"><option value="' + $('#billing_address_city').val() + '">' + $('#billing_address_city').val() + '</option></select>');
            $('#billing_address_city').select2({
                placeholder: 'City',
                allowClear: true,
                width: '90%',
                ajax: {
                    url: "index.php?entryPoint=addressDirectoryEntryPoint&type=city",
                    type: 'POST',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            province: $('#billing_address_state').val(),
                            term: params.term,
                        };
                    }
                }
            });

            $('#shipping_address_city').replaceWith('<select name="shipping_address_city" id="shipping_address_city"><option value="' + $('#shipping_address_city').val() + '">' + $('#shipping_address_city').val() + '</option></select>');
            $('#shipping_address_city').select2({
                placeholder: 'City',
                allowClear: true,
                width: '90%',
                ajax: {
                    url: "index.php?entryPoint=addressDirectoryEntryPoint&type=city",
                    type: 'POST',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            province: $('#shipping_address_state').val(),
                            term: params.term,
                        };
                    }
                }
            });

            // BARANGAY
            $('#billing_address_barangay').replaceWith('<select name="billing_address_barangay" id="billing_address_barangay"><option value="' + $('#billing_address_barangay').val() + '">' + $('#billing_address_barangay').val() + '</option></select>');
            $('#billing_address_barangay').select2({
                placeholder: 'Barangay',
                allowClear: true,
                width: '90%',
                ajax: {
                    url: "index.php?entryPoint=addressDirectoryEntryPoint&type=barangay",
                    type: 'POST',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            province: $('#billing_address_state').val(),
                            city: $('#billing_address_city').val(),
                            term: params.term,
                        };
                    }
                }
            });

            $('#shipping_address_barangay').replaceWith('<select name="shipping_address_barangay" id="shipping_address_barangay"><option value="' + $('#shipping_address_barangay').val() + '">' + $('#shipping_address_barangay').val() + '</option></select>');
            $('#shipping_address_barangay').select2({
                placeholder: 'Barangay',
                allowClear: true,
                width: '90%',
                ajax: {
                    url: "index.php?entryPoint=addressDirectoryEntryPoint&type=barangay",
                    type: 'POST',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            province: $('#shipping_address_state').val(),
                            city: $('#shipping_address_city').val(),
                            term: params.term,
                        };
                    }
                }
            });
        }
    }

    locationViewEdit.init();
    {/literal}
</script>
<style>
    {literal}
    .select2-selection {
        -webkit-box-shadow: 0;
        box-shadow: 0;
        background-color: #fff;
        border: 0;
        border-radius: 0;
        color: #555555;
        font-size: 14px;
        outline: 0;
        min-height: 38px;
        text-align: left;
    }

    .select2-selection__rendered {
        margin: 4px;
    }

    .select2-selection__arrow {
        margin: 4px;
    }

    {/literal}
</style>

Last, copy the select2 js files to my custom/includes folder

I hope someone can help me. I’ve been reading the documentation for Suite CRM 8 customization but still This page is under construction..

[pgr]

You can’t use code for the old “legacy” views on the new views.

[waraikobuot]

Hi @pgr , What do you mean by “You can’t use code for the old “legacy” views on the new view”? You mean my old custom views in Suite CRM 7 are not compatible with Suite 8?

[pgr]

Yes, it’s an entirely different UI based on Angular.

You can still re-enable legacy views module by module. Search these forums for

module_routing.yaml

[waraikobuot]

Hi @pgr , Thank you for your quick response; I will check this tomorrow. By the way, I have another question: if the old views customization will not work on Suite 8, then how are we going to extend our custom view in v8 since I couldn`t find any guide on how to implement it?

[pgr]

My advice is to stay in v7 until there is documentation on this, and you have all your customizations properly migrated.

[Linx]

@pgr do you think it is necessary to rebuild js if we change this module_routing.yaml?

because I changed for the contact form, but nothing changed.

[pgr]

More info here:

SuiteCrm 8: problems with customizations

This is trickier than you would think. Here’s my personal instructions to activate legacy mode on a module. It does work… go to: config/services/module/module_routing.yaml then repair→rebuild in admin ./bin/console cache:clear from cli First of all, if you want it to use the legacy module set it to “false”, it seems counterintuitive as it’s called “legacy module routing” you’d expect it to be the opposite. ALSO… all the module names in the file are in lower case ie: “accounts” when they a…