Passing parameters to Component which not from author but from website or others | Community
Skip to main content
M
martinwang
October 27, 2022
Solved

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

  • October 27, 2022
  • 4 replies
  • 1670 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SantoshSai

@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}">

4 replies

Magicr
Magicr
Level 6
October 27, 2022

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

    M
    Adobe Employee
    malay_dubeAdobe Employee
    Adobe Employee
    October 27, 2022

    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.

      Saravanan_Dharmaraj
      Community Advisor
      Saravanan_DharmarajCommunity Advisor
      Community Advisor
      October 27, 2022

      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. 

        SantoshSai
        Community Advisor
        SantoshSaiCommunity Advisor
        Community Advisor
        October 28, 2022

        Hi @martinwang,

        You can pass data parameters from Sightly HTL component to the Sling Model backend by request attributes. Try 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

        Santosh Sai
          M
          martinwangAuthor
          October 31, 2022

          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). 

            SantoshSai
            Community Advisor
            SantoshSaiCommunity AdvisorAccepted solution
            Community Advisor
            October 31, 2022

            @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}">
            Santosh Sai
              Terms & ConditionsAccessibility statement

              Loading footer...