サービスカタログ フォームのスクリプトをウィジェットに置き換える

サービスポータルでウィジェットを使用して UI マクロを置き換えることができます。サービスカタログ フォームに含まれている UI マクロからフォーム上の他のフィールドや変数を参照している場合は、再利用可能なコードを保持するウィジェットを作成して、サービスカタログ フォームの中に埋め込むことができます。フォーム上の任意の変数フィールドにアクセスする場合は、特殊な構文を使用します。

始める前に

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

手順

1. カタログ アイテム フォームで使用するアクションを実行するウィジェットを作成します。
   フォーム上の別の変数にアクセスする簡単なウィジェットの例については、手順 7 を参照してください。
2. 以前に、サービスポータルでサポートされていない UI マクロまたは他の再利用可能なコンポーネントを使用していたカタログ アイテムを開きます。
3. 関連リストで、カタログ アイテムに新しい変数を追加します。
4. 変数フォームを構成し、[ウィジェット] フィールドを追加します。
5. [タイプ] フィールドで、[マクロ] を選択します。
6. [ウィジェット] フィールドで、目的のアクションを実行するウィジェットを選択します。
7. オプション: 埋め込みウィジェットで $scope.page.g_form() または $scope.page.field の構文を使用して、カタログ アイテムの値にアクセスします。
   次の例は、単一行テキスト変数の値を変更する方法を示しています。テキスト変数では、color という名前がカタログ アイテムに関連付けられています。

   ウィジェットの HTML テンプレート

   <div>  
     Data from catalog variable:  
     <h1>{{ c.data.message }}</h1>  
   </div>

   ウィジェットのクライアント スクリプト

   function($scope) {  
        var c = this;  
     
        //Watch for changes in the color variable  
        $scope.$watch(function () {  
             return $scope.page.g_form.getValue('color');  
        }, function (value) {  
        //Update local data object with data from variable  
        c.data.message = value ? 'Content of color variable: ' + value : '';  
   });  
   }  

   次を使用して、変数またはカタログ アイテムのフィールドにアクセスできます。

   • $scope.page.g_form()：フォーム上の g_form インスタンス。サポートされているすべての g_form メソッドを使用できます。「サービス ポータルおよびクライアント スクリプト」を参照してください。たとえば、g_form.setValue('variable_name', 'new value'); などとします。
   • $scope.page.field()：変数を表すオブジェクト。
   サービスポータルでカタログ アイテムを開くと、埋め込みウィジェットから、カタログ アイテムに関連付けられた変数フィールドにアクセスします。