Blog Developers

App Builder Release: Two-Way Data Binding, Datasource OpenAPI Schema Update & More

Zdravko Kolev / Thursday, August 8, 2024

The App Builder release in May is here, bringing a host of new features and improvements. Users can now update existing data sources to the latest OpenAPI schema, with the ability to view any differences. Improvements also include Two-way data binding support for Input, Checkbox, Switch, Date Picker, Calendar, Rating, and Slider components.

What else? Data actions for creating, updating, and deleting rows are now available in the Tree-grid component, and variables can be updated based on row selection events in the Tree-grid component. The Tree component has been enhanced with properties for single node expansion and toggle on item click. Additionally, a new search-style option for the Input component has been added.

Before diving into these 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.

Two-Way Data Binding Support

In this App Builder release, we have added two-way data binding support to Input, Checkbox, Switch, Date Picker, Calendar, Rating, and Slider components.

Two-way binding support allows you to mark a component property as twoWayBindable when the property is bound to a variable. But what exactly is a two-way binding? Imagine keeping the UI and the underlying data in sync. So, when you change the data, the UI updates automatically, and when you change the UI, the variable data updates automatically. 

As a user, you can now: 

  • Set input content to some value and generate this as a two-way data-bound field in the generated code.
  • Bind a component corresponding value/content property to a variable.
  • Control if this binding will be generated as a two-way binding or not.

two-way data binding in app builder

App Builder Release With Data Source OpenAPI Schema Update

App Builder’s Data Sources UI presents the developer with a visualization of their data source endpoints and schemas. Data sources evolve over time, and their schema changes, so the App Builder Data Source UI should update accordingly. 

With this App Builder release, you can easily update your existing data sources to use the latest up-to-date version of your OpenAPI schema and show differences if present. 

app builder with data source release

What's the essence of this new feature? 

  • This feature allows you to sync your data source with your backend WebAPI while developing your front-end in the App Builder.
  • If you refresh your data source and the data schema properties that you have used for data binding remain unchanged, your data bindings will be intact.
  • If you refresh your data source and the data schema properties that you have used for the data binding change, you will get a notification with a list of affected data bindings so you can manually update your UI components accordingly. 

*In the future, we plan to introduce automatic background refresh, which will be useful when data source Web API URL hasn't changed. A new Data mappings feature will be available too, providing a UI for you to update your bindings more conveniently. 

Tree Grid Actions

You can now set up Data-action(s) to create, update, and delete rows in the Tree-grid component with Web API calls. You can wire those to the Tree Grid editing action buttons and take leverage of real-time Web API updates. Upon code generation, App Builder will create the necessary services to handle the API calls for Creating, Getting, Updating, and Deleting a resource through the available Post/Put/Delete HTTP methods. 

Tree Grid Row Selection Interaction

With this App Builder release, you can also update a variable based on the Row Selection event in the Tree-grid component. 

tree grid row selection in app builder

As a reminder, in a major App Builder release last year we exposed various component event handlers, which are instrumental in the context of Variable Management.  

The key events include: 

  • Selection Changed Event: Utilized in the Combo component.
  • Row Selection Changed Event: Employed in both Grid and Tree Grid components.
  • Click Event: Available for all components, this event is used in the context of setting a variable upon a click action.
  • Specific component events. The Stepper component, for example, exposes the following actions - Next/Previous step, Reset, and Go to step (x). 

Check this topic for more information - Working with events and actions in App Builder.

New Tree Component Properties in This App Builder Release Too

Added Tree component properties for single node expansion and toggle on item click. 

  • Single node expansion – if enabled, only one tree node will be expanded at a time. Upon trying to open a second one, the former will collapse.
  • Toggle item on click – this is a property that toggles the expand/collapse state upon clicking on the nodes, not only on the expand/collapse icon. 

tree grid component in app builder

Other Improvements

Wrap Up

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

To experience everything, visit your customer portal and get the latest version. 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.

low-code App Builder