Change displayed value of edit field

I want to change the display value in the edit fields in the admin (the ones that show up when editing a component row). Which file do I need to change for that? I know it most likely be in the admin components or containers, but I can’t find the one.


Hi @fabimc

When you are referring to the display value can you clarify, as we have an option to do this via the CTM:

I want to change the display value when Editing. So it will be after you create an entry. I want to catch datetime fields for example and change value before showing it to the user.
Just to clarify, strapi seems to force convert all dates to utc before displaying. I want to change that code for it to show a specific timezone.

Ah yeah we had this discussion on slack, :thinking: I don’t remember what part of the content-manager handles those fields. Let me dig at the source real quick.

Looks like we convert it to UTC here: strapi/Filter.js at 98b305c4816eb8588ca00c4bddc85428823ebdcb · strapi/strapi · GitHub

But I would suggest you take a dive through the source code looking for moment.js as that is what should be handling the conversions (just to ensure you don’t miss anything)

Not being able to make changes reflect on the UI. Maybe that only changes the display of the actual rows and not the edit mode.

I’m looking into EditView right now. Should be around there.

@DMehaffy perfect timing! I’m trying to do something very similar by editing: strapi/index.js at master · strapi/strapi · GitHub

I’ve followed the “Customize a Plugin” section here: https://strapi.io/documentation/v3.x/admin-panel/customization.html#development-mode

So I’ve copied over the single file sourced in : extensions/content-manager/admin/src/components/FieldComponent/index.js (all relative links sourced back to the original package)

However, on build I’m seeing:

Error: ./node_modules/strapi-plugin-content-manager/admin/src/components/ComponentInitializer/index.js 14:4
Module parse failed: Unexpected token (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <NonRepeatableWrapper isEmpty isReadOnly={isReadOnly}>
|       <PlusButton
|         onClick={() => {

I would have thought the existing webpack build should have been configured to handle the existing content manager components. Am I missing something here?

Appreciate your thoughts/comments.

Okay, I’ve been able to figure it out. The problem was my understanding of the role of the ejected files placed in extensions/content-manager/admin/src/.... I thought that these were used in place of the original module and then compiled, but these are copied over the original. The key difference is that these import URL refs in extensions/content-manager/admin/src/components/Inputs/index.js are technically invalid:

import { getFieldName } from '../../utils';
import InputJSONWithErrors from '../InputJSONWithErrors';
import NotAllowedInput from '../NotAllowedInput';
import SelectWrapper from '../SelectWrapper';
import WysiwygWithErrors from '../WysiwygWithErrors';
import InputUID from '../InputUID';

but they are actually valid when copying over the original module in node_modules/strapi-plugin-content-manager/admin/src/components/Inputs/index.js.

I made the mistake of trying to resolve them to the original files. Hopefully this is helpful for someone else who comes across it :slight_smile:

Thanks Todd, I’ll check out the FieldComponent.js

I’m facing the same problem as @fabimc, and it’s not clear to me what changes need to be done in order to customise the display behaviour of a field.

I found that modifying getDisplayedValue I can change the list view, but how can I customise the field inside the edit view?
cc/ @DMehaffy