Skip to main content
  • 本コンポーネントは、汎用コンポーネントを用いてフォームコンポーネントを構築する際の参考としてご利用いただけます。
  • ご注意:本コンポーネントは学習目的のみを想定しており、公式提供の標準コンポーネントではありません。

1. ユースケース

  • YiDAコンポーネントではカスタムコンポーネント機能がリリースされ、ローコード方式でコンポーネントを構築できるようになりました。ただし、フォームコンポーネントの構築には対応しておらず、表示用途のコンポーネントのみ構築可能です。
  • 一方でドキュメントには、既存のフォームをデータ保存用として活用できると記載されています。この手法を応用し、新しいフォームを生成してデータを保存させることで、疑似的なフォームコンポーネントとして機能する画像切り抜きアップロードコンポーネントを実装しました。

3. 手順

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

4. 関連する原理

  1. 主に、既存のフォームコンポーネントをバインドしてデータを保存することで、データ送信を実現しています。
  2. デメリットとして、利用時に一定の負担がある点が挙げられます。バインドしたコンポーネントの表示・非表示は、ご自身で制御する必要があります。
  3. 画像切り抜きにはオープンソースのreact-cropperを使用しています(https://www.npmjs.com/package/react-cropper)。NPM依存関係のインストールにはまだ対応していないため、CDN経由で動的に読み込む方法のみが選択肢となります。