Help for Custom view

[zkuun8]

Hello,
I try to build my first Custom View, and I meet some issues.
I use the extension Project Management and would like to add a custom view to entity Project.

I made 4 files :
- custom/Espo/Custom/Resources/metadata/clientDefs/Project.json
- client/custom/src/views/project/list-with-hello.js
- custom/Espo/Custom/Resources/metadata/app/routes.json
- client/custom/src/controllers/project/list-with-hello.js

The method I try to use is:
- define a view in clientDefs
- make a route for this view
- make a button to access to this view

At the moment, the button give me link that return 404.
I'm not sure to understand exactly is the issue, but I think the view is not reconized as it should.
Any advice would be much appreciated !



custom/Espo/Custom/Resources/metadata/clientDefs/Project.json :

{
   "kanbanViewMode": true,
   "color": null,
   "iconClass": "fas fa-list-alt",
   "relationshipPanels": {
      "typeProjets": {
         "layout": null,
         "selectPrimaryFilterName": null
      }
   },
   "views": {
      "listWithHello": "custom:views/project/list-with-hello"
   },
   "menu": {
      "list": {
         "buttons": [
            {
               "label": "Vue ListWithHello",
               "link": "#Project/list-with-hello",
               "acl": "read"
            }
          ]
      }
  }

}

client/custom/src/views/project/list-with-hello.js:

define('custom:views/project/list-with-hello', ['view'], (View) => {
   return class extends View {
      template() {
         return `
            <div>
               <div style="width: 50%; float: left; border-right: 1px solid #ccc;">
                  <h3>Liste des projets</h3>
                </div>
               <div style="width: 50%; float: left;">
                  <h1>Hello</h1>
               </div>
           </div>
          `;
         }
      };
   });

custom/Espo/Custom/Resources/metadata/app/routes.json:

{
   "listWithHello": {
      "path": "#Project/list-with-hello",
      "controller": "controllers/project/list-with-hello"
      }
}

client/custom/src/controllers/project/list-with-hello.js

define('custom:controllers/project/list-with-hello', ['controller'], (Controller) => {
   return class extends Controller {
      run() {
         this.main('custom:views/project/list-with-hello');
      }
   };
});
​

[rabii]

This is not correct

"views": {
"listWithHello": "custom:views/project/list-with-hello"
} 

It should be

"views": {
"list": "custom:views/project/list-with-hello"
}​ 

see documentation here https://docs.espocrm.com/development/custom-views/

[yuri]

Hi,

I noticed a mistake. Should be clientRoutes.json rather than routes.json.

https://docs.espocrm.com/development/frontend/controller/#custom-route

Another issue. In the view, instead of the method template(), you need to use templateContent property. https://docs.espocrm.com/development/view/#render

Note that the metadata reference can be helpful https://docs.espocrm.com/development/metadata/. As well as very helpful metadata schema in IDE.

[yuri]

I also recommend to develop an extension rather than using the custom directory. It will allow to use ES6 javascript modules which are much more convenient and have IDE support (autocompletion in PHPStorm works well). https://github.com/espocrm/ext-template

It may be bit harder to get started, but is much better in the long run.

[yuri]

{
   "Project/list-with-hello": {
       "params": {
           "controller": "custom:controllers/project/list-with-hello",
           "action": "run"
       }
   }
}

Then, the controller method should be named "actionRun".

[zkuun8]

Thanks guys, it helps a lot !