Adding Custom JavaScript

[caffeine]

Hi Yuri,

What's the correct way of adding custom JS libraries to the CRM?

I edited jsLibs.json with my custom libraries but I don't know if I have to do something more.

Thanks

[yuri]

Hi

I think it's obvious if you ever encountered AMD.

Metadata app.jsLibs

"Flotr": {
"path": "client/lib/flotr2.min.js",
"exportsTo": "window",
"exportsAs": "Flotr"
}

Then in javascript class

Espo.define('Crm:Views.Dashlets.Abstract.Chart', ['Views.Dashlets.Abstract.Base', 'lib!Flotr'], function (Dep, Flotr) {

    return Dep.extend({

    });

}); 

The second argument of Espo.define function is the list of dependencies.

It will load this js dynamically. exportsTo is where the lib exports its object. window.Flotr or $.summernote.

[caffeine]

The JS define part was missing, thanks.

[Makov]

Then in javascript class

Espo.define('Crm:Views.Dashlets.Abstract.Chart', ['Views.Dashlets.Abstract.Base', 'lib!Flotr'], function (Dep, Flotr) {

return Dep.extend({

});

}); 

In what class? Class of added library? Excuse me, I'm junior developer, but i think that extended documentation on your product will be very helpful for the community.

[yuri]

Crm:Views.Dashlets.Abstract.Chart corresponds to 'client/modules/crm/views/src/dashlets/abtract/chart' file

But this definition style is dated.
Now we use:

crm:views/dashlets/abtract/chart => client/modules/crm/src/views/dashlets/abtract/chart

custom:views/dashlets/abtract/chart => client/custom/srcviews/dashlets/abtract/chart

[Makov]

Crm:Views.Dashlets.Abstract.Chart corresponds to 'client/modules/crm/views/src/dashlets/abtract/chart' file

But this definition style is dated.
Now we use:

crm:views/dashlets/abtract/chart => client/modules/crm/src/views/dashlets/abtract/chart

custom:views/dashlets/abtract/chart => client/custom/srcviews/dashlets/abtract/chart

So, if I do that, it stops making my GET and POST requests with server-name/api/v1 prefix? Or am I doing something wrong? When I trying to do this

$('#address').suggestions{
serviceUrl:"www.example.com";
}

it making request GET server-name/api/v1/www.example.com.
Why??????????

[Makov]

So, if I do that, it stops making my GET and POST requests with server-name/api/v1 prefix? Or am I doing something wrong? When I trying to do this
Code:
$('#address').suggestions{ serviceUrl:"www.example.com"; }
it making request GET server-name/api/v1/www.example.com.
Why??????????

Another thing - i write my js script into the body of edit.tpl of address field.
Problem still here.
Why it making request adding site address with api path as prefix???

[yuri]

Writing code in templates won't work properly. It's SPA, not a simple web page.

You can write javascript only in classes. Which class to use depends on where you need to include your custom library.

[Makov]

Writing code in templates won't work properly. It's SPA, not a simple web page.

You can write javascript only in classes. Which class to use depends on where you need to include your custom library.

Great thanks for helping!
So if I need to include my library and custom js into address field, which class would it be?

[yuri]

client/src/views/fields/address.js


A straightforward way.
method:

setup: function () {
  Dep.prototype.setup.call(this);
  
  this.wait(true);

  // here you load your lib asynchronically

  this.wait(false); // call this asynchronically after your lib loaded
}, 

wait(); is used here to prevent rendering of the view before your lib is loaded.

Disable cache in Administration Settings for developing.

[Makov]

Thank you so much for directing me into the right way, but i did it a little bit my way. Anyway big up and thanks!