[comment]: # aside:1 [comment]: # ({0a11f1a9-f7477fb0}) # 設定 このページでは、カスタム設定フィールドを使用してウィジェット設定ビューを作成するために使用できるクラスについて説明します。 ウィジェット設定ビューは、ユーザーが[プレゼンテーション](/presentation)のウィジェットパラメーターを設定できるウィジェットの一部です。 [comment]: # ({/0a11f1a9-f7477fb0}) [comment]: # ({68bbd84a-adf59b13}) ### Widget プライマリウィジェットクラス、すべてのダッシュボードウィジェットの基本クラス*CWidget*を拡張します。 デフォルトのウィジェットの動作をオーバーライドするために必要です。 *Widget*クラスは、ウィジェットのルートディレクトリ(*zabbix/ui/modules/my_custom_widget*など)に配置する必要があります。 **Widget.php example** ```php [ 'No data' => _('No data') ] ]; } } ``` [comment]: # ({/68bbd84a-adf59b13}) [comment]: # ({e5aad37e-1ff26877}) ### WidgetForm *WidgetForm*クラスは、デフォルトクラス*CWidgetForm*を拡張し、データベース内でウィジェット構成の保存構造を定義し、入力検証を処理するために必要な[*CWidgetField*](#cwidgetfield)フィールドのセットを含みます。 *WidgetForm*クラスは*includes*ディレクトリに配置する必要があります。 クラスに別の名前が付いている場合は、その名前を*manifest.json*ファイルの[*widget/form_class*](/devel/modules/file_structor/manifest#widget)パラメーターで指定する必要があります。 **includes/WidgetForm.php example** ```php addField( (new CWidgetFieldMultiSelectItem('itemid', _('Item'))) ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK) ->setMultiple(false) ) ->addField( new CWidgetFieldTextBox('description', _('Description')) ) ->addField( (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000') ); } } ``` [comment]: # ({/e5aad37e-1ff26877}) [comment]: # ({3ca7a0e4-61f06fc3}) ### CWidgetFormView *CWidgetFormView*クラスは、*WidgetForm*クラスで定義されたフィールドのプレゼンテーションロジックを指定し、設定ビューで表示されるときの外観と動作を決定するために必要です。 *CWidgetFormView*クラスは次のメソッドをサポートします。 - *addField()* - *CWidgetFieldView*クラスのインスタンスをパラメーターとして受け取ります。 各[*CWidgetField*](#cwidgetfield)クラスには、ウィジェット設定ビューで使用するためのそれぞれの*CWidgetFieldView*クラスがあります。 - *addFieldset()* - フィールドを結合して折りたたみ可能なコンテナにする*CWidgetFieldsGroupView*クラスのインスタンスを受け取ります。 - *addFieldsGroup()* - フィールドを視覚的に(境界線を使用して)グループに結合する*CWidgetFormFieldsetCollapsibleView*のインスタンスを受け取ります。 - *includeJsFile()* - JavaScriptファイルをウィジェット設定ビューに追加できます。 - *addJavaScript()* - ウィジェット設定ビューがロードされるとすぐに実行されるインラインJavaScriptを追加できます。 *CWidgetFormView*クラスは*views*ディレクトリに配置する必要があります。 **views/widget.edit.php example** ```php addField( (new CWidgetFieldMultiSelectItemView($data['fields']['itemid']))->setPopupParameter('numeric', true) ) ->addFieldset( (new CWidgetFormFieldsetCollapsibleView(_('Advanced configuration'))) ->addField( new CWidgetFieldTextBoxView($data['fields']['description']) ) ->addField( new CWidgetFieldColorView($data['fields']['chart_color']) ) ) ->includeJsFile('widget.edit.js.php') ->addJavaScript('my_custom_widget_form.init('.json_encode([ 'color_palette' => WidgetForm::DEFAULT_COLOR_PALETTE ]).');') ->show(); ``` [comment]: # ({/3ca7a0e4-61f06fc3}) [comment]: # ({d7c94075-d1c62429}) ### JavaScript JavaScriptクラスを使用して、ウィジェット設定ビューに動的な動作と対話性を追加できます。 たとえば、[*CWidgetFormView*](#cwidgetformview)クラスで定義されたカラーピッカーを初期化できます。 JavaScriptクラスはフォームとともにロードする必要があるため、メソッド*includeJsFile()*および*addJavaScript()*を使用して[*CWidgetFormView*](#cwidgetformview)クラスで参照する必要があります。 以下の例では、シングルトンクラスインスタンスがすぐに作成され、*window.my_custom_widget_form*という名前で保存されます。 したがって、フォームを2回目に開くとインスタンスが再作成されます。 JavaScriptクラスは*views*ディレクトリに配置する必要があります。 **views/widget.edit.js.php example** ```php window.my_custom_widget_form = new class { init({color_palette}) { colorPalette.setThemeColors(color_palette); for (const colorpicker of jQuery('. 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'); }); } } }; ``` [comment]: # ({/d7c94075-d1c62429}) [comment]: # ({1e4be89d-708ecb6b}) ### CWidgetField *CWidgetField* クラスは、すべてのフォームフィールドクラス（*CWidgetFieldCheckBox*、*CWidgetFieldTextArea*、*CWidgetFieldRadioButtonList* など）が継承する基底クラスです。 *CWidgetField* を拡張するクラスは、ウィジェット設定値の受け取り、保存、検証を担当します。 以下の *CWidgetField* クラスを利用できます。 |CWidgetField class|Database field type|Description| |----|----|----------| |*CWidgetFieldCheckBox*|int32|単一のチェックボックス。| |*CWidgetFieldCheckBoxList*|array of int32|単一の設定フィールド内の複数のチェックボックス。| |*CWidgetFieldColor*|string|色選択フィールド。| |*CWidgetFieldDatePicker*|string|日付選択フィールド。| |*CWidgetFieldIntegerBox*|int32|整数を入力するフィールド。最小値と最大値の設定に使用できます。| |*CWidgetFieldLatLng*|string|緯度、経度、地図のズームレベルをカンマ区切りで入力できるテキストボックス。| |*CWidgetFieldMultiSelect*|-|マルチセレクトフィールドの基底クラスで、すべての *CWidgetFieldMultiSelect\** クラスによって拡張されます。| |*CWidgetFieldMultiSelectAction*|ID|*Alerts → Actions* で定義されたアクションの一覧からアクションを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectGraph*|ID|カスタムグラフを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectGraphPrototype*|ID|カスタムグラフプロトタイプを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectGroup*|ID|ホストグループを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectHost*|ID|ホストを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectHostInventory*|array of int32|ホストインベントリフィールドを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectItem*|ID|アイテムを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectItemPrototype*|ID|アイテムプロトタイプを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectMap*|ID|マップを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectMediaType*|ID|メディアタイプを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectOverrideHost*|ID|ダッシュボードまたは別のウィジェットから、ホストのデータソースを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectService*|ID|サービスを選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectSla*|ID|SLA を選択するためのマルチセレクトフィールド。| |*CWidgetFieldMultiSelectUser*|ID|ユーザーを選択するためのマルチセレクトフィールド。| |*CWidgetFieldNavTree*|array of (multiple mixed)|*Map navigation tree* ウィジェットで使用するマップのナビゲーションツリー構造を保存します。| |*CWidgetFieldNumericBox*|string|浮動小数点数を入力するフィールド。| |*CWidgetFieldPatternSelect*|-|パターン選択フィールドの基底クラスで、すべての *CWidgetPatternSelect\** クラスによって拡張されます。| |*CWidgetFieldPatternSelectHost*|string|ホストを選択するためのマルチセレクトフィールド。ホスト名パターンをサポートします。| |*CWidgetFieldPatternSelectItem*|string|アイテムを選択するためのマルチセレクトフィールド。アイテム名パターンをサポートします。| |*CWidgetFieldRadioButtonList*|int32|1 つ以上のラジオボックスで構成されるラジオボックスグループ。| |*CWidgetFieldRangeControl*|int32|整数型の値を選択するためのスライダー。| |*CWidgetFieldReference*|string|ダッシュボード上のこのウィジェットの一意な識別子を保存します。ウィジェット間通信に使用されます。| |*CWidgetFieldSelect*|int32|ドロップダウン選択ボックス。| |*CWidgetFieldSeverities*|array of int32|トリガーの深刻度があらかじめ設定された *CWidgetFieldCheckBoxList*。| |*CWidgetFieldSparkline*|array of (multiple mixed)|スパークラインチャートを設定できます。| |*CWidgetFieldTags*|array of (string, int32, string)|1 つ以上のタグフィルター行を設定できます。| |*CWidgetFieldTextArea*|string|複数行のテキストを入力するためのテキストエリア。| |*CWidgetFieldTextBox*|string|1 行のテキストを入力するためのテキストボックス。| |*CWidgetFieldThresholds*|array of (string, string)|色と数値の組み合わせを設定できます。| |*CWidgetFieldTimePeriod*|array of string|期間選択フィールド。| |*CWidgetFieldTimeZone*|string|タイムゾーンのドロップダウン。| |*CWidgetFieldUrl*|string|URL を入力できるテキストボックス。| ::: noteclassic `int32` フィールドの最大長は 10 文字、`ID` フィールドは 20 文字、`string` フィールドは 65535 文字です。 複合型（例: `array of (string, int32, string)`）では、制限は各要素に個別に適用されます。 フィールド固有の長さ制限は、`setMaxLength()` などのメソッドを使用して設定できます。 ::: [comment]: # ({/1e4be89d-708ecb6b})