Dragging fields in CrafterCMS Studio

Question

I'm currently teaching myself how to use a headless CMS (CrafterCMS) with Next.js.

I have the following simple content type in CrafterCMS studio (just a title and a text):

And the respective code:

export default async function TestPage() {
    const model = await getModel('/site/website/test/index.xml');
    return (
        <TestComponent model={model} />
    );
}

export default function TestComponent(props) {
    const { isAuthoring } = useCrafterAppContext();
    const { model } = props;

    return (
        <ExperienceBuilder path={model.craftercms.path} isAuthoring={isAuthoring}>
            <Model model={model} >
                <div className="space-y-4">
                    <RenderField
                        model={model}
                        fieldId="title_s"
                        className="text-xl text-gray-800"
                    />

                    <RenderField
                        model={model}
                        fieldId="text_t"
                        className="text-xl text-gray-800"
                    />
                </div>
            </Model>
        </ExperienceBuilder>
    );
}

Is it possible to use Studio functionality to drag and change the positions of my two fields? For example I want to drag the text to be the first element. It seems that i only have the option to change the content, dragging is not available:

Answer 1

On CrafterCMS, you can drag & drop mainly 3 things:

• Repeating group items
• Component item references from an Item Selector control with a "Components" datasource
• Media items into a media control (image or video)

The simplest way of achieving what you describe, would be to change your model to wrap with a repeat group the fields you want to reorder via drag & drop (i.e. create a repeat group and add the "title" input control inside of it; only 1, discard the other). Once you've done that, you'll need to update your TestComponent code to use <RenderRepeat ... /> and you should be able to reorder via drag & drop, via the contextual menu up/down buttons, or via the content form.

The rendering of the repeat with your title field, would roughly look something like this:

<RenderRepeat
  model={model}
  fieldId="yourRepeatGroupId_o"
  componentProps={{ className: "space-y-4" }}
  renderItem={(item, index) => (
    <RenderField
      model={model}
      fieldId="yourRepeatGroupId_o.title_s"
      index={index}
      className="text-xl text-gray-800"
    />
  )}
/>

As I mentioned, you could achieve it via components (Item selector control, Components datasource), but the repeat group is simplest for this case; specially to get started and learn.