[Loris-dev] incorporating javascript into php instrument forms

Tue May 15 14:56:11 EDT 2018

Hi Garry,

Thanks for reaching out! Firstly, we *strongly recommend* you update your
LORIS instance to the newest release version for security purposes and to
gain access to our new features. The steps outlined below *may not work on
older versions*, but it's worth a shot.

For adding CSS and JS to your instruments, because name-spacing and other
relevant features have changed so much since v14, I think we should try to
keep this as simple as possible until you upgrade LORIS:

    1. Start by placing your CSS and JS files in `Loris/htdocs/css/` and
`Loris/htdocs/js/` respectively.
    2. Edit `Loris/php/libraries/NDB_Page.class.inc` as follows:
        In the `getCSSDependencies()` function, add `$baseurl .
'/css/css.css',` in the `$files` array.
        In the `getJSDependencies()` function, add `$baseurl .
'/js/js.js',` in the `$files` array.

This should do the trick, but it is *not* a permanent solution. The code
you add to `NDB_Page.class.inc` will be overwritten whenever you upgrade
LORIS. By extending the class in a separate file you can ensure your
overrides are safe between versions (same goes for the Instrument class).
Once you upgrade, the steps outlined by David in your previous email thread
will be relevant again and we can troubleshoot more accurately.

Each version, along with steps for upgrading, are available here
<https://github.com/aces/Loris/releases>. Note that you will have to follow
the steps for each version in between 14.12.1 and 19.1, including applying
each major release patch in chronological order. If you need any assistance
with this, or have questions about the `Notes for existing Projects` in our
release notes, let us know.

There are a few reasons why the previous instructions may not have worked.
If there are any messages in the error logs or JavaScript console, send
those my way and I'll take a look, but it will be easier to troubleshoot a
newer version of LORIS.

Hope this helps,
Zain

On Mon, May 14, 2018 at 12:09 PM, Cardillo, Garry <cardillo at med.umich.edu>
wrote:

> Hello All,
>
>
> Hoping you can help me out a little bit more.  I am trying to get custom
> JS and CSS working on our instrument forms.  We are on 14.12.1.
>
>
> Here is what I have done:
>
>
>
>    1. Copied the getJS and getCSS code from NDB_Page on github to
>    NDB_Page in my system (code I pulled is below)
>    2. Copied NDB_BVL_Instrument.class.inc from /php/libraries to
>    /project/libraries
>    3. Created folders and files for custom js and css:
>       1. /project/instruments/css/css.css
>       2. /project/instruments/js/js.js
>    4. Added getJS and getCSS code into NDB_BVL_Instrument.class.inc and
>    pointed the paths to the locations in #3 (code is below)
>    5. Checked and verified the instrument forms are extending the
>    NDB_BVL_Instrument.class.inc file from /project/libraries
>
>
> Seems like there is one small piece I'm missing somewhere.
>
>
> I found a file at:  /htdocs/bootstrap/css/custom-css.css that has a
> section "CSS for instrument forms" and code that I've added there is being
> referenced by our instruments, which would work fine as a work around, but
> I still want to apply custom javascript as well, AND I want to find out
> where I went wrong in the process I outlined above.
>
> Thanks for any insight you can offer.
>
> -Garry
>
> CODE ADDED TO NDB_PAGE FROM GITHUB:
>
> /**
>
> * Returns an ordered list of javascript dependencies that this page
> depends
>
> * on. These will get loaded into the template in order, so that
>
> * interdependent files can be included in the correct order.
>
> *
>
> * @return array of strings with URLs to retrieve JS resources
>
> */
>
> function getJSDependencies()
>
> {
>
> $factory = NDB_Factory::singleton();
>
> $config = $factory->config();
>
> $www = $config->getSetting('www');
>
> $baseurl = $www['url'];
>
> $min = ($config->getSetting("sandbox") === '1') ? '' : '.min';
>
> // Currently jquery-ui is required for dialogs and datepickers to work.
>
> // In the future release, dialogs should be replaced with bootstrap
> dialogs
>
> // and datepickers only created by modernizr
>
> $files = array(
>
> $baseurl . '/js/jquery/jquery-1.11.0.min.js',
>
> $baseurl . '/js/helpHandler.js',
>
> $baseurl . '/js/modernizr/modernizr.min.js',
>
> // Only load minified file on production, not sandboxes
>
> $baseurl . '/js/polyfills.js',
>
> $baseurl . '/js/react/react-with-addons' . $min . '.js',
>
> $baseurl . '/js/react/react-dom' . $min . '.js',
>
> $baseurl . '/js/jquery/jquery-ui-1.10.4.custom.min.js',
>
> $baseurl . '/js/jquery.dynamictable.js',
>
> $baseurl . '/js/jquery.fileupload.js',
>
> $baseurl . '/bootstrap/js/bootstrap.min.js',
>
> $baseurl . '/js/components/Breadcrumbs.js',
>
> $baseurl . '/vendor/sweetalert/sweetalert' . $min . '.js',
>
> $baseurl . "/js/util/queryString.js",
>
> $baseurl . '/js/components/Form.js',
>
> $baseurl . '/js/components/Markdown.js',
>
> );
>
> return $files;
>
> }
>
>
> /**
>
> * Returns an ordered list of CSS dependencies that this page depends
>
> * on. These will get loaded into the template in order, so that
>
> * interdependent files can be included in the correct order.
>
> *
>
> * @return array of strings with URLs to retrieve CSS resources
>
> */
>
> function getCSSDependencies()
>
> {
>
> $factory = NDB_Factory::singleton();
>
> $config = $factory->config();
>
> $www = $config->getSetting('www');
>
> $baseurl = $www['url'];
>
> $files = array(
>
> $baseurl . "/bootstrap/css/bootstrap.min.css",
>
> $baseurl . "/bootstrap/css/custom-css.css",
>
> $baseurl . "/js/jquery/datepicker/datepicker.css",
>
> $baseurl . '/vendor/sweetalert/sweetalert.css',
>
> );
>
> return $files;
>
> }
>
>
> CODE ADDED TO NDB_BVL_INSTRUMENT.CLASS.INC:
>
>
> function getJSDependencies() {
>
> $factory = \NDB_Factory::singleton();
>
> $baseURL = $factory->settings()->getBaseURL();
>
> $deps = parent::getJSDependencies();
>
> return array_merge(
>
> $deps,
>
> array(
>
> $baseURL . "/project/instruments/js/js.js",
>
> )
>
> );
>
> }
>
>
> function getCSSDependencies()
>
> {
>
> $factory = \NDB_Factory::singleton();
>
> $baseURL = $factory->settings()->getBaseURL();
>
> $deps = parent::getCSSDependencies();
>
> return array_merge(
>
> $deps,
>
> [$baseURL . "/project/instruments/css/css.css"]
>
> );
>
> }
>
> Garry Cardillo
> [image: 1523292633747_image001.png]
>
> Database Analyst/Programmer Intermediate
>
> Department of Radiology
>
> Functional Neuroimaging, Cognitive and Mobility Laboratory
>
> Domino’s Farms  Lobby B Suite 1000
>
> 24 Frank Lloyd Wright Dr  PO BOX 362
>
> Ann Arbor, MI 48106
>
> t: 734-936-0630
>
> f: 734-998-8403
>
> e: cardillo at umich.edu
>
> **********************************************************
> Electronic Mail is not secure, may not be read every day, and should not
> be used for urgent or sensitive issues
>
> _______________________________________________
> Loris-dev mailing list
> Loris-dev at bic.mni.mcgill.ca
> http://www.bic.mni.mcgill.ca/mailman/listinfo/loris-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.bic.mni.mcgill.ca/pipermail/loris-dev/attachments/20180515/69b0f2d9/attachment.html>