November: Atomic table API, persistent filters & sort, improved coding panel

Summary

• Atomic table API: Instead of replacing the entire data set via its setData function, the table component now exposes dedicated methods to atomically update cell values or append/remove rows.
• Persistent filters and sorts: Filters and sorts that are set for a table in edit-mode are now persistent and will be applied in use-mode as well. This gives you more control over how data is presented in a table without having to express it in code all the time.
• Improved coding panel: We have entirely rebuilt the expanded code editor for working with dynamic component properties. This will certainly become your favorite way of writing code in Uify 😍.‍
• Avatars: No, not the movie (although that one is great, too)! We made it easier for you to spot where your colleagues are currently working in the app editor by rendering their avatars in their respective locations.

‍

Let's break it down

Atomic table API

Loading data into a table is easy. Manipulating that data however has always required to replace the entire data set with the  setData method or with a dynamic expression in the data property. This made it hard and slow to apply targeted updates to the table data. To make this much easier, we introduced these new methods which every table exposes:

• updateRows(update): Allows to update fields of one or more rows. The update argument should be an object or an array of objects, which contain(s) the ID as well as the fields that you would like to modify.
• addRows(newRows): Appends a new row or a list of new rows to the data set. The newRows argument should be an object containing all column fields or an array of those.
• updateOrAddRows(update): This function is a mix of the previous two. It appends the provided row(s) in case the ID does not exist yet, otherwise updates the existing record(s).
• deleteRows(ids): Removes row(s) with the provided id(s).

These updates are performed atomically, i.e. they are much more performant compared to replacing the entire data set and they are way easier to broadcast to other collaborators. Please note that these functions are only available when your table has a primary key configured (which usually is a good idea anyway).

Here you can see it in action 🚀:

‍

‍

‍Persistent filters & sorts

Presenting only a subset of data in a certain order is a very common use case. Previously you had to apply filters and sorts either directly in the data query or with custom code in a JavaScript transformation. We made this way easier now by persisting filters and sorts that are set in the editor and applying them for the end user:

‍

‍

Improved coding panel

Using JavaScript snippets in properties is a powerful tool to create dynamic component behavior. In complex cases, writing code in such small input fields however is rather tedious. You could already expand these fields to a larger, floating editor, but also that did not yield the best user experience yet. We have therefore rebuilt this expanded editor and made it much more pleasant to use. For really large pieces of code, you can expand it to cover almost the entire screen. Check it out:

‍

‍

Oh, and when you use it to write HTML or markdown content for a text component, the editor now renders the result as it will appear in the browser, instead of just rendering the resulting HTML structure 🥳.

Avatars

Instead of just colored frames, you will now see your co-workers’ avatars in various places of the app editor to understand their current focus. Most prominently, you will see this in the component explorer and the action editor.

Additional improvements

Not enough yet? No worries, here is some more:

• Displaying overflowing content: Both the table and text component might contain content that does not fit their size. Your users might however want to see or copy the entire content. We now render the content in a tooltip on hover, in case we detect that some content was cut off.
• Text formatting in table cells: The font style of a table column can now be configured in the column properties.
• Select performance: The select and multi-select components are now able to work performantly with thousands of options. You know, for really complex choices.
• Context menu in app explorer: The component explorer of the app editor now offers the same context menu on right-click that you are already used to from the canvas.
• Color pickers, everywhere: Table columns, row actions and multi-row actions have various properties to configure their color styles. Until today, it was only possible to define those colors by providing the CSS color code. We made this more convenient now by offering the same color picker that is also used in the component styles.
• Bug fixes & improvements: On top of all the features mentioned above, we applied a record-breaking 69 additional bug fixes and improvements 🚀.

We hope that these changes enable you to create even more powerful apps while having fun along the way. Enjoy the festive times to come and look out for another delightful Uify update in your inbox in the new year!

All the best,

Dom