Customizing the add content page not to display the cryptic id values

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: v 3.2.5
  • Operating System: MacOS and Ubuntu
  • Database: Mongodb
  • Node Version: v12.20.0
  • NPM Version: v6.14.8
  • Yarn Version: NA

Hello Everyone,

This is my first question in the strapi community. I’m trying to customize the admin page especially where user is trying to add content. I’ve a repeatable component with a relation to another content type.

The following screenshots should help you to understand my content model:

strapi-issue
strapi-issue2108×4490 662 KB

The red arrow denotes what we see now. The green arrow value is the one we would like to see on the panel instead of ID value.

[P.S: Sorry about the bad quality of image, as the strapi community forum doesn’t allow me to upload multiple images as I’m new member :frowning:). Kindly open the image in new tab to view it properly.

I’ve tried to follow this documentation: https://strapi.io/documentation/developer-docs/latest/admin-panel/customization.html#customization and added the following in extensions:

import { useMemo } from "react";
import { get, toString } from "lodash";
import useDataManager from "../../../../hooks/useDataManager";

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

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

  let displayedValue = null;
  if (componentFieldName.includes("MetaTest")) {
    displayedValue = toString(
      get(modifiedData, componentFieldName, "").meta.MetaName
    );
  } else {
  displayedValue = toString(
    get(modifiedData, [...componentFieldName.split("."), mainField], "")
  );
  }

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

export default useSelect;

The piece of code I’ve added is:

  if (componentFieldName.includes("MetaTest")) {
    displayedValue = toString(
      get(modifiedData, componentFieldName, "").meta.MetaName
    );
  } else {
  displayedValue = toString(
    get(modifiedData, [...componentFieldName.split("."), mainField], "")
  );
  }

It worked well while viewing the existing added product. However, when I try to add a new product, and click on AllMetas, I get MetaName undefined error.

I believe it is something to do with the following:

get(modifiedData, componentFieldName, "").meta.MetaName

Kindly help here.