Client controller & routing¶
Custom controller¶
Define a custom controller for the needed entity type (Account in our example).
Create a file custom/Espo/Custom/Resources/metadata/clientDefs/Account.json
:
{
"controller": "custom:controllers/account"
}
Create a file client/custom/src/controllers/account.js
:
define('custom:controllers/account', ['controllers/record'], function (Dep) {
return Dep.extend({
actionHello: function (options) {
console.log('action: hello');
console.log(options);
},
actionTest: function (options) {
if (!options.id) {
throw new Espo.Exceptions.NotFound();
}
console.log('action: test');
console.log(options);
},
});
});
Clear cache.
If you open in the browser URL your-espo-url#Account/hello
it will execute actionHello method.
#Account/hello
– options variable value is an empty object
#Account/hello/p1=one&p2=two
– options variable value is an object {p1: 'one', p2: 'two'}
Custom route¶
Create a file custom/Espo/Custom/Resources/metadata/app/clientRoutes.json
:
{
"Account/test/:id": {
"params": {
"controller": "Account",
"action": "test"
},
"order": 1
}
}
Clear cache.
If you open in the browser URL your-espo-url#Account/test/myId
it will execute actionTest method. Argument options will be the object {id: 'myId'}
Rendering view¶
In controller:
actionTest: function (options) {
if (!options.id) {
throw new Espo.Exceptions.NotFound();
}
let id = options.id;
// we need to define view in client/custom/src/views/account/test.js
let viewName = 'custom:views/account/test';
// this will render view in the main container element #main
// id will be passed to the view
this.main(viewName, {
id: id,
});
},
Create a view client/custom/src/views/account/test.js
:
define('custom:views/account/test', ['view'], function (Dep) {
return Dep.extend({
templateContent: 'Id: {{id}}, name: {{name}}',
data: function () {
return {
id: this.options.id,
name: this.model.get('name'),
}
},
setup: function () {
this.wait(
this.getModelFactory()
.create('Account')
.then(model => {
this.model = model;
model.id = this.options.id;
return model.fetch();
})
);
},
});
});