How to change the delete confirmation dialog title?

Question

The delete confirmation dialog show the resource name and #id as title. How to change this title to the one defined in Edit object where undoable={false} is set ?

And for the bulk delete confirmation dialog it takes the resource name instead of the resource label, how to also change this behavior ?

score 2 · Accepted Answer · answered Apr 03 '20 at 14:12

The DeleteButton / BulkDeleteButton components have the confirmTitle / confirmContent properties, there you can set your own title and content:

const MyActions = props => (
  <TopToolbar>
    <DeleteButton
      undoable={false}
      confirmTitle={'My Title'}  // 'resources.my_res.delete.title'
      confirmContent={'My Content'}
    />
  </TopToolbar>
)

const MyBulkActionButtons = props => (
  <>
    <BulkDeleteButton
      undoable={false}
      confirmTitle={'My Title'}
      confirmContent={'My Content'}
      {...props}
    />
  </>
)

<List actions={<MyActions />} bulkActionButtons={<MyBulkActionButtons />} />
<Edit actions={<MyActions />} />

score 0 · Answer 2 · answered Dec 09 '20 at 11:14

Here's a custom delete button showing you how to access data for the record being deleted to customise the dialog:

import React                    from 'react';
import { DeleteButton }         from 'react-admin';

const CustomDeleteButton = ({ type = 'Item', field, ...props }) => {
  const { record } = props;
  return (
    <DeleteButton
      confirmTitle={`Delete ${type}: ${field ? record[field] : 'this item'} ?`}
      confirmContent={'Are you sure you want to delete this item?'}
      {...props}
    />
  );
}

export default CustomDeleteButton;

and a sample call to it

<CustomDeleteButton basePath="/customers" undoable={false} type="Customer" field="cus_name" />

Obviously you can tailor this to suit your needs, and extend what information you access from the record object - just make sure you pass all the props on to the DeleteButton!

How to change the delete confirmation dialog title?

2 Answers2

Linked