यूआई घटकों का उपयोग करके फॉर्म फ़ील्ड के तहत एक नोट जोड़ें


18

मैं ui घटकों का उपयोग करके Magento 2 में एक क्षेत्र के तहत एक छोटा पाठ कैसे जोड़ सकता हूं।
का उपयोग करते हुए Magento\Framework\Data\Formमैं यह कर सकता है:

/** @var \Magento\Framework\Data\Form $form */
$form = $this->formFactory->create();
$fieldset = $form->addFieldset(
    'base_fieldset',
    [
        'legend' => __('Some legend here'),
        'class'  => 'fieldset-wide'
    ]
);
$fieldset->addField(
    'name',
    'text',
    [
        'name'      => 'name',
        'label'     => __('Name'),
        'title'     => __('Name'),
        'note'      => __('Some note here')
    ]
);

ऊपर दिया गया कोड इसे उत्पन्न करेगा (फ़ील्ड के अंतर्गत पाठ पर ध्यान दें)।

मैं फॉर्म यूआई-घटकों का उपयोग करके एक ही चीज कैसे प्राप्त कर सकता हूं?
मेरे पास इस तरह से परिभाषित रूप है:

<field name="name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Name</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">[entity]</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

मैंने जोड़ने की कोशिश की <item name="note" xsi:type="string" translate="true">Some note here</item>लेकिन, क्या लगता है?

जवाबों:


32

आप निम्न टैग का उपयोग करके इसे प्राप्त कर सकते हैं।

<item name="notice" xsi:type="string" translate="true">Some note here</item>

धन्यवाद। यह काम करता हैं। मैंने translate="true"सिर्फ अनुवाद करने योग्य वाक्यांश बनाने के लिए जोड़ा है कलेक्टर स्क्रिप्ट इसे भी उठाएं।
मेरियस

@ क्या आपको पता है कि नोटिस में html कोड का उपयोग कैसे करें?
सेर्गेई कोरज़ोव

कोशिश @SergeyKorzhov <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
मेरियस

@ मेरी पूछ से पहले किया था। काम नहीं करता। मज़ेदार बात यह है कि html, CDATA के बिना भी system.xml में ठीक काम करता है।
सर्गेई कोरज़ोव

इस नोटिस में, क्या मुझे डायनेमिक डेटा इनबेटन संदेश देना चाहिए ?? यह संभव @Marius है
Jaisa

3

मुझे पता था कि html को नोटिस ऑब्जेक्ट में रेंडर करने के लिए एक बहुत कष्टप्रद समय था। वहाँ दो समाधान मैं बाहर लगा दिया गया है। मुझे पता है कि यह संभवतः एक टिप्पणी हो सकती है, लेकिन मुझे लगा कि अन्य लोगों को भी इस कार्यक्षमता में रुचि होगी।

  1. एक नया HTML एलिमेंट बनाएं जो टेक्स्ट के बजाय नोटिस को HTML के रूप में प्रस्तुत करता है

मूल तत्व पर पाया जा सकता है /vendor/magento/module-ui/view/base/web/templates/form/field.html

कॉपी करें कि आपके मॉड्यूल में एक view/base/web/template/form/field-html-notice.htmlसमान या कुछ समान है ( कृपया ध्यान दें कि templatesनिर्देशिका को बदला जा रहा है templateजो जानबूझकर और कस्टम टेम्पलेट फ़ाइलों के लिए आवश्यक है )

अब आपकी नई फ़ील्ड-html-नोटिस.html फ़ाइल में, आप HTML का $data.noticeउपयोग करके लोड करने के लिए HTML फ़ाइल को संशोधित कर सकते हैं और पूरी तरह से स्पैन को छोड़ सकते हैं। (यदि आप अपने HTML का अनुवाद करना चाहते हैं, तो आपको कुछ समाधान करने के लिए इस समाधान को अनुकूलित करना होगा)

इसका समाधान इस टेम्पलेट को लेना और संशोधित करना होगा

    <!-- /vendor/magento/module-ui/view/base/web/templates/form/field.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
        <span translate="notice"/>
    </div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

इस तरह से कुछ और देखने के लिए:

    <!-- view/base/web/template/form/field-html-notice.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId" html="$data.notice"></div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

एक बार जब मैंने ऐसा करने का समय ले लिया, तो मुझे एहसास हुआ कि मैगेंटो टीम ने आसानी से हमें जोड़ने की क्षमता additionalInfoप्रदान की है जिसे html के रूप में प्रस्तुत किया गया है।

  1. एक घटक के लिए अतिरिक्त जानकारी के रूप में नोटिस क्लास के साथ एक डिव जोड़ें

additionalInfoअनुभाग में नोटिस div रेंडर करने के लिए बहुत अधिक विकल्प विकल्प होगा । की तर्ज पर कुछ

    <!-- my_cool_component.xml -->
    <field name="field_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- other field config -->
                <item name="additionalInfo" xsi:type="string" translate="true">
                    &lt;div class="admin__field-note"&gt;
                        This looks like a notice&lt;br/&gt;
                        it is super &ltspan style="font-weight=bold"&gt;TACKY&lt/span&gt;&lt;br/&gt;
                        but it will work &lta href="http://google.com"&gt;I promise&lt/a&gt;
                    &lt;/div&gt;
                </item>
            </item>
        </argument>
    </field>

तो हाँ, सरल सही? कुंआ। मैं अब सोने जा रहा हूँ।

(कृपया ध्यान दें कि यदि आप अपनी अतिरिक्त जानकारी में वास्तविक <या >वर्णों का उपयोग करते हैं तो xml सत्यापनकर्ता टूट जाएगा , इसलिए &lt;और&gt;

नोट: यह पता चलता है कि आप अपने html को <![CDATA[<p>cool paragraph man</p>]] थैंक्स @ मारीयर में लपेट सकते हैं


1
<आइटम का नाम = "अतिरिक्त" xsi: प्रकार = "स्ट्रिंग" अनुवाद = "सत्य"> बहुत बेहतर काम करता है फिर नोटिस करें
CompactCode

<![CDATA[<p>cool paragraph man</p>]] के तहत काम नहीं करता है messageलेकिन यह additionalInfo mag.2.2.2 के साथ काम करता है
वर्गास

2

वर्तमान Magento के 2 संस्करण 2.2.8 और 2.3.1 दोनों UI फॉर्म फ़ील्ड में डिफ़ॉल्ट रूप से html extraInfo का समर्थन करते हैं।

<item name="additionalInfo" xsi:type="string"><![CDATA[<b>My Html Information</b>]]>
</item>

फ़ील्ड.html टेम्पलेट को संशोधित करने की आवश्यकता नहीं है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.