v10.3.0 - Error when using the Preview pane in Resolve Conflicts drawer

When I'm in the Resolve Conflicts drawer and I try to click the Preview button, there is an error in the Network tab.

When looking at the error itself in the Networks tab:

I was able to find the code that is related to this, it seems that the clients/base/views/resolve-conflicts-list/resolve-conflicts-list.js
builds the Resolve Conflicts drawer. It appends the "-database" to the id of the record. This causes the error above.

/**
 * Populate the list with data from the client and the server.
 * @private
 */
_buildList: function() {
    ...
    // set IDs to be different so that backbone collection can recognize that they're not the same
    copyOfModelToSave.set('id', originalId + '-client');
    modelInDb.set('id', originalId + '-database');
    ...
},

Is there any workaround or any way to prevent this? Thanks!

0 Vamshi S over 3 years ago

Hi Jennleigh Villanueva,

You can refer _initPreviewPanel function in clients/base/layouts/preview/preview.js. This function will initialize the preview panel by loading all the components required and data for preview panel.

As the data required for preview panel is already passing from the resolve-conflicts layout. There is not need for re-loading data again. You can extend this file to custom/clients/base/layouts/preview/preview.js and put a condition for this two line this.context.reloadData({resetCollection: false}) and this.context.loadData(). If model.get('id') has client or database do not let them load data.

 _initPreviewPanel: function(model, collection) {
        if (!this._isActive()) {
            return;
        }

        var attrs = {
            model: model,
            collection: collection,
            module: model.module,
            modelId: model.id
        };
        
        var hasComponents = !_.isEmpty(this._components);
        var modelChanged = this.context.get('module') !== model.module;

        if (!hasComponents || modelChanged) {
            this._disposeComponents();
            this.context.set(attrs);
            this.initComponents(this._componentsMeta, this.context, model.module);
            
            if (hasComponents) {
                this.context.reloadData({resetCollection: false});
            } else {
                this.context.loadData();
            }
            this.render();
        } else {
            this.context.set(attrs);
            this.context.reloadData({resetCollection: false});
        }

        this.showPreviewPanel();
        app.events.trigger('list:preview:decorate', model, this);
    },

Hope this may help you
Vamshi S