How to Make Lead Convert Button Dynamic Based on Status?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Juantreses
    Junior Member
    • Aug 2025
    • 6

    #1

    How to Make Lead Convert Button Dynamic Based on Status?

    Goal: Show the Lead convert button only when the lead status is a certain status

    What I've Tried:
    I want to control when the convert button appears on Lead detail pages. Specifically, I only want it visible when the lead status is 'converted' (which in my flow means the lead attended a meeting where they where converted and conversion still has to be done in Espo)

    I created a custom Lead detail view at client/custom/src/views/lead/detail.js:

    Code:
    define('custom:views/lead/detail', ['views/detail'], function (Dep) {
        return Dep.extend({
            setup: function () {
                Dep.prototype.setup.call(this);
                this.controlConvertButton();
                
                this.listenTo(this.model, 'change:status', () => {
                    this.controlConvertButton();
                });
            },
            
            controlConvertButton: function () {
                const shouldShowConvert = this.shouldShowConvertButton();
                
                if (shouldShowConvert) {
                    this.showHeaderActionItem('convert');
                } else {
                    this.hideHeaderActionItem('convert');
                }
            },
            
            shouldShowConvertButton: function () {
                const status = this.model.get('status');
                return status === 'converted';
            },
            
            afterRender: function () {
                Dep.prototype.afterRender.call(this);
                this.controlConvertButton();
            }
        });
    });​
    And updated custom/Espo/Custom/Resources/metadata/clientDefs/Lead.json:​
    Code:
    {
        "views": {
            "detail": "custom:views/lead/detail"
        }
    }​
    ​​ Problem


    The convert button disappears entirely from the DOM when I use the custom view. Without the custom view, the convert button is present and works normally.

    Console logs show the logic is working correctly:
    • Status detection works: "converted"
    • Condition evaluation works: true
    • showHeaderActionItem('convert') is called

    But showHeaderActionItem and hideHeaderActionItem don't seem to exist or work as expected.

    Questions
    1. What's the correct way to dynamically show/hide the convert button?
    2. Should I extend a different base view? I noticed I'm extending views/detail but maybe there's a Lead-specific detail view I should extend instead (like crm:views/lead/detail)?
    3. Is there an isConvertable function or configuration option that controls when leads can be converted? I'd prefer to use the built-in mechanism if one exists.
    4. Why does creating a custom detail view remove the convert button from the DOM entirely?

    Additional Attempts
    I also noticed there might be an isConvertable method in EspoCRM. Has anyone tried overriding this method to control convert button visibility? Something like:
    Code:
    define('custom:views/lead/detail', ['crm:views/lead/detail'], function (Dep) {
        return Dep.extend({
            isConvertable: function () {
                const status = this.model.get('status');
                return status === 'converted';
            }
        });
    });​
    Or is there a backend/metadata approach to define when leads are convertable?

    Any help would be appreciated! I'm particularly interested in the "proper" EspoCRM way to achieve this functionality.

    Additional Context:
    • The convert button works fine without customization
    • User has proper convert permissions
    • Lead conversion is enabled in Entity Manager
    • This is for leads that should only be convertible after reaching a certain status in our workflow

Working...