Repository files navigation

This project demonstrates advancedform block integration options with the Beefree SDK, including:

• Multiple pre-defined forms (Auto Loan, Mortgage, Credit Card)
• A custom form builder
• Secure authentication using a Node.js proxy and Beefree SDK'sloginV2
• Dynamic form selection and editing via content dialogs and modals

• Project Overview
• Proxy Server (proxy-server.js)
• HTML Example Files
  • default-form-example.html
  • form-library-example.html
  • form-builder-example.html
• Core Concepts
  • Form Implementation & Structure
  • Form Validation
  • Content Dialogs & Dynamic Form Selection
  • loginV2 Authentication Flow
• How to Use
• Troubleshooting

This project provides a robust example of how to:

• Integrate multiple forms with Beefree SDK
• Allow users to select or build forms dynamically
• Securely authenticate with Beefree SDK using a backend proxy and environment variables
• Understand and extend the Beefree SDK's content dialog and form management features

File:proxy-server.js

This Node.js Express server acts as a secure proxy for authenticating with Beefree SDK using theloginV2 endpoint. It keeps your credentials safe by loading them from a.env file and only exposing a/proxy/bee-auth endpoint that takes auid.

Key Features:

• LoadsBEE_CLIENT_ID ,BEE_CLIENT_SECRET ,uid and from.env
• Forwards the request to Beefree SDK'sloginV2 endpoint and returns the token
• Includes a/proxy/health endpoint for health checks

Example .env:

BEE_CLIENT_ID=your-client-id-hereBEE_CLIENT_SECRET=your-client-secret-hereuid= 'uid-here'

Sample Endpoint:

app.post('/proxy/bee-auth',async(req,res)=>{try{const{ uid}=req.body;constresponse=awaitaxios.post('https://auth.getbee.io/loginV2',{client_id:process.env.BEE_CLIENT_ID,client_secret:process.env.BEE_CLIENT_SECRET,uid:uid||'demo-user'},{headers:{'Content-Type':'application/json'}});res.json(response.data);}catch(error){res.status(500).json({error:'Failed to authenticate'});}});

• Purpose: Demonstrates loading a single, pre-defined form (Auto Loan Pre-Approval) into the Beefree SDK.
• Features:
  • Loads a default form structure
  • Allows template loading and test email sending
  • Handles authentication via the proxy server
  • Shows how to configurebeeConfig for a static form

• Purpose: Demonstrates a library of multiple pre-defined forms (Auto Loan, Mortgage, Credit Card) and allows the user to select which form to edit via a modal.
• Features:
  • Modal for form selection
  • Dynamic loading of different form structures
  • UsescontentDialog and a custom handler for form selection
  • Secure authentication via the proxy server

• Purpose: Demonstrates a custom form builder UI that lets users dynamically add fields, preview the form, and save it to the Beefree SDK for further editing.
• Features:
  • Modal-based form builder with field type buttons
  • Live form preview
  • Schema validation for the form structure
  • Integration with Beefree SDK'smanageForm content dialog
  • Secure authentication via the proxy server

Each form is defined as a JavaScript object with astructure property, which includes:

• title anddescription
• fields: An object where each key is a field ID and the value is a field definition (type, label, attributes, options, etc.)
• layout: A 2D array specifying the order and grouping of fields
• attributes: Form-level attributes (e.g.,action,method,enctype)

Example:

constautoLoanForm={structure:{title:'Auto Loan Pre-Approval',description:'Check if you\'re pre-approved for an auto loan.',fields:{full_name:{type:'text',label:'Full Name *',attributes:{required:true,placeholder:'Enter your full name'}},// ...more fields},layout:[['full_name'],// ...more fields],attributes:{action:'http://example.com/read-form-script',method:'post'}}};

• Field-level validation: Each field can specify attributes likerequired,min,max,pattern, etc.
• Schema validation: The form builder ensures the structure matches the expected schema before saving/loading into Beefree SDK.

• contentDialog: A Beefree SDK configuration object that allows you to define custom dialogs for managing forms, merge tags, special links, etc.
• manageForm handler: Opens a modal for the user to select or build a form, then loads the selected structure into the editor.
• Modal pattern: Used for both form selection (library) and form building (builder example).

Example:

contentDialog:{manageForm:{label:'Edit Form',handler:async(resolve,reject,args)=>{openModal();awaitnewPromise((res)=>{window.selectForm=(formType)=>{// ...select and resolve form structure};});}}}

• Node.js and npm installed
• Beefree SDK credentials

1. Clone the repository:

   git clone https://github.com/BeefreeSDK/beefree-sdk-form-block-demo.gitcd form-block

2. Create a.env file:

   BEE_CLIENT_ID=your-client-id-hereBEE_CLIENT_SECRET=your-client-secret-hereuid=demo-user

3. Install dependencies and start the proxy server:

   npm install express cors axios dotenvnode proxy-server.js

4. Open any of the HTML files in your browser:

   • default-form-example.html
   • form-library-example.html
   • form-builder-example.html

• Authentication errors: Ensure your.env file is correct and the proxy server is running.
• Form not loading: Check the browser console for errors and ensure the form structure matches the schema.
• Fields not appearing: Verify that the form structure and layout are being updated correctly.