ポータルページからレコードへのファイルの添付

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：10分

    • 添付ファイルをポータルページからレコードに追加するには、ファイルシステム内を移動するか、クリップボードからファイルを貼り付けるか、ファイルをドラッグアンドドロップします。

    デフォルトでは、いくつかのベースシステムウィジェットは、これらの方法の 1 つ以上を使用してポータルユーザーからの添付ファイルを受け入れます。ポータルユーザーが添付ファイルを追加する方法を変更するには、次の手順で説明するように、ウィジェットのクローンを作成して編集し、添付ファイルのエクスペリエンスをカスタマイズします。

    ポータルユーザーがポータルのページからレコードにファイルを添付する方法を追跡するには、 ユーザーエクスペリエンスアナリティクス for サービスポータル の SP ファイル添付イベントを参照してください。使用可能なイベントの詳細については、「 サービスポータル イベント」を参照してください。

    ファイルの貼り付けまたはドロップによる添付ファイルの追加

    ポータルユーザーが [添付ファイルを追加] ダイアログボックスでファイルを貼り付けたりドロップしたりしてファイルを添付できるようにします。

    始める前に

    デフォルトでは、フォーム、チケット添付ファイル、チケット会話、および SC カタログアイテムベースシステムウィジェットは、ファイルシステム内を移動するだけでなく、[添付ファイルを追加] ダイアログボックスでのファイルの貼り付けまたはドロップによる添付ファイルの追加をサポートしています。

    他のウィジェットに対してこの機能を構成するには、 sp-attachment-button ディレクティブを使用した添付ファイルの追加をサポートするウィジェットをクローンまたは作成します。ウィジェットのクローン作成の詳細については、「 ウィジェットのクローン」を参照してください。

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

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

    手順

    1. 移動先 すべて > サービスポータル > Service Portal の構成.
    2. [ウィジェットエディター] を選択します。
    3. [既存のウィジェットを編集] メニューで、クローンしたウィジェットを選択します。
    4. ウィジェットの HTML テンプレート で、 sp-attachment-button 要素を見つけます。
    5. sp-attachment-button 要素の属性を設定します。
      • モーダル: true に設定すると、コピー/貼り付けおよびドラッグアンドドロップのサポートが有効になります。

        コピー&ペーストとドラッグ&ドロップのサポートをオフにするには、 false に設定します。

      • supported-extensions:添付ファイルでサポートされているファイル拡張子のリストを [添付ファイルを追加] ダイアログボックスの下部に表示します。

        glide.attachment.extensionsシステムプロパティで指定されたサポートされているファイル拡張子を一覧表示するには、{{::d ata.supportedAttachmentExtensions}}に設定します。

      <sp-attachment-button modal="true" supported-extensions="{{::data.supportedAttachmentExtensions}}"></sp-attachment-button>
    6. [保存] を選択します。

    タスクの結果

    ウィジェットを含むページでは、次の例に示すように、[添付ファイルを追加] ダイアログボックスにファイルを貼り付けたりドロップしたりして、レコードに添付できます。

    注:
    この機能はモバイルエクスペリエンスではサポートされていません。添付ファイルの貼り付けは Firefox ではサポートされていません。

    [添付ファイルを追加] ダイアログボックスでファイルを選択、ドロップ、または貼り付けるオプション

    ファイルを添付するためのドラッグアンドドロップゾーンを追加する

    ポータルユーザーが添付ファイルをページの専用ゾーンにドロップして、レコードにファイルをすばやく添付できるようにします。

    始める前に

    ページにドラッグアンドドロップの添付ファイルゾーンを構成するには、クライアントスクリプトで nowAttachmentHandler のインスタンスに設定された attachmentHandler を呼び出して、添付ファイルの追加をサポートするウィジェットをクローンまたは作成する必要があります。このようなウィジェットの例については、 フォーム ウィジェットを参照してください。ウィジェットのクローン作成の詳細については、「 ウィジェットのクローン」を参照してください。

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

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

    このタスクについて

    デフォルトでは、ポータルユーザーは、[添付ファイルを追加] アイコン (添付ファイルアイコン) を選択して [添付ファイルを追加] ダイアログボックスを開くことで、多くのベースシステムページに添付ファイルを追加できます。ドラッグアンドドロップの添付ファイルゾーンにより、ポータルユーザーは少ないクリック数で添付ファイルを追加できます。たとえば、カタログ要求またはフォームの領域に添付ファイルをドロップできます。

    この例では、ゾーンはフォームウィジェットの本体上の領域です。ゾーンは、その上にファイルを移動するときにのみ表示されます。
    図 : 1. ウィジェット上の添付ファイルゾーン
    フォーム ウィジェットの添付ファイル ゾーンにファイルをドラッグする

    手順

    1. 移動先 すべて > サービスポータル > Service Portal の構成.
    2. [ウィジェットエディター] を選択します。
    3. [既存のウィジェットの編集] メニューで、クローンしたウィジェットを選択して添付ファイルゾーンを追加します。
    4. ウィジェットの HTML テンプレート で、 sp-attachment-picker attachment-handler="attachmentHandler" ディレクティブを <div> または <section> 要素の属性として追加します。
      ゾーンには、ウィジェット全体を含めることも、ウィジェットの一部のみを含めることもできます。
      <div sp-attachment-picker attachment-handler="attachmentHandler">
    5. オプション: sp-attachment-picker ディレクティブの属性を設定します。
      • disable-picker-overlay="true":添付ファイルゾーンにファイルをドラッグすると、その上にオーバーレイが表示されなくなります。デフォルトでは、オーバーレイは有効になっています。
      • onFilePick:ファイルが選択されたときにイベントをトリガーすることで、カスタムロジックを実装します。値を、選択したすべてのファイルの参照を配列として受け取る関数を最初のパラメーターとして設定します。たとえば、 on-file-pick="attachFiles($files)" です。実装できるカスタムロジックの例としては、ファイルのプレビュー、カスタム検証、カスタムアップロードロジックなどがあります。この属性が構成されている場合、 attachment-handler="attachmentHandler" 属性は不要であり、削除できます。
    6. オプション: モバイルデバイスで添付ファイルゾーンを非表示にします。
      1. ng-if="isDesktopBrowser" ディレクティブを sp-attachment-picker ディレクティブに追加します。 
        <div sp-attachment-picker attachment-handler="attachmentHandler" ng-if="isDesktopBrowser">
      2. ウィジェットの クライアントスクリプト に、次のスクリプトを追加します。 
        $scope.isNative = cabrillo.isNative();
