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

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む11読むのに数分

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

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

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

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

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

    始める前に

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

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

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

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

    手順

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

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

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

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

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

    タスクの結果

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

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

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

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

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

    始める前に

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

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

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

    このタスクについて

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

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

    手順

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

    タスクの結果

    ウィジェットのあるページで、選択した 1 つ以上のファイルを添付ファイル ゾーンにドラッグアンドドロップしてレコードに添付できます。

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

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

    始める前に

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

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

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

    このタスクについて

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

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

    手順

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

    タスクの結果

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

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