Hey guys,
I created a wizard component that receives a list of steps.
export const Wizard: React.FC<any> = (props: any) => {
const { steps, builderBlock } = props;
return (
<>
{steps?.map((step: any, index: any) => {
return (
<BuilderBlocks
key={index}
child
parentElementId={builderBlock && builderBlock.id}
blocks={step.content}
dataPath={`component.options.steps.${index}.content`}
/>
);
})}
</>
);
};
const WizardWithChildren = withChildren(Wizard);
Builder.registerComponent(WizardWithChildren, {
name: "Wizard",
noWrap: true,
inputs: [
{
name: "steps",
type: "list",
subFields: [
{
name: "name",
type: "string",
},
{
name: "content",
type: "uiBlocks",
defaultValue: [],
},
],
},
],
});
Each step uses builderBlock and can be dynamically change.
I need to utilize the ‘name’ field from each step to generate a static page for each step using Next.js’ getStaticPaths. Since the component data is not accessible during the page building stage, I plan to add a new input field called ‘steps’ on the page input fields and bind it with the component. This approach will make the “steps” data accessible when constructing all the page variations using getStaticPaths.
CURRENT ISSUE- Each step includes input fields for both a name and content. However, when creating the new “steps” field in my page model, there is no “uiBlocks” type available. As a result, binding the data with the component won’t function properly
