Skip to main content

1. ケースの背景

  • YiDAはローコードでコンポーネントを構築できるカスタムコンポーネント機能をリリースしましたが、対応しているのは表示型コンポーネントのみで、フォームコンポーネントの構築には対応していません。
  • ただし、ドキュメントには既存のフォームをストレージとして利用できる旨が記載されています。このアプローチを用い、データ保存用のフォームを新規生成することで擬似的なフォームコンポーネントをシミュレートし、画像のクロップとアップロードコンポーネントを構築しました。

3. 手順

2. schemaインポート機能を有効化します。手順はYiDAフォームデザイナーと同様で、詳細は以下を参照してください。
  • コンポーネントデザイナーを開き、コンソールから以下のコードを実行します。
3. 以下のschemaをコンポーネントデザイナーのschemaコンソールに貼り付け、「Import schema」をクリックします。

4. 本ケースの原理

  1. 本ケースはケース2をベースに、コンポーネントの「値変更時」設定プロパティ内でコードを記述できる機能を主に活用し、データ保存用のフォームを自動生成するschemaを構築するコードを記述しています。
  2. ユーザーは「フォーム保存機能を有効化」をクリックするだけで利用できます。
  3. 画像のクロップにはオープンソースのreact-cropper(https://www.npmjs.com/package/react-cropper)を使用しています。NPM依存関係のインストールにはまだ対応していないため、CDN経由での動的読み込みが唯一の方法です。