diff --git a/docs/features/software-templates/writing-custom-step-layouts.md b/docs/features/software-templates/writing-custom-step-layouts.md
index 53b1ca342d..69d61b93dc 100644
--- a/docs/features/software-templates/writing-custom-step-layouts.md
+++ b/docs/features/software-templates/writing-custom-step-layouts.md
@@ -27,24 +27,29 @@ import {
} from '@backstage/plugin-scaffolder';
import { Grid } from '@material-ui/core';
-const TwoColumn: LayoutTemplate = ({ properties, description, title }) => (
- <>
-
{title}
-
- {properties.slice(0, mid).map(prop => (
-
- {prop.content}
-
- ))}
- {properties.slice(mid).map(prop => (
-
- {prop.content}
-
- ))}
-
- {description}
- >
-);
+const TwoColumn: LayoutTemplate = ({ properties, description, title }) => {
+ const mid = Math.ceil(properties.length / 2);
+
+ return (
+ <>
+ {title}
+ In two column layout!!
+
+ {properties.slice(0, mid).map(prop => (
+
+ {prop.content}
+
+ ))}
+ {properties.slice(mid).map(prop => (
+
+ {prop.content}
+
+ ))}
+
+ {description}
+ >
+ );
+};
export const TwoColumnLayout = scaffolderPlugin.provide(
createScaffolderLayout({
diff --git a/microsite/sidebars.json b/microsite/sidebars.json
index 44d8e12869..dd1ea30e2e 100644
--- a/microsite/sidebars.json
+++ b/microsite/sidebars.json
@@ -97,6 +97,7 @@
"features/software-templates/builtin-actions",
"features/software-templates/writing-custom-actions",
"features/software-templates/writing-custom-field-extensions",
+ "features/software-templates/writing-custom-step-layouts",
"features/software-templates/migrating-from-v1beta2-to-v1beta3"
]
},
diff --git a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
index 8dc6e5340a..b23d6e4073 100644
--- a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
+++ b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
@@ -28,7 +28,6 @@ const TwoColumn: LayoutTemplate = ({ properties, description, title }) => {
return (
<>
{title}
- In two column layout!!
{left.map(prop => (