Create a new entry directly from a many picker

[ijreilly]

The below behaviour is available on the "to one" relation picker:

Let's add the same behaviour on the recently introduced "from many" relation pickers!

[greptile-apps[bot]]

To add the 'create new entry' functionality to the 'from many' relation pickers, follow these steps:

1. Import necessary hooks and components in /packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx:

import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { IconForbid } from 'twenty-ui';

2. Initialize the hooks within the MultipleObjectRecordSelect component:

const { createNewRecordAndOpenRightDrawer } = useAddNewRecordAndOpenRightDrawer({
  relationObjectMetadataNameSingular: fieldDefinition.metadata.relationObjectMetadataNameSingular,
  relationObjectMetadataItem,
  relationFieldMetadataItem,
  entityId,
});

3. Add the 'create new entry' button to the component's return statement:

<SingleEntitySelect
  EmptyIcon={IconForbid}
  emptyLabel={'No ' + fieldDefinition.label}
  onCancel={onCancel}
  onCreate={createNewRecordAndOpenRightDrawer}
  onEntitySelected={handleEntitySelected}
  width={width}
  relationObjectNameSingular={fieldDefinition.metadata.relationObjectMetadataNameSingular}
  relationPickerScopeId={relationPickerScopeId}
  selectedRelationRecordIds={recordId ? [recordId] : []}
  excludedRelationRecordIds={excludeRecordIds}
/>

This will enable the 'create new entry' functionality in the 'from many' relation pickers similar to the 'to one' relation pickers.

References

/packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx /packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx /packages/twenty-front/src/modules/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer.ts /packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts /packages/twenty-front/src/modules/object-record/relation-picker/components /packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx /packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationManyFieldInput.tsx

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)