PDFビューワのフォームエディタを使用すると、PDFフォームの設計、編集、入力、および提出を行うことができます。新しいフォームを作成したり、既存のフォームにフォームフィールドを追加・削除や名前、読み取り専用、最大長、値、境界、境界線などのプロパティを変更することで、既存のフォームを変更したりすることができます。フォームのすべてのフォームフィールドは、プロパティパネルで一覧表示され、容易にアクセスして変更できます。

フォームエディタのツールバーだけではなく、メインツールバーから直接すべてのフォームフィールドやその他のオプションもアクセスできます。メインツールバーには、テキストフィールド、パスワードフィールド、ラジオボタン、チェックボックスなどのさまざまなフォームフィールドのボタンを表示するフォームツールのボタンが用意されています。次の画像に示すように、クイック編集ツールバーには［元に戻す］、［やり直し］、［削除］および［墨消し］オプションも用意されています。

secondToolbarLayoutプロパティを使用して、フォームツールのクイック編集ツールバーにどのツールを表示するかを設定することができます。また、ページツールを使用して、新しい空白のドキュメントを追加したり、空白のページを挿入したり、現在のページを削除したり、操作を元に戻したややり直したりすることができます。詳細については、「注釈エディタ」トピックを参照します。

または、サイドパネルのフォームエディタボタンをクリックして、フォームエディタのツールバーからすべてのすべてのフォームフィールドがアクセスできます。次の画像は、フォームエディタを使用してテキストフィールドが追加されたPDFビューワでのPDFフォームを示しています。

次の画像は、フォームエディタを使用してテキストフィールドが追加されたPDFビューワでのPDFフォームを示しています。

次のテーブルでは、フォームエディタの各々のツールバーボタンを説明します。

ツールバーアイコン	説明
	追加されたフォームフィールドを選択します。
	テキストフィールドを追加します。
	パスワードフィールドを追加します。
	長いテキストを追加するためのテキスト領域フィールドを追加します。
	チェックボックスを追加します。
	ラジオボタンを追加します。
	プッシュボタンを追加します。
	コンボボックスを追加します。
	リストボックスを追加します。
	マス目テキストフィールドを追加して、PDFの等間隔の位置にテキストを追加します。
	フォーム送信ボタンを追加します。
	フォームリセットボタンを追加します。
	フォームフィールドを削除します。

上記のフォームフィールドとは別に、PDFビューワは、PDFドキュメントの操作中に以下の一般的な編集機能も提供します

ツールバーアイコン	説明
	変更を元に戻します。
	変更をやり直します。
	変更したドキュメントをクライアントに保存します。
	変更したドキュメントを画像としてクライアントに保存します。
	新しい空白のドキュメントを作成します。
	空白ページを挿入します。
	現在のページを削除します。
	PDFドキュメント内のページを並べ替えたり、整理したりすることができます。詳細については、「ページの整理」を参照します。

また、newPageメソッドを使用して、PDFドキュメントに空白のページを挿入し、そのサイズを設定できます。または、setPageSizeメソッドを使用して既存のページのサイズのみを設定できます。詳細については、注釈エディタを参照してください。

プロパティパネル

左側の垂直パネルにあるフォームエディタアイコンをクリックすると、フォームエディタのプロパティパネルが表示されます。プロパティパネルには、ドキュメント内のすべてのフォームフィールドのリストがページごとに表示されます。

また、テキスト、色、境界線の位置など、ドキュメント内のフォームフィールドのプロパティを設定することもできます。以下の画像は、プロパティパネル内にテキストフィールドのプロパティを示しています。

PDFビューワでフォームエディタの有効化

PDFビューワにて、デフォルトでフォームエディタを表示するには、次のコードのようにFormEditorPanelを有効にします。

<script>
    var viewer = new DsPdfViewer("#host", { supportApi: 'SupportApi/DsPdfViewer' });
    viewer.addDefaultPanels();
    viewer.addFormEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.open("Home/GetPdf");
</script>

PDFビューワで表示されるフォームフィールドをカスタマイズするには、ビューワでPDFをロードするクラスファイルに次のコードを追加します。

public static DsPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions
        {
            get => new DsPdfViewerSupportApiDemo.Models.PdfViewerOptions(
                DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.FormEditorPanel |
                DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.ActivateFormEditor,
                formEditorTools: new string[] { "edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "$split", "edit-erase-field", "$split", "edit-undo", "edit-redo", "save" });
        }

フォームエディタでPDFフォームの作成

以下の手順に従って、PDFビューワのフォームエディターを使用して「従業員詳細」のPDFフォームを作成します。

1. PDFドキュメントの編集ができるようPDFビューワを設定します。
2. フォームフィールドを追加する静的テキストを含むPDFドキュメントをロードします。
3. 左側の垂直ツールバーの最後のアイコンを使用してフォームエディタを開きます。
4. フォームエディタツールを使用することでテキストフィールド、テキスト領域およびラジオボタンを追加します。
5. プロパティパネルにて位置、境界線などのフォームフィールドのプロパティを設定します。
6. マウスクリックで複数のドロップダウンオプションを表示するコンボボックスを追加します。
7. フォームエディタを閉じて、表示モードに戻ります。

「従業員詳細」のPDFフォームが正常に作成されます。フォームエディタのプロパティパネルですべてのフォームフィールドの一覧を表示することができます。

フォームフィールドのタブ順序

フォームフィールドのタブの順序は、フォームエディタのプロパティパネルで表示（PDFドキュメントに設定した場合）または設定できます。これは、Tabキーを使用してフォームフィールドを移動するのに役立ちます。この機能は、長いフォームに入力するときに特に便利です。PDFビューワでは、PDF1.7仕様で指定されている次のタブ順序を設定できます。

• 行
• 列
• 構造
• 指定しない

表示モードでは、行、列、および指定しない（ページ内の注釈の順序に従う）のタブ順序のみがサポートされます。

また、DioDocs for PDFのAPIを使用して、PDFドキュメントのタブ順序を設定することもできます。 詳細については、「フォーム」を参照してください。

フォームフィールドの方向

回転したPDFページにフォームフィールドを配置すると、フォームフィールドは元の位置に追加され、それ自体では新しい方向に調整されません。PDFのページに配置されたフォームフィールドの回転を有効にするには、PDFビューワのOrientationプロパティ使用して、フィールドの方向を90度の倍数で設定します。

次のコードは、PDFドキュメント内のフォームフィールドの方向を設定する方法を示します。

// 方向を180度に変更します
fld1.orientation = 180;