Remove column xml uicomponent if condition is true

Question

I have 2 columns in xml with js component, but i want display each column if condition is true, so if precio_anterior is not empty and value is different to 0 show precio_anterior column if not, show precio_suscriptor:

This is my code:

/app/code/Vendor/Catalog/view/frontend/ui_component/widget_recently_viewed.xml

<column name="precio_suscriptor" component="Vendor_Catalog/js/product/precio_suscriptor" sortOrder="3" displayArea="details-area">
            <settings>
                <label translate="true">Precio Suscriptor</label>
                <bodyTmpl>Vendor_Catalog/product/precio_suscriptor</bodyTmpl>
            </settings>
        </column>
        <column name="precio_anterior" component="Vendor_Catalog/js/product/precio_anterior" sortOrder="3" displayArea="details-area">
            <settings>
                <label translate="true">Precio Anterior</label>
                <bodyTmpl>Vendor_Catalog/product/precio_anterior</bodyTmpl>
            </settings>
        </column>

/app/code/Vendor/Catalog/view/frontend/web/js/product/precio_suscriptor.js

define([
    'Magento_Ui/js/grid/columns/column',
    'Magento_Catalog/js/product/list/column-status-validator'
], function (Column, columnStatusValidator) {
    'use strict';

    return Column.extend({

        /**
         * @param row
         * @returns {boolean}
         */
        hasValue: function (row) {
            return "precio_suscriptor" in row['extension_attributes'];
        },

        /**
         * @param row
         * @returns {*}
         */
        getValue: function (row) {
            return row['extension_attributes']['precio_suscriptor'];
        },

        /**
         * @param row
         * @returns {*|boolean}
         */
        isAllowed: function (row) {
            return (columnStatusValidator.isValid(this.source(), 'precio_suscriptor', 'show_attributes') && this.hasValue(row) );
        }

    });
});

/app/code/Vendor/Catalog/view/frontend/web/js/product/precio_anterior.js

define([
    'Magento_Ui/js/grid/columns/column',
    'Magento_Catalog/js/product/list/column-status-validator'
], function (Column, columnStatusValidator) {
    'use strict';

    return Column.extend({

        /**
         * @param row
         * @returns {boolean}
         */
        hasValue: function (row) {
            return "precio_anterior" in row['extension_attributes'];
        },

        /**
         * @param row
         * @returns {*}
         */
        getValue: function (row) {
            return row['extension_attributes']['precio_anterior'];
        },

        /**
         * @param row
         * @returns {*|boolean}
         */
        isAllowed: function (row) {
            return (columnStatusValidator.isValid(this.source(), 'precio_anterior', 'show_attributes') && this.hasValue(row) );
        }

    });
});

Thanks!

Answer 1

I solve this adding a condition in precio_suscriptor.js and precio_anterior.js on isAllowed() method.

The code:

/app/code/Vendor/Catalog/view/frontend/web/js/product/precio_suscriptor.js

define([
    'Magento_Ui/js/grid/columns/column',
    'Magento_Catalog/js/product/list/column-status-validator'
], function (Column, columnStatusValidator) {
    'use strict';

    return Column.extend({

        /**
         * @param row
         * @returns {boolean}
         */
        hasValue: function (row) {
            return "precio_suscriptor" in row['extension_attributes'];
        },

        /**
         * @param row
         * @returns {*}
         */
        getValue: function (row) {
            return row['extension_attributes']['precio_suscriptor'];
        },

        /**
         * @param row
         * @returns {*|boolean}
         */
        isAllowed: function (row) {
            return (columnStatusValidator.isValid(this.source(), 'precio_suscriptor', 'show_attributes') && this.hasValue(row) && (typeof row['extension_attributes']['precio_anterior'] == 'undefined' || row['extension_attributes']['precio_anterior'] == '$0') );
        }

    });
});

/app/code/Vendor/Catalog/view/frontend/web/js/product/precio_anterior.js

define([
    'Magento_Ui/js/grid/columns/column',
    'Magento_Catalog/js/product/list/column-status-validator'
], function (Column, columnStatusValidator) {
    'use strict';

    return Column.extend({

        /**
         * @param row
         * @returns {boolean}
         */
        hasValue: function (row) {
            return "precio_anterior" in row['extension_attributes'];
        },

        /**
         * @param row
         * @returns {*}
         */
        getValue: function (row) {
            return row['extension_attributes']['precio_anterior'];
        },

        /**
         * @param row
         * @returns {*|boolean}
         */
        isAllowed: function (row) {
            return (columnStatusValidator.isValid(this.source(), 'precio_anterior', 'show_attributes') && this.hasValue(row) && (typeof row['extension_attributes']['precio_anterior'] !== 'undefined' && row['extension_attributes']['precio_anterior'] !== '$0') );
        }

    });
});

Thanks!