What’s New? App Builder Release with Form Builder

Letting you build high-performance and data-rich apps with low code is the goal of our commitment to continuous improvement. That’s why we always make sure that the latest capabilities of App Builder deliver a seamless and optimized development experience. And now we’ve added yet another great feature – Form Builder.

Before diving into the new features and all the new functionalities, if this is your first time learning about App Builder, let me quickly share why you should consider it as a key tool in the application development process for your organization:

• A visual App Builder – the unified platform for product managers, designers, developers, and stakeholders.
• Cloud-based WYSIWYG drag & drop tool that helps companies design and build complete business apps 80% faster than ever.
• A low-code tool generating production-ready Blazor code, Angular code, Web Components, and React code from your Figma and Sketch designs.

What Is Form Builder in App Builder?

App Builder’s Form Builder functionality enables developers to design HTML form through a drag-and-drop experience. It emphasizes auto-generating form structures directly from API endpoints, simplifying the creation process and allowing seamless data connections with backend sources. This feature offers extensive flexibility in form layout and component customization and includes options for displaying notifications for submissions, errors, and server-side validations.

And if you want to see it all in action, you can sign up for our demo-focused webinar that is coming up in December. Find the details here and register.

Automatic Form Generation From Data Endpoints

When a developer drags a data endpoint onto the design surface, a set of form components is automatically generated based on the endpoint’s properties.

• POST and PUT methods create input fields for data submission.
• Basic event handling, like OnSuccess and OnError interactions, is configured automatically.

Automatic Form Controls Creation and Mapping

Form controls are created based on each field’s data type and metadata, ensuring intuitive inputs and labels (e.g., date fields use date pickers, boolean fields use switches). Developers retain full control to modify components, add validations, or adjust labels directly in the properties panel.

Form Modification

Once generated, the form can be edited to include or exclude fields, customize labels, and set input validations, offering an intuitive design experience. App Builder allows developers to tailor both form layout and components:

• Easily add or remove elements within the form.
• Adjust control properties such as Required and Disabled validations, label customization, and mapping.

Manual Form Creation

Developers can build form manually in App Builder by dragging and dropping elements such as input fields, buttons, and form components onto the Form container. This approach allows complete control over the structure and layout without requiring immediate bindings to data sources.

Data Source Binding

Once the form is designed, developers can bind it to an endpoint from configured data sources. This flexibility ensures the ability to refine form elements before defining data interactions.

Binding Behavior and Validations

• Switching between endpoints: If you switch between endpoints once your form is built, non-matching inputs will display an invalid binding warning, and those bindings will not be generated as broken bindings in the code output.
• Variable initialization: You can initialize a new variable from the Form endpoint binding dialog with the API data endpoint, giving you the needed context for form initialization.
• Code generation: Invalid bindings are excluded from generated code, ensuring the application compiles without errors.

To minimize disruptions when switching endpoints, App Builder provides warnings about potential invalidations.

Live Interaction with Form

In App Builder’s Preview mode, users can interact with form to see:

• Real-time input validation.
• Form submission, with notifications indicating success or validation errors.

Note: Upon form submission in Preview mode, the Post/Put action is executed, adding or updating the record through the specified endpoint.

Configurable Action Buttons

Action buttons (Submit, Reset) offer full customization, supporting both in-form and external placements. This flexibility is essential for developers needing precise control over form behavior in more complex layouts.

Submit Action Notifications

Success and error messages are displayed via Snackbars, offering non-intrusive feedback on form submissions. These notifications are hardcoded for the initial release, with plans to support flexible interaction handling in future iterations.

Form Control Support

The Form Builder supports a variety of UI controls mapped to specific data types, ensuring developers can create accessible, responsive form efficiently. Below is a summary of supported controls and current limitations. All Form controls support two-way binding and are bound to the form context.

Form Control	Default Type	Notes
Radio Group	Boolean	Lacks required field validation
Checkbox	Boolean	Lacks required field validation
Switch	Boolean	–
Slider	Number	–
Select	Enum	–
Combo Box	Enum	–
Date Picker	Date	–
Calendar	Date	May not refresh selected date accurately
Input Field	String, Number	–

Note: Form controls currently support basic validation properties (Required, Disabled).

Future Enhancements

The roadmap for App Builder’s Form Builder includes advancements in validation options, extended metadata support, and enhanced notification and interaction handling.

Future validation enhancements will include:

• Enum validation for select and combo box controls.
• Range validation (min, max).
• String length validation (min length, max length).
• Pattern validation (regex).

Known Issues and Limitations

The following known issues and limitations apply to the initial release of Form Builder:

• Form Reset behavior discrepancy between App Builder runtime experience and generated application runtime:
  • In App Builder, the Reset button click reverts to the initial values when editing a record, and clears the form when adding a new record.
  • In the generated application, the Reset button click clears the form by setting all form controls to empty values.

• Form Copy-Pasting: Copying and pasting a form currently results in the original form losing its data bindings, which transfer to the newly pasted form instance.
• Boolean Required Flag: There is ambiguity in implementing a required Boolean field, particularly for cases like “accept terms of service.”
• Submit/Reset Behavior: The Submit/Reset functionality has been adapted to work within both template and reactive form but may still experience inconsistencies.
• Code Generation:
  • Typing Issues with Form Models: Typing inconsistencies may arise, especially when working with nested structures or arrays, complicating accurate form model generation in the output code.
  • igx-hint Element in Preview: The igx-hint element is currently excluded from the preview as it is not generated in the final code. Future updates may add support for message display functionality.
  • Calendar is not showing in the generated app when in a form.
  • Reset button click behavior – it clears the form for React-generated projects. Instead of reverting to initial values, the form controls get empty values.
  • Disabled property will not be rendered for input in an angular generated form.

Poll Questions

Feel free to fill out the following Poll. Your feedback is invaluable in shaping the future of our Form Builder and low-code tools. We’re committed to addressing your challenges, like designing responsive forms and managing validations, while enhancing features such as drag-and-drop UX and backend integrations.

Conclusion

In conclusion, App Builder is a game-changer in the app development process. Its cloud-based visual builder, low-code capabilities, and new features make it a must-have tool for any organization. Try it out today! If you need more details, we encourage you to check out our:

• Discord channel.
• GitHub discussions.
• Roadmap.

To experience everything, head to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So, please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.

---

React Code Generation: Step-By-Step Guide

Maximizing Business Agility with Low-Code Development

App Builder AI: How Does It Streamline App Development?

App Builder Release: AI, CSS Grid Layout, & More

5 Key Features To Consider When Choosing a Low-Code Platform