ポータルページからレコードにファイルを添付する

オーストラリア ServiceNow AI Platform ユーザーインターフェイス

Release

australia

ft:locale

ja-JP

ft:publication_title

オーストラリア ServiceNow AI Platform ユーザーインターフェイス

ft:clusterId

platux

bundleId

platux

workflow

Platform

ポータルページからレコードにファイルを添付する

リリースバージョン: Australia

更新日 2026年03月12日

所要時間：10分

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

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

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

ファイルを貼り付けたりドロップしたりして添付ファイルを追加する

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

始める前に

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

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

注:

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

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

手順

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

タスクの結果

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

注:

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

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

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

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

始める前に

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

注:

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

このタスクについて

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

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

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

手順

移動先すべて > サービスポータル > サービスポータル構成.
[ ウィジェットエディター] を選択します。
[既存のウィジェットを編集] メニューで、クローンを作成して添付ファイルゾーンを追加するウィジェットを選択します。
ウィジェットの 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. ウィジェットの [添付ファイル] セクション

手順

移動先すべて > サービスポータル > サービスポータル構成.
[ ウィジェットエディター] を選択します。
[既存のウィジェットを編集] メニューで、クローンしたウィジェットを選択して添付ファイルセクションを追加します。
ウィジェットの 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 では添付ファイルの貼り付けはサポートされていません。