How can I customize the display of the list of Articles inside the MODX manager?

Everettg_99 — Feb 06, 2013, 04:15 PM

I understand that the Articles Container has lots of options for formatting the articles and the list of articles to the outside world, but how can we customize the list of articles INSIDE the MODX manager? For example, if we wanted to include a TV value as a column in the article list, is that possible? See screenshot: http://www.screencast.com/t/yc2bcG2wJVEF

Seems that would be a huge benefit for the AddOn. I was pointed to MIGX to help solve this: http://rtfm.modx.com/display/ADDON/MIGXdb.Manage+Child-Resources+in+a+grid-TV+with+help+of+MIGXdb

but I was hoping for a way to do this without the overhead of another add-on. Anyone have any ideas?

Re: How can I customize the display of the list of Articles inside the MODX manager?

neoziox — Mar 03, 2017, 05:47 PM

Apparently, this tip no longer works with Articles 1.7.11

Someone knows?

Re: How can I customize the display of the list of Articles inside the MODX manager?

ojchris — May 08, 2013, 11:34 AM

very useful requirement. Thanks for sharing what you achieved on it so far.

Re: How can I customize the display of the list of Articles inside the MODX manager?

Everettg_99 — Feb 08, 2013, 02:39 PM

Updating the sorting seems problematic as well... the sort direction in the Advanced Settings seem to be ignored (in v. 1.6.3)...

In my example, I could force the sorting by adding this to the prepareQueryBeforeCount() function:

$c->sortby('EventStart.value','DESC');

Re: How can I customize the display of the list of Articles inside the MODX manager?

Everettg_99 — Feb 08, 2013, 01:36 PM

I'm going to document my own grizzly dissection of the Articles functionality...

First, Article's HTML in the MODX manager is generated by Ext JS and can be found inside the assets/components/articles/js/container/container.articles.grid.js file. I've got a backup of that file, but basically I've been editing it and clearing my browser cache repeatedly to see the effects that certain edits have.

My goal is to show a TV in the summary column when viewing articles inside the manager.

I've documented a way to hack the format of columns displayed in the MODX manager by displaying the year as part of the date: http://forums.modx.com/thread/82266/list-of-documents-in-articles-container-display-pubdate-with-year#dis-post-454385

But that deals with PRIMARY fields, not the SECONDARY fields (a.k.a TVs). So I started hacking inside the core/components/articles/processors/article/getlist.class.php to see what was going on. By logging the row objects, I verified that only some of the available TVs were being included in the selection:

    public function prepareRow(xPDOObject $object) {
        $resourceArray = parent::prepareRow($object);
		$this->modx->log(1,print_r($resourceArray,true));

Specifically, this showed a couple custom fields that would not be selected in a standard getObject() method:

createdby_username
tags

By perusing through the rest of the getlist.class.php file, I could see where the magic was happening (just a bit upstream): inside the prepareQueryAfterCount() and prepareQueryBeforeCount() functions. So in my case, I want to show data from my custom field named "eventstart" -- it's a date field that I want to display instead of the hard-coded "publishedon" date column. So I make edits in 2 places to gather up data from my "eventstart" TV:

Inside the prepareQueryBeforeCount() function around line 87, I add a leftJoin on my template variable to the query. My TV id is 12 in this example, so here's what it looks like:

$c->leftJoin('modTemplateVarResource','EventStart',array(
        'EventStart.tmplvarid' => 12,
        'EventStart.contentid = Article.id',
));

Next, I add another key/value to the select array inside of the prepareQueryAfterCount() function around line 155:

$c->select(array(
    'createdby_username' => 'CreatedBy.username',
    'eventstart' => 'EventStart.value', // <-- referencing the alias I created prev. via leftJoin
));

Now, if I repeat logging test from earlier, I can see that now my TV values are coming through as a property named "eventstart". Ka-ching! Now I just need to get that to display in the Manager. For that, I could add some placeholders and manipulate them as I did in the other post (see http://forums.modx.com/thread/82266/list-of-documents-in-articles-container-display-pubdate-with-year#dis-post-454385), but I'm pressed for time, so I'm simply going to re-use the existing publishedon_date and publishedon_time placeholders -- instead of populating them with the actual publishedon data, I'm going to populate them with my "eventstart" TV data.

Inside the prepareRow() function, I'm going to alter the block at about line 187 so that the $resourceArray gets populated with my custom values instead of with the default "publishedon" values. Here's what my edits look like:

if (!empty($resourceArray['eventstart'])) {
    $resourceArray['publishedon_date'] = strftime('%b %d',strtotime($resourceArray['eventstart']));
    $resourceArray['publishedon_time'] = strftime('%H:%I %p',strtotime($resourceArray['eventstart']));
    $resourceArray['publishedon'] = strftime('%b %d, %Y %H:%I %p',strtotime($resourceArray['eventstart']));
	$resourceArray['publishedon_year'] = strftime('%Y',strtotime($resourceArray['eventstart']));
}

So now the "Published On" column shows my TV "Event Start" instead of the published On date. However, the heading for the column still reads "Published On", and the sorting feature is completely misleading because it sorts on a field value that you can no longer see. The easy solution here is to hack the container.articles.grid.js file. Around line 32 of the file, we see some key/values for "columns":

,columns: [this.sm,this.exp,{
    header: _('articles.publishedon')
    ,dataIndex: 'publishedon'
    ,width: 80
    ,sortable: true
    ,renderer: {fn:this._renderPublished,scope:this}
},{

So I'm going to change that... I'm not concerned with localization here, so I'm going to hardcode a solution -- you could viably edit the lexicon entry for "articles.publishedon", but I don't want to confuse the issue any more than I already have. I'll simply disable the sorting (I'll figure that out later), increase the width, and simply hard-code the heading as "Event Date". My edits look like this:

,columns: [this.sm,this.exp,{
    header: 'Event Date'
    ,dataIndex: 'publishedon'
    ,width: 100
    ,sortable: false
    ,renderer: {fn:this._renderPublished,scope:this}
},{

Refresh my browser cache and I'm in business! Hope that helps some people get some ideas of how this thing works.

WARNING: this is just a view to an autopsy. I don't recommend doing this on a live site. The edits described here edit the Article's core code and they will get overwritten if you update the plugin! My hope is that documenting this will help people understand more of how Ext JS works and possibly lead to legitimate and scalable feature requests for the Articles package.

How can I customize the display of the list of Articles inside the MODX manager? - My Forums

How can I customize the display of the list of Articles inside the MODX manager?

Re: How can I customize the display of the list of Articles inside the MODX manager?

Re: How can I customize the display of the list of Articles inside the MODX manager?

Re: How can I customize the display of the list of Articles inside the MODX manager?

Re: How can I customize the display of the list of Articles inside the MODX manager?