Ui উপাদান ব্যবহার করে একটি ফর্ম ক্ষেত্রের নীচে একটি নোট যুক্ত করুন

Question

আমি কীভাবে UI উপাদান ব্যবহার করে ম্যাজেন্টো 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>কিন্তু, কি অনুমান?

Answer 1

আপনি নিম্নলিখিত ট্যাগ ব্যবহার করে এটি অর্জন করতে পারেন।

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

Comments

ধন্যবাদ। এটা কাজ করে। আমি translate="true"কেবল অনুবাদযোগ্য বাক্যাংশ সংগ্রহকারী স্ক্রিপ্টটিকে এটিকে বেছে নেওয়ার জন্য যুক্ত করেছি।

— Marius

@ মারিয়াস আপনি কীভাবে বিজ্ঞপ্তিতে এইচটিএমএল কোড ব্যবহার করবেন জানেন?

— সের্গেই কোরঝভ

চেষ্টা @SergeyKorzhov <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>

— Marius

@ মারিয়াস জিজ্ঞাসার আগে আমি তা করেছি। কাজ করে না. মজার বিষয় হ'ল এইচটিএমএল সিডিটিএ ছাড়াই system.xml এ ঠিক কাজ করে।

— সের্গেই কোরঝভ

এই বিজ্ঞপ্তিতে, আমি কী বার্তাবাহিনীর মধ্যে গতিশীল ডেটা দেব? এটি কি সম্ভব হয়েছে @ মারিয়াস

— জয়সা

Answer 2

কোনও নোটিশ অবজেক্টে রেন্ডার করার জন্য কীভাবে এইচটিএমএল পাবেন তা নির্ধারণ করার জন্য আমার খুব বিরক্তিকর সময় ছিল। আমি দুটি সমাধান বের করেছি fig আমি জানি এটি সম্ভবত একটি মন্তব্য হতে পারে তবে আমি বুঝতে পেরেছিলাম যে অন্যান্য লোকেরাও এই কার্যকারিতাটিতে আগ্রহী হবেন।

1. একটি নতুন এইচটিএমএল উপাদান তৈরি করুন যা পাঠ্যের পরিবর্তে এইচটিএমএল হিসাবে নোটিশটি রেন্ডার করে

মূল উপাদানটি পাওয়া যাবে /vendor/magento/module-ui/view/base/web/templates/form/field.html

আপনার মডিউলটিতে এমন কোনও পথ view/base/web/template/form/field-html-notice.htmlবা অনুরূপ কিছু সহ অনুলিপি করুন ( দয়া করে templatesডিরেক্টরিটি পরিবর্তিত হচ্ছে templateতা ইচ্ছাকৃত এবং কাস্টম টেম্পলেট ফাইলগুলির জন্য প্রয়োজনীয় নোট করুন )

এখন আপনার নতুন ক্ষেত্র-এইচটিএমএল-নোটিশ এইচটিএমএল ফাইলে, আপনি এইচটিএমএল $data.noticeব্যবহার করে লোড করতে এবং এই স্প্যানটি পুরোপুরি এড়িয়ে যেতে এইচটিএমএল ফাইলটি পরিবর্তন করতে পারেন । (অবশ্যই আপনি যদি এইচটিএমএল অনুবাদ করতে চান তবে কিছু সমাধানের জন্য আপনাকে এই সমাধানটি কাস্টমাইজ করতে হবে)

সমাধানটি হ'ল এই টেমপ্লেটটি গ্রহণ এবং সংশোধন করা

    <!-- /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এইচটিএমএল হিসাবে যুক্ত করার সুযোগ দিয়েছে convenient

2. কোনও উপাদানগুলির অতিরিক্ত তথ্য হিসাবে নোটিশ শ্রেণীর সাথে একটি ডিভ যুক্ত করুন

বিভাগটিতে নোটিশ ডিভিডি রেন্ডার করানোতে খুব টেস্টিয়ার বিকল্পটি হবে additionalInfo। এর লাইন বরাবর কিছু

    <!-- 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 যাচাইকারী যদি আপনি প্রকৃত ব্যবহারের ভঙ্গ করবে <বা >আপনার অতিরিক্ত তথ্য অক্ষর, অত <এবং>

দ্রষ্টব্য: দেখা যাচ্ছে আপনি <![CDATA[<p>cool paragraph man</p>]] ধন্যবাদ @ মারিয়াসে আপনার এইচটিএমএল জড়িয়ে রাখতে পারেন

Comments

<আইটেমের নাম = "অতিরিক্তInfo" এক্সসি: টাইপ = "স্ট্রিং" অনুবাদ = "সত্য"> আরও অনেক ভাল কাজ করে তবে বিজ্ঞপ্তি

— কমপ্যাক্টকোড

<![CDATA[<p>cool paragraph man</p>]] এর অধীনে কাজ করে না messageতবে এটি additionalInfo ম্যাগ ২.২.২ নিয়ে কাজ করে

— জুলিয়ানো ভার্গাস

Answer 3

বর্তমান ম্যাজেন্টো 2 সংস্করণ 2.2.8 এবং 2.3.1 উভয়ই ইউআই ফর্ম ক্ষেত্রে ডিফল্টরূপে এইচটিএমএল অতিরিক্ত ইনফোর সমর্থন করে।

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

ক্ষেত্রের html টেম্পলেটটি সংশোধন করার দরকার নেই।