Avatars, ratings & more new components in the marketplace

Mari Hirvi
AppGyver
Published in
4 min readFeb 10, 2022

--

Finding the right building blocks for an app’s user interface is one of the most important parts of your no-code project. We’ve recently released the biggest update to our component library since the launch of Composer Pro.

This first batch of ready-made components comes with high complexity already baked in. They cover a range of possibilities and use cases, making it even simpler to create intricate user interfaces out of the box with minimal effort. They also don’t include any code — feel free to take them apart to see how they work!

At the end of last year, we introduced a major upgrade to our theming and styling system. All of the new components are designed to support both Universal and SAP Fiori themes. Furthermore, you can customize the components’ styles in Component style editor, while still maintaining the ability to get updates from the marketplace.

We hope the new components inspire you to try out new things and speed up your app building. And stay tuned since we’re just getting started. 😎

Check out the components changelog in our documentation to keep up with new components and component updates.

New components now available

Multi combo box

Multi combo box: A dropdown list which allows the user to select multiple items from a list of existing options.

Multi combo box with input

Multi combo box with input: Similar to Multi combo box, but includes an input field for filtering the options, which makes it perfect for long lists of options.

Combo box

Combo box: Allows the user to select an item from a list of existing options or to add their own value. Great for situations that require a bit more flexibility than a basic dropdown field can provide.

Date field

Date field: Opens a date picker calendar on web and the native date picking dialog on mobile.

Star rating

Star rating: A multi-functional rating component, which you can use for both rating input and just to display a rating.

Color picker

Color picker: Lets you define a list of colors, and outputs the selected color.

Badge

Badge: A small badge component with several different style classes. Great for tagging and statuses.

Badge with icon

Badge with icon: Similar to the Badge component, but with a configurable icon.

Avatar Group

Avatar group: A component for displaying a group of avatars. Select from three different types of avatars — image, icon, initials, or a mix.

Soft tabs

Soft tabs: A navigation component that lets the user switch between tabs. Combine it with a Conditional renderer to make your full tab layout.

Progress bar: Lets you visualize the progress of a process. Bind the value to a changing variable, and you have an animated progress bar!

New button types

  • Icon button
  • Icon-only button
  • Link button

🔎 All of these can be found in the marketplace. Try them out, and let us know what you think in the forums!

--

--