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:

1. Design the data component’s User Interface (UI) within a single ‘Container’ component.
2. Convert the Container into a new component project.
3. In properties, create a data adapter and configure required private data variables.
4. 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: