Hitachi Vantara Pentaho Community Forums
Results 1 to 8 of 8

Thread: RequireJS plugin help needed

  1. #1

    Default RequireJS plugin help needed

    Hi,

    I am really struggling to convert my non require CDE dashboards to require ones. Mainly with third party plugins.

    Say I have some minified code in this format, which i am loading from file system rather than in-line in CDE:

    Code:
    function _init(){"use strict";$.AdminPage.layout={activate:function(){var a=this;a.fix............})})}}(jQuery);
    Then do i just need to wrap this in the following?

    Code:
    require(['cdf/lib/jquery'], function($) { .... }
    I keep getting jquery conflicts and imagine it is the way they use jQuery in the plugin and CDE uses $ ?? But I cannot work out how to resolve it at all.

    Also if this code uses another plugin within its code, am I correct that I need to reference the other plugin in the array to begin with? Here i struggle with the correct naming to use once i specify the path in the array. E.g. if i do:

    Code:
    require(['cdf/lib/jquery', 'public/dashboard/plugins/slimScroll.min.js'], function($,slimScroll) { // rest of my code // }
    It doesnt seem to work.

    Could anybody confirm the first part for me and shine a light on where I am going wrong with the second part.

    Thanks in advance.

  2. #2
    Join Date
    Sep 2015
    Posts
    12

    Default

    Hey Blake,

    If the third party jquery plugin (lets call it AdminPage.js) isn't an AMD module you need to either:
    • wrap it before you tap it, you can change the var name to jQuery:

    Code:
    require(['cdf/lib/jquery'], function(jQuery) { /* JS plugin code goes here */ })
    • you can add a RequireJS shim configuration during runtime (as of BI Server version 6.1, in previous versions RequireJS has a bug when you add more configurations after RequireJS initialises) so RequireJS wraps your code for you, you can even add more plugins as dependencies.

    Note: in the first approach I named the var jQuery instead of $, you can name it whatever you want, it will use that name only inside the scope of that callback function. But, while using jquery in the dashboard context you will have to use $ (its what the var name is by default in CDE).

    If that code uses another jquery plugin (slimScroll.min.js) you can simply upload it to the repository folder /public/dashboard/plugins and use the module id cde/resources/public/dashboard/plugins/slimScroll.min (here we are using the cde/resources prefix that uses the /pentaho/plugin/pentaho-cdf-dd/api/resources/ endpoint to access the repository) which will point to the repository path /public/dashboard/plugins/slimScroll.min.js. e.g.:
    Code:
    require(['cdf/lib/jquery', 'cde/resources/public/dashboard/plugins/slimScroll.min'], function(jQuery) { /* code here */ })

    Note: since slimScroll is a jQuery plugin you don't need to add a var slimScroll in the callback function for it, it will get automatically loaded into jQuery. In the case that the plugin returns the jQuery object you can do:
    Code:
    require(['cde/resources/public/dashboard/plugins/slimScroll.min'], function(jQuery) { /* code here */ })
    jquery will be loaded by the plugin, the plugin will append more stuff to it and then the plugin returns the updated jquery object.

    I attached a sample dashboard. dashboard.zip

    Naming the CDE JavaScript external resource will use that name as the var name of the AMD module returned object/function inside your dashboard. So, if you need to access any AdminPage.js returned value you can name the JS resource AdminPage and have that var accessible in the context of the dashboard. In this case, since we are just tackling jquery plugins I didn't need to use a name for the JS external resource, everything will be contained inside the jquery object.


    Don't forget to read the available docs, such as CDF and CDE in redmine.
    Hope this was helpful.


  3. #3

    Default

    Some excellent help there. Helped me solve the issue and get it up and running. Thank you so much.

    Though I think that I have still done it in a rather ugly fashion and I need to take another look at it when I have a spare moment. But it works! So that is good for now.

    I had read the docs but where I was getting confused is whether i should be modifying the default require config files on the server and adding my shims and plugins there or if i do this within the CDE dashboard itself and it will add this to the default config, or do i load files from the repository and so on.

    It seems there are many approaches and I wanted to know the best practice approach and that is exactly what I would follow.

    I was saving plugins and css/js files to folders on the server to begin with and loading them through Kettle with a config xml file. Have no idea if this is better or worse than placing them into the repository in the public folder..

    Thanks again for your help!

  4. #4
    Join Date
    Sep 2015
    Posts
    12

    Default

    Yes, there are several ways of doing it.

    I think adopting the one that will be easier to maintain is better, so I would avoid editing the default RequireJS configuration files so you don't need to keep track of (or even lose) your custom configurations whenever you update the CTools version.

    I updated the CDE RequireJS redmine documentation with the feedback in the previous post. Sometimes it's hard to notice missing information that is trivial for CTools developers. You could have added an external resource in the repository to a CDE RequireJS dashboard and see how the CDE renderer would write the module id for it.

    Please, keep asking questions so we can keep improving the documentation.
    Thanks.

  5. #5

    Default

    Hi again!

    I don't think I ever did solve this one properly and tried to revisit it with all the above explanations I have concluded that slimscroll is not an AMD module so I need to add a shim for it and then require it. I have uploaded slimscroll.min to my repository and have no problems with accessing the file. I just keep getting the "Cannot read property 'fn' of undefined" error and it is killing me slowly . For now I am adding a code snippet into my dashboard as follows:

    Code:
    /* ===================================== requireJS config ========================================= */
    /*
     * Configure RequireJS amd! loader plugin to load slimscroll
     *
     */
    
    
    var requireConfig = requireCfg.config || {};
    if(!requireConfig['amd']) { requireConfig['amd'] = {}; }
    if(!requireConfig['amd']['shim']) { requireConfig['amd']['shim'] = {}; }
    
    
    /*
     * configure amd! loader plugin for loading slimscroll using CDF's jQuery lib
     */
    requireConfig['amd']['shim']["cde/resources/home/Dashboard/../Dashboard/js/slimscroll.min"] = {
      exports: "jQuery",
      deps: {
        "cdf/lib/jquery": "jQuery",
      },
      // don't allow it to register as a named AMD module
      prescript: "define = function(arr, setup) { setup(jQuery) };"
    };
    
    
    
    
    requirejs.config(requireCfg);
    
    
    /* =================================== ^^ requireJS config ^^ ====================================== */
    
    
    require([
      'cde/resources/home/Dashboard/../Dashboard/js/slimscroll.min'
    ], function(jQuery) {
        jQuery("#fields-panel").slimScroll();
    });

    Could you please let me know what I have done wrong? Sorry for my terrible RequireJS knowledge here

    If it helps, the particular slimscroll lib i use is here: https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js

    Last edited by Blake11235; 02-01-2017 at 07:57 AM.

  6. #6
    Join Date
    Apr 2007
    Posts
    2,004

    Default

    I'm having exactly the same problem with jeditable.

    The description above implies the shim simply needs to be:

    define(['cdf/lib/jquery', 'cde/resources/public/dashboard/plugins/jquery.jeditable'], function($) {


    });

    The problem is this error:

    Uncaught TypeError: Cannot read property 'fn' of undefined

    I also tried the bigger block of code - no joy - Same as before.

    This seems to be because jQuery is not defined or loaded.
    However; Isn't that what require is supposed to do for us?

    The one point I don't get, is how it maps between $ and jQuery var names?

  7. #7
    Join Date
    Apr 2007
    Posts
    2,004

    Default

    Actually, scratch that, i think i've got it. Blog post coming shortly!

  8. #8
    Join Date
    Apr 2007
    Posts
    2,004

    Default

    here we go. The info above had 99% of the information, was just missing the final detail:

    https://dankeeley.wordpress.com/2018...d-pentaho-cde/

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2017 Pentaho Corporation. All Rights Reserved.