# Dynamic Data On Backstage Templates

DevFeed: [Dynamic Data On Backstage Templates](<https://devfeed.tech/articles/dynamic-data-on-backstage-templates-23876.md>)

Original publisher: [Read original article](<https://engineering.premise.com/dynamic-data-on-backstage-templates-ad8a0ae316e1?source=rss----c5fada0a103d---4>)

Author: Mauricio Martinez

Published: 2023-03-13T17:47:07Z

Content type: tutorial

Language: en

Sources: [Engineering at Premise - Medium](<https://devfeed.tech/sources/engineering-at-premise-medium.md>)

Topics: [Backstage](<https://devfeed.tech/topics/backstage.md>), [Extension](<https://devfeed.tech/topics/extension.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [API](<https://devfeed.tech/topics/api.md>), [HTTP](<https://devfeed.tech/topics/http.md>), [JSON](<https://devfeed.tech/topics/json.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [backstage](<https://devfeed.tech/tags/backstage.md>), [cloud-computing](<https://devfeed.tech/tags/cloud-computing.md>), [dynamic-data](<https://devfeed.tech/tags/dynamic-data.md>), [extension](<https://devfeed.tech/tags/extension.md>), [forms](<https://devfeed.tech/tags/forms.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [json](<https://devfeed.tech/tags/json.md>), [plugins](<https://devfeed.tech/tags/plugins.md>)

## AI overview

This tutorial explains how to use the dynamic-data-form-extension plugin collection with Backstage templates. It covers a frontend custom field extension that populates Select components from HTTP endpoints and a backend plugin for custom providers and authenticated or transformed data.

## Source excerpt

Dynamic Data in Backstage TemplatesTable Of ContentsIntroductionFrontend Plugin (dynamic-pick-extension)Backend Plugin (form-data-backend)Introduction If you've ever built a Backstage template, you know that creating user-friendly forms is a must. One of the most common form elements is the enumcomponent. It allows users to choose from a list of options, which is especially useful when you have a large number of choices. But what happens when you have to dynamically populate that list with data from an external API? That's where the dynamic-data-form-extension plugin collection comes in. The dynamic-data-form-extension plugin collection allows you to populate a <Select> component with data fetched from an HTTP endpoint. It's a simple, yet powerful plugin that can save you a lot of time and effort. Frontend Plugin (dynamic-pick-extension)https://www.loom.com/share/9de1f5c431864f19982fcdfab4cd029a 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. Installationyarn add --cwd packages/app @premise/plugin-dynamic-pick-extensionConfiguration Add the import to your App.tsx on the frontend package of your backstage instance: import { DynamicPickFieldExtension } from '@premise/plugin-dynamic-pick-extension'; Then add the imported field extension as a child of ScaffolderFieldExtensions. <ScaffolderFieldExtensions> <DynamicPickFieldExtension /> </ScaffolderFieldExtensions>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/categoriesUsing the form-data-backend plugin:parameters: - team: title: Github Team to add a