In our application, we have an entity class (scope) called Tenancy, and we wanted to add an option under the "Edit" menu in the Tenancy detail view, that will be available only when the Tenancy has a status "Active" and that when clicked will allow the User to instantiate a process called "Collections Tracker"
![Screenshot 2023-06-03 185022.png Click image for larger version
Name: Screenshot 2023-06-03 185022.png
Views: 738
Size: 58.9 KB
ID: 93276](filedata/fetch?id=93276&d=1685843836&type=large)
These are the steps that we took:
Step 1: Create a custom detail view for "Tenancy" to implement the additional option.
client/custom/modules/property-management/src/views/tenancy/record/detail.js
Step 2: Create a custom metadata clientDefs file to let the system know that it must use our custom view to render the Tenancy scope in detail display mode.
application/Espo/Modules/PropertyManagement/Resources/metadata/clientDefs/Tenancy.json
Step 3: Clear Cache and Rebuild
NOTE: The above example refers to files that are under a module namespace (PropertyManagement) but if you don't have your files organized in modules, the file locaitons stated above would be:
client/custom/src/views/tenancy/record/detail.js
custom/Espo/Custom/Resources/metadata/clientDefs/Tenancy.json
These are the steps that we took:
Step 1: Create a custom detail view for "Tenancy" to implement the additional option.
client/custom/modules/property-management/src/views/tenancy/record/detail.js
Code:
define('property-management:views/tenancy/record/detail', 'views/record/detail', function (Dep) { return Dep.extend({ setupActionItems: function() { // invoke the original setupActionItems function from the parent class Dep.prototype.setupActionItems.call(this); // add the new option to the list this.dropdownItemList.push({ name: 'instantiateCollectionsTracker', label: 'Instantiate Collections Tracker' }); // make the option available only for Tenancies that have a status equal to "Active" this.listenToOnce(this.model, 'sync' () => { if(this.model.get('status') !== 'Active' { this.removeButton('instantiateCollectionsTracker'); } } // define the action that will take place when the User clicks on the new option actionInstantiateCollectionsTracker: function () { let options = { tenancyId: this.model.id } this.getRouter().dispatch().('StateMachineExecution', 'create', options); } } }); });
application/Espo/Modules/PropertyManagement/Resources/metadata/clientDefs/Tenancy.json
Code:
{ "recordViews": { "detail": "property-management:views/tenancy/record/detail" } }
NOTE: The above example refers to files that are under a module namespace (PropertyManagement) but if you don't have your files organized in modules, the file locaitons stated above would be:
client/custom/src/views/tenancy/record/detail.js
custom/Espo/Custom/Resources/metadata/clientDefs/Tenancy.json
Comment