Use metadata to generate UI components
Once metadata is attached to your entities, nullplatform can automatically generate useful UI components on the dashboard.
Some catalog specifications are predefined by the platform. When you use these predefined keys (links, about),
your metadata will automatically render in the frontend without needing custom UI code.
Available UI components
| Catalog key | Entity type | Description |
|---|---|---|
links | namespace, application | Creates a dashboard block for grouped resources |
about | user | Shows structured user profile info |
You don’t need to define schemas for these manually. They come with built-in schemas and rendering logic.
Links component (namespace application dashboards)
Use the links catalog entry to display grouped resources like Trello boards, GitHub repos, Datadog dashboards, etc.
Built-in schema
{
"type": "array",
"minItems": 1,
"items": {
"type": "object",
"properties": {
"title": {
"type": "string",
"minLength": 1,
"maxLength": 36
},
"subtitle": {
"type": "string",
"minLength": 1,
"maxLength": 36
},
"icon": {
"type": "string",
"format": "uri",
"minLength": 3,
"description": "An URL of an png/jpg/base64 image or icon name of iconify library (see https://icon-sets.iconify.design)."
},
"links": {
"type": "array",
"minItems": 1,
"maxItems": 2,
"items": {
"type": "object",
"properties": {
"description": {
"type": "string",
"minLength": 3,
"maxLength": 18
},
"url": {
"type": "string",
"format": "uri"
}
},
"required": [
"description",
"url"
]
}
}
},
"required": [
"title",
"icon",
"links"
]
}
}
Generated UI component - Where it appears
This generates the following component that can be placed either in your namespace or application dashboard.
Create metadata UI for links
Namespace
To create metadata components of entities in your namespace, send a POST request to create metadata entries like the following:
curl -L 'https://api.nullplatform.com/metadata/namespace/123/links' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-d '[
{
"title": "Trello",
"icon": "logos:trello",
"links": [
{
"url": "https://trello.com/w/my-organization-trello/home",
"description": "Workspace"
}
]
},
{
"title": "Github",
"icon": "bi:github",
"links": [
{
"url": "https://github.com/my-organization-github",
"description": "Homepage"
}
]
},
{
"title": "Calendar",
"icon": "logos:google-calendar",
"links": [
{
"url": "https://calendar.google.com/",
"description": "Link"
}
]
}
]
In the namespace dashboard, they appear above the application list:
Application
In the application dashboard, they are in the Useful links section.
For example, to add a Datadog component to your application UI, send POST request to create metadata entries like the following:
curl -L 'https://api.nullplatform.com/metadata/application/123/links' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-d '[
{
"subtitle": "Application performance & monitoring",
"title": "Datadog",
"icon": "simple-icons:datadog",
"links": [
{
"url": "https://app.datadoghq.com/dashboard/example",
"description": "Dashboard"
}
]
}
]'
This will be rendered in the UI like this:
About component (user profiles)
Use the about specification to display structured user profile information, such as title, role, contact, etc.
Built-in schema
{
"type": "array",
"items": {
"type": "object",
"properties": {
"title": {
"type": "string",
"minLength": 4
},
"description": {
"type": "string",
"minLength": 4
}
},
"required": [
"title",
"description"
]
}
}
Create metadata UI for users
To use it, you just need to create the entity metadata for the about specification described above.
Here's a request example:
curl -L 'https://api.nullplatform.commetadata/user/123/about' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-d '[
{
"title": "Position",
"description": "System Administrator"
},
{
"title": "Role",
"description": "Product Owner"
},
{
"title": "Contact",
"description": "+12 123 456 789"
}
]
This will appear on the member profile page at: https://{my-organization}.app.nullplatform.io/member/{id}:
Here's a user profile example:
