pass layouts throught to MultiJsonForm

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

packages/app/src/App.tsx

@@ -64,6 +64,7 @@ import {
   ScaffolderPage,
   NextScaffolderPage,
   scaffolderPlugin,
+  ScaffolderLayouts,
 } from '@backstage/plugin-scaffolder';
 import { SearchPage } from '@backstage/plugin-search';
 import { TechRadarPage } from '@backstage/plugin-tech-radar';
@@ -104,6 +105,7 @@ import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { PlaylistIndexPage } from '@backstage/plugin-playlist';
+import { Customlayout } from './components/scaffolder/customScaffolderLayouts';
 
 const app = createApp({
   apis,
@@ -215,9 +217,14 @@ const routes = (
         />
       }
     >
-      <ScaffolderFieldExtensions>
-        <LowerCaseValuePickerFieldExtension />
-      </ScaffolderFieldExtensions>
+      <>
+        <ScaffolderFieldExtensions>
+          <LowerCaseValuePickerFieldExtension />
+        </ScaffolderFieldExtensions>
+        <ScaffolderLayouts>
+          <Customlayout />
+        </ScaffolderLayouts>
+      </>
     </Route>
     <Route
       path="/create/next"

packages/app/src/components/scaffolder/customScaffolderLayouts.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2022 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 React from 'react';
+import {
+  createScaffolderLayout,
+  ObjectFieldTemplate,
+  scaffolderPlugin,
+} from '@backstage/plugin-scaffolder';
+
+const ALayout: ObjectFieldTemplate = ({ properties, description }) => {
+  // eslint-disable-next-line no-console
+  return (
+    <div>
+      <h1>CUSTOM LAYOUT!!!!!</h1>
+      <div>
+        {properties.map(prop => (
+          <div key={prop.content.key}>{prop.content}</div>
+        ))}
+      </div>
+      {description}
+    </div>
+  );
+};
+
+export const Customlayout = scaffolderPlugin.provide(
+  createScaffolderLayout({
+    name: 'CustomLayout',
+    component: ALayout,
+  }),
+);

packages/app/src/components/scaffolder/defaultPreviewTemplate.ts

@@ -17,6 +17,7 @@
 export const defaultPreviewTemplate = `# Edit the template parameters below to see how they will render in the scaffolder form UI
 parameters:
   - title: Fill in some steps
+    ui:ObjectFieldTemplate: 'CustomLayout'
     required:
       - name
     properties: