Akeneo PIM UI – Complete Guide for Frontend Developers

config:
  config:
    pim/router:
      indexRoute: pim_dashboard_index
    # Forwarded events from mediator
    pim/form/common/edit-form:
      forwarded-events:
        'pim_enrich:form:field:extension:add': 'pim_enrich:form:field:extension:add'
        'pim_enrich:form:filter:extension:add': 'pim_enrich:form:filter:extension:add'
        'pim_enrich:form:entity:pre_save':     'pim_enrich:form:entity:pre_save'
        'pim_enrich:form:entity:update_state': 'pim_enrich:form:entity:update_state'
        'pim_enrich:form:entity:post_fetch':   'pim_enrich:form:entity:post_fetch'
    pim/cache-invalidator:
      events:
      - 'pim_enrich:form:entity:post_fetch'
    pim/job/product/edit/content:
      forwarded-events:
        'pim_enrich:form:filter:extension:add': 'pim_enrich:form:filter:extension:add'
    pim/grid/view-selector/selector:
      forwarded-events:
        'grid:product-grid:state_changed': 'grid:product-grid:state_changed'
    pim/controller/group:
      fetcher: group
    pim/remover/association-type:
      url: pim_enrich_associationtype_rest_remove
    pim/remover/attribute-group:
      url: pim_enrich_attributegroup_rest_remove
    pim/remover/group-type:
      url: pim_enrich_grouptype_rest_remove
    pim/remover/channel:
      url: pim_enrich_channel_rest_remove

'use strict';

define([
  'oro/translator',
  'backbone',
  'oro/mediator',
  'pim/form',
  'pim/fetcher-registry',
  'pim/template/common/default-template',
], function (__, Backbone, mediator, BaseForm, FetcherRegistry, template) {
  return BaseForm.extend({
    template: _.template(template),

    /**
     * {@inheritdoc}
     */
    initialize: function () {
      this.model = new Backbone.Model({});

      BaseForm.prototype.initialize.apply(this, arguments);
    },

    /**
     * {@inheritdoc}
     */
    configure: function () {
      Backbone.Router.prototype.once('route', this.unbindEvents);

      if (_.has(__moduleConfig, 'forwarded-events')) {
        this.forwardMediatorEvents(__moduleConfig['forwarded-events']);
      }

      return BaseForm.prototype.configure.apply(this, arguments);
    },

    /**
     * {@inheritdoc}
     */
    render: function () {
      if (!this.configured) {
        return this;
      }

      this.getRoot().trigger('oro_config:form:render:before');

      this.$el.html(this.template());

      this.renderExtensions();

      this.getRoot().trigger('oro_config:form:render:after');

      return this;
    },

    /**
     * Clear the mediator events
     */
    unbindEvents: function () {
      mediator.clear('oro_config:form');
    },
  });
});

'use strict';

define(
    [
        'jquery',
        'underscore',
        'oro/translator',
        'pim/form',
        'macopedia/templates/product/transform-to-variant',
        'routing',
        'pim/dialogform',
        'pim/form-builder',
        'oro/mediator',
        'maco-product-state'
    ],
    function (
        $,
        _,
        __,
        BaseForm,
        template,
        Routing,
        DialogForm,
        FormBuilder,
        mediator,
        ProductState
    ) {
        return BaseForm.extend({
            template: _.template(template),
            className: 'AknDropdown-menuLink transform-to-variant',
            dialog: null,
            productId: null,
            familyId: null,
            variantAxis: null,

            /**
             * {@inheritdoc}
             */
            initialize: function (config) {
                this.config = config.config;
                BaseForm.prototype.initialize.apply(this, arguments);
            },

            /**
             * {@inheritdoc}
             */
            render: function () {
                this.$el.html(this.template({
                    title: __(this.config.title),
                }));

                this.$el.on('click', function () {
                    FormBuilder.build(this.config.modalForm)
                        .then(function (modal) {
                            let state = {
                                productId: ProductState.getProductId(),
                                familyId: ProductState.getFamilyId(),
                                variantAxis: this.variantAxis
                            }
                            modal.setData(state);
                            modal.open();
                        }.bind(this)).catch(reason => {
                        console.error(reason);
                    })
                }.bind(this));

                return this;
            }
        });
    });

componentDidMount() {
        if (null === this.DOMel.current) {
            return;
        }

        this.el = $(this.DOMel.current);

        if (undefined !== this.el.select2) {

            this.initSelectField();

            if(!this.el.val()) {
                this.el.select2('val', -1);
            }

            this.el.on('change', (event: any) => {
                const newValue = this.props.multiple
                    ? event.val.map((recordCode: string) => RecordCode.create(recordCode))
                    : '' === event.val
                        ? null
                        : RecordCode.create(event.val);
                this.props.onChange(newValue);
            });

            // Prevent the onSelect event to apply it even when the options are null
            const select2 = this.el.data('select2');
            select2.onSelect = (function(fn) {
                return function(_data: any, options: any) {
                    if (null === options || 'A' !== options.target.nodeName) {
                        fn.apply(this, arguments);
                    }
                };
            })(select2.onSelect);
        } else {
            this.el.prop('type', 'text');
        }
    }

import {ButtonHTMLAttributes, ReactNode} from "react";

export type FormValue = {
    [key: string]: string;
};

export type FormProps = {
    children?: ReactNode;
    value: FormValue;
    onChange: (value: FormValue) => void;
};

export type OptionProps = {
    value: string;
    isSelected?: boolean;
    isDisabled?: boolean;
    children?: ReactNode;
    onSelect?: () => void;
} & ButtonHTMLAttributes<htmlbuttonelement>;

export type QuickExportConfiguratorProps = {
    showWithLabelsSelect: boolean;
    showWithMediaSelect: boolean;
    onActionLaunch: (formValue: FormValue) =&gt; void;
    getProductCount: () =&gt; number;
};

export type SelectProps = {
    children?: ReactNode;
    name: string;
    value?: string | null;
    isVisible?: boolean;
    onChange?: (value: string | null) =&gt; void;
};</htmlbuttonelement>

return (
    <container>
      {1  items.length ? (
        &gt;
          <styledmultiplebutton onclick="{()"> setOpen(true)}&gt;
            <span>{children}</span>
            <downbutton>
              <arrowdownicon size="{18}"></arrowdownicon>
            </downbutton>
          </styledmultiplebutton>
          {isOpen &amp;&amp; (
            &gt;
              <backdrop onclick="{()"> setOpen(false)} /&gt;
              <panel>
                {items.map(item =&gt; (
                  <item key="{item.label}" title="{item.title" isdisabled="{item.isDisabled}" onclick="{()"> onItemClick(item)}
                  &gt;
                    {item.label}
                  </item>
                ))}
              </panel>
            <!--</>-->
          )}
        <!--</>-->
      ) : (
        <button onclick="{items[0].action}">
          {items[0].label}
        </button>
      )}
    </backdrop></container>
  );