### Quickstart Setup for OptimaJet FormEngine Source: https://github.com/optimajet/formengine/blob/master/community/src/packages/apps/example-viewer/README.md This snippet provides the necessary commands to set up and run the OptimaJet FormEngine community example project locally. It installs project dependencies and then starts the development server. ```bash npm install npm run dev ``` -------------------------------- ### Setup and Run FormEngine Example Project Source: https://github.com/optimajet/formengine/blob/master/premium/examples/formengine/README.md This shell script provides the necessary commands to clone the FormEngine repository from GitHub, navigate into the specific example project directory, install its Node.js dependencies using npm, and finally start the development server. This is a standard procedure for getting a local development environment up and running. ```shell git clone git@github.com:optimajet/formengine.git cd formengine/premium/examples/formengine npm install npm run dev ``` -------------------------------- ### Setup and Run FormEngine Formik Example Source: https://github.com/optimajet/formengine/blob/master/premium/examples/with-formik/README.md Provides step-by-step instructions to clone the FormEngine repository, navigate to the specific Formik example directory, install project dependencies, and start the development server. ```shell git clone git@github.com:optimajet/formengine.git cd formengine/premium/examples/with-formik npm install npm run dev ``` -------------------------------- ### Run FormEngine Remix Integration Example Source: https://github.com/optimajet/formengine/blob/master/premium/examples/with-remix/with-remix-v2/README.md Provides shell commands to clone the FormEngine repository, navigate to the specific Remix example directory, install necessary npm dependencies, and start the development server for the application. ```shell git clone git@github.com:optimajet/formengine.git cd formengine/premium/examples/with-remix/with-remix-v2 npm install npm run dev ``` -------------------------------- ### Run FormEngine Next.js Integration Example Source: https://github.com/optimajet/formengine/blob/master/premium/examples/with-nextjs/with-nextjs-v15/README.md This shell script provides the necessary commands to clone the FormEngine repository, navigate to the specific Next.js example directory (v15), install its dependencies using npm, and finally start the development server. This sequence is typical for setting up and running a local development environment for the example application. ```Shell git clone git@github.com:optimajet/formengine.git cd formengine/premium/examples/with-nextjs/with-nextjs-v15 npm install npm run dev ``` -------------------------------- ### Set up and Run Optimajet FormEngine Community Source: https://github.com/optimajet/formengine/blob/master/community/README.md Instructions to clone the Optimajet FormEngine Community repository, install its dependencies using npm, and start the development server. This allows developers to get the project up and running locally for development and testing. ```bash git clone git@github.com:optimajet/formengine.git cd formengine/community/src npm install npm run start ``` -------------------------------- ### Install Node.js Dependencies Source: https://github.com/optimajet/formengine/blob/master/community/examples/file-upload-server/README.md Installs all required Node.js packages and their dependencies as specified in the 'package.json' file. ```shell npm install ``` -------------------------------- ### Install React Form Builder Core and RSuite Components Source: https://github.com/optimajet/formengine/blob/master/community/src/packages/core/README.md This command installs the core package of the React Form Builder along with the React Suite components library, which provides pre-built UI components for form elements. This is the recommended way to get started with the library. ```bash npm install @react-form-builder/core @react-form-builder/components-rsuite ``` -------------------------------- ### Quickstart: Build and Render a Form with React Form Builder and RSuite Source: https://github.com/optimajet/formengine/blob/master/community/src/packages/views/rsuite/README.md Demonstrates how to programmatically build a simple form using `@react-form-builder/core` and render it with RSuite components. The example includes input fields with validation, a date picker, and a submit button with custom actions for form submission and data display. ```typescript jsx import {viewWithCss} from '@react-form-builder/components-rsuite' import {buildForm, FormViewer} from '@react-form-builder/core' const simpleForm = buildForm({errorType: 'RsErrorMessage'}) .component('container', 'RsContainer') .style({flexDirection: 'row'}) .children((builder) => builder .component('firstName', 'RsInput') .prop('placeholder', 'Enter your first name') .prop('label', 'First Name') .validation('required') .component('lastName', 'RsInput') .prop('placeholder', 'Enter your last name') .prop('label', 'Last Name') .validation('required') ) .component('birthDate', 'RsDatePicker') .prop('label', 'Birth Date') .prop('oneTap', true) .validation('min').args({value: '1900-01-07T12:25:37.000Z'}) .component('submit', 'RsButton') .prop('children', 'Submit') .prop('color', 'blue') .prop('appearance', 'primary') .event('onClick') .commonAction('validate').args({failOnError: true}) .customAction('onSubmit') .json() export const App = () => { return simpleForm} actions={{ onSubmit: (e) => { // submit the form to the backend alert('Form data: ' + JSON.stringify(e.data)) }, }} /> } ``` -------------------------------- ### Example JSON Response for File Upload Source: https://github.com/optimajet/formengine/blob/master/community/examples/file-upload-server/README.md An example JSON object returned by the server upon a successful file upload, indicating the operation's success, a descriptive message, and the public URL path to the newly uploaded file. ```json { "success": true, "message": "File uploaded successfully", "filePath": "/uploads/" } ``` -------------------------------- ### Run Node.js Server Source: https://github.com/optimajet/formengine/blob/master/community/examples/file-upload-server/README.md Executes the start script defined in 'package.json', which typically launches the Node.js server application, making it accessible on http://localhost:3001 by default. ```shell npm run start ``` -------------------------------- ### Install React Form Builder RSuite Components Source: https://github.com/optimajet/formengine/blob/master/community/src/packages/views/rsuite/README.md Installs the core React Form Builder library and the RSuite components package using npm. These packages are essential for building and rendering forms with React Suite. ```bash npm install @react-form-builder/core @react-form-builder/components-rsuite ``` -------------------------------- ### API Documentation for Accessing Uploaded Files Endpoint Source: https://github.com/optimajet/formengine/blob/master/community/examples/file-upload-server/README.md Documents the GET /uploads/ endpoint, which serves static files from the 'uploads' directory. This endpoint allows clients to retrieve previously uploaded files by specifying their filename in the URL. ```APIDOC Endpoint: GET /uploads/ Description: Serves static files from the 'uploads' directory. Path Parameters: - filename: string - The name of the file to retrieve. Returns: The content of the requested file (e.g., image, document). ``` -------------------------------- ### Define and Render a Simple React Form Builder Form Source: https://github.com/optimajet/formengine/blob/master/community/src/packages/core/README.md This example demonstrates how to programmatically define a simple form using the `buildForm` API and render it with the `FormViewer` component. It showcases component creation, property assignment, validation rules, and custom event handling for form submission, integrating with React Suite components. ```typescript jsx import {viewWithCss} from '@react-form-builder/components-rsuite' import {buildForm, FormViewer} from '@react-form-builder/core' const simpleForm = buildForm({errorType: 'RsErrorMessage'}) .component('container', 'RsContainer') .style({flexDirection: 'row'}) .children((builder) => builder .component('firstName', 'RsInput') .prop('placeholder', 'Enter your first name') .prop('label', 'First Name') .validation('required') .component('lastName', 'RsInput') .prop('placeholder', 'Enter your last name') .prop('label', 'Last Name') .validation('required') ) .component('birthDate', 'RsDatePicker') .prop('label', 'Birth Date') .prop('oneTap', true) .validation('min').args({value: '1900-01-07T12:25:37.000Z'}) .component('submit', 'RsButton') .prop('children', 'Submit') .prop('color', 'blue') .prop('appearance', 'primary') .event('onClick') .commonAction('validate').args({failOnError: true}) .customAction('onSubmit') .json() export const App = () => { return simpleForm} actions={{ onSubmit: (e) => { // submit the form to the backend alert('Form data: ' + JSON.stringify(e.data)) }, }} /> } ``` -------------------------------- ### Navigate to Project Directory Source: https://github.com/optimajet/formengine/blob/master/community/examples/file-upload-server/README.md Command to change the current working directory to the project's root folder, typically named 'file-upload-server'. ```shell cd file-upload-server ``` -------------------------------- ### API Documentation for File Upload Endpoint Source: https://github.com/optimajet/formengine/blob/master/community/examples/file-upload-server/README.md Documents the POST /upload endpoint, which is used to upload a single file. It expects the file to be sent in the 'file' field of the request body. Upon successful upload, it returns a JSON response containing a success status, a message, and the public path of the uploaded file. ```APIDOC Endpoint: POST /upload Description: Accepts a single file for upload. Request Body: - Field: file (type: File) - The file to be uploaded. Returns: - Type: application/json - Body: success: boolean - Indicates if the upload was successful. message: string - A descriptive message about the upload status. filePath: string - The public path to the uploaded file (e.g., /uploads/). ``` -------------------------------- ### Embed React Form Builder Viewer via CDN Source: https://github.com/optimajet/formengine/blob/master/community/src/packages/viewer-bundle/README.md This HTML snippet demonstrates how to quickly integrate the React Form Builder Viewer bundle into a web page using a CDN. It includes a JavaScript block that programmatically constructs a simple form with input fields, a date picker, and a submit button, applying validation rules. The form is then rendered into a designated div element, and a custom action is defined to handle form submission by displaying the collected data. ```HTML FormEngine bundle embedding example
``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.