ウィジェットのクローン

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：2分

    • 既存のウィジェットのクローンを作成して編集することで、既存のコードを活用します。

    始める前に

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

    このタスクについて

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

    手順

    1. [サービスポータル設定] ページでウィジェットエディターを開き、[ ウィジェットを選択 ] リストから既存のウィジェットを選択します。
      たとえば、[ Hello World 2] を選択します。
    2. ウィジェットヘッダーのリストメニューから、「 Hello World 2」のクローンをクリックします。
      図 : 1. ウィジェットのクローン
      [ウィジェットをクローン] フォーム
    3. クローンされたウィジェットの名前を入力します。
      ウィジェット名に基づいてウィジェット ID が自動的に作成されます。
    4. オプション: [ テストページを作成 ] を選択すると、ウィジェットを含むページが自動的に作成されます。
    5. チェックボックスを使用して、必要に応じてウィジェットエディターのさまざまなコンポーネントを表示または非表示にします。

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

      注:
      サーバーサイドスクリプトの場合、アプリケーションで ES5 標準モードまたは互換モードを使用している場合は、ECMAScript 2021 (ES12) JavaScript モードを使用してオンにできます。JavaScript モードが ECMAScript 2021 (ES12) に設定されているアプリケーションのスクリプトは、デフォルトで ECMAScript 2021 (ES12) を使用します。詳細については、「Turn on ECMAScript 2021 (ES12) mode for a script」を参照してください。
      図 : 2. Hello World 2 クローン
      Hello World 2 ウィジェットのクローンが作成され、「Hola, mundo」と表示されるように編集されました
    6. ウィジェットのプレビューを有効にするには、メニューの [プレビューの有効化 ] を使用します。
      表示される目のアイコンを使用して、ウィジェットのプレビューを表示または非表示にします。

    次のタスク

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

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

    図 : 3. ヘッダーウィジェット HTML の menuTemplate
    ヘッダーメニューウィジェット HTML で menuTemplate と呼ばれる ng-template が強調表示され、「menuTemplateCopy」に変更されました