<?php
       
       namespace Modules\MyCustomWidget;
       
       use Zabbix\Core\CWidget;
       
       class Widget extends CWidget {
       
       public const MY_CONSTANT = 0;
       
       public function getTranslationStrings(): array {
       return [
       'class.widget.js' => [
       'No data' => _('No data')
       ]
       ];
       }
       }

<?php
       
       namespace Modules\MyCustomWidget\Includes;
       
       use Modules\MyCustomWidget\Widget;
       
       use Zabbix\Widgets\{
       CWidgetField,
       CWidgetForm
       };
       
       use Zabbix\Widgets\Fields\{
       CWidgetFieldMultiSelectItem,
       CWidgetFieldTextBox,
       CWidgetFieldColor
       };
       
       class WidgetForm extends CWidgetForm {
       
       public function addFields(): self {
       return $this
       ->addField(
       (new CWidgetFieldMultiSelectItem('itemid', _('Item')))
       ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
       ->setMultiple(false)
       ->setFilterParameter('numeric', true)
       )
       ->addField(
       new CWidgetFieldTextBox('description', _('Description'))
       )
       ->addField(
       (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000')
       );
       }
       }

<?php
       
       /**
        * My custom widget form view.
        *
        * @var CView $this
        * @var array $data
        */
       
       use Zabbix\Widgets\Fields\CWidgetFieldGraphDataSet;
       
       (new CWidgetFormView($data))
       ->addField(
       new CWidgetFieldMultiSelectItemView($data['fields']['itemid'], $data['captions']['items']['itemid'])
       )
       ->addField(
       new CWidgetFieldTextBoxView($data['fields']['description']),
       'js-advanced-configuration'
       )
       ->addField(
       new CWidgetFieldColorView($data['fields']['chart_color']),
       'js-advanced-configuration'
       )
       ->includeJsFile('widget.edit.js.php')
       ->addJavaScript('my_widget_form.init('.json_encode([
       'color_palette' => CWidgetFieldGraphDataSet::DEFAULT_COLOR_PALETTE
       ], JSON_THROW_ON_ERROR).');')
       ->show();

<?php
       
       use Modules\LessonGaugeChart\Widget;
       
       ?>
       
       window.widget_lesson_gauge_chart_form = new class {
       
       init({color_palette}) {
       this._advanced_configuration = document.getElementById('adv_conf');
       
       this._advanced_configuration.addEventListener('change', () => this.updateForm());
       
       colorPalette.setThemeColors(color_palette);
       
       for (const colorpicker of jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
       jQuery(colorpicker).colorpicker();
       }
       
       const overlay = overlays_stack.getById('widget_properties');
       
       for (const event of ['overlay.reload', 'overlay.close']) {
       overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); });
       }
       
       this.updateForm();
       }
       
       updateForm() {
       const show_advanced_configuration = this._advanced_configuration.checked;
       
       for (const element of this._form.querySelectorAll('.js-advanced-configuration')) {
       element.style.display = show_advanced_configuration ? '' : 'none';
       }
       }
       };