@premise/plugin-dynamic-pick-extension
v0.2.2
Published
Dynamic Data Form Extension (Frontend and Backend Plugins)
Downloads
423
Readme
dynamic-pick-extension
Welcome to the dynamic-pick-extension plugin! This plugin is a Custom Field Extension that allow you to create <Select>
components that fetches data dynamically from an endpoint. This can be used together with the form-data-backend
plugin to write custom logic to fill the field.
Installation
cd packages/app/
yarn add @premise/plugin-dynamic-pick-extension
Configuration
Add the import to your packages/app/src/App.tsx
on the frontend package of your backstage instance:
import { DynamicPickFieldExtension } from '@premise/plugin-dynamic-pick-extension';
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
Then add the imported field extension as a child of ScaffolderFieldExtensions
inside Route
<Route path="/create" element={<ScaffolderPage />}>
<ScaffolderFieldExtensions>
<DynamicPickFieldExtension />
</ScaffolderFieldExtensions>
</Route>
You should now see the custom filed DynamicPickExtension
clicking "Custom field explored" here http://localhost:3000/create/edit
.
Usage
To use the extension on a Backstage Template Action just add the ui-field
and ui-options
fields to the parameter
Basic usage:
parameters:
- category:
title: Category
type: string
ui:field: DynamicPickExtension
ui:options:
# IMPORTANT: The endpoint needs to return a JSON array of strings.
external_data: https://dummyjson.com/products/categories
Using the form-data-backend
plugin:
parameters:
- team:
title: Github Team to add as admin of the repository
type: string
ui:field: DynamicPickExtension
ui:options:
# This is a provider added on the form-data-backend plugin
form_data: github/teams
Options
`no_options_text``: string - Text to show when no options are available - Default: "No options"
parameters:
- team:
title: Github Team to add as admin of the repository
type: string
ui:field: DynamicPickExtension
ui:options:
# This is a provider added on the form-data-backend plugin
form_data: github/teams
no_options_text: "No teams available"