# Eigene Artikelattribute/Freitextfelder auf eigenem Reiter im Backend - Anleitung
**URL:** https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559
**Category:** Programmierung
**Created:** [18. Januar 2019 um 16:17 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559 "2019-01-18T16:17:14Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@ThomDrei](https://forum.shopware.com/u/ThomDrei)
#### Post date: [18. Januar 2019 um 16:17 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/1 "2019-01-18T16:17:14Z")
Hallo zusammen. Leider habe ich zu diesem Thema im Forum keine umfassende Antwort finden können. Ich habe mir Informationen aus ein paar Beiträgen zusammengetragen, und nach einigem Ausprobieren und Rumgefrickel habe ich es endlich geschafft. Da es für einige andere interessant sein dürfte, teile ich hier mal meine Ergebniss mit euch. Los geht’s. Da die komplette Anleitung zu lang für einen Beitrag ist, muss ich das aufsplitten.
**Ordner und Dateien**
Hier ist die Strukturübersicht. Das Plugin wird natürlich etwas mehr machen, als nur Attribute anzulegen und auf einem separaten Reiter im Backend darzustellen. Daher dürfen die Ordner „Components“, „Controllers“ und „Models“ ignoriert werden. Ich werde auch nicht auf die Uninstaller-Klasse eingehen.
**custom/plugins/FdIcecat/FdIcecat.php**
Die Plugin-Basisdatei. Installation und Deinstallation sind in eigene Klassen ausgelagert.
```
container->get('models'),
$this->container->get('shopware_attribute.crud_service')
);
$installer->install();
}
/**
* {@inheritdoc}
* @throws \Exception
*/
public function uninstall(UninstallContext $context)
{
$uninstaller = new Uninstaller(
$this->container->get('models'),
$this->container->get('shopware_attribute.crud_service'),
$this->container->get('dbal_connection')
);
$uninstaller->uninstall($context->keepUserData());
$context->scheduleClearCache(UninstallContext::CACHE_LIST_ALL);
}
}
```
**custom/plugins/FdIcecat/Setup/Installer.php**
Die Installer-Klasse. Auf installModels() gehe ich nicht weiter ein, da die Funktion für diesen Thread nicht relevant ist. Der Installer legt vier neue Produktattribute an, die standardmäßig nicht im Backend angezeigt werden.
```
modelManager = $modelManager;
$this->attributeCrudService = $crudService;
}
/**
* @throws ToolsException
* @throws Exception
*/
public function install()
{
$this->installModels();
$this->installAttributes();
}
/**
* @throws ToolsException
*/
private function installModels() {
$tool = new SchemaTool($this->modelManager);
$classMetaData = [
$this->modelManager->getClassMetadata(Category::class),
$this->modelManager->getClassMetadata(FeatureGroup::class),
$this->modelManager->getClassMetadata(ProductFeature::class),
$this->modelManager->getClassMetadata(ProductFeatureValue::class),
];
$tool->createSchema($classMetaData);
}
/**
* @throws Exception
*/
private function installAttributes()
{
$this->attributeCrudService->update(
's_articles_attributes',
'fd_icecat_id',
'integer',
[
'label' => 'Icecat product id',
'position' => 20,
]
);
$this->attributeCrudService->update(
's_articles_attributes',
'fd_icecat_similar_id',
'integer',
[
'label' => 'Similar Icecat product id',
'position' => 20,
]
);
$this->attributeCrudService->update(
's_articles_attributes',
'fd_icecat_use_icecat_data',
'boolean',
[
'label' => 'Use Icecat data',
'helpText' => 'Activate this option to populate this article with data from Icecat',
'position' => 20
],
null,
false,
true
);
$this->attributeCrudService->update(
's_articles_attributes',
'fd_icecat_last_update',
'datetime',
[
'label' => 'Last Icecat update',
'position' => 20
]
);
}
}
```
Damit habe wir unsere neuen Attribute. Jetzt kümmern wir uns um das Backend.
**custom/plugins/FdIcecat/Resources/views/backend/article\_icecat/view/detail/window.js**
```
//{block name="backend/article/view/detail/window" append}
Ext.define('Shopware.apps.ArticleIcecat.view.detail.Window', {
override: 'Shopware.apps.Article.view.detail.Window',
createMainTabPanel: function () {
var me = this;
me.callParent(arguments);
me.registerAdditionalTab(
{
'title': 'Icecat',
'contentFn': me.createIcecatTab,
'articleChangeFn': me.refreshIcecatTab,
'insertIndex': 1,
'tabConfig': {
autoscroll: true,
bodyPadding: 10
},
},
'Ext.form.Panel'
);
return me.mainTab;
},
createIcecatTab: function (article, stores, eOpts) {
var me = this;
me.icecatTab = Ext.create('widget.article-icecat');
eOpts.tab.add(me.icecatTab);
eOpts.tab.setDisabled(false);
me.refreshIcecatTab();
},
refreshIcecatTab: function () {
var me = this;
if (me.article.get('mainDetailId')) {
Ext.Ajax.request({
url: '{url controller=AttributeData action=loadData}',
params: {
_foreignKey: me.article.get('mainDetailId'),
_table: 's_articles_attributes'
},
success: function(responseData, request) {
var response = Ext.JSON.decode(responseData.responseText);
me.setIcecatFormValues(response.data);
}
});
}
},
setIcecatFormValues: function (data) {
var me = this;
me.icecatTab.icecatId.setValue(data['__attribute_fd_icecat_id']);
me.icecatTab.similarIcecatId.setValue(data['__attribute_fd_icecat_similar_id']);
me.icecatTab.useDataField.setValue(data['__attribute_fd_icecat_use_icecat_data']);
me.icecatTab.lastUpdate.setValue(data['__attribute_fd_icecat_last_update'])
}
});
//{/block}
```
Es wird die Standarddetailansicht der Artikel überschrieben. _createMainTabPanel_ ist für das Erstellen der Reiter zuständig. Zunächst wird die Originalfunktion aufgerufen, danach füge ich meinen eigenen Reiter über _registerAdditionalTab_ hinzu. Mit _‚insertIndex‘: 1_ lege ich fest, dass dieser direkt nach dem Stammdaten-Reiter eingefügt werden soll. Ferner benutze ich als Typ ein Formular-Panel („Ext.form.Panel“), weil ich damit später im Controller die Feldwerte dieses Reiters bequem per _getValues()_ abrufen kann. _createIcecatTab_ instanziiert den Icecat-Reiter („widget.article-icecat“), der im nächsten Schritt definiert wird, fügt ihn in die Reiterliste ein, aktiviert ihn und lädt dann die Werte aus der Datenbank über _refreshIcecatTab_. _refreshIcecatTab_ ist fast 1:1 aus dem Developer Guide übernommen, prüft aber noch auf das Vorhandensein eines Artikels, weil es sonst Probleme bei der Neuanlage gibt. Dieselbe Funktion wird ausserdem als Callback für _‚articleChangeFn‘_ genutzt. Damit funktioniert das ganze auch in der SplitView.
---
### Author:  [@ThomDrei](https://forum.shopware.com/u/ThomDrei)
#### Post date: [18. Januar 2019 um 16:18 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/2 "2019-01-18T16:18:02Z")
Teil 2
**custom/plugins/FdIcecat/Resources/views/backend/article\_icecat/view/detail/icecat.js**
```
//{namespace name="backend/article_icecat/view/detail/icecat"}
//{block name="backend/article_icecat/view/detail/icecat"}
Ext.define('Shopware.apps.ArticleIcecat.view.detail.Icecat', {
/**
* Define that the icecat field set is an extension of the Ext.form.Fieldset
* @string
*/
extend: 'Ext.form.FieldSet',
/**
* The Ext.container.Container.layout for the fieldset's immediate child items.
* @object
*/
layout: 'column',
/**
* List of short aliases for class names. Most useful for defining xtypes for widgets.
* @string
*/
alias: 'widget.article-icecat',
/**
* Set css class for this component
* @string
*/
cls: Ext.baseCSSPrefix + 'article-icecat-field-set',
/**
* Contains all snippets for the view component
* @object
*/
snippets: {
title: '{s name=icecat/title}Icecat{/s}',
useicecat: '{s name=icecat/field/useIcecatData}Use Icecat data{/s}',
icecatid: '{s name=icecat/field/icecatId}Icecat product{/s}',
similaricecatid: '{s name=icecat/field/similarIcecatId}Similar Icecat product{/s}',
lastupdated: '{s name=icecat/field/lastUpdated}Last update{/s}'
},
initComponent: function () {
var me = this;
me.title = me.snippets.title;
me.items = me.createElements();
me.callParent(arguments);
},
createElements: function () {
var me = this;
me.formElements = Ext.create('Ext.container.Container', {
layout: 'column',
items: [
{
xtype: 'container',
columnWidth: 0.5,
items: [
{
xtype: 'form',
layout: 'anchor',
border: false,
padding: '0 20 0 0',
fieldDefaults: {
labelWidth: 155,
anchor: '100%'
},
items: me.createLeftElements()
}
]
},
{
xtype: 'container',
columnWidth: 0.5,
items: [
{
xtype: 'form',
layout: 'anchor',
border: false,
fieldDefaults: {
labelWidth: 155,
anchor: '100%'
},
items: me.createRightElements()
}
]
}
]
});
return [me.formElements];
},
createLeftElements: function () {
var me = this;
me.useDataField = Ext.create('Ext.form.field.Checkbox', {
name: '__attribute_fd_icecat_use_icecat_data',
fieldLabel: me.snippets.useicecat,
inputValue: 1,
checked: true,
uncheckedValue: 0
});
me.lastUpdate = Ext.create('Shopware.apps.Base.view.element.DateTime', {
name: 'fdIcecatLastUpdate',
fieldLabel: me.snippets.lastupdated,
disabled: true,
dateCfg: {
submitFormat: 'Y-m-d'
},
timeCfg: {
format: 'H:i:s'
}
});
return [
me.useDataField,
me.lastUpdate
];
},
createRightElements: function () {
var me = this;
me.icecatId = Ext.create('Ext.form.field.Number', {
name: 'fdIcecatProductId',
fieldLabel: me.snippets.icecatid,
disabled: true,
allowBlank: true
});
me.similarIcecatId = Ext.create('Ext.form.field.Number', {
name: '__attribute_fd_icecat_similar_id',
fieldLabel: me.snippets.similaricecatid,
allowBlank: true
});
return [
me.icecatId,
me.similarIcecatId
];
}
});
//{/block}
```
Dies ist die Inhaltsdefinition des Icecat-Reiters. _//{namespace name=„backend/article\_icecat/view/detail/icecat“}_ ist notwendig, damit die Snippets, die in **custom/plugins/FdIcecat/Resources/snippets/backend/article\_icecat/view/detail/icecat.ini** definiert sind, gezogen werden. Ich habe hier eine 2-spaltige Darstellung verwendet. Die Namen der Felder sind bewusst gewählt, um das Zusammenstellen der Parameter zum Speichern zu vereinfachen. _getValues()_ wird später so etwas zurückgeben:
```
{
__attribute_fd_icecat_use_icecat_data: 1,
fdIcecatLastUpdate: null,
__attribute_fd_icecat_similar_id: "1337"
}
```
_\_\_attribute\_fd\_icecat\_use\_icecat\_data_ und _\_\_attribute\_fd\_icecat\_similar\_id_ sind damit schon passend benannt und werden bei Übergabe an den Attributscontroller automatisch gespeichert. _fdIcecatLastUpdate_ hingegen nicht und wird somit ignoriert. Das ist in diesem Fall gewünscht, da dieses Feld nicht vom Benutzer gepflegt werden soll. Ich musste aber feststellen, dass - obwohl es disabled ist - dieses Feld trotzdem von getValues() berücksichtigt wird. Eine Feldkonfiguration von _submitValue: false_ hatte hier weder beim Feld selbst, noch als Parameter in _dateCfg_ und _timeCfg_ einen Effekt. Daher habe ich einfach einen Namen gewählt, der beim Speichern ignoriert wird. Da ich nicht geprüft habe, wie sich andere Felder hier verhalten, muss man eventuell etwas aufpassen bei solchen, die vom Benutzer nicht geändert werden dürfen.
**custom/plugins/FdIcecat/Resources/views/backend/article\_icecat/controller/detail.js**
```
//{namespace name="backend/article_icecat/article/view/detail"}
//{block name="backend/article/controller/Icecat"}
Ext.define('Shopware.apps.ArticleIcecat.controller.Detail', {
override: 'Shopware.apps.Article.controller.Detail',
onSaveArticle: function (win, article, options) {
var me = this,
originalCallback = options.callback,
customCallback = function (newArticle, success) {
var params;
Ext.callback(originalCallback, this, arguments);
params = Ext.merge(
{
_foreignKey: newArticle.get('mainDetailId'),
_table: 's_articles_attributes',
},
me.getMainWindow()
.icecatTab
.up('form') // go up in the hierarchy to find the nearest parent form
.getForm()
.getValues()
);
Ext.Ajax.request({
method: 'POST',
url: '{url controller=AttributeData action=saveData}',
params: params
});
};
if (!options.callback || options.callback.toString() !== customCallback.toString()) {
options.callback = customCallback;
}
me.callParent([win, article, options]);
},
});
//{/block}
```
Hier klinke ich mich analog zum Beispiel aus dem Developer Guide in das saveArticle-Event des Original-Controllers ein. Ich verschmelze die notwendigen Parameter _\_foreignKey_ und _\_table_ mit der Rückgabe von _getValues()_. Habe ich ja bereits oben erläutert.
**custom/plugins/FdIcecat/Resources/views/backend/article\_icecat/app.js**
Hier erweitere ich einfach das Artikelmodul um meinen Controller und den Icecat-Reiter.
```
//{block name="backend/article/application" append}
//{include file="backend/article_icecat/controller/detail.js"}
//{include file="backend/article_icecat/view/detail/icecat.js"}
//{/block}
```
---
### Author:  [@ThomDrei](https://forum.shopware.com/u/ThomDrei)
#### Post date: [18. Januar 2019 um 16:18 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/3 "2019-01-18T16:18:32Z")
Teil 3
Jetzt muss das ganze noch im Backend eingebunden werden. Dazu lege ich mir eine Subscriber-Klasse an.
**custom/plugins/FdIcecat/Subscriber/BackendArticle.php**
Hier klinke ich mich in das Laden der Artikelmoduls ein und registriere zunächst meine Ressourcen per _addTemplateDir_\_()\_. Beim Laden des Moduls (_index_-Action) mache ich der App die neuen Komponenten in meiner _app.js_ bekannt, beim Nachladen der Kompenten (_load_-Action) dann die Modifikation an der Detailansicht in meiner _window.js_.
```
pluginDirectory = $pluginDirectory;
}
/**
* {@inheritdoc}
*/
public static function getSubscribedEvents()
{
return [
'Enlight_Controller_Action_PostDispatchSecure_Backend_Article' => 'onPostDispatchArticle'
];
}
/**
* @param ActionEventArgs $args
*/
public function onPostDispatchArticle(
ActionEventArgs $args
) {
/** @var \Enlight_Controller_Action $controller */
$controller = $args->getSubject();
$request = $controller->Request();
$view = $controller->View();
$view->addTemplateDir($this->pluginDirectory . '/Resources/views/');
if ($request->getActionName() === 'index') {
$view->extendsTemplate('backend/article_icecat/app.js');
}
if ($request->getActionName() === 'load') {
$view->extendsTemplate('backend/article_icecat/view/detail/window.js');
}
}
}
```
Als letztes registriere ich nun noch den Subscriber.
**custom/plugins/FdIcecat/Resources/services.xml**
```
⋮
%fd_icecat.plugin_dir%
```
Damit ist das ganze erledigt. Der Vollständigkeit halber hier noch die Snippet-Dateien.
**custom/plugins/FdIcecat/Resources/snippets/backend/attribute\_columns.ini**
```
[en_GB]
s_articles_attributes_fd_icecat_id_label = "Icecat product id"
s_articles_attributes_fd_icecat_similar_id_label = "Similar Icecat product id"
s_articles_attributes_fd_icecat_use_icecat_data_label = "Use Icecat data"
s_articles_attributes_fd_icecat_use_icecat_data_helpText = "Activate this option to populate this article with data from Icecat"
s_articles_attributes_fd_icecat_last_update_label = "Last Icecat update"
[de_DE]
s_articles_attributes_fd_icecat_id_label = "Icecat Produkt-ID"
s_articles_attributes_fd_icecat_similar_id_label = "Ähnliche Icecat Produkt-ID"
s_articles_attributes_fd_icecat_use_icecat_data_label = "Icecat-Daten benutzen"
s_articles_attributes_fd_icecat_use_icecat_data_helpText = "Aktivieren Sie diese Option, um Artikel mit Daten von Icecat zu befüllen"
s_articles_attributes_fd_icecat_last_update_label = "Letzte Icecat-Aktualisierung"
```
**custom/plugins/FdIcecat/Resources/snippets/backend/article\_icecat/view/detail/icecat.ini**
```
[en_GB]
icecat/title = "Icecat"
icecat/field/useIcecatData = "Use Icecat data"
icecat/field/icecatId = "Icecat product"
icecat/field/similarIcecatId = "Similar Icecat product"
icecat/field/lastUpdated = "Last update"
[de_DE]
icecat/title = "Icecat"
icecat/field/useIcecatData = "Icecat-Daten benutzen"
icecat/field/icecatId = "Icecat-Produkt"
icecat/field/similarIcecatId = "Ähnliches Icecat-Produkt"
icecat/field/lastUpdated = "Letzte Aktualisierung"
```
Und das ist das Ergebnis:
Meine Attribute werden wie gewünscht geladen und gespeichert, und auch das Wechseln des Artikels in der SplitView aktualisiert die Daten auf dem Reiter.
Falls jemand weiß, wie ich das Einsammeln des Wertes von fdIcecatLastUpdate durch getValues() verhindern kann, bin ich für einen Hinweis dankbar. Ist zwar so kein Beinbruch, aber wie ich finde eben nicht ganz “sauber”. 
---
### Author:  [@hhmarco73](https://forum.shopware.com/u/hhmarco73)
#### Post date: [22. Januar 2019 um 14:09 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/4 "2019-01-22T14:09:14Z")
Sehr schöne Anleitung!
Eine ganz kleine Sache ist mir beim überfliegen aufgefallen. In der Plugin Klasse wird ein Container Parameter gesetzt:
```
$container->setParameter('fd_icecat.plugin_dir', $this->getPath());
```
Das ist m. E. nicht notwendig, da dies ja auch in der Methode der Basis Klasse genau so geschieht, welche du mit “parent::build($container);” ja auch aufrufst.
---
### Author:  [@ThomDrei](https://forum.shopware.com/u/ThomDrei)
#### Post date: [22. Januar 2019 um 14:18 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/5 "2019-01-22T14:18:08Z")
> [@hhmarco73 schrieb:](https://forum.shopware.com/profile/24323/hhmarco73 "hhmarco73")
>
> Sehr schöne Anleitung!
>
> Eine ganz kleine Sache ist mir beim überfliegen aufgefallen. In der Plugin Klasse wird ein Container Parameter gesetzt:
>
> $container-\>setParameter(‚fd\_icecat.plugin\_dir‘, $this-\>getPath());
>
> Das ist m. E. nicht notwendig, da dies ja auch in der Methode der Basis Klasse genau so geschieht, welche du mit „parent::build($container);“ ja auch aufrufst.
In der Tat. Ist mir vorhin auch aufgefallen. Daher ist die ganze build-Methode überflüssig. Habe den Code entsprechend angepasst. Danke!
---
### Author:  [@ThomDrei](https://forum.shopware.com/u/ThomDrei)
#### Post date: [22. Januar 2019 um 15:10 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/6 "2019-01-22T15:10:26Z")
**Addendum:**
Ich habe mir noch ein weiteres Attribut vom Typ _multi\_selection_ angelegt. Da ich damit auch ein bisschen kämpfen musste, bis es funktionierte, ergänze ich hier die notwendigen Schritte. Dazu habe ich mir angeschaut, was _Shopware.attribute.MultiSelectionFieldHandler_ macht und dies reproduziert.
Zunächst wird das Attribut in **custom/plugins/FdIcecat/Setup/Installer.php** in der _install_-Methode ergänzt:
```
$this->attributeCrudService->update(
's_articles_attributes',
'fd_icecat_locked_options',
'multi_selection',
[
'entity' => \Shopware\Models\Property\Option::class,
'helpText' => 'Choose properties which should not be updated with Icecat data',
'label' => 'Locked product properties',
'position' => 20
],
null,
true
);
```
In **custom/plugins/FdIcecat/Resources/views/backend/article\_icecat/view/detail/icecat.js** ergänze ich das Feld in der _createLeftElements_-Methode folgendermaßen:
```
store = Ext.create('Ext.data.Store', {
model: 'Shopware.model.Dynamic',
proxy: {
type: 'ajax',
url: '{url controller="EntitySearch" action="search"}?model=Shopware\\Models\\Property\\Option',
reader: Ext.create('Shopware.model.DynamicReader')
}
});
me.lockedOptions = Ext.create('Shopware.form.field.Grid', {
name: '__attribute_fd_icecat_locked_options',
fieldLabel: me.snippets.lockedOptions,
store: store,
searchStore: store
});
```
Das ist die Nachbildung der Funktionalität des Multiselection-Fieldhandlers. _me.lockedOptions_ kann dann einfach zum zurückgegebenen Array hinzugefügt werden. Auch hier wieder die passende Namensgebung für den Attribute-Controller. Damit ist das Ganze auch schon erledigt. Die Ergänzungen der Snippets spare ich mir an dieser Stelle. Das sollte eigentlich klar sein.
Und hier das Ergebnis:
---
### Author:  [@toco3](https://forum.shopware.com/u/toco3)
#### Post date: [23. Januar 2019 um 19:53 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/7 "2019-01-23T19:53:43Z")
Danke, dass du diese tolle Anleitung teilst!
---
### Author:  [@site-concept](https://forum.shopware.com/u/site-concept)
#### Post date: [4. April 2019 um 14:24 UTC](https://forum.shopware.com/t/eigene-artikelattribute-freitextfelder-auf-eigenem-reiter-im-backend-anleitung/57559/8 "2019-04-04T14:24:27Z")
Hallo,
vielen Dank für deine Arbeit.
Hat jemand eine Idee, wie das bei den Zahlungsarten funktionieren kann?
Ich habe da erfolgreich einen Reiter erstellt und die Werte meines Dropdowns werden mir auch angeziegt, leider funktioniert das speichern und Laden der Werte nicht.
Ich nehme an, dass ich mich in die “onChangeTab” und “onSavePayment” unter “/themes/Backend/ExtJs/backend/payment/controller/payment.js” reinhängen muss.
Vielleicht hat jemand einen Ansatz. Die Werte der Attribute werden geladen und sind in der console sichtbar, ich schaffe es leider aktuell nicht diese in meinem Reiter zu speichern und zu laden.
VG
Pascal