[SOLVED] Atomic AFX editable element

Using Neos & Flow
1

Hi guys,

I would use the package atomic-fusion-afx but I cant create a editable element.

I have the following code but nothing saved:

prototype(XY.Intranet:BulletinBoardNote) < prototype(PackageFactory.AtomicFusion:Component) {

    renderer = afx`
        <div class="bulletinboard-note" @key="noteContainer">
            <div class="bulletinboard-note__contact" @key="contact">
                <PackageFactory.AtomicFusion:Editable property="contact" />
            </div>
            <h3 @key="title" class="bulletinboard-note__title">
                <PackageFactory.AtomicFusion:Editable property="title" />
            </h3>
            <div class="bulletinboard-note__description">
                {description}
            </div>
        </div>
    `
}

Anyone have some experience with this package?

contact + title = property
description = childNode ( content collection )

2

Hi,

have you set inlineEditable: true in your nodetype.yaml?

'XY.Intranet:BulletinBoardNote':
  ...
  properties:
    title:
      type: string
      ui:
        inlineEditable: TRUE
1 Like
3

Yes I have :slight_smile: I can edit these properties but NEOS doesent save these changes…

'XY.Intranet:BulletinBoardNote':
  superTypes:
    'Neos.Neos:Content': true
  childnodes:
    description:
      type: 'Neos.Neos:ContentCollection'
      label: 'Beschreibung'
  properties:
    title:
      type: string
      defaultValue: 'Titel'
      ui:
        label: 'Titel'
        inlineEditable: true
    contact:
      type: string
      defaultValue: 'Kontaktdaten'
      ui:
        label: 'Kontaktdaten'
        inlineEditable: true
4

I fixed the problem by wrapping the component in a content element. :ghost:

prototype(XY.Intranet:BulletinBoardNote) < prototype(PackageFactory.AtomicFusion:Content) {
    renderer = PackageFactory.AtomicFusion:Component {
        renderer = afx`
            <div class="bulletinboard-note" @key="noteContainer">
                <div class="bulletinboard-note__contact" @key="contact">
                    <PackageFactory.AtomicFusion:Editable property="contact" />
                </div>
                <h3 @key="title" class="bulletinboard-note__title">
                    <PackageFactory.AtomicFusion:Editable property="title" />
                </h3>
                <div class="bulletinboard-note__description">
                    {description}
                </div>
            </div>
        `
    }
}
1 Like
5

Ah ok,
I use PackageFactory.AtomicFusion:Content and PackageFactory.AtomicFusion:Editable directly in my contentmapping prototype. As described in the atomicfusion documentation, i have 2 different prototypes: One component prototype were i can handle the output, and another for datamapping.

component (here i can use afx):

prototype(Vendor.Site:Component) < prototype(PackageFactory.AtomicFusion:Component) {
    title = ''
    description = ''
    bold = false
    renderer = Neos.Fusion:Tag {
        attributes.class = PackageFactory.AtomicFusion:ClassNames {
            component = true
            component--bold = ${props.bold} 
        }
    
        content = Neos.Fusion:Array {
            headline = Neos.Fusion:Tag {
                tagName = 'h1'
                content = ${props.title}
            }

            description = Neos.Fusion:Tag {
                content = ${props.description}
            }
        }
    }
}

datamapping:

prototype(Vendor.Site:ExampleContent) < prototype(PackageFactory.AtomicFusion:Content) {
	renderer = Vendor.Site:Component {
        bold = ${q(node).property('bold')}
        
        title = PackageFactory.AtomicFusion:Editable {
            property = 'title'
            block = false
        }
        
        description = PackageFactory.AtomicFusion:Editable {
            property = 'description'
        }
    }
}

So i can reuse the same component with different data mappings. :slight_smile:

2 Likes
6

Just a little explanation why this is works that way:

The prototype PackageFactory.AtomicFusion:Content is the equivalent of Neos.Neos:Content but is based on Packagefactory.AtomicFusion:Component instead of Neos.Fusion:Template both prototypes add @process.contentElementWrapping = Neos.Neos:ContentElementWrapping wich adds the data-attributes that tell the backend which node is edited at the moment. This is needed to select a node and also to relate the editables to that node.

This is the fusion equivalent of the view helper neos:contentElement.wrap

Regards, Martin

2 Likes
7

Thanks for that :slight_smile: