@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: writing-custom-field-extensions
|
||||
title: Writing Custom Field Extensions
|
||||
description: How to write your own field extensions
|
||||
---
|
||||
|
||||
Collecting input from the user is a very large part of the scaffolding process
|
||||
and Software Templates as a whole. Sometimes the built in components and fields
|
||||
just aren't good enough, and sometimes you want to enrich the form that the
|
||||
users sees with better inputs that fit better.
|
||||
|
||||
This is where `Custom Field Extensions` come in.
|
||||
|
||||
With them you can show your own `React` Components and use them to control the
|
||||
state of the JSON schema, as well as provide your own validation functions to
|
||||
validate the data too.
|
||||
|
||||
## Creating a Field Extension
|
||||
|
||||
Field extensions are a way to combine an ID, a `React` Component and a
|
||||
`validation` function together in a modular way that you can then use to pass to
|
||||
the `Scaffolder` frontend plugin in your own `App.tsx`.
|
||||
|
||||
You can create your own Field Extension by using the
|
||||
`createScaffolderFieldExtension` `API` like below:
|
||||
|
||||
```tsx
|
||||
//packages/app/scaffolder/MyCustomExtension/MyCustomExtension.tsx
|
||||
export const MyCustomExtension = () => {};
|
||||
```
|
||||
|
||||
```tsx
|
||||
// packages/app/scaffolder/MyCustomExtension/validation.ts
|
||||
```
|
||||
@@ -1,40 +0,0 @@
|
||||
/*
|
||||
* Copyright 2021 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
loadBackendConfig,
|
||||
getRootLogger,
|
||||
UrlReaders,
|
||||
} from '@backstage/backend-common';
|
||||
// import { ScmIntegrations } from '@backstage/integration';
|
||||
|
||||
const run = async () => {
|
||||
const root = getRootLogger();
|
||||
const config = await loadBackendConfig({
|
||||
argv: process.argv,
|
||||
logger: root,
|
||||
});
|
||||
|
||||
// const integrations = ScmIntegrations.fromConfig(config);
|
||||
const reader = UrlReaders.default({ logger: root, config });
|
||||
|
||||
console.log(
|
||||
await reader.readTree(
|
||||
'https://dev.azure.com/backstage-verification/test-template-fetch/_git/test-template-fetch',
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
run();
|
||||
Reference in New Issue
Block a user