Announcement

Collapse
No announcement yet.

Adding Custom JavaScript

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adding Custom JavaScript

    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

  • #2
    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

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

        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.
    Last edited by yurikuzn; 10-24-2014, 02:37 PM.

    Comment


    • #3
      The JS define part was missing, thanks.

      Comment


      • #4
        Originally posted by yurikuzn View Post

        Then in javascript class

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

        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.

        Comment


        • #5
          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

          Comment


          • #6
            Originally posted by yurikuzn View Post
            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
            Code:
            $('#address').suggestions{
            serviceUrl:"www.example.com";
            }
            it making request GET server-name/api/v1/www.example.com.
            Why??????????

            Comment


            • #7
              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???

              Comment


              • #8
                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.

                Comment


                • #9
                  Originally posted by yurikuzn View Post
                  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?

                  Comment


                  • #10
                    client/src/views/fields/address.js


                    A straightforward way.
                    method:
                    PHP Code:
                    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.
                    Last edited by yurikuzn; 06-27-2016, 12:07 PM.

                    Comment


                    • #11
                      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!

                      Comment

                      Working...
                      X