Безголовые формы перезагружены (бета) | Сообщество разработчиков Optimizely

Формы используются в подавляющем большинстве установок CMS. Но использовать Forms в автономной настройке немного затруднительно, поскольку конвейер рендеринга основан на ASP.NET MVC. У нас есть расширение для нашего API доставки контента, которое включает сгенерированные формы HTML в модель json для страницы, но если вы хотите, чтобы внешний интерфейс контролировал внешний вид отображаемой формы, вам предстоит тяжелая битва. Лучше, если бы Forms могли просто предоставлять необработанную конфигурацию форм с помощью удобного интерфейсного SDK с хорошим рендерингом по умолчанию.

Примечание. Эта функция находится в Бета-версия, вы можете использовать ее, но до официального релиза у нас есть еще изменения. Бета-пакеты будут удалены после выпуска официальных пакетов.

1. Формы 5 [package] [docs]
2. Новый REST 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 и, при необходимости, swashbuckle:

Получить новую конечную точку довольно просто: нам нужно добавить службу в файл start.cs для нового API и, при необходимости, службу + некоторую конфигурацию для 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, и он просто добавит новое свойство «FormRenderTemplate» в модель Graph для FormContainerBlock, предоставляющего тот же самый объект json, доступный из REST API.

query MyQuery {
  FormContainerBlock {
    items {
      FormRenderTemplate
    }
  }
}

Если мы хотим перейти на полностью несвязанный интерфейс, мы можем использовать образец реакции из новый репозиторий SDK формно я думаю, что это заслуживает отдельной публикации в блоге.

Помимо любых заметок, которые вы можете иметь здесь или по адресу обратная связь.optimizely.com В этой бета-версии мы планируем обновить текущую систему авторизации для отправителей форм и усовершенствовать SDK, чтобы вам было удобнее начинать работу.

01 марта 2024 г.