Integrate Optimizely Graph with headless Optimizely Forms

👍

Beta

Headless Optimizely Forms is in beta. Its functionality may change drastically during the development. This should be used only for internal testing and not be used in production.

See Optimizely Forms for information about generally available Forms.

Set up management site

1. Install Optimizely.ContentGraph.Cms and Optimizely.Headless.Form.ContentGraph using the NuGet Package Manager in Visual Studio or with the command line:

   PowerShell

   dotnet add package Optimizely.ContentGraph.Cms
   dotnet add package Optimizely.Headless.Form.ContentGraph
   

2. Add CG key to appsettings.json (at the same level as Episerver).

   JSON

   "Optimizely": {
       "ContentGraph": {
         "GatewayAddress": "<<Gateway Address>>",
         "AppKey": "<<App Key>>",
         "Secret": "<<Secret>>",
         "SingleKey": "<<Single Key>>",
         "AllowSendingLog": true,
         "ContentVersionSyncMode": "DraftAndPublishedOnly",
         "Include": {
           "ContentIds": [],
           "ContentTypes": []
         },
         "SyncReferencingContents": true
       }
   }
   

3. Add settings to Startup.cs.

   C#

   //Register ContentGraph for HeadlessForm
   services.AddContentDeliveryApi(op => {
     op.DisableScopeValidation = true;
     op.RequiredRole = null;
   });
   services.ConfigureContentApiOptions(o => {
     o.FlattenPropertyModel = true;
     o.IncludeNumericContentIdentifier = true;
   });
   services.AddContentGraph();
   
   services.AddOptimizelyHeadlessFormContentGraph();
   

Set up React app

1. Update the .env file on the React app.

2. Add settings for Optimizely Graph.

   TypeScript

   REACT_APP_ENDPOINT_GET_FORM_BY_PAGE_URL=http://localhost:8000/api/React/GetFormInPageByUrl?url=
   REACT_APP_HEADLESS_FORM_BASE_URL=http://localhost:8000/
   REACT_APP_AUTH_BASEURL=http://localhost:8000/api/episerver/connect/token
   REACT_APP_CONTENT_GRAPH_GATEWAY_URL=https://rc-3-5-1.cg.optimizely.com/content/v2?auth=INPUT_SINGLE_KEY_HERE
   
   // add the following line with format
   REACT_APP_CONTENT_GRAPH_GATEWAY_URL={GatewayAddress }/content/v2?auth={SingleKey } 
   // (GatewayAddress and SingleKey are from Appsettings.json)
   

3. Update App.tsx on the React app.

   TypeScript

   <Form
        key={c.reference.key}
        formKey={c.reference.key}
        language={language ?? "en"}
        baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
        identityInfo={identityInfo} 
        history={history}
        currentPageUrl={pageData.pageUrl}
        optiGraphUrl={process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL}
   />