simple way to run javascript after page load

[jensolsson.se]

I wanted to show all kanban cards that was not updated for a while in another color. So I wrote this script which works great, marking all cards not updated for 30 days in red:

$("div[data-name=Qualification] .ui-sortable-handle, div[data-name=Proposal] .ui-sortable-handle, div[data-name=Negotiation] .ui-sortable-handle").each(function() {
    modifiedAt = $("div[data-name=modifiedAt]", this).text();
    date = new Date(modifiedAt);
    now = new Date();

if (date.getMonth() <= now.getMonth())
    date.setFullYear(now.getFullYear());
else
    date.setFullYear(now.getFullYear()-1);
age = (now.getTime() - date.getTime()) / 60 / 60 / 24 / 1000;

if (age > 30)
$(".panel-body", this).css('background-color', '#660000');
})

Now I run it via the inspector but would love to add it permanently for all users.


I put it in a file here: /var/www/html/client/custom/js/markoldcards.js

Then I added

"markoldcards": {
"path": "client/custom/js/markoldcards.js",
"exportsTo": "window",
"exportsAs": "markoldcards"
}

to /var/www/html/application/Espo/Resources/metadata/app/jsLibs.json

But nothing seem to happen.

Is there a guide somewhere on how to add custom javascript?

I found this, but I dont really understand it:

https://forum.espocrm.com/forum/deve...tom-javascript

Merry Christmas

Kind regards

Jens

[jensolsson.se]

Just found this, asking almost the same thing, but no answer so far

https://forum.espocrm.com/forum/developer-help/44360-simple-extension

[jensolsson.se]

Read up on this a bit and I am now tryng to add a customization.

So I added this file:
/var/www/html/client/custom/src/views/record/custom-kanban-item.js

define('custom:views/record/kanban-item', 'view', function (Dep) {
    return Dep.extend({
        template: 'custom:record/custom-kanban-item',
        data: function () {
            return {
                layoutDataList: this.layoutDataList,
                rowActionsDisabled: this.rowActionsDisabled
            };
        },
        events: {

        },
        setup: function () {
            Dep.prototype.setup.call(this);
        }
    });
});​

I also added a copy of the template here so I could customize it:
/var/www/html/client/custom/res/templates/custom-kanban-item.tpl

<div class="panel panel-default">
    <div class="panel-body">
        {{#each layoutDataList}}
        <div>
            {{#if isFirst}}
            {{#unless rowActionsDisabled}}
            <div class="pull-right item-menu-container">{{{../itemMenu}}}</div>
            {{/unless}}
            {{/if}}
            <div class="form-group">
                <div
                    class="field{{#if isAlignRight}} field-right-align{{/if}}{{#if isLarge}} field-large{{/if}}"
                    data-name="{{name}}"
                >{{{var key ../this}}}</div>
            </div>
        </div>
        {{/each}}
    </div>
</div>
​

I also read that I need to add a clientDefs json file. But I have no idea on where to do this. It seem like kanban-item is included from kanban and I only want to customize the items, not the entire view. What would be the next steps to make EspoCRM use these files for the kanban items instead of the defailts?

[jensolsson.se]

Now added a new def file
/var/www/html/custom/Espo/Custom/Resources/metadata/clientDefs/Opportunity.json

Inside it I put the following content:

{
   "recordViews":{
      "kanban": "custom:views/opportunity/record/custom-kanban"
   }
}
​

Idea is to load a custom kanban view so I can set a custom kanban-item view

I also created a new file
/var/www/html/client/custom/src/views/opportunity/record/custom-kanban.js

With the following content.

define('custom:views/record/custom-kanban', ['views/record/list'], function (Dep) {
    return Dep.extend(/** @lends module:views/record/kanban.Class# */{
        itemViewName: 'custom:views/record/custom-kanban-item',
        minColumnWidthPx: 320
    });
});
​

Idea is to return another itemViewName so that it would load the files I wrote in the first post. I also changed the minColumnWidthPx, mostly just to get some kind of reaction.

But now when I got to Opportunities it just shows a yellow "Loading" at the top, and nothing happens.

[telecastg]

Hello,

Perhaps a little explanation of scripts structure will help:

Espo defines which views (Backbone.js "views") handle each screen section of an entity display, using json files (metadata) client definition files.

In the case of Opportunity the metadata file that describes which classes will render which screen section is:
application/Espo/Modules/Crm/Resources/metadata/clientDefs/Opportunity.json

...
   "recordViews":{
      "edit":"crm:views/opportunity/record/edit",
      "editSmall":"crm:views/opportunity/record/edit-small",
      "list":"crm:views/opportunity/record/list",
     "kanban": "crm:views/opportunity/record/kanban"
   },​

As seen above, the kanban section that contains the records data is displayed by:
client/modules/crm/src/views/opportunity/record/kanban.js

Espo.define('crm:views/opportunity/record/kanban', 'views/record/kanban', function (Dep) {

    return Dep.extend({
...

    });
});

The class above is extended (inherits all properties and methods) from :
client/src/views/record/kanban.js

define('views/record/kanban', ['views/record/list'], function (Dep) {

    return Dep.extend({
...
        itemViewName: 'views/record/kanban-item',​

    });
});

And that "parent" class (client/src/views/kanban.js) specifies that the class used to display a kanban data card (item) is:
client/src/views/record/kanban-item.js

define('views/record/kanban-item', 'view', function (Dep) {

    return Dep.extend({
...
        template: 'record/kanban-item',
​
    });
});

Which specifies that the template used to display the kanban data cards is: client/res/templates/record/kanban-item.tpl

[jensolsson.se]

Thanks for the response telecastg, appreciated!

Reading it thru I get a feeling that I did understand it quite well. Regarding Opportunity.json I put a custom one in /var/www/html/custom/Espo/Custom/Resources/metadata/clientDefs/Opportunity.json that I would hope will override the one in application/Espo/Modules/Crm/Resources/metadata/clientDefs/Opportunity.json. Is that correct asumption?
And in my file I only include the "kanban": "custom:views/opportunity/record/custom-kanban" which I would hope would load my custom kanban record view

Which I defined in /var/www/html/client/custom/src/views/opportunity/record/custom-kanban.js (should override client/src/views/record/kanban.js
Only change I want is itemViewName: 'custom:views/record/custom-kanban-item', so I can have a custom kanban item view.

In my post before my last post above I wrote about /var/www/html/client/custom/src/views/record/custom-kanban-item.js which I would hope could extend client/src/views/record/kanban-item.js
I also made a custom template /var/www/html/client/custom/res/templates/custom-kanban-item.tpl and my intention was for it to override client/res/templates/record/kanban-item.tpl.

Was there something I did wrong here? Any idea why it does not work?

[telecastg]

I think that the problem is that you are not extending the custom view classes from the classes that you are trying to override, thus you are losing their functionality.

For example:

define('custom:views/record/custom-kanban', ['views/record/list'], function (Dep) {
return Dep.extend(/** @lends module:views/record/kanban.Class# */{
itemViewName: 'custom:views/record/custom-kanban-item',
minColumnWidthPx: 320
});
});

should read:

define('custom:views/record/custom-kanban', ['views/record/kanban'], function (Dep) {
return Dep.extend(/** @lends module:views/record/kanban.Class# */{
itemViewName: 'custom:views/record/custom-kanban-item',
minColumnWidthPx: 320
});
});