How to call libraries such as JQuery and JQuery UI in Liferay 7 / DXP

I want to use JQuery + JQuery UI on Liferay 7 / DXP

From Liferay 7 / DXP, Liferay standard AUI was declared deprecated, and the code on the Liferay main body side is now starting to be written in Metal.js etc., but the library etc. are not yet enriched and the deprecated AUI is still used. I am. If you want to develop your own using Javascript library with custom portlet etc., even if you load the library with a common combination such as JQuery + JQuery UI, loading the library with Liferay's recommended AMD loader works well for global definition I can't handle it and an error occurs, so It's a bit outdated, but if you need to load the library using the script tag, I've created a sample of how to load it using `` `CustomJspBag```.

https://github.com/yasuflatland-lf/js-global-hook

For those who use DXP, after DE30, https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/jquery-npm-portlet Like, JQuery is loaded using npm and it is now available, so please use this method.

The point is

src/main/resources/META-INF/jsps/html/common/themes/top_js-ext.It will be in jspf.


 [As in this article](https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-external-libraries) exposes the library globally.


#### **`top_js-ext.jspf`**
```jspf

<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">	
	
<%-- This part enable to expose JS object to global --%>
<script>
    define._amd = define.amd;
    define.amd = false;
</script>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<%-- This part disable to expose JS object to global --%>
<script>
    define.amd = define._amd;
</script>

Recommended Posts

How to call libraries such as JQuery and JQuery UI in Liferay 7 / DXP
How to create a theme in Liferay 7 / DXP
How to launch Swagger UI and Swagger Editor in Docker
How to call and use API in Java (Spring Boot)
How to use ArgumentMatchers such as Mockito's any () in Kotlin
How to create a service builder portlet in Liferay 7 / DXP
How to call classes and methods
How to introduce jQuery in Rails 6
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
How to try Java preview features (such as Java 15 Record) in IntelliJ
How to use JQuery in js.erb of Rails6
How to call functions in bulk with Java reflection
How to connect MySQL / MariaDB + HikariCP with Liferay 7 / DXP
How to mock a super method call in PowerMock
How to convert A to a and a to A using AND and OR in Java
How to handle TSV files and CSV files in Ruby
How to call AmazonSQSAsync
How to specify character code and line feed code in JAXB
How to prevent conflicts between JBoss modules and application libraries
How to separate words in names in classes, methods, and variables
[Forge] How to register your own Entity and Entity Render in 1.13.2
[Rails] How to define macros in Rspec and standardize processing
How to set character code and line feed code in Eclipse
What happened in "Java 8 to Java 11" and how to build an environment
How to deploy jQuery in your Rails app using Webpacker
How to develop and register a Sota app in Java
Differences in how to handle strings between Java and Perl
How to install PHP 7.4 and SQL Server drivers in CentOS 7.7
How to change BackgroundColor etc. of NavigationBar in Swift UI
[Xcode] How to arrange Xcode and Simulator screens in full screen
How to include PKCE Code_Verifier and Code_Challenge in JMeter requests
How to batch run JUnit and get coverage as well
How to dynamically switch between FIN and RST in Netty
How to POST JSON in Java-Method using OkHttp3 and method using HttpUrlConnection-
How to set and use profile in annotation-based Configuration in Spring framework
How to read a file and treat it as standard input
[jOOQ] How to CASE WHEN in the WHERE / AND / OR clause
How to delete large amounts of data in Rails and concerns
How to install the language used in Ubuntu and how to build the environment
How to get boolean value with jQuery in rails simple form
How to output a list of strings in JSF as comma-separated strings
How to get and add data from Firebase Firestore in Ruby
How to implement UI automated test using image comparison in Selenium
How to call multiple names at once in the same category
How to encrypt and decrypt with RSA public key in Java