$scope.isMobileBrowser = spUtil.isMobile() && !$scope.isNative;
$scope.isDesktopBrowser = !$scope.isNative && !$scope.isMobileBrowser;
    7. [保存] を選択します。

    タスクの結果

    ウィジェットを含むページでは、選択した 1 つ以上のファイルを添付ファイル領域にドラッグし、ドロップしてレコードに添付できます。

    ウィジェットへの添付ファイル セクションの追加

    ポータルユーザーがウィジェットのセクション内のファイルに貼り付け、ドロップ、またはファイルに移動して、レコードにファイルをすばやく添付できるようにします。

    始める前に

    ウィジェットで添付ファイルセクションを構成するには、クライアントスクリプトで nowAttachmentHandler のインスタンスに設定された attachmentHandler を呼び出して、添付ファイルの追加をサポートするウィジェットをクローンまたは作成する必要があります。このようなウィジェットの例については、 フォーム ウィジェットを参照してください。ウィジェットのクローン作成の詳細については、「 ウィジェットのクローン」を参照してください。

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

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

    このタスクについて

    デフォルトでは、ポータルユーザーは、[添付ファイルを追加] アイコン (添付ファイルアイコン) を選択して [添付ファイルを追加] ダイアログボックスを開くことで、多くのベースシステムページに添付ファイルを追加できます。添付ファイルセクションを使用すると、ポータルユーザーは少ないクリック数で添付ファイルを追加できます。

    この例では、添付ファイルセクションがカタログアイテムウィジェットの下部に追加されています。
    図 : 2. ウィジェットの [添付ファイル] セクション
    カタログアイテムウィジェット内の添付ファイルを追加するセクション

    手順

    1. 移動先 すべて > サービスポータル > Service Portal の構成.
    2. [ウィジェットエディター] を選択します。
    3. [既存のウィジェットを編集] メニューで、クローンしたウィジェットを選択して添付ファイルセクションを追加します。
    4. ウィジェットの HTML テンプレート で、添付ファイルセクションを表示する要素として sp-attachment-picker ディレクティブを追加します。 
      <sp-attachment-picker attachment-handler="attachmentHandler"></sp-attachment-picker>
    5. オプション: sp-attachment-picker ディレクティブの属性を設定します。
      • disable-picker-overlay="true":ファイルを添付ファイルセクションにドラッグすると、その上にオーバーレイが表示されなくなります。デフォルトでは、オーバーレイは有効になっています。
      • onFilePick:ファイルが選択されたときにイベントをトリガーすることで、カスタムロジックを実装します。値を、選択したすべてのファイルの参照を配列として受け取る関数を最初のパラメーターとして設定します。たとえば、 on-file-pick="attachFiles($files)" です。実装できるカスタムロジックの例としては、ファイルのプレビュー、カスタム検証、カスタムアップロードロジックなどがあります。
    6. オプション: モバイルデバイスで添付ファイルセクションを非表示にします。
      1. ng-if="isDesktopBrowser" ディレクティブを sp-attachment-picker ディレクティブに追加します。 
        <sp-attachment-picker attachment-handler="attachmentHandler" ng-if="isDesktopBrowser"></sp-attachment-picker>
      2. ウィジェットの クライアントスクリプト に、次のスクリプトを追加します。 
        $scope.isNative = cabrillo.isNative();
$scope.isMobileBrowser = spUtil.isMobile() && !$scope.isNative;
$scope.isDesktopBrowser = !$scope.isNative && !$scope.isMobileBrowser;
    7. [保存] を選択します。

    タスクの結果

    ウィジェットを含むページでは、選択した 1 つ以上のファイルを添付ファイルセクションに貼り付けるか、ドロップしてレコードに添付できます。

    注:
    添付ファイルの貼り付けは Firefox ではサポートされていません。