fcode-forms について
fcode-forms は、Factorial Code のプロセス入力フォームをウェブページに埋め込み、送信時に実行を開始するスキルです。スキーマ設定、バージョン固定、結果処理、非同期実行を扱います。
主な機能
- 01ウェブページへのプロセスフォーム埋め込み
- 02パラメータースキーマによる項目定義
- 03stable によるプロセスバージョン固定
- 04結果・エラー・リダイレクトの処理
- 05時間のかかる処理の非同期実行
活用シーン
- 01ウェブサイトで入力を受け付けて Factorial プロセスを開始
- 02React ページにフォームを埋め込み
- 03埋め込みフォームで使うプロセスの版を固定
- 04時間のかかる処理を非同期で実行
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ factorialco/ factorial-code-skills --skill fcode-formsインストール後、Claude Code で/fcode-formsを入力して読み込まれたか確認します。
同梱ファイルreferences/advanced.md
詳細
Factorial Code — フォーム
Factorial Code Form を使うと、プロセスの入力パラメーター用フォームを任意のウェブページに埋め込めます。
送信するたびに、フォームデータを使ってプロセスの実行が開始され、結果はページ内で処理されます(メッセージ、リダイレクト、コールバック)。スキーマの詳細については、
fcode-json-schema を参照してください。
注意点
- フォームそのものがプロセスの
parametersSchema.jsonです。別個のフォーム定義はありません。 フィールド、検証、ラベルを変更するには、埋め込みコードではなく、スキーマを編集してください。 - すべての埋め込みで
teamとprocess/processIdの両方が必須であり、 いずれもワークスペースごとの UUID ではなくスラッグを指定します。 - 埋め込みでは常に
stableエイリアスを指定してください (data-fcode-form-process-version="stable"/processVersion: "stable")。 バージョンを指定しないフォームは現在のバージョンを実行するため、fcode pushのたびにすぐ変更が反映されます。詳細は後述します。 - 不明なバージョンやエイリアスを指定しても、フォームは失敗しません。現在のバージョンが黙って実行されます(「フォームのバージョンを固定する」を参照)。
Formsフラグを有効にする必要があります。プロセスのダッシュボードの Trigger from Factorial セクションで有効にするか、プロセスのmetadata.jsonにfactorial.form.enabled(旧形式:"form": { "enabled": true })を設定してfcode pushを実行してください。有効にしないと、埋め込みフォームは表示されません。- フォームには Factorial の ID が必要です。公開設定にした場合を除きます。 デフォルトでは、フォームには Factorial 経由でアクセスします。Factorial が利用者を認証し、信頼できるコンテキストを挿入します。匿名の訪問者は、チームとプロセスのスラッグを知っていても、スキーマを読み取ったりフォームを送信したりできません。実際にその必要があるフォームでは、
factorial.form.publicを設定すると、この制限を解除できます。どちらの場合も、呼び出し元が実行できる操作は、背後にあるプロセスによって制限されます(後述)。 - Factorial 内から開くフォームは、Factorial Action ブロック(
fcode-factorial-actions)のfactorial.formで設定します。form.enabledも引き続き機能し、同期されています。アプリ独自のページでユーザーに提供するフォームはfactorial.form.appToolです。インストール、設定、アンインストール用のフォームはform.appRoleで指定します。プロセスにロールの宣言がない場合は、予約済みスラッグで指定します(fcode-factorial-actions)。factorial.form.publicを設定すると、Factorial 外のユーザー向けフォームを、リンクを知っている誰もが利用できるようになります。 - スキーマに実行可能な JavaScript を含めることはできません。
embedFormOptions.onChangeとフィールドのtransformFnは削除されました。また、メッセージは Markdown で記述し、生の HTML はレンダリングされません。クライアント側の動作は、埋め込み先のページで実装してください。 - 埋め込みコードや
optionsにシークレットを含めないでください。これらはブラウザーで実行されます。 - サードパーティアカウント(Slack、GitHub、…)の接続はスキーマの機能です。
"ui:widget": "oauth"と、完了時に SDK のコールバックページへリダイレクトするfcode.oauthフローを組み合わせます。サービス提供元が OAuth に対応している場合、ユーザーにフォームへの API トークンの貼り付けを求めてはいけません。「外部アカウントに接続する」を参照してください。 - フォームのテキストは、スキーマ内の
fcode.i18n("key")トークンで翻訳されます。スキーマを提供する前に、サーバー側で置換されます。fcode-i18nを参照してください。 - フォーム送信にはリクエストタイムアウトが適用されます(約 1 分)。同期プロセスは高速に保つか、時間のかかる処理を非同期で実行してください(後述)。
- UX の制御には、プロセスの戻り値(後述)を優先してください。
onSuccess/onErrorはクライアント側だけのロジックに使用します。
フォームを有効にする
- プロセスを作成し、入力パラメーターを定義します(これらがフィールドになります)。
Formsフラグを有効にします。プロセスのダッシュボードにある Factorial からのトリガー セクション、または CLI ワークスペースのprocesses/<slug>/metadata.jsonで設定してから、fcode pushを実行します。
{
"name": "Contact request",
"tags": [],
"factorial": { "enabled": true, "form": { "enabled": true } }
}
フォームは Factorial アクション のエントリーポイントの一つです。同じ factorial
ブロックには、ボタン、Factorial One ツール、バックエンドジョブも含まれます
(fcode-factorial-actions、フィールドのリファレンスは fcode-cli を参照)。
従来のトップレベルの "form": { "enabled": true } も引き続き機能し、
factorial.form.enabled と同期された状態に保たれます。新しい実装では
factorial を優先してください。
マーケットプレイスアプリの ライフサイクルフォーム とは、
予約済みスラッグ install、settings、uninstall を持つプロセスです
(統合の同期プロセス用の4つ目の予約済みスラッグは sync です)。
プラットフォームはスラッグからそれぞれの役割を判定します。
Factorial のアプリページで、アプリが独自のユーザーに提供するフォームは、
"factorial": { "form": { "enabled": true, "appTool": true } } です。
新しいプロセスでは form.appRole: USER_FACING_FORM を設定しないでください。
これは appTool が設定する値そのものであり、プラットフォームは両者を同期します。
残りの3つの値は別です。このブロックにはそれらを切り替える設定がないため、
install、settings、uninstall フォームは form.appRole を設定するか、
予約済みスラッグを付けることで指定します。新しいプロセスではスラッグを
優先してください。すでに配布済みのアプリに導入する方法とそのルールは、
fcode-factorial-actions に記載されています。
アプリの設定後に install または settings フォームを再度開く場合は、
空のフォームではなく 現在 の値を表示する必要があります。そのための
preRenderProcess パターンは references/advanced.md を参照してください。
プロセスコードでは、ほかのパラメーターと同様に送信された値を読み取ります。
const { context: { parameters } } = fcode;
フォームで信頼できること
フォームには Factorial 経由でアクセスするため、開いたユーザーは認証されます。
インストール/設定/アンインストール画面、アプリが独自のページで提供するフォーム、
UI トリガーダイアログ(fcode-ui-triggers)はいずれも Factorial のバックエンド経由で
送信され、何かが実行される前に requiredPolicies が適用されます
(fcode-factorial-actions)。チームとプロセスのスラッグを知っている匿名ユーザーは、
何にもアクセスできません。
ただし、フォームで factorial.form.public を設定している場合は別です。このフラグを有効にすると、
リンクを持つすべてのユーザーがフォームにアクセスできます。その場合、呼び出し元は
まったく認証されていません。送信データに含まれる company_id と access_id は、
ページが送信した値にすぎません。Factorial の外部のユーザー向けのフォームに限って
有効にし、以下の対策だけが保護手段であると考えてください。
これで、呼び出し元が「誰か」は確認できます。しかし、送信された「内容」については 何も保証されません。そのため、フォームの背後にあるプロセスが引き続きガードとなります。
- 送信されたすべてのパラメーターは、呼び出し元が制御できるものとして扱ってください
— 埋め込みページが事前入力したもの(
company_id、triggered_from_location、access_id)も例外ではありません。これらを使って認可しないでください。 - 呼び出し元が本来知るべきでない情報は返さないでください
— 送信の結果と
preRenderProcessのvariablesは、URL を開いたユーザーに届きます。 - 認証情報は一方向に扱ってください:設定フォームでは、シークレットの値ではなく、
設定されているかどうかだけを報告します(
references/advanced.md)。
フォームを埋め込む
必須の入力はどちらもスラッグです。さらに、常に追加するバージョン指定があります。
fcode-team-slug—https://code.factorialhr.com/platform/<fcode-team-slug>から取得しますfcode-process-slug— プロセスのダッシュボードにある Slug フィールド(例:send-welcome-email)- プロセスのバージョン —
stableエイリアスに固定します(次のセクションを参照)
プロセス ID ではなく、スラッグを使用してください。 ID はワークスペースごとの UUID であるため、ID ベースの埋め込みコードはワークスペース間でスニペットを移動すると動作しなくなります。一方、スラッグはそのまま使用できます(既存の ID ベースの埋め込みコードは引き続き動作し、React のプロパティ名は引き続き processId です。ここにはスラッグを指定してください)。スラッグを編集しても以前の値からのリダイレクトはないため、埋め込みコードを共有する前に確定してください。スラッグの名前を変更すると、ページにすでに貼り付けられているすべての埋め込みコードが動作しなくなります。
SDK を一度だけ読み込みます(データ属性と Fcode.initForm メソッドで必要です)。
<script defer src="https://code.factorialhr.com/sdk/forms.js"></script>
方法 1 — データ属性(SDK が要素を置き換えます):
<div
data-fcode-form-team="<fcode-team-slug>"
data-fcode-form-process="<fcode-process-slug>"
data-fcode-form-process-version="stable"
></div>
方法 2 — Fcode.initForm(セレクターまたは DOM 要素):
<div id="my-fcode-form"></div>
<script>
Fcode.initForm("#my-fcode-form", {
team: "<fcode-team-slug>",
process: "<fcode-process-slug>",
processVersion: "stable",
});
</script>
方法 3 — React の FcodeForm コンポーネント(React 17/18。@factorialco/fcode-react-forms をインストールします):
import FcodeForm from "@factorialco/fcode-react-forms";
const MyComponent = () => (
<FcodeForm
team={"<fcode-team-slug>"}
processId={"<fcode-process-slug>"}
processVersion={"stable"}
/>
);
SSR フレームワーク(例:Next.js)では、ssr: false を指定して動的にインポートします。
フォームのバージョンを固定する
バージョン指定(data-fcode-form-process-version / processVersion)には、公開済みのバージョンタグ(v1.0.0)またはエイリアスを指定します。stable を使用すると、埋め込みページを編集せずにエイリアスを切り替えるだけでリリースやロールバックができます(エイリアスの仕組みについては fcode-core-concepts、リリースコマンドについては fcode-cli を参照してください)。この指定はフォームが行う両方のリクエスト、つまり定義の読み込みと送信に適用されます。また、プロセスのダッシュボードが指定を自動で設定します。埋め込みコードの横にあるセレクターでバージョンまたはエイリアスを選び、生成されたスニペットをコピーしてください。
不明なバージョンやエイリアスを指定すると、通知なしで現在のバージョンが実行されます — プラットフォームはウェブフックと同様に、サーバー側に警告を記録するだけです(fcode-cli を参照)。属性の入力ミスは目に見えません。送信時に予期しない動作があった場合は、実行のバージョンを確認してください。フォームのエンドポイントを直接呼び出す場合も、fcode-cli で説明されている version_tag クエリパラメーターを指定できます。
送信結果を処理する
デフォルトでは、実行中に読み込みオーバーレイが表示されます。成功するとフォームが成功メッセージに置き換わり、エラーが発生するとエラーメッセージに置き換わります。
コールバック(各メソッドで同じ形式):
Fcode.initForm("#my-fcode-form", {
team: "<fcode-team-slug>",
process: "<fcode-process-slug>",
onSuccess: (formId, processExecutionResult, formSubmittedData) => {},
onError: (formId, error, formSubmittedData) => {},
});
データ属性を使用する場合は、data-fcode-form-on-success="HANDLER_NAME"、data-fcode-form-on-next-step="..."、data-fcode-form-on-error="..." を使ってグローバル関数を指定します。
プロセスの戻り値から動作を制御する(クライアントコードは不要です):
return { message: "Thanks, **we received your request**." }; // success message (markdown)
return { message: "| Item | Status |\n|---|---|\n| Sync | Done |" }; // GFM tables work too
return { status: 400, body: { formErrors: { // inline validation errors
fields: { email: "Invalid email." }, global: ["A global error."] } } };
return { status: 400, body: { errorMessage: "**Sync failed** — retry." } }; // error message (markdown)
return { redirect: { url: "https://example.com", timeout: 2000 } }; // redirect after submit
メッセージは HTML ではなく Markdown です。 message、errorMessage、およびスキーマの markdown.before / markdown.after ブロックは、GitHub Flavored Markdown としてレンダリングされます。対応する内容は、表、見出し、リンク、画像、コードブロック、タスクリストです。生の HTML は破棄され、レンダリングされません(そのため、作成した内容が実行されることはありません)。動作は成功/次のステップ/エラーのコールバックで実装してください。
すばやく処理するか、非同期にする
送信処理はリクエストのタイムアウト(約1分)以内にプロセスが完了するのを待ちます。時間のかかる作業をインラインで実行すると、タイムアウトして送信に失敗します。時間のかかる作業には、遅い API 呼び出し、大規模なエクスポート、複数レコードの同期などがあります。
処理に時間がかかる場合は、非同期にします。
async: trueを埋め込みます — 結果を待たずに、送信はすぐに201と実行 ID を返します(references/advanced.mdを参照)。- 別のプロセスに引き継ぎます —
fcode.processes.run("process-identifier", options)(fcode-javascript/fcode-pythonを参照)で時間のかかる処理を開始し、インラインで完了を待つのではなく、簡潔な確認応答(message/redirect)を返します。
同期処理にするのは、リクエストが実際に高速な場合、またはデータをステップ間で受け渡す必要がある場合に限ります。データを渡す場合でも、送信をブロックしないでください。代わりに次の方法を使用します。
preRenderProcessはフォームの表示前に、サーバー側でvariablesを計算します(references/advanced.mdを参照)。- 複数ステップのフォームの連鎖では、
nextProcessIdとvariablesを使って状態を引き継ぎます(以下を参照)。ステップが見た目だけのもので、間に処理がない場合は、ui:stepsを使用してプロセスを1つにまとめます。
複数ステップのフォーム
仕組みは2つあります。適切なものを選ぶことが重要です。
| 仕組み | プロセス | 実行 | 用途 |
|---|---|---|---|
ui:steps — 1つのフォーム内のステップ | 1つ | 最後のステップの後に1回 | 分割が見た目だけのもので、ロジックがすべて1つのプロセスにある場合 |
nextProcessId — 連鎖 | ステップごとに1つ | ステップごとに1回 | 中間ステップで実際に処理を実行する必要がある場合(外部での検証、次のフォーム用の variables の計算など) |
これらは組み合わせて使えます。連鎖したプロセスのフォームで、ui:steps を宣言できます。
フォームが長くなった場合(おおよそ10個以上のフィールド)は、ui:steps で分割し、関連するフィールドをまとめて、必須フィールドを前のステップに配置します。
1つのフォーム内のステップ(ui:steps)
スキーマのルート ui ノードでステップを宣言し、各プロパティをステップに割り当てます。SDK は一度に1つのステップを表示し、「次へ」ボタンを表示します。送信して単一の実行を開始するのは最後のステップのボタンだけです。この実行には、1ページのフォームと同じように収集したすべてのパラメーターが渡されるため、プロセスコードを変更する必要はありません。
"ui": {
"ui:steps": {
"config": { "layout": "tabs" },
"steps": [
{ "title": "About you", "description": "Optional text", "fields": ["name"] },
{ "title": "Details", "fields": ["age", "subscribe"] }
]
}
}
config(任意):layout—"tabs"(デフォルト)または"sidebar"、nextLabel/backLabel— ボタンのラベル。デフォルトは"Next"/"Back"です。ui:submitButtonOptionsは最後のステップのボタンに適用されます。- 「次へ」は、画面に表示されているフィールド(そのステップに割り当てられた
requiredも含む)のみを検証します。「戻る」ボタンとステップナビゲーションでは、入力内容を失わずに完了済みのステップに戻れます。未到達のステップは無効のままです。 - どのステップにも指定されていないプロパティは、最後のステップに追加されます。使用できない
ui:stepsは、コンソール警告を表示して通常の1ページのフォームにフォールバックします。 - ルートレベルの
properties、required、dependenciesをサポートします。ルートレベルのoneOf/allOfの合成はステップに分割されません。SDK のバージョン要件についてはreferences/advanced.mdを参照してください。
プロセスの連鎖(nextProcessId)
各ステップはそれぞれ独立したプロセスです。次に進むには、次のプロセスのスラッグを返します。
return { nextProcessId: "collect-shipping-address" };
フィールド名は引き続き nextProcessId で、スラッグまたは ID を指定できます。同じ連鎖をすべてのワークスペースで使えるよう、スラッグを使用してください。
SDK はその後、nextProcessId のフォームを表示します。後続の各ステップには、前のステップのすべてのデータと結果が、steps 配列の中に fcode.context.parameters として渡されます。状態を引き継ぐには、nextProcessId と並べて variables ノードを返します。
外部アカウントに接続する(OAuth)
フォームを送信する前に、ユーザーにサードパーティプロバイダーの認証を求めることができます。"ui:widget": "oauth" を指定した string または boolean プロパティを宣言してください(object プロパティの場合は、代わりに "ui:field": "oauth" を指定します。rjsf はオブジェクトの ui:widget を読み取らないためです)。
"github_account": {
"title": "GitHub account",
"description": "You will be asked to authorize in a new window.",
"type": "string",
"ui": {
"ui:widget": "oauth",
"ui:options": {
"authorizationUrl": { "$ref": "#/variables/authorizeUrl" },
"connectLabel": "Connect GitHub",
"connectedLabel": { "$ref": "#/variables/connectedLabel" },
"onComplete": "reload"
}
}
}
SDK は Connect ボタンを表示します。このボタンをクリックすると authorizationUrl が小さなポップアップで開き、フローの終了を待ってからポップアップを閉じ、フィールドに値を入力します。プロパティの title / description はボタン周辺に表示されるメッセージです(どこでも同様に Markdown を使用できます。長い説明には markdown.before/after を使用します)。
ui:options | デフォルト | 目的 |
|---|---|---|
authorizationUrl | — | fcode.oauth.start() が返すプラットフォーム認可 URL です。必須です。無効な URL の場合、コンソール警告を表示してボタンを無効にします |
connectLabel / connectedLabel / pendingLabel | Connect / Connected / Waiting for authorization… | フローの前、完了後、実行中に表示するボタンのテキストです |
onComplete | none | 接続後にフォームが行う処理です(以下を参照) |
popup | { "width": 600, "height": 700 } | ページ中央に表示するポップアップのサイズです |
closeDelay | 3000 | 完了後、ユーザーが確認メッセージを見られるよう、ポップアップを開いたままにする時間(ミリ秒)です |
機能させるための 3 つのルール:
-
authorizationUrlは、preRenderProcess内で呼び出すfcode.oauth.start()から取得し、{"$ref": "#/variables/…"}で挿入します。プレーンな{{mustache}}トークンは HTML エスケープされ(/→/、&→&)、SDK はその URL を拒否します。プリレンダーの仕様についてはreferences/advanced.mdを参照してください。const flow = await fcode.oauth.start({ authorizeUrl: "https://github.com/login/oauth/authorize", clientId: fcode.env.GITHUB_CLIENT_ID, scope: ["public_repo"], onComplete: "github-oauth-callback", data: { companyId }, }); return { variables: { authorizeUrl: flow.authorizationUrl } };認可 URL、
state、PKCE ペアを手動で生成してはいけません。これら 3 つはプラットフォームが保持し、プロバイダーに登録済みの唯一のredirect_uriも管理します。プロバイダーは事前登録された URI を要求し、インストールごとに独自のdeploy-ワークスペースが割り当てられるため、これが機能させる唯一の方法です。 -
完了プロセスに Webhook は不要です。 プラットフォームは
stateの検証と使用を完了すると、それ自体でonCompleteを呼び出します。そのため、公開するエンドポイントも認証するものもありません。code、codeVerifier、redirectUri(トークン交換時に再利用してください。プロバイダーはバイト単位で比較します)、data、stateとともに呼び出されます。または、プロバイダーが拒否した場合はerror/errorDescriptionとともに呼び出されます。コードを交換し、トークンをサーバー側に保存し(機密変数、または暗号化フラグを有効にしたデータストアに保存します。fcode-javascript/fcode-pythonを参照)、最後にポップアップを SDK のコールバックページへリダイレクトします。const { state } = fcode.context.parameters; return { status: 302, headers: { Location: "https://code.factorialhr.com/sdk/oauth-callback.html" + "?status=success&value=" + encodeURIComponent(login) + "&state=" + encodeURIComponent(state), }, };このページはフォームに結果を伝えます。フォームが信頼するのは、自身が開いたウィンドウからのメッセージだけです。その後、ページ自体を閉じます。クエリパラメーターは
status(success。それ以外はすべてエラーとして扱われます)、value(フィールド値になります)、state(必須。コールバックパラメーターからそのまま返します)、message(エラー時にボタンの下に表示されます)、およびobjectフィールドに渡す追加パラメーターです。エラーの場合も含め、あらゆる終了時に
stateをそのまま返してください。これにより、結果をフォームが開いたポップアップにひも付けます。省略すると、フォールバックチャネル経由で届いた完了通知は破棄されます。COOP によって接続が切断された場合に備えたonComplete: "reload"は、その復旧手段です。この場合、トークン交換が成功してトークンが保存されていても、フローはキャンセルとして終了します。 -
valueは不透明なハンドル(アカウントのログイン情報、接続 ID など)であり、トークンではありません。ブラウザーに到達し、送信データに含まれます。接続済み状態はユーザーに対する通知であり、証明ではありません。送信データを受け取るプロセス側で、接続を検証する必要があります。 フィールド値。booleanはtrue、stringはvalueパラメーター、objectはstatus/message以外のすべてのパラメーターです。接続されるまでは空なので、フィールドをrequiredにすると、アカウントが接続される前にフォームが送信されるのを防げます。ポップアップを早く閉じた場合はキャンセルとして扱われ、ボタンが再び有効になります。エラーが発生すると、ボタンの下にmessageが表示され、onCompleteの内容にかかわらずフォーム定義が再読み込みされます。コールバックは実行済みで、認証 URL の一度限りのstateを消費している可能性があるため、ボタンの背後に有効な URL を設定できるのは、新たにpreRenderProcessを実行した場合だけです。入力値とメッセージは再読み込み後も保持され、送信は行われません。ユーザーはそのまま再試行できます。再読み込みに失敗した場合、フォームはそのままの状態になります。
default を指定すると、ボタンは接続済みの状態で表示されます。 フィールドに値がある場合、ボタンは常に接続済みの状態になります。そのため、既存の接続を見つけた preRenderProcess は、接続ハンドルを default に設定したプロパティを返します。ボタンは接続済み(無効)の状態で表示され、ハンドルは他のデフォルト値と同様に送信データに含まれます。再訪したユーザー、ポップアップを閉じた後に完了した接続、onComplete: "reload" の場合に、接続済みの画面へ移行する方法です。このように値が設定されると、それ以前のエラーメッセージも消去されます。
onComplete — 接続後の動作:
none— ボタンは接続済みの状態で表示されます。ユーザーは通常どおり送信し、プロセスは他のパラメーターとともに値を受け取ります。submit— フォームがすぐに送信されるため、戻り値のmessage/redirect/nextProcessIdが直ちに適用されます。ui:stepsフォームでは、次のステップに進みます。reload— フォーム定義を再取得してpreRenderProcessを再実行するため、サーバーは接続を確認し、接続済みの状態(異なる説明、追加フィールド、ボタンを「…として接続済み」にするdefaultなど)を表示できます。他のフィールドに入力した値は保持されます。ここではサーバーが信頼できる情報源であるため、コールバックページに到達せずにポップアップを閉じた場合もフォームが再読み込みされます。コールバックが実行されておらず、URL がまだ有効なため、キャンセル時に再読み込みされるのはこのモードだけです。
知っておくべき制限事項:ポップアップはクリック操作そのものから開かれるため、通常のポップアップブロッカーは開くことを許可します。すべてのポップアップをブロックするようブラウザーが設定されている場合は、代わりにボタンの下にメッセージが表示されます。埋め込みページまたはプロバイダーに Cross-Origin-Opener-Policy ヘッダーが設定されていると、ポップアップとのリンクが切断される場合があります。その場合、フローはキャンセルとして終了し、onComplete: "reload" が復旧手段となります。ホスト型 SDK または @factorialco/fcode-react-forms ≥ 3.3.0 が必要です(f0 コントロールの場合:@factorialco/rjsf-f0 ≥ 2.3.0)。
フローの開始を行う事前レンダリング、完了処理、接続を確認するフォーム処理を含む完全なサンプルは、fcode-examples(references/oauth-connect.md)にあります。
ファイルの自動アップロード
ファイルフィールドは "type": "string" と、プロパティ内の "ui": { "ui:widget": "file" } キーで指定します。
{
"properties": {
"inputFile": { "type": "string", "ui": { "ui:widget": "file" } }
}
}
(フィールド名をキーとするルートレベルの ui マップ(rjsf の uiSchema 規約)もマージされますが、ドキュメントで推奨されている形式はプロパティごとの ui です。ルートレベルの ui は主に ui:submitButtonOptions など、フォーム全体のオプションに使用します。シークレット入力には、プロパティに "isSensitive": true を指定する方法を推奨します。自動的にパスワードウィジェットとして表示されます。fcode-json-schema を参照してください。)
送信時には、プロセスの開始前にファイルが Storage にアップロードされ、パラメーターは fcode.storage://… 参照として渡されます(複数のファイルが許可されている場合は配列)。ダウンロードするには、プレフィックスを取り除きます。
const { context: { parameters } } = fcode;
const stream = await fcode.storage.download(
parameters.inputFile.replace("fcode.storage://", "")
);
アップロードされたファイルはストレージ上限(1,000 ファイル、各 50 MB — fcode-core-concepts › プランと上限)の対象となります。一時的に必要なだけの場合は、プロセスの最後に削除してください。
高度な設定
スタイル設定と2つのテーマ(Factorial 内の React アプリに埋め込む際に使用する f0 テーマを含みます)、f0 コンポーネントを使用した Markdown メッセージのレンダリング(markdownComponents)、初期値/非表示の値、非同期送信、カスタムヘッダー、API ホストの上書き、変数の置換、インストール/設定フォームへの現在の値の事前レンダリング、ご自身のページからのユーザー入力への対応(React の onChange プロパティ、fcode-forms-* DOM イベント)、モーダルのレンダリングについては、references/advanced.md をご覧ください。