Including JavaScript lib´s

Discussion about eFront modules. You may suggest new modules here or post issues with current ones. This forum also offers suggestions and best practices for module developers.

Including JavaScript lib´s

Postby Smartworker » Mon Oct 12, 2015 11:51 am

Hello everyone,

I hope someone can answer my question :)
I´m using eFront pro and I want to create a Plugin. Can someone explane me how to include a JavaScript libary? Do I have to do this in the template files of eFront itself or within my plugin?

Best regards

Smartworker
Smartworker
 
Posts: 7
Joined: Mon Oct 05, 2015 7:55 am

Re: Including JavaScript lib´s

Postby periklis » Mon Oct 12, 2015 12:52 pm

Hello,
you don't have to tweak any core files. Simply override an existing template file, for example closing.tpl, and include your file, for example:
Code: Select all
{include file = "file:[base]layout/closing.tpl"}
<script src = "http://example.com/example.js"></script>

See http://docs.efrontlearning.com/how_to_c ... _templates
Periklis Venakis
eFront- eLearning and Skill Development Solution for Companies and Educational Institutes
Consider our wide range of added-value services to get things running smoothly on your eLearning environment
periklis
 
Posts: 4371
Joined: Thu Oct 04, 2007 10:54 am

Re: Including JavaScript lib´s

Postby Smartworker » Mon Oct 12, 2015 2:52 pm

Hey,

first of all thank you very much for your answer.

I don´t know why, but I´m not able to get this working. Does anyone have a small example code on how to override
a template file. I´m not very experienced on working with such a big system like eFront or even with templates. I just need a "Hello World" example to get started ;)

The Plugin itself doesn´t made any problems so far and I got many things done, but after spending the last 3 hours for simply overriding a template file, I´m a bit frustrated and I´m not sure what I´m doing wrong.

I hope someone is gracious enough to help me with a few lines of code or a more detailed explanation!

Best regards

Smartworker
Smartworker
 
Posts: 7
Joined: Mon Oct 05, 2015 7:55 am

Re: Including JavaScript lib´s

Postby periklis » Mon Oct 12, 2015 3:03 pm

Hello,
do you have the "DemoPlugin" available on your system? It includes an example of overriding a template file like that.
Periklis Venakis
eFront- eLearning and Skill Development Solution for Companies and Educational Institutes
Consider our wide range of added-value services to get things running smoothly on your eLearning environment
periklis
 
Posts: 4371
Joined: Thu Oct 04, 2007 10:54 am

Re: Including JavaScript lib´s

Postby Smartworker » Tue Oct 13, 2015 6:24 am

Hey,

awesome that´s helps me a lot. I looked through the "AcmeReportsPlugin" code, but forgot the demo one.
Again, thank you very much for your advice!!!

Best regards

Smartworker
Smartworker
 
Posts: 7
Joined: Mon Oct 05, 2015 7:55 am

Re: Including JavaScript lib´s

Postby Smartworker » Tue Oct 13, 2015 10:05 am

Hey again ;)

so far I was able to override the closing.tpl file.
Code: Select all
{include file = "file:[base]layout/closing.tpl"}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>

<style>
    #map{
        height: 300px;
        background-color: aqua;
    }
</style>

I was able to access the map-div with css, therefore i guess the override was successful.
But now, I don´t find out where to init the map. I wrote an init function that is 100% working in a normal web project. But the main problem is that I don´t get any JavaScript error output :(

Code: Select all
 var map = new L.Map ("map");
      var attrib="Map data copyright OpenStreetMap contributors, Open Database Licence";

      var layerOSM = new L.TileLayer
      ("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              { attribution: attrib } );

      map.addLayer(layerOSM);
      var pos = new L.LatLng(51.045925,7.019220);
      map.setView(pos, 14);

I also tried to override the head.tpl, because I thought this would be init function, but it isn´t working( The init, the override was successful).

Could you please also help me with that problem. Should be the last one (I hope :D)

Beste regards and many thanks

Smartworker
Smartworker
 
Posts: 7
Joined: Mon Oct 05, 2015 7:55 am

Re: Including JavaScript lib´s

Postby periklis » Tue Oct 13, 2015 10:20 am

Check the your code is running, for example append a "console.log('here')" line before and after the new L.Map() declaration. if reaches this point, but you don't get a js error, try enclosing your whole code into try/catch blocks:
Code: Select all
try {
      var map = new L.Map ("map");
      var attrib="Map data copyright OpenStreetMap contributors, Open Database Licence";

      var layerOSM = new L.TileLayer
      ("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              { attribution: attrib } );

      map.addLayer(layerOSM);
      var pos = new L.LatLng(51.045925,7.019220);
      map.setView(pos, 14);
} catch (e) {
    alert('an error occurred');
    console.log(e);
}
Periklis Venakis
eFront- eLearning and Skill Development Solution for Companies and Educational Institutes
Consider our wide range of added-value services to get things running smoothly on your eLearning environment
periklis
 
Posts: 4371
Joined: Thu Oct 04, 2007 10:54 am

Re: Including JavaScript lib´s

Postby Smartworker » Tue Oct 13, 2015 11:25 am

Okay, the idea with the "console.log" was good, except the fact that if an Error occurs the entire eFront installation stops working, without any output in console :(

However, after adding each line step by step the following code line could be identified as the issues.

Code: Select all
var layerOSM = new L.TileLayer
            ("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    { attribution: attrib } );

 map.addLayer(layerOSM);

I have no clue why this isn´t working within the plugin. The same code is working inside a seperated web project which lives in the /www of my eFront installation. Tried the URL with http & https, this isn´t the issues. Any idea?
Smartworker
 
Posts: 7
Joined: Mon Oct 05, 2015 7:55 am

Re: Including JavaScript lib´s

Postby periklis » Tue Oct 13, 2015 11:29 am

it's probably because of the { } characters and the way our template engine (smarty) handles these.
Either leave spaces after each opening bracket, for example { z}/{ x}/{ y} or enclose all your code into {literal} tags:
Code: Select all
{literal}
var layer ...
//your js code here
{/literal}
Periklis Venakis
eFront- eLearning and Skill Development Solution for Companies and Educational Institutes
Consider our wide range of added-value services to get things running smoothly on your eLearning environment
periklis
 
Posts: 4371
Joined: Thu Oct 04, 2007 10:54 am

Re: Including JavaScript lib´s

Postby Smartworker » Tue Oct 13, 2015 11:37 am

You are a Hero my friend :D

I´ve just inserted the spaces after each opening bracket and it works!!!

Thank you very very much for the good support!

Best regards

Smartworker
Smartworker
 
Posts: 7
Joined: Mon Oct 05, 2015 7:55 am


Return to Modules

Who is online

Users browsing this forum: No registered users and 3 guests

cron