passive-yellow•16mo ago

Go to a specific step when using antd's useStepsForm

When using antd's useStepsForm in the edit page of a resource, is it possible to go to a specific step in the form when clicking the edit button on the list page?

6 Replies

kapa.ai•16mo ago

Hi @ahnaf1022. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to go to a specific step in the form when clicking the edit button on the list page. You can achieve this by using the gotoStep function returned from the useStepsForm hook. The gotoStep function allows you to programmatically change the current step of a form by taking in one argument, step, which is a number representing the index of the step you want to navigate to. Here's an example of how you can use the gotoStep function to navigate to a specific step when clicking the edit button:

<Button
  onClick={() => {
    gotoStep(targetStep);
  }}
>
  Edit
</Button>

<Button
  onClick={() => {
    gotoStep(targetStep);
  }}
>
  Edit
</Button>

Replace targetStep with the index of the step you want to navigate to when clicking the edit button. For more information on the gotoStep function, refer to the useStepsForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useStepsForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below

fair-rose•16mo ago

you can change default current step

useStepsForm({
    defaultCurrent: 2
  });

useStepsForm({
    defaultCurrent: 2
  });

passive-yellow•16mo ago

I actually don't want to save the default step, I have two edit buttons on the same list page and I want to go to different steps based on which button I click

fair-rose•16mo ago

i understand. i will create example for you are you using refine 4 or 3 ? I created example for you but requires some custom code. https://codesandbox.io/s/agitated-silence-fvr6ks?file=/src/pages/posts/list.tsx 1. Create Link Custom button with useLink 2. Generate url with useNavigation 3. give url to link button

const Link = useLink();
const { editUrl: generateEditUrl } = useNavigation();

const defaultCurrent = 1;
const defaultCurrentURL =
    generateEditUrl("posts", record.id) + `?defaultCurrent=${defaultCurrent}`;

<Link to={defaultCurrentURL}>
    <Button size="small">Start Edit on step {defaultCurrent + 1}</Button>
</Link>;

const Link = useLink();
const { editUrl: generateEditUrl } = useNavigation();

const defaultCurrent = 1;
const defaultCurrentURL =
    generateEditUrl("posts", record.id) + `?defaultCurrent=${defaultCurrent}`;

<Link to={defaultCurrentURL}>
    <Button size="small">Start Edit on step {defaultCurrent + 1}</Button>
</Link>;

4. get params from url in edit page

const { params } = useParsed();
const defaultCurrent = Number(params?.defaultCurrent) ?? 0;
useStepsForm<IPost>({
        defaultCurrent: Number.isNaN(defaultCurrent) ? 0 : defaultCurrent,
    });

const { params } = useParsed();
const defaultCurrent = Number(params?.defaultCurrent) ?? 0;
useStepsForm<IPost>({
        defaultCurrent: Number.isNaN(defaultCurrent) ? 0 : defaultCurrent,
    });

I noticed it upon a second look. undefined and isNaN controls can be better 🥹 but it works

passive-yellow•16mo ago

Thanks, this works how I wanted