Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Passing parameters to Component which not from author but from website or others

Avatar

Level 1

Hi , 

I am newer on AEM .

I have a situation where I wanna get the url params from broswer input  and then pass the params to the components when Page A jump to Page B on AEM. So the component I generated donot need author to input the params, but it may use the params to do some other things so may need to pass the params through HTL to Sling Model (java). 

So is there a way to implement pass params in this way :

javascript (not use-api I think) -----> HTL -------> java

 

or if this idea is wrong, can you provide a feasible solution.

Many thanks.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@martinwang 

You can directly use the request object (Java-backed Objects) provided by Sightly.

${request.requestURL.toString}

 

In details:

For complete URL:

${request.requestURL.toString}

For current page path:

${currentPage.path} // returns only the path without domain name

For specific parts of a URL:

${request.scheme} // returns https or http
${request.serverName} // returns server name eg: stackoverflow.com
${request.serverPort} // returns server port eg: 4502 for AEM
${request.requestURI} // returns URI eg: /content/test.html

Concatenate the specific parts to create your desired url in Sighlty:

<sly data-sly-test.scheme="${request.scheme}"/>
<sly data-sly-test.servername="${request.serverName}"/>
<sly data-sly-test.serverport="${request.serverPort}"/>
<sly data-sly-test.uri="${request.requestURI}"/>

<link rel="icon" href="${scheme}://${servername}:${serverport}${uri}">

View solution in original post

6 Replies

Avatar

Level 7

As far as I know there is no opton to pass individual parameters from htl to java. 

Avatar

Level 3

Hi @martinwang ,
I would suggest as per the use case, read the browser inputs in HTL itself using script tag and make use of that value.

Avatar

Community Advisor

Can you pass the param as selector(with prefix like "param-") instead of query parameter since the query parameter bypass the dispatcher cache unless you set as IgnoreParams in dispatcher. You can use request.pathInfo from the component to get the selectors from the URL and use the selector value in the component. 

Avatar

Community Advisor

Hi @martinwang,

You can pass data parameters from Sightly HTL component to the Sling Model backend by request attributesTry this,

HTL

<sly data-sly-test.url="/some/url/from/browser">
    <sly data-sly-use.helloWorldModel="${'com.project.HelloWorldModel' @ urlParam=url}"/>
</sly>

Sling Model

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    @Inject
    private String urlParam;

    public String getUrlParam() {
		return urlParam;
	}
}

Reference: https://sourcedcode.com/blog/aem/how-to-pass-parameters-to-sling-modal-from-sightly-htl-component

Hope that helps!

Regards,

Santosh

Avatar

Level 1

Hi Santosh,

thanks for your answer.

Sure I can pass params from HTL to Sling Model backend, but how can I pass params where I get from broswer input by javascrip to HTL so that I can continue the step( HTL to Sling model). 

Avatar

Correct answer by
Community Advisor

@martinwang 

You can directly use the request object (Java-backed Objects) provided by Sightly.

${request.requestURL.toString}

 

In details:

For complete URL:

${request.requestURL.toString}

For current page path:

${currentPage.path} // returns only the path without domain name

For specific parts of a URL:

${request.scheme} // returns https or http
${request.serverName} // returns server name eg: stackoverflow.com
${request.serverPort} // returns server port eg: 4502 for AEM
${request.requestURI} // returns URI eg: /content/test.html

Concatenate the specific parts to create your desired url in Sighlty:

<sly data-sly-test.scheme="${request.scheme}"/>
<sly data-sly-test.servername="${request.serverName}"/>
<sly data-sly-test.serverport="${request.serverPort}"/>
<sly data-sly-test.uri="${request.requestURI}"/>

<link rel="icon" href="${scheme}://${servername}:${serverport}${uri}">