Product Information
SAP AppGyver: Data components overhaul
Introduction
Have you ever found yourself wanting to re-use a component in your other app, or have you wished there was a pre-made complex component on the marketplace? With the recent data components overhaul, we have made both wishes true.
Data components are one of our most powerful features developed in SAP AppGyver yet. They allow you to build and employ highly reusable components with data-related logic built-in, eliminating the need for app-level data variables. You can use data components together with your data resources, and even publish them to the marketplace to make them available for other people to use.
Some examples of data components include:
- Scrollable basic list – displays a scrollable list of objects directly from a data resource.
- Image list – displays a list of images.
- Basic list with selection on right – displays a selectable list of objects from a data resource.
How do Data Components work?
What makes data components different from the usual view components we are used to are data adapters. They act as a connection between a data resource and a component’s internal logic. Since data components are highly reusable, an adapter can be connected to any data resource configured in the Composer. For instance, a REST API direct integration.
Private data variables work together with the data adapter similarly to a data variable working together with a data resource. Whilst, the data flow functions let you work with data inside the component similarly to using the page logic canvas: you can create new records, list or get existing records, and update and delete them.
Be sure to check our documentation to learn more about this!
How do I use a Data Component?
At the moment, all installable data components can be found by using a #data-adapter tag on the marketplace!
Upon trying different options, you may notice that every Data Component has a unique property that can be mapped to your data resource. By mapping, you are assigning one list of objects to another. It is as easy as drag-and-dropping the available fields from the data resource to match the adapter schema on the right. With this connection, the data component now works with your data resource.
Creating a Data Component
Apart from using the ready-made data components, you have an option of creating your own and having full control over design and internal logic. It is fairly difficult to create a data component without prior experience with SAP AppGyver, however, the process of creation is done via these steps:
- Design the data component’s User Interface (UI) within a single ‘Container’ component.
- Convert the Container into a new component project.
- In properties, create a data adapter and configure required private data variables.
- Create logic to initialize and update the data within the component.
For a detailed guide check out our documentation.
Sharing and reusing your component
As was stated previously, data components are highly reusable and you have an option of sharing components created by you for others to use or for you to re-use in other apps. The following is done by obtaining a Marketplace sharing key.
Data components created by you will appear in the ‘By Me’ tab above the view components. Choose the ‘Publish in marketplace’ option and you should be prompted with the key:
You can now share this key and your component will be available in the Component Market upon pasting it in the search field.
Afterword
In the future, we also plan to release a full-blown marketplace where developers can publish and discover components, as well as other UI assets, logic functions, and much more.
Data components unveil a whole new level of possibilities for using SAP AppGyver and open opportunities for even the most complex apps to be developed on the no-code level.
How do I refresh the data in the component?
In non-adapter components, I would create data variable and when I wanted to refresh I would execute Get record Collection, but I don't have this here.
Every data component has a 'Refresh data?' property that controls whether the refresh happens ("True" = yes, "False"= no). The 'Refresh rate' property determines the rate at which that is executed in ms.
Does it mean we can create and publish components and they will be available on the marketplace for everyone?
I just published a component "Image Slideshow" on Composer Pro. Does everyone see it on the marketplace now?
I can only see either "AppGyver" or "Richard Anderson" as the maintainer for most of the existing components.
Anyone can use the marketplace key to look up your component, but it is not present in the global list.
Thanks for clarifying. Since there's no way I get to know the tokens of other developers reusable components(unless they're shared on social media or blog), the best use case will be to share the token of my reusable components among my team so at least they can get the benefit. Is there any way to benefit from others(strangers) reusable components?
No, you cannot access other's custom components without them sharing the marketplace key with you. And it definitely would not be right to give an ability to use components without the owner intending to share them.
In the future, we will probably establish a process for submitting your components to the global marketplace.
Ok, thanks for clarifying!