The module provides useful widget components to be able to create complex widgets in Magento 2., (*1)
List of available components
Image Picker
Allows to use the cms image uploader on the widget forms, which makes it easy to upload/select an image for the widget., (*2)
Features of this component:
- Upload cms image
- Select already uploaded cms image
- Configurable image choose button label
- Restrict the allowed images by with/height
- Restrict the allowed images by file size
- (allowed file types are configured in the cms module OOB), (*3)
Video Picker
Allows to use the cms uploader on the widget forms, which makes it easy to upload/select an video for the widget., (*4)
Features of this component:
- Upload cms video
- Select already uploaded cms video
- Configurable video choose button label
- Restrict the allowed videos by file size
- (allowed file types are configured in the specific xml file), (*5)
Date Picker
Allows to pick date using the default datepicker js component., (*6)
Features of this component:
- Date format is configurable
- Time format is configurable (if not provided only date chooser will appear)
- Image of the date-picker component is configurable
- Date field can be configured to be disabled (read-only), (*7)
Datetime Picker
Same as the datepicker component, just comes with a pre-configured time format, so it will appear as a date-time chooser by default., (*8)
Textarea
Allows to use textarea on the widget forms., (*9)
Features of this component:
- Visible width of a text area (cols) is configurable
- Visible number of lines in a text area (rows) is configurable
- Maximum number of characters allowed (maxlenght) is configurable
- Dinamically shows the number of characters remaining if maxlength configured, (*10)
Checkbox
Allows to use checkboxes on the widget form. Useful for replacing the Yes/No select which usually used., (*11)
Features of this component:
- The checkbox value is configurable (by default it is '1' when checked), (*12)
Allows to embed a widget into another widget. Useful to create custom reusable widget components. E.g. a link sub-widget which is a combination of 3 fields: url, link text and 'should open in new window' can be reused in many widget., (*13)
Features of this component:
- The label of the sub-widget cofiguration button is configurable
- Allows to embed widget in any depth (sub-widget can also have a sub-widget), (*14)
For more information please see the Usage section., (*15)
Compatibility
Magento 2.X (tested in magento 2.0.10, 2.1.2, 2.2.3), (*16)
Usage
Image Picker
<parameter name="my_param" xsi:type="block" visible="true" required="false">
<label translate="true">Image</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\ImagePicker">
<!-- Optional configuration parameters -->
<data>
<item name="dimension" xsi:type="array">
<item name="max-width" xsi:type="string">500</item>
<item name="max-height" xsi:type="string">500</item>
</item>
<item name="max-size" xsi:type="string">50000</item>
<item name="button" xsi:type="array">
<item name="open" xsi:type="string">Select Image...</item>
</item>
</data>
<!-- Optional configuration parameters -->
</block>
</parameter>
Video Picker
<parameter name="my_param" xsi:type="block" visible="true" required="false">
<label translate="true">Video</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\VideoPicker">
<!-- Optional configuration parameters -->
<data>
<item name="max-size" xsi:type="string">500000</item>
<item name="button" xsi:type="array">
<item name="open" xsi:type="string">Select Video...</item>
</item>
</data>
<!-- Optional configuration parameters -->
</block>
</parameter>
Date Picker
<parameter name="my_param" xsi:type="block" visible="true" required="false">
<label translate="true">Date</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\DatePicker">
<!-- Optional configuration parameters -->
<data>
<item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
<item name="timeFormat" xsi:type="string">HH:mm:ss</item>
<item name="image" xsi:type="string">path-to/url</item>
<item name="disabled" xsi:type="boolean">true</item>
</data>
<!-- Optional configuration parameters -->
</block>
</parameter>
Datetime Picker
<parameter name="my_param" xsi:type="block" visible="true" required="false">
<label translate="true">Datetime</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\DateTimePicker">
<!-- Optional configuration parameters -->
<data>
<item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
<item name="timeFormat" xsi:type="string">HH:mm:ss</item>
<item name="image" xsi:type="string">path-to/url</item>
<item name="disabled" xsi:type="boolean">true</item>
</data>
<!-- Optional configuration parameters -->
</block>
</parameter>
Textarea
<parameter name="my_param" xsi:type="block" visible="true" required="false">
<label translate="true">Textarea</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\Textarea">
<!-- Optional configuration parameters -->
<data>
<item name="cols" xsi:type="string">visible width of a text area</item>
<item name="rows" xsi:type="string">visible number of lines in a text area</item>
<item name="maxlength" xsi:type="string">maximum number of characters allowed in the text area</item>
</data>
<!-- Optional configuration parameters -->
</block>
</parameter>
Checkbox
<parameter name="my_param" xsi:type="block" visible="true" required="false">
<label translate="true">Checkbox</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\Checkbox">
<!-- Optional configuration parameters -->
<data>
<item name="value" xsi:type="string">checkbox_value</item>
</data>
<!-- Optional configuration parameters -->
</block>
</parameter>
<parameter name="my_param" xsi:type="block" visible="true" required="true" sort_order="10">
<label translate="true">Sub-Widget</label>
<block class="MX\WidgetComponent\Block\Adminhtml\Component\SubWidget">
<data>
<!-- Optional configuration parameters -->
<item name="button-label" xsi:type="string">Subwidget configuration button text</item>
<!-- Optional configuration parameters -->
<item name="widget-type-id" xsi:type="string">the_id_of_the_sub_widget</item>
</data>
</block>
</parameter>
Wallogit.com
