Help Creating a Custom arc-address Field in My EspoCRM Extension

[fberbert]

Hello,

I'm trying to create a custom field derived from the pre-defined address field, named arc-address, within my extension. However, after installing the extension and accessing the entity that includes the new field and its layout, I encounter the following error:

loader.js: GET http://espocrm/client/lib/transpiled/src/views/fields/arc-address.js?r=1734152910 404 (Not Found)

Here is the file structure of my extension:

MyPlugin/
├── client/
│ └── custom/
│ └── modules/
│ └── MyPlugin/
│ ├── lib/
│ │ └── js/
│ │ └── views/
│ │ └── fields/
│ │ └── arc-address.js
│ └── res/
│ └── templates/
│ └── fields/
│ └── arc-address/
│ ├── detail.tpl
│ ├── edit.tpl
│ ├── edit-1.tpl
│ ├── edit-2.tpl
│ ├── edit-3.tpl
│ ├── edit-4.tpl
│ ├── search.tpl
│ └── list-link.tpl
└── custom/
└── Espo/
└── Modules/
└── MyPlugin/
└── Resources/
└── metadata/
├── app/
│ └── client.json
├── clientDefs/
│ └── App.json
└── fields/
└── arc-address.json

Contents of App.json:

{
"fields": {
"arc-address": {
"view": "MyPlugin:views/fields/arc-address"
}
}
}

Contents of client.json:

{
"scriptList": [
"__APPEND__",
"client/custom/modules/MyPlugin/lib/js/views/fields/arc-address.js"
],
"developerModeScriptList": [
"__APPEND__",
"client/custom/modules/MyPlugin/lib/js/views/fields/arc-address.js"
]
}

Contents of arc-address.json:

{
"actualFields": [
"street",
"number",
"complement",
"neighborhood",
"city",
"state",
"country",
"ddd",
"postalCode"
],
"fields": {
"street": {
"type": "text",
"maxLength": 255,
"dbType": "varchar",
"placeholder": "Logradouro"
},
"number": {
"type": "varchar",
"maxLength": 10,
"pattern": "$noBadCharacters",
"placeholder": "Número",
"customizationOptionsDisabled": true
},
"complement": {
"type": "varchar",
"maxLength": 100,
"pattern": "$noBadCharacters",
"placeholder": "Complemento",
"customizationOptionsDisabled": true
},
continue...
}

Contents of arc-address.js:

define('MyPlugin:views/fields/arc-address', ['views/fields/address'], function (AddressFieldView) {

return AddressFieldView.extend({

detailTemplate: 'MyPlugin:fields/arc-address/detail',
listLinkTemplate: 'MyPlugin:fields/arc-address/list-link',
searchTemplate: 'MyPlugin:fields/arc-address/search',
editTemplate: 'MyPlugin:fields/arc-address/edit',
editTemplate1: 'MyPlugin:fields/arc-address/edit-1',
editTemplate2: 'MyPlugin:fields/arc-address/edit-2',
editTemplate3: 'MyPlugin:fields/arc-address/edit-3',
editTemplate4: 'MyPlugin:fields/arc-address/edit-4',

continue...
});
});

What I Might Be Missing:

Despite following the setup, EspoCRM still attempts to load `arc-address.js` from the default path (`client/lib/transpiled/src/views/fields/arc-address.js`), resulting in a 404 error. I have verified the following:

1. File Locations:

• `arc-address.js` is correctly placed in `client/custom/modules/MyPlugin/lib/js/views/fields/arc-address.js`.
• Templates are correctly placed in `client/custom/modules/MyPlugin/res/templates/fields/arc-address/`.

2. Configuration Files:

• `App.json` correctly maps the `arc-address` field to my custom view.
• `client.json` includes the path to `arc-address.js` in both `scriptList` and `developerModeScriptList`.
• `arc-address.json` properly defines the additional subfields.

3. Cache Cleared and Rebuilt:

• Ran php command.php clear-cache and php command.php rebuild after making changes.

Error Details:

loader.js: GET http://espocrm/client/lib/transpiled/src/views/fields/arc-address.js?r=1734152910 404 (Not Found)

Thank you!

[Kharg]

arc-address.js` is correctly placed in `client/custom/modules/MyPlugin/lib/js/views/fields/arc-address.js`.

that’s not correctly placed.

the right directory should be

`client/custom/modules/MyPlugin/src/views/fields/arc-address.js`.

P.S: it would be better to rename the directory to my-plugin

[fberbert]

that’s not correctly placed.

the right directory should be

`client/custom/modules/MyPlugin/src/views/fields/arc-address.js`.

P.S: it would be better to rename the directory to my-plugin

Unfortunately, it didn't work, I'm still facing the same error.

[rabii]

from the tree you shared it looks like you have all js and views located under Lib directory. i am wrong or that is the case. the error simply can't find the view. Espocrm will try to find src/views under your extension. the lib should have only any third party js package you want to load to use later in your views. place all your views under my-plugin > src > views.

[fberbert]

Kharg rabii I did it! I changed the directory structure to:

my-plugin/files:

- application/Espo/Modules/my-plugin (application instead of custom)
- client/modules/my-plugin (no client/custom/modules)

And the view inside the src directory instead of lib/js.

Thanks for the advices!