ヘッドレス フォームのリロード (ベータ版) | Optimizely 開発者コミュニティ

フォームは、ほとんどの CMS インストールで使用されます。 ただし、レンダリング パイプラインは ASP.NET MVC に基づいているため、ヘッドレス セットアップで Forms を使用するのは少し面倒です。 ページの json モデルに生成されたフォーム HTML を含める Content Delivery API の拡張機能はありますが、レンダリングされたフォームのルック アンド フィールをフロントエンドで制御したい場合は、厳しい戦いを強いられることになります。 Forms が、優れたデフォルト レンダリングを備えた便利なフロントエンド SDK を使用して生のフォーム構成を公開できれば、さらに良いことになります。

注: この機能は ベータ版ですので、ご自由にお使いください。ただし、正式リリース前にさらに変更が加えられる予定です。 ベータパッケージは、正式パッケージがリリースされると削除されます。

1. フォーム5 [package] [docs]
2. 新しい API レスト API [beta package] [beta docs]
3. (オプション) グラフ統合 [beta package] [beta docs]
4. (オプション) 汎用 JS SDK [beta package] [beta docs] [repo]
5. (オプション) 特定の SDK に反応する [beta package] [beta docs] [repo]

簡単な例として、定型的な Alloy MVC サイトを使用して、世界で最も興味のないフォームを作成しました。これは確かにヘッドレスではありませんが、実際にはそれが重要です。 これは内部的には単なる古き良き形式です。

を参考にして、 ヘッドレスフォームのベータ版フィード 新しい REST API を追加し、オプションでスワッシュバックルを追加できます。

新しいエンドポイントの設定を取得するのは非常に簡単です。新しい API 用にサービスを start.cs に追加し、オプションで Swagger 用のサービスと構成を追加する必要があります。

// Enable OpenAPI documentation
services.AddSwaggerGen();

//Configure the API headless forms API
services.AddOptimizelyHeadlessFormService(options =>
{
    // Enable swagger docs for headless forms API @ /_form/v1/docs/openapi.json
    options.EnableOpenApiDocumentation = true;

    options.FormCorsPolicy = new FormCorsPolicy
    {
        AllowOrigins = new string[] { "_" }, //Enter '_' to allow any origins, multiple origins separate by comma 
        AllowCredentials = true
    };
});

// Configure swagger UI to use the headless forms API spec
app.UseSwagger();
app.UseSwaggerUI(options =>
{
    options.SwaggerEndpoint("/_form/v1/docs/openapi.json", "Optimizely Headless Form API V1");
});

これにより、API の優れたローカル ドキュメントを入手できます。 /闊歩/。 運用環境では、おそらくエンドポイントとドキュメントにアクセスできるように OIDC を構成する必要があるでしょう。

完全なフォーム構成を取得するには、フォーム コンテナーの GUID を渡します。 UUID N形式 つまり、「-」区切り文字なし

GET /_form/v1/form/2df32b30ade54eb3970e4ab5170fb5ff

{
  "key": "2df32b30ade54eb3970e4ab5170fb5ff",
  "properties": {
    "title": "test",
    "allowToStoreSubmissionData": true,
    "showSummarizedData": false,
    "confirmationMessage": "Thank you, come again!",
    "allowAnonymousSubmission": false,
    "allowMultipleSubmission": true,
    "showNavigationBar": true,
    "focusOnForm": true
  },
  "formElements": [
    {
      "key": "2697b674ec554f7a817ea1f977fc2204",
      "contentType": "TextboxElementBlock",
      "displayName": "New form element",
      "properties": {
        "validators": [
          {
            "type": "RequiredValidator",
            "description": null,
            "model": {
              "message": "This field is required.",
              "validationCssClass": "ValidationRequired",
              "additionalAttributes": {
                "required": "",
                "aria-required": "true"
              }
            }
          }
        ],
        "label": "Name",
        "placeHolder": "firstname lastname",
        "conditions": []
      },
      "locale": "en",
      "localizations": {}
    },
    {
      "key": "3aa836ec620146cf8291263c51b4b44f",
      "contentType": "SubmitButtonElementBlock",
      "displayName": "New form element",
      "properties": {
        "validators": [],
        "label": "Go!",
        "conditions": []
      },
      "locale": "en",
      "localizations": { "label": "Submit" }
    }
  ],
  "locale": "en",
  "localizations": {
    "allowAnonymousSubmissionErrorMessage": "You must be logged in to submit this form. If you are logged in and still cannot post, make sure "Do not track" in your browser settings is disabled.",
    "allowMultipleSubmissionErrorMessage": "You already submitted this form.",
    "malformstepconfigruationErrorMessage": "Improperly formed FormStep configuration. Some steps are attached to pages, while some steps are not attached, or attached to content with no public URL."
  }
}

Forms to Graph 統合をインストールするには、もちろん Optimizely Graph が必要で、REST API から利用できるまったく同じ json オブジェクトを公開する FormContainerBlock のグラフ モデルに新しいプロパティ「FormRenderTemplate」を追加するだけです。

query MyQuery {
  FormContainerBlock {
    items {
      FormRenderTemplate
    }
  }
}

完全に分離されたフロントエンドにアップグレードしたい場合は、以下の反応サンプルを使用できます。 新しいフォーム SDK リポジトリ、しかし、それはそれ自体のブログ投稿に値すると思います。

ここまたはにあるメモのほかに、 フィードバック.optimizely.com このベータ リリースでは、フォーム送信者向けの現在の認証システムを更新し、より見栄えの良い開始点を提供するために SDK を改良する予定です。

2024 年 3 月 1 日