Release 106 is here and we are very excited to bring you custom UI components!
Create your own components
You can now create your own reusable UI components by combining elements from Appfarm’s standard component library. This will streamline development, enhance design consistency, and improve maintainability.
To create a component, right-click on any Container and select “Create component”. The Container and its contents will be converted to a component and added to a new Components list in the Views pane.
You can use a component throughout an app by dragging it from the Components list and dropping it in a view. Modify the component in its own canvas in the UI designer, and every instance throughout the app will update automatically. If needed, you can disconnect individual instances for further customization.
Components can be configured to accept params, so each instance can be dynamic. For example, you could create a product card component that accepts a Product object as a param to display the name, stock level, and image of the product in context.
Here are some other ways you might use a custom component:
- Header: Create a consistent header for all views in your app.
- Button: Design a custom button with a dynamic label and action.
- Iterating structures: Extract complex lists and grids for more modular development.
Read more about custom UI components in our documentation
What’s New
- Implement support for reusable UI Components (#2333)
- Searching in several properties with Autocomplete in Advanced Search (#4762)
- Implement support for display option “inline-flex” (#5036)
- UI Designer - Extend component tree item names with constant values when available (#5093)
- UI Designer - Component tree item for components such as Icon/Icon Button etc. should show selected icon (#5137)
Enhancements
- Implement read-only mode for functions when user only has read access to an App (#4919)
- Create File Archive: Possibility to add nested data bindings as Archive Content (#5317)
Bug Fixes
- Manually sorting a Date column in a table works sporadically on Firefox (#4043)
- Sorting a table by Created Date (desc) in Create, does not work in client on Firefox (#4144)
- Text Edit - When Input Data Type is “Date”, “Datetime” or “Time”, placeholder overlaps with format mask (#4212)
- Filter edit: For source params, operator and target expression are sometimes hidden from the editor (#4231)
- Sort Objects does not work on enum or calendar data sources on Firefox (#4545)
- When offline mode is enabled, Object State on Runtime objects are not persisted (#5000)
- Setting a limit with function when reading to a runtime datasource fails (#5047)
- Setting Action Param to type
Enums
orReferences
and back to a normal type does not hide cardinality setting (#5057) - Read Objects: Filter ‘bool has no value / has value’ fails when combined with filter with data dependencies (#5084)
- Action node read with filter ID exist in other runtime DS not selected fails with typeerror (#5086)
- Attempting to create an object which has a property with data type
Roles
and default value will always fail. (#5090) - Read objects from database with filter exists in db-connected DS not selected without selections returns 0 objects, should return all (#5106)
- Advanced search: Filters are ignored (#5149)
- Filter edit: Filter on id EQ action param does not work (#5334)
- App Health reports that iterator param in if-statement has
Property undefined is required and has no value
when it has value (#5388) - Roles with update any object class can duplicate conditional filters on object classes (#5454)