import js file to header all jsp in liferay - liferay

I'm going to import a js file to the header of all pages exist in liferay portal.
I know I have to do in Hook.I put import this js into init.jsp in ..\html\common , but was import to all elements of the liferay pages.
I don't know where put this file?

You don't have to do this in a hook. Do it in your theme as the theme is responsible for generating the whole document, including the <html> and <head> sections.
In the theme, override templates/portal_normal.vm. It should be obvious where to put the script reference.
You'll override this file by creating a docroot/_diffs/templates folder and copy docroot/templates/portal_normal.vm to that location. Then edit the file in docroot/_diffs/templates, build and deploy your theme.

Related

How do I dynamically set content in a static html file in Gatsby.js

I want to inject a url (process.env.loginProviderUrl) in a static page for an external authentication provider which I've placed in the static folder which Gatsby automatically copies over to the public folder when building.
<html>
<head>
<meta name="salesforce-community" content="{process.env.loginProviderUrl}" />
<script
src="{process.env.loginProviderUrl}/servlet/servlet.loginwidgetcontroller?type=javascript_widget"
async="true"
defer="true"
></script>
</head>
<body></body>
</html>
But because it's in the static folder, it only gets copied over and the process.env.loginProviderUrl will never get replaced. How do I dynamically generate an html file in Gatsby which then gets copied to the static folder?
If you move your file to a separate folder that isn't processed by Gatsby you can instead set up a separate webpack configuration that will package files from that folder and provide them with ENV vars.
Alternately you could create a postbuild routine that uses simpler shell commands to find and replace instances of process.env.loginProviderUrl with the value from the local environment (e.g. sed).
This said, it may simply be easier to find another way to include this file in your Gatsby app.

What is the bootstrap process of an Angular Application? When app.component.htm loads and display?

I am new to Angular. I am working on a web application using Angular. When I start the project app.component.(ts, html...) and app.module.ts generated.
I am wondering when will the app.component.html will be rendered?
What should I put in app.component.html,
And when should I create an another component, like homepage component?
Will there be any differences between putting homepage in app.component.html and putting homepage in another component.html?
Welcome to Angular
So how bootstrap process works in Angular Application.
The entry point to every Angular Application is the main.ts file which contains this last line.
The platformBrowserDynamic() part of this line of code indicates that we are about to boot Angular in a browser environment.
The bootstrapModule() function bootstrap our root module which is app.module.ts.
AppModule(app.module.ts) is an entry module and also root module for our application.
app.component.ts is an entry component that we specify in app.module.ts.
So what should you keep in app.component.ts
You can consider app.component.ts as a HomeComponent also, but it is good to keep HomeComponent seprately and giving it's reference to app.component.ts.
You should create separate component for each separate page in your application.
Image source: medium.com
app.component.html is root component file. so its content display top. you create another component its will be render with root component. you can implement app routing module and define here application list of url for file. other word app.component.html is master page. and create new component is child page.
<html>
<head>
</head>
<body>
<!-- Content >> -->
<router-outlet></router-outlet>
<!-- Content << -->
/<body>
</html>
app.component.html is the page that will be rendered from your application. All the component's html pages created will be rendered with in app.component.html.
component's html pages will be rendered based on the routes set in app.module.ts.
for eg: if the route for 'home' is set as homeComponent then home.component.html will be rendered inside app.component.html.
To serve this purpose of dynamically loading the required components the app.component.html will have its content as nothing but output of routing module as,
<router-outlet></router-outlet>
reading further through the angular guide will help in understanding these concepts in depth. https://angular.io/

Unable to load GLTF file in ASP.NET View implementing A-FRAME

One of the views (.cshtml file) of my ASP.NET MVC application is using A-Frame. I am trying to load a 3-D model using GLTF file inside the <a-scene> tag.
<body>
<a-scene>
<a-assets timeout="5000">
<a-asset-item id="tree" src="~/Assets/scene.gltf">
</a-assets>
<a-gltf-model src="#tree"></a-gltf-model>
</a-scene>
</body>
I have already tested the src path in the same page by putting a .png file and loading it in <img/>, it works. The problem is just with the .gltf file.
What is possibly wrong with the .gltf file in particular?
The URL doesn't seem like a valid URL. It seems like a Unix path. Host the GLTF somewhere the website can reach it (like the same directory) and fix the path. src="scene.gltf".

Include js/css in Liferay DXP JSP Hook (module fragment)

I am working on Liferay DXP SP3 with fix pack 24 installed. I have created a module fragment project to override (hook) the edit_permissions JSP. I have CSS and Javascript that is very specific to this custom JSP so I would like to include it with the module rather than with the theme. Based on this documentation, it sounds like I should be able to do this by making the module a "theme contributor" module. I have set the Liferay-Theme-Contributor-Type and Web-ContextPath attributes in the bnd.bnd file, like this:
Liferay-Theme-Contributor-Type: portlet.config.jsp.overrides
Web-ContextPath: /edit-permissions-theme-contributor
I have created a /src/main/resources/META-INF/resources/js folder and placed my custom javascript files in this folder. It is my understanding that with this configuration I should be able to include the custom javascript files in my JSP hook using a regular script tag with a path like this:
<script type="text/javascript" src="/o/edit-permissions-theme-contributor/js/my-custom-script.js"></script>
I have tried many variations of the URL (with and without the "o", etc.). However, I always get a 404 on my script file. Am I doing this incorrectly? Is there a better way to include static files in a fragment module?

URL of a file in WebContent folder of an XPages project

I want to import font awesome in xpages. I have found that importing files in Webcontent folder makes them accessible from xpages but i cannot find the url to refer to them.
Now i have the whole folder of font awesome under WebContent folder and i want to import as a resource to the xpage the stylesheet file: WebContent/font-awesome-4.3.0/css/font-awesome.css
i am using this code
<xp:this.resources>
<xp:styleSheet href="WebContent/font-awesome-4.0.3/css/font-awesome.css"></xp:styleSheet>
</xp:this.resources>
and i have tried many different url in href attribute.
What is the correct url?
It is the correct location. The url should be without WebContent/.

Resources