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

Yokohama Now Platform のユーザーインターフェイス

Release

yokohama

ft:locale

ja-JP

ft:publication_title

Yokohama Now Platform のユーザーインターフェイス

ft:clusterId

platux

bundleId

platux

workflow

Platform

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

リリースバージョン: Yokohama

更新日 2025年01月30日

所要時間：11分

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

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

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

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

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

始める前に

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

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

注:

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

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

手順

次のように移動する。 All (すべて) > サービスポータル > Service Portal の構成.
[ウィジェットエディター] を選択します。
[既存のウィジェットを編集] メニューで、クローンしたウィジェットを選択します。
ウィジェットの HTML テンプレートで、 sp-attachment-button 要素を探します。
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>
```
[Save (保存)] をクリックする。

タスクの結果

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

注:

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

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

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

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

始める前に

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

注:

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

このタスクについて

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

この例では、ゾーンはフォームウィジェットの本体の上の領域です。ゾーンは、その上にファイルを移動する場合にのみ表示されます。

フォームウィジェットの添付ファイルゾーン上にファイルをドラッグする — 図 : 1. ウィジェット上の添付ファイルゾーン

手順

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

タスクの結果

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

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

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

始める前に

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

注:

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

このタスクについて

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

この例では、添付ファイルセクションがカタログアイテムウィジェットの下部に追加されます。

カタログアイテムウィジェット内に添付ファイルを追加するセクション — 図 : 2. ウィジェットの [添付ファイル] セクション

手順

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

タスクの結果

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

注:

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