ウィジェットのクローン

既存のウィジェットを複製して編集することで、既存のコードを活用できます。

始める前に

必要なロール：admin または sp_admin

このタスクについて

注:

ベースシステムウィジェットは読み取り専用であるため、将来の更新から恩恵を受けることができます。変更を加えるには、基本システム ウィジェットをクローンできます。ただし、クローンされたウィジェットはカスタムと見なされ、クローン元のウィジェットの将来の更新から恩恵を受けることはありません。

手順

1. [サービス ポータル設定] ページでウィジェット エディターを開き、[ウィジェットを選択] リストから既存のウィジェットを選択します。
   たとえば、Hello World 2 を選択します。
2. ウィジェット ヘッダーのリスト メニューから、[クローン "Hello World 2"] をクリックします。

   図 : 1. ウィジェットのクローン

   

3. クローンされたウィジェットの名前を入力します。
   ウィジェット ID は、ウィジェット名に基づいて自動的に作成されます。
4. オプション: [テスト ページの作成] を選択し、ウィジェットを含むページを自動的に作成します。
5. チェック ボックスを使用して、必要に応じてウィジェット エディターのさまざまなコンポーネントを表示または非表示にします。

   HTML テンプレート、CSS、クライアント スクリプト、サーバー スクリプト、またはリンク機能を変更します。

   図 : 2. Hello World 2 のクローン

   

6. ウィジェットのプレビューを有効にするには、メニューから [プレビューの有効化] を選択します。
   表示される目のアイコンを使用して、ウィジェットのプレビューを表示または非表示にします。

次のタスク

Angular ng-template を使用するウィジェットをクローンする場合、テンプレートを手動でクローンし、ウィジェット内のテンプレート参照の名前を変更する必要があります。

たとえば、ヘッダー メニュー ウィジェットでは Angular ng-template menuTemplate が使用されます。ヘッダー メニュー ウィジェットをクローンする場合、menuTemplate をクローンし、クローンに一意の名前を付ける必要もあります。ヘッダー メニュー ウィジェットのクローンを開くと、menuTemplate への参照が HTML で表示されます。

図 : 3. ヘッダー ウィジェット HTML の menuTemplate