wise-white•3mo ago

Passing values to a create button

I want to have a specific create button in the table view. So when I press the create it should also passes the ID of that row in the table where the button is present. When I'm at the create view then I can retrieve this ID of the row. How can I do this?

3 Replies

kapa.ai•3mo ago

Hi @Busulle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass values to a create button and retrieve them in the create view, you can use the meta property of the CreateButton to pass additional parameters. Here’s how you can achieve this: 1. Using CreateButton with meta property: You can pass the row ID as part of the meta property when you define the CreateButton. This meta property can then be accessed in the create view. 2. Accessing the meta property in the create view: In the create view, you can use the useParsed hook to retrieve the passed meta data. Here is an example of how you can implement this: Step 1: Define the CreateButton with meta property

import { List, useTable, CreateButton } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" width="100%" />
        <Table.Column
          title="Actions"
          render={(text, record) => (
            <CreateButton
              meta={{ rowId: record.id }}
            />
          )}
        />
      </Table>
    </List>
  );
};

interface IPost {
  id: number;
  title: string;
}

import { List, useTable, CreateButton } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" width="100%" />
        <Table.Column
          title="Actions"
          render={(text, record) => (
            <CreateButton
              meta={{ rowId: record.id }}
            />
          )}
        />
      </Table>
    </List>
  );
};

interface IPost {
  id: number;
  title: string;
}

Step 2: Retrieve the meta property in the create view In your create view, you can use the useParsed hook to access the meta data passed from the CreateButton.

import { useParsed } from "@refinedev/core";
import { Form, Input, Button } from "antd";

const PostCreate: React.FC = () => {
  const { params } = useParsed();
return (
    <Form>
      <Form.Item label="Row ID">
        <Input value={params?.meta?.rowId} readOnly />
      </Form.Item>
      {/* Other form fields */}
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Create
        </Button>
      </Form.Item>
    </Form>
  );
};

import { useParsed } from "@refinedev/core";
import { Form, Input, Button } from "antd";

const PostCreate: React.FC = () => {
  const { params } = useParsed();
return (
    <Form>
      <Form.Item label="Row ID">
        <Input value={params?.meta?.rowId} readOnly />
      </Form.Item>
      {/* Other form fields */}
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Create
        </Button>
      </Form.Item>
    </Form>
  );
};

Additional Information - Documentation on CreateButton: CreateButton Documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/create-button/) - Documentation on useParsed: useParsed Documentation (https://refine.dev/docs/core/hooks/utilities/buttons/#usecreatebutton) By following these steps, you can pass the row ID from the table view to the create view using the CreateButton and meta property. This allows you to pre-fill or use the row ID in your create form. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

wise-white•3mo ago

That does not work:(