Skip to content

Come aggiungere una scheda nel componente Form Ui

Ti consigliamo di testare questa risposta in un ambiente controllato prima di spostarla in produzione, saluti.

Soluzione:

Purtroppo, non credo che nessuna delle altre risposte possa funzionare. Una (il link a un tutorial) non è nemmeno un componente UI. È è possibile aggiungere schede con un componente dell'interfaccia utente. Il mio esempio è per Magento 2.2 +, ma sospetto che possa funzionare anche nelle versioni precedenti se adattato alla vecchia sintassi dei componenti UI.

Passo #1

I seguenti sono i requisiti necessari per far funzionare un componente UI con schede (sostituire tutti i riferimenti a "referral" con il nome del componente UI):

Referral referral_form.referral_form_data_source left tabs referral_form.referral_form_data_source

Nota: la maggior parte del codice del componente UI di esempio è corretto, ma è necessario aggiungere quanto segue alla sezione al nodo:

left
tabs

Passo n. 2

Impostare il layout della pagina nel file XML di layout:


Magento_Customer/view/base/ui_component/customer_form.xml è un buon esempio nel nucleo.

Sostituire il codice sottostante nel file roaming_form.xml.


roaming_form.roaming_form_data_source Roaming Details templates/form/collapsible roaming_form data roaming_form.roaming_form_data_source VendorModuleUiDataProviderFormRoamingDataProvider roaming_form_data_source entity_id id Magento_Ui/js/form/provider
true Roaming Details false text input current_roaming Roaming Name true text input current_roaming string current_roaming Roaming Image true fileUploader ui/form/element/uploader/uploader Magento_Catalog/image-preview image false 13 true Description true text wysiwyg ui/form/field true current_roaming
true List Products products id ${ $.ns }.product_listing_roaming ${ $.ns }.${ $.ns }.columns.ids true product_listing_roaming product_listing_roaming

È sufficiente aggiungere la riga seguente per rendere collassabile qualsiasi scheda.

true

Sostituire il codice sottostante nel file roaming_form.xml

  
  
roaming_form.roaming_form_data_source Roaming Details roaming_form data roaming_form.roaming_form_data_source left tabs VendorModuleUiDataProviderFormRoamingDataProvider roaming_form_data_source entity_id id Magento_Ui/js/form/provider
Roaming Details 10 false text input current_roaming Roaming Name true text input current_roaming string current_roaming Roaming Image true fileUploader ui/form/element/uploader/uploader Magento_Catalog/image-preview image false 13 true Description true text wysiwyg ui/form/field true current_roaming
List Products 10 products id ${ $.ns }.product_listing_roaming ${ $.ns }.${ $.ns }.columns.ids true product_listing_roaming product_listing_roaming

Qui puoi vedere i commenti e le valutazioni degli utenti

Successivamente puoi trovare le note di altri creatori, puoi comunque mostrare le tue se lo ritieni opportuno.



Utilizzate il nostro motore di ricerca

Ricerca
Generic filters

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.