Using a relationships entry title as a repeatable components entry title

Following my previous message, I figured out how to make this code work with v4, by inserting the logic exposed above (@starrett67 thanks again) inside the corresponding v4 file, directly in the @strapi node module (as copying files & hierarchy in the extension folder doesn’t work anymore for a basic override).

So: in node_modules/@strapi/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/utils/select.js here is the code I inserted :

import { useMemo } from "react";
import { get, toString } from "lodash";
import { useCMEditViewDataManager } from "@strapi/helper-plugin";

function useSelect({ schema, componentFieldName }) {
  const {
    checkFormErrors,
    modifiedData,
    moveComponentField,
    removeRepeatableField,
    triggerFormValidation,
  } = useCMEditViewDataManager();

  const mainField = useMemo(
    () => get(schema, ["settings", "mainField"], "id"),
    [schema]
  );

  const nestedObjectTitle = schema.layouts.edit?.[0]?.[0]?.metadatas?.mainField?.name;  
  const nestedObjectField = schema.layouts.edit?.[0]?.[0]?.name;
  
      const displayValuePath = (mainField === 'id' && !!nestedObjectTitle)
    ? [...componentFieldName.split('.'), nestedObjectField, nestedObjectTitle]
    : [...componentFieldName.split('.'), mainField];

  const displayedValue = toString(
    get(modifiedData, displayValuePath, '')
  );

  return {
    displayedValue,
    mainField,
    checkFormErrors,
    moveComponentField,
    removeRepeatableField,
    schema,
    triggerFormValidation,
  };
}

export default useSelect;

Then we have to rebuild using npm run build --clean (to clean the cache).

As modyfying the node_module is a very ugly process, some recommendations I found browsing the official Discord are to use the path-package, so that basically we don’t loose the file as soon as we reinstall the packages, but it is suggest to break.

Some folks say it will be fixed in future version, which I highly expect :slightly_smiling_face:.

1 Like