Search code examples
apostrophe-cms

Customizing pieces management modal in Apostrophe CMS


I am using the apostrophe-samples Github project to do some tests regarding the pieces modal customization. So far, I've added filters as explained in the tutorials, and added columns as seen in the apostrophe-pieces source code (I think it would be an interesting topic to add to the tutorials, IMHO).

However, I have a couple of doubts, given the example that specialists joinByArray products and products joinByArrayReverse specialists:

  • Can columns be sorted in any way through the UI (e.g., an option that enables sorting by clicking the table header) or does it rely entirely on the piece's defaultSort?
  • Can other fields other than the title be added as filters? I was able to add _specialists as products filter, displaying the title, but I'm wondering if a different field could be used.
  • Can reverse joins be added as filters? As said, I was able to add _specialists as products filter, but not the other way around.
  • Can joins/reverse joins be added as columns? If I add '_specialists' I column, I get displayed an array like [Object], not the title as in the filter.

Solution

  • "Can columns be sorted in any way through the UI (e.g., an option that enables sorting by clicking the table header) or does it rely entirely on the piece's defaultSort?"

    Not at present, no. The intent was to provide this feature but it has not been built out so far, as surprisingly it hasn't been a pressing need for our own clients although it is certainly a common feature.

    It would make a good community contribution, or it could be sponsored via apostrophe enterprise support. It likely wouldn't take long to add.

    "Can other fields other than the title be added as filters? I was able to add _specialists as products filter, displaying the title, but I'm wondering if a different field could be used."

    Not currently, but this one would be an easy PR. Here's the relevant line of code in apostrophe-schemas/index.js. You have access to the field object here, so you could easily do a PR to look in a different property of doc if field.filterLabelField is set, let's say, still falling back to title.

    "Can reverse joins be added as filters? As said, I was able to add _specialists as products filter, but not the other way around."

    Not currently. In lib/modules/apostrophe-schemas/index.js you'll see that there is currently no addFilter property for these. The implementation is possible. The code would need to fetch the chosen doc on the reverse side, get the id or array of ids it joins to, and chain a .and({ $in... }) call.

    "Can joins/reverse joins be added as columns? If I add '_specialists' as a column, I get displayed an array like [Object], not the title as in the filter."

    This one is supported today. You need to set a partial property for the column. This is just a function that accepts the value of the column and returns a string. For instance:

    addColumns: [
      {
        name: '_specialists',
        partial: specialists => specialists.map(specialist => specialist.title).join(' ')
      }
    ]
    

    It would be nice to have a better default behavior for this case than assuming it's OK to show it as a string.