September: List component, key-value stores, collapsing whitespace

Did you know that 19th of September is international “Talk like a pirate” day? Well, in case you missed it, make sure you mark it in your calendar right now! In that spirit, avast ye, we have gathered a treasure trove of fantastic features and have set sail to deliver them to you 🏴‍☠️. Get ready to explore some mighty new capabilities that arrrr now available!

‍

Summary

• 🔁 List component: Ever wanted to render a dynamic repetition of components, like a list, grid or catalog? While this used to be a cumbersome task, we've just released the new <span class="code_text">List</span> component, which makes creating such dynamic content a breeze!
• 🗝 Key-value stores: There might be a need to store basic values with corresponding keys without the complexity of connecting a database or similar storage. In such scenarios, our newly introduced key-value stores, operated and hosted by Uify, are the perfect solution!
• 👀 Collapsing whitespace: Hiding components conditionally often results in unwanted empty space. Not any more! Now, invisible full-width components disappear completely, seamlessly shifting the content below up without a trace!

‍

Let’s break it down

List component

At times, you might encounter a scenario where you wish to display a dynamic list of "items." The desired presentation could take various forms, such as a vertical list, a card-based layout, or any type of grid. For instance, you may want to render a product catalog or a roster of employees with a clickable button to access detailed information.

Creating such views has now become remarkably straightforward! Thanks to the recently introduced <span class="code_text">List</span> component, you can easily generate repeating components laid out with a customizable number of columns. Any child component you insert into this <span class="code_text">List</span> will be duplicated according to the count of items provided as input. Furthermore, you can access the particular index and item details using the special variables <span class="code_text">currentItem</span> and <span class="code_text">currentIndex</span>.

Enough said, you need to see the magic for yourself 🍿:

‍

‍

Key-value stores

While integrating your apps with your tools and infrastructure unlocks their full potential, there are instances when all you really want to do is store and fetch a few key-value pairs. It can be quite cumbersome to establish a dedicated data source for this purpose or to create a specialized schema or table within an already connected source.

To address this, we have recently introduced key-value stores as the first managed data source in Uify! You can create these stores in the data management section and assign a unique access key to each one. Subsequently, you can use these stores in any app by referencing them using the syntax <span class="code_text">kv.{accessKey}</span>. Each store provides convenient methods for setting or retrieving values associated with a key, as well as for fetching all keys or entries within the store at once.

See for yourself how easy and useful they are 🍿:

‍

‍

Collapsing whitespace

Each component supports the "Visible" configuration option, enabling you to conditionally display or hide components using JavaScript. In the past, an invisible component would still occupy the same space, resulting in empty whitespace corresponding to its dimensions. This made it challenging to create visually appealing layouts with conditionally rendered parts or complex layouts with multiple alternatives.

We have addressed this behavior in our latest release. Now, when a component is set to be invisible, it completely disappears, causing the components below it to move up accordingly. It's important to note that this enhancement has a few current limitations: (1) it only applies to components that span the full width of their parent, and (2) it is effective exclusively in execution mode, meaning that in edit mode, invisible components are still rendered with partial transparency to facilitate a smoother app-building experience.

Take a look at how this behaves now:

‍

‍

Additional improvements

• Canvas performance: We have fundamentally improved the architecture of our drag-and-drop builder, leading to a performance improvement of up to 50% for many user interactions.
• App permissions at invite: When inviting someone to your workspace, you can now define the app permissions of those new users immediately, without having to wait for their signup.
• Fetch Gmail thread by id: In addition to fetching threads by applying a filter, you can now fetch a single Gmail thread by its id. This is especially useful when creating apps that are rendered in the Uify Chrome extension next to your Gmail inbox.
• Configurable width of table detail view: The width of the detail view of the <span class="code_text">Table</span> component can now be configured in the same way like the width of the <span class="code_text">Slideout</span> component.
• Bug fixes & improvements: On top of all that, we applied 24 bug fixes and improvements 🚀.

‍

I hope you enjoyed discovering these new features with me and that they provide you with new super powers to apply to your apps. As always, don’t hesitate to send us feedback, suggestions, or your personal hero stories 🦸!

Happy building!

Dom