diff --git a/.changeset/eighty-ants-attack.md b/.changeset/eighty-ants-attack.md
new file mode 100644
index 0000000000..e75f76ea07
--- /dev/null
+++ b/.changeset/eighty-ants-attack.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Added a option to the M2A interface allowing to set custom prefix instead of the collection name
diff --git a/app/src/interfaces/list-m2a/index.ts b/app/src/interfaces/list-m2a/index.ts
index 5bc3d11815..f78e3f9841 100644
--- a/app/src/interfaces/list-m2a/index.ts
+++ b/app/src/interfaces/list-m2a/index.ts
@@ -11,7 +11,7 @@ export default defineInterface({
types: ['alias'],
localTypes: ['m2a'],
group: 'relational',
- options: [
+ options: ({ editing, relations }) => [
{
field: 'enableSelect',
name: '$t:selecting_items',
@@ -63,6 +63,25 @@ export default defineInterface({
width: 'half',
},
},
+ {
+ field: 'prefix',
+ name: '$t:prefix',
+ meta:
+ editing === '+'
+ ? {
+ interface: 'presentation-notice',
+ options: {
+ text: '$t:interfaces.list-m2m.display_template_configure_notice',
+ },
+ }
+ : {
+ interface: 'system-display-template',
+ note: '$t:interfaces.list-m2a.prefix_note',
+ options: {
+ collectionName: relations.o2m?.collection,
+ },
+ },
+ },
],
preview: PreviewSVG,
});
diff --git a/app/src/interfaces/list-m2a/list-m2a.vue b/app/src/interfaces/list-m2a/list-m2a.vue
index 0b2634ce18..0a69f44336 100644
--- a/app/src/interfaces/list-m2a/list-m2a.vue
+++ b/app/src/interfaces/list-m2a/list-m2a.vue
@@ -31,7 +31,7 @@
@click="editItem(element)"
>
- {{ getCollectionName(element) }}:
+ {{ getPrefix(element) }}:
(),
{
@@ -217,6 +219,10 @@ const fields = computed(() => {
fields.push(...addRelatedPrimaryKeyToFields(collection.collection, displayFields));
}
+ if (props.prefix) {
+ fields.push(...getFieldsFromTemplate(props.prefix));
+ }
+
return fields;
});
@@ -375,7 +381,9 @@ function hasAllowedCollection(item: DisplayItem) {
);
}
-function getCollectionName(item: DisplayItem) {
+function getPrefix(item: DisplayItem) {
+ if (props.prefix) return renderStringTemplate(props.prefix, item).displayValue.value;
+
const info = relationInfo.value;
if (!info) return false;
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index d6065df5cd..f9850874c4 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1506,6 +1506,8 @@ undo_removed_item: Undo Removed Item
remove_item: Remove Item
delete_item: Delete Item
interfaces:
+ list-m2a:
+ prefix_note: Uses the related item's collection name by default.
filter:
name: Filter
description: Configure a filter object.