directus/directus

Matrix/Replicator Field Type

bcartier asked for this feature over 2 years ago — 7 comments

bcartier commented over 2 years ago

A field type similar to Statamic's Replicator (https://docs.statamic.com/fieldtypes/replicator) or the Craft CMS Matrix Field (https://craftcms.com/docs/matrix-fields) that would allow you to build an entry from various blocks (other fields). Add a WYSIWYG block, then a relationship field pulling from other tables, then another WYSIWYG, then and image block etc... This allows you to keep the WYSIWYG field simpler (without having to embed everything inside it), while having editorial freedom well-structured content.

| benhaynes commented about 2 years ago Admin

FeatHub butchers the whitespace formatting here

Same as current M2M UI, except: 1. Junction table also stores the related table 2. UI is editable inline instead of each item opening in an overlay

Below is one direction, but you could just as easily store data in the junction table itself instead of multiple related tables.

Example of schema:

THIS TABLE - matrix_column (ALIAS) Like a M2M but also stores the related table...

JUNCTION TABLE - id - sort - matrixid - relatedtable (NEW!) - related_id

RELATED TABLE VARCHAR - id - title (VARCHAR)

RELATED TABLE TEXT - id - text (TEXT)

RELATED TABLE INT - id - image (INT)

Example of what junction table stores:

{ id: 1, sort: 1, parentid: 1, relatedtable: 'varchar', relatedid: 1, data: { title: "My Matrix Title" } }, { id: 2, sort: 2, parentid: 1, relatedtable: 'text', relatedid: 1, data: { text: "Lorem ipsum dolor et..." } }, { id: 3, sort: 3, parentid: 1, relatedtable: 'image', related_id: 1, data: { image: 1, data: { url: "my-file.jpg" } } }

| luminarious commented almost 2 years ago

This and Postgres support were the two reasons we didn't go with Directus for a medium-sized content site (couple of hundred pages in 3 languages) at my current organization, despite the really good overall developer experience 😞

| swttt commented over 1 year ago

Much wanted, but will try to use the M2M as suggested above first.

| jeremybise commented over 1 year ago

I can't seem to wrap my had around the example setup above. This is a feature I miss dearly from both Craft and (gasp) WordPress via Advanced Custom Fields Flexible Content field type (https://www.advancedcustomfields.com/resources/flexible-content/). It allows me to set up "content blocks" which are allows in the field in the user interface and then its so easy for my client to add/edit/reorder these blocks to make for some truly custom and flexible content entries.

Alternatively, if somebody has a nice, detailed writeup of how to make the above example work in a similar fashion, I'd appreciate it greatly! Apologies for my denseness.

daniel-upzzle commented about 1 year ago

Hi, I'm trying to achieve custom interface that allows for it. I have one field that can point to diferent tables with a related ID. But I'm stuck in retrieving a model by an Id with Backbone (I'm new on it). Can anyone help? Or is there some other soution for that? Thank you!

// having const currentId set correctly with database id value (not cid) // having const flexModelName set correctly with the related table name const flexModelCollection = EntriesManager.getNewInstance( flexModelName ) var flexModel // case I want to create new model (IT WORKS) if ( currentId== null ) { flexModel = new flexModelCollection.model({}, { // eslint-disable-line new-cap collection: flexModelCollection, parse: true, structure: flexModelCollection.structure, table: flexModelName, privileges: flexModelCollection.privileges }) }else{ // WHAT TO DO? I'VE TRIED SEVERAL APROCHES, THE MODEL IS NOT IN MEMORY

/* tried this but THE MODEL GETS ONLY THE ID ATTRIBUTE
var FlexModel = Backbone.Model.extend({
      urlRoot: '/api/1.1/tables/' + flexModelName + '/rows'
    });

    flexModel = new FlexModel({
      id: currentId // ie. a real id from our database
    });
   */


    flexModel = flexModelCollection.get(currentId, true);
    flexModel = flexModel.getNewInstance() //.fetch();

} // NEXT STEP, SHOWING OVERLAY, WORKS ONLY ON NEW MODELS var view = new OverlayEditView({ model: flexModel, // (...)

daniel-upzzle commented about 1 year ago

I've put it in the #general Slack channel of Directus

Join the discussion!

Sign-in with GitHub to comment