How to configure store for combobox in custom shopping world element?

Shopware 5 International (English Only)
,
1

Hello, I am trying to create custom shopping world element with a dropdown selection of shop categories. I have used an example plugin from documentation https://developers.shopware.com/exampleplugins/SwagVimeoElement.zip and have added a combobox field to EmotionElementInstaller::install

$vimeoElement->createComboBoxField([
    'name' => 'cat',
    'fieldLabel' => 'Category',
    'supportText' => 'Select category',
    'allowBlank' => false,
    'store' => 'Shopware.apps.Base.store.Category'
]);

Element settings form is working and field is present but I am getting a following error when I first click on dropdown:

nand dropdown stays empty. It seems to be a problem with combobox template, so its probably a misconfiration of store property, but in all examples I have found it is specified same as I wrote, trying to specify a partial path caused errors when opening shopping world. I can see that Shopware.apps.Base.store.Category is defined in console. How should I specify a store for a field?

2

Yesterday I have got an answer on Stack Overflow https://stackoverflow.com/questions/49982755/how-to-access-system-stores-for-shopping-world-element/. Turns out I have not configured two required properties ‚displayField‘ and ‚valueField‘ which, as I have understood from example in anwer, are specifying which model properties are used for option’s text and value. There is no description of this properties in documentation, so it was totally unclear what they do.

3

displayField - contain info, which should be visible for customer.

valueField - contain info, which should be send to server as selected value.

As example:

_Ext_. **create** ( **'Ext.form.field.ComboBox'** , { **xtype** : **'combobox'** , **triggerAction** : **'all'** , **name** : **'approve'** , **fieldLabel** :me. **snippets**. **toolbar**. **type** , **store** : _Ext_. **create** ( **'Ext.data.Store'** , { **fields** : [**'id'** , **'type'**], **data** : [{ **"id"** : 0, **"type"** : **'Awaiting'** }, { **"id"** : 1, **"type"** : **'Approved'** }] }), **value** : 0, **labelWidth** : 40, **width** : 150, **emptyText** : me. **snippets**. **toolbar**. **awayting** , **listeners** : { change: **function** (field, value) { me.searchApproveEvent(field, value); } }, **valueField** : **'id'** , **displayField** : **'type'** , **enableKeyEvents** : **true** , **checkChangeBuffer** :500 });

So there is only 2 columns - id and type - you set for display column type and column id as value.

For example you can see themes/Backend/ExtJs/backend/config/view/form/document.js

 { **name** : **'numbers'** , **xtype** : **'config-element-select'** , **valueField** : **'name'** , **displayField** : **'description'** , **store** : **'Shopware.apps.Config.store.form.Number'** , **fieldLabel** : **'{s name=document/detail/numbers\_label}Numbers{/s}'** }

http://joxi.ru/DmBLBQ8SwXOBnA

1 „Gefällt mir“
4

I understand how this options work now, I was able to make combobox work yesterday. Thanks for more examples though.