In this tutorial, we will cover some key concepts involving metadata-driven controls (MDCs). This includes understanding control delegates, PropertyInfo, Table, Filter Bar, Value Help, TypeMap, and variant management. The implementation will be based on a JSON model and is based on our official Demokit Sample. After completion, you should be able to leverage the full potential of the MDC concepts in your own projects.
⚠️ Note: The sap.ui.mdc library is still experimental API and we expect some (but not many) changes for the generally available version with UI5 2. 🧪
Metadata-Driven Controls or MDCs are a powerful tool that allows you to create user interfaces dynamically at runtime. The controls are driven by metadata, which gives a description of the data and its characteristics. This way, you don't have to explicitly define every control in your UI, but you can configure and modify them based on the provided metadata. Find more details in the UI5 Documentation and API Reference.
Control Delegates are used to implement service or application-specific behavior in your MDCs. They allow developers to customize the default behavior of controls depending on the specific needs of their service or application. This can include things like custom control creation, metadata provision, or data binding.
PropertyInfo is used to define the necessary metadata that should be provided to the controls. This can include information like the control visibility, the data type, or other control-specific settings. PropertyInfo is essential in letting your MDCs know how they should behave.
These are some specific types of MDCs that you can use in your applications:
- Table: This control lets you display data in a tabular format. You can define columns and rows based on the provided metadata.
- Filter Bar: This control provides a user interface for creating complex filter conditions. It can be used in conjunction with a Table control to filter the displayed data.
- Value Help: This control is used to assist the user in inputting data. It can provide suggestions or a list of possible values to choose from based on the provided metadata.
The TypeMap is used for defining custom types in your MDCs. If the standard types provided are not sufficient for your needs, you can add your own using the TypeMap. This gives you even more flexibility in customizing your controls.
Variant Management is a feature that allows users to save their personalization settings. This can include things like the layout of a table, filter conditions in a filter bar, or others. These settings can then be loaded later, allowing users to customize their experience and increase their productivity.
- Setup the Project on Our Machine (browse sources - run app)
- How to Use the MDC Table (browse sources - run app)
- How to Use the MDC Filter Bar (browse sources - run app)
- How to Build Advanced Value Helps (browse sources - run app)
- How to Add Custom Types (browse sources - run app)
- How to Enable Variant Management (browse sources - run app)
- A current version of Node.js (preferably 18.x)
- A code editor supporting JavaScript development
- Javascript knowledge to avoid blind copy&paste without knowing what's going on.
- UI5 knowledge, as this tutorial focuses on the MDC concepts.
No known issues.
This repository is provided as-is, without any support guarantees. However, you are welcome to report issues via the Issues tab and we'll see what we can do to fix them.
If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.
Copyright (c) 2023 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.