Release Notes 106

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 or References 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)
12 Likes

Is it not possible to use action params on the actions you use on a custom component???

Hi! This is not yet supported, but is planned for one of our upcoming releases.
We will be gradually expanding custom UI components with new functionality, such as:

  • Sharing between apps
  • Support for component params in functions
  • Support for calendar data sources

Any ETA for action params?
It will not be possible (at least for us) to use custom components before action params are supported. Just to make sure i’m not misunderstanding or missing anything; currently it won’t be possible to perform a general action like “Switch view + [action param view]” or “Open dialog + [action param dialog]”?

There is no ETA currently, but we will take your feedback into consideration when prioritizing our efforts to improve custom components.
And no, you are not missing anything, it is not currently possible to use action params in custom components.

Okay, thanks! I think it would be a good priority so that users wont need to split up actions in order to use custom components, as it is a really good and sought after concept in Create.

Wanted to follow up on this one, there are a lot of good things coming to shareable UI components in release 108, which we are aiming to roll out mid-October:

  • Action params for actions used through component params
  • Share components between apps in a solution
  • Support for component params in function editor
  • Calendar as component param type
2 Likes