Plugin Backend UI, how to "strike/line-through" unpublished relations in object grids?

Hi,

I’d like to show the status for Many-To-One & Many-To-Many relations in object grid(s) by adding a line-through the unpublished related object references. Right now, the user has to click on the relation to display a modal where the unpublished status of the related objects is shown.

Here https://github.com/pimcore/pimcore/blob/master/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToOneRelation.js#L245 I found the way Pimcore does it, but I am not skilled enough with JS & Ext.js, and Pimcore’s implementation of it, to know how exactly it works and how could I replicate this behaviour for object grids to patch it in / to send a merge request.

So I went with Plugin Backend UI extension and got here:

postOpenObject: function (object, type) {
    if (type !== 'folder') {
        return false;
    }
    object.search.getLayout().on('add', function (el, item) {
        var grid = object.search.grid;
        console.log(grid); // items[0].all.elements[0]
    });
}

I am able to access the dataStore and its items / objects, but don’t know how to access only grid columns “of type relation” and then how to change their style based on the bound data (isPublished), or even how to get the grid row/component via the dataStore item and vice-versa.

There is probably much better way of doing this too, perhaps a grid event I could hook onto?

Related pull request (I think): https://github.com/pimcore/pimcore/pull/3164

Any help is greatly appreciated, thank you!

For anyone interested, this is what I ended up doing. It’s not pretty and probably a really bad way of achieving what I wanted, but it works.

// Highlight unpublished object relations in grids with a "strike-through" style.
object.search.getLayout().on('add', function (el, item) {
    // For current Pimcore unpublished object style, see:
    // web/bundles/pimcoreadmin/js/pimcore/object/tags/abstract.js::fullPathRenderCheck()
    let style = 'text-decoration: line-through; color: #777;';
    // Formatting enabled only for these layout types.
    let types = ['manyToOneRelation', 'manyToManyRelation'];
    let splitBy = '<br />';
    object.search.grid.columns.forEach(function (column, index) {
        let config = column.getInitialConfig();
        if ('layout' in config && types.includes(config.layout.type)) {
            let originalRenderer = column.renderer;
            // "Extend" the original Pimcore renderer.
            column.renderer = function (key, value, metaData, record) {
                let keys = [];
                if (key) {
                    keys = Array.isArray(key) ? key : [
                        // The object does not contain class name, so we
                        // insert an empty string to preserve key order.
                        [key.id, key.path, key.type, '', key.published]
                    ];
                }
                let cellValue = originalRenderer(key, value, metaData, record);
                if (cellValue) {
                    let parts = cellValue.split(splitBy);
                    let partsFormatted = [];
                    for (let index = 0; index < parts.length; index++) {
                        let isPublished = keys[index][4];
                        let part = isPublished === true ? parts[index] : '<span style="' + style + '">' + parts[index] + '</span>';
                        partsFormatted.push(part);
                    }
                    cellValue = partsFormatted.join(splitBy);
                }
                return cellValue;
            }
        }
    });
});