Skip to main content
Version: Next

Create a Custom Frontend Adapter

To create a custom frontend adapter, you need to follow three steps:

  1. Create a new JS class for your custom frontend adapter;
  2. Register the class via an event;
  3. Add the adapter to the mapping.

Create the JS class​

Each adapter has to extend the pimcore.bundle.backendpowertools.alternativeelementtree.configuration.adapter.abstract class.

The only thing you have to do is to set your adapters type and implement the setFields method. This method has to return an array of ExtJS fields.

pimcore.registerNS("your.custom.adapter.fooAdapter");

your.custom.adapter.fooAdapter = Class.create(
pimcore.bundle.backendpowertools.alternativeelementtree.configuration.adapter.abstract, {
    type: 'FooAdapter',

    setFields: function () {
        this.fields = [
            this.getTextField()
        ];

        return this.fields;
    },

    getTextField: function () {
        return new Ext.form.TextField({
            name: 'placeholder',
            fieldLabel: "Placeholder",
            value: this.config.placeholder ?? null
        });
    }
});

your.custom.adapter.fooAdapter.type = 'FooAdapter'; //reflects the "frontend" adapter in the config

Register the Class via an Event​

After creating the class itself, you must register it via the pimcore.backendpowertools.adt.registerAdtAdapter event.

...

initialize: function () {
    document.addEventListener(pimcore.bundle.backendpowertools.events.registerAetAdapter, this.registerAdapters.bind(this));
},

registerAdapters: function (event) {
    const adapters = event.detail.adapters;
    adapters.push(your.custom.adapter.fooAdapter);

...

Add the Adapter to the Mapping​

The last step is to add the adapter to the mapping. This can be done in the config.yaml of your bundle. Be aware that the string provided to frontend has to match the type of your adapter.

pimcore_backend_power_tools:
  pimcore_alternative_object_trees:
    adapters:
      input: #= the datatype of the corresponding class field
        frontend: FooAdapter
        backend: SimpleValueAdapter