ambitious-aqua
ambitious-aqua•2y 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
kapa.ai•2y 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
kapa.ai•2y ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade
deep-jade•2y ago
you can change default current step
useStepsForm({
defaultCurrent: 2
});
useStepsForm({
defaultCurrent: 2
});
ambitious-aqua
ambitious-aquaOP•2y 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
deep-jade
deep-jade•2y 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
ambitious-aqua
ambitious-aquaOP•2y ago
Thanks, this works how I wanted

Did you find this page helpful?