HowTo Create custom field in own extension, error after install

[Ilja Schwarz]

Good day,

i want to extend Enum field and show Options as Radio inputs. I've created an extension for it from extension example repository. In this example repository instance it working well, i can add new type to Entity, create and update value, see it in list.

But if i install it as zip file to target espoCrm, i became an error, could you help me?

My extension is:

htdocs/src/
├── files
│   ├── client
│   │   └── custom
│   │       └── modules
│   │           └── ffb-custom-fields
│   │               ├── res
│   │               │   └── templates
│   │               │       └── fields
│   │               │           └── radio-enum
│   │               │               ├── detail.tpl
│   │               │               └── edit.tpl
│   │               └── src
│   │                   └── views
│   │                       └── fields
│   │                           └── radio-enum.js
│   └── custom
│       └── Espo
│           └── Modules
│               └── FfbCustomFields
│                   └── Resources
│                       ├── i18n
│                       │   ├── de_DE
│                       │   │   ├── Admin.json
│                       │   │   └── FieldManager.json
│                       │   └── en_US
│                       │       ├── Admin.json
│                       │       └── FieldManager.json
│                       ├── metadata
│                       │   ├── app
│                       │   │   └── client.json
│                       │   ├── clientDefs
│                       │   │   └── FfbCustomFields.json
│                       │   └── fields
│                       │       └── radioEnum.json
│                       ├── module.json
│                       └── routes.json
└── scripts
    ├── AfterInstall.php
    └── AfterUninstall.php 

extension.json

{
    "module": "FfbCustomFields",
    "name": "Ffb Custom fields",
    "description": "Custom fields for espoCRM.",
    "author": "4fb GmbH",
    "bundled": true,
    "acceptableVersions": [
        ">=9.1.0"
    ],
    "php": [
        ">=8.2"
    ],
    "scripts": []
} 

module.json

{
    "order": 50,
    "bundled": true,
    "jsTranspiled": true
} 

radioEnum.json is a copy of Enum.json with my "view"

{
    "view": "FfbCustomFields:fields/radio-enum",​
.... 

FfbCustomFields.json

{
    "fields": {
        "radioEnum": "FfbCustomFields:views/fields/radio-enum"
    }
} 

radio-enum.js

define(['views/fields/enum'], (EnumFieldView) => {

    return class extends EnumFieldView {
        detailTemplate = 'ffb-custom-fields:fields/radio-enum/detail'
        editTemplate = 'ffb-custom-fields:fields/radio-enum/edit'
        // disable selectize library
        nativeSelect = true

        /**
         * Fetch field values from DOM.
         *
         * @return {Object.<string, *>}
         */
        fetch() {
            if (!this.$element.length) {
                return {};
            }

            const data = {};
            const value = document.querySelector(`[name="${this.name}Radio"]:checked`)?.value.trim();

            if (typeof value !== 'undefined') {
                data[this.name] = value;
            }

            return data;
        }
    }
}); 

edit.tpl

<div style="display: flex; flex-direction: column; gap: 0.2em;">
    {{#each translatedOptions}}
    <label>
        <input
            type="radio"
            data-name="{{../name}}"
            name="{{../name}}Radio"
            value="{{@key}}"
            class="form-control form-radio"
            style="min-height: auto;"
            {{#ifEqual ../value @key}}checked{{/ifEqual}}
        />
        {{this}}
    </label>
    {{/each}}
</div>
​ 

After install to target Espo, i can create and add new field to entity, but if i try to get create/udpate form of entity, i became an error in console:

Could not obtain module 'modules/ffb-custom-fields/views/fields/radio-enum' from bundle 'module-ffb-custom-fields'. loader.js:717:37

Uncaught (in promise) Error: Could not obtain module 'modules/ffb-custom-fields/views/fields/radio-enum' from bundle 'module-ffb-custom-fields'.      _load loader.js:719      
promise callback*_load loader.js:712      
require loader.js:437      
require loader.js:1140      
viewLoader espo-main.js:49828
etc... 

[Ilja Schwarz]

[RESOLVED]

I have found, that create extension zip script from template, create no src dir in client/custom/modules..., but compiled js in one file in lib dir.

First i have added manual an src dir in zip and installation was successfull. After that i have verified my code and found, i have no defined 'ffb-custom-fields:views/fields/radio-enum' in define, and not set an type to new one "radio-enum".

define('ffb-custom-fields:views/fields/radio-enum', ['views/fields/enum'], (EnumFieldView) => {

    return class extends EnumFieldView {

        // Templates for all view modes.
        type='radio-enum'
        detailTemplate = 'ffb-custom-fields:fields/radio-enum/detail'
        editTemplate = 'ffb-custom-fields:fields/radio-enum/edit'
        // disable selectize library
        nativeSelect = true

... 

After this changes, new zip has successfully installed.

Some other changes:
- File clientDefs/FfbCustomFields.json is no need for this and was removed.
- Extension "namespaces" should be not "FfbCustomFields", but "ffb-custom-fields"