how to include js scripts in freemarker templates

[hackerkok]

I want to include select2 in a .ftl file. Things I 've tried so far, but don't seem to work:

-add the below lines in the ftl file:

<@markup id="js">
   <@script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
   <@script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/> 
</@>

-add the below lines in the share-config.xml file in the share module amp:

<extension>
 <modules>
    <module>
       <id>pdp</id>
       <version>1.0</version>
       <auto-deploy>true</auto-deploy>
       <configurations>
       <config>
          <forms>
             <dependencies>
             <js src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" />
             </dependencies>
          </forms>
       </config>
       <config evaluator="string-compare" condition="DocLibActions">
       <actions>
         .......

[afaust]

Those directives / configurations are meant primarily to load JavaScript files already bundled with the Alfresco Share application or an addon installed into it. In order to load some externally hosted scripts I believe it may be better to add a customisation to specific form-using pages that include the raw HTML script import tags, not the Alfresco-specific FreeMarker directive equivalents.

(Also, I find the practise of including files from CDNs inappropriate. It might be fine for a dev project or one with a moving target where you always want the "newest" version, but if you have a specific version in mind, there is no harm in simply including that with your addon and be safe in the knowledge it can always be loaded, even if some user may be blocked by downloading these files or if there is some network/CDN outage.)

[hackerkok]

Thank you for your reply!

I get that whatever I include in the share-config.xml and .ftl files must be located somewhere locally. So I downloaded the select2 scripts and put them in the path "src\main\amp\config\alfresco\web-extension\site-webscripts" of the share amp.

Also changed the above to:

<@markup id="js">
<@script src="${url.context}/res/select2/select2.full.min.js"/>
</@>

and

<config>
   <forms>
      <dependencies>
         <js src="/select2/select2.full.min.js" />
      </dependencies>
   </forms>
</config>

But my code still cannot locate the select2 functions. What am I missing?

Thanks for your help!

EDIT:

I found out that the markup part is not needed and the config part shows to tomcat/share/

So I have to put the select2 script in the "src\main\amp\select2" path of the amp.

Now I get an error from the select2.js file that $element.data is not a function, but this is not the right place to ask about it.