xssApi value isnt printing

[Vani1012]

Hi All,

I have a breadcrumb component When I check the HTML code of the breadcrumb on page, there is  some JSP logic is shown and not translated correctly.

<sly data-sly-test="${! currentpage.properties.breadcrumbsHide}">
    <sly data-sly-use.crumb="com.atlascopco.aem.ac_commons.core.components.BreadCrumb">
        <sly data-sly-test="${!crumb.emptyBreadcrumb}">
            <div class="c-row">
                <div class="c-breadcrumb">
                    <ul class="o-list c-breadcrumb__list" data-sly-list.breadCrumb="${crumb.breadCrumbEntries}">
                        <li class="c-breadcrumb__item">
                            <a href="${breadCrumb}.html"
                            onclick="CQ_Analytics.record({event:'followBreadcrumb',values: { breadcrumbPath: '<%=xssAPI.getValidHref(sample.getPath())%>' },collect: false,options: { obj: this },componentPath: '<%=resource.getResourceType()%>'})"
                            class="c-breadcrumb__link">${crumb.breadCrumbEntries[breadCrumb]}</a>
                        </li>
                        <li data-sly-test="${breadCrumbList.last}" class="c-breadcrumb__item">${crumb.text}</li>
                    </ul>
                </div>
            </div>
        </sly>
    </sly>
</sly>

I tried adding @CONTEXT='scriptString', 'html', 'text' on <%=xssAPI.getValidHref(sample.getPath())%>' } but nothing works.

When I check sample.getPath() on the console I am getting sample not defined.

[krati_garg]

@Vani1012 What is "sample" over here, I don't see it defined in sightly code

[Kiran_Vedantam]

Hi @Vani1012 

It is recommended to convert JSP into Java of JS and use it in HTL: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/invoking-method-inside-jsp...

Hope this helps.

Thanks,

Kiran Vedantam.

[Aditya_Chabuku · Accepted solution]

HI @Vani1012 ,

I think these Steps might helps you.

Step 1:  Write two more methods in your existing Java Model class "crumb" to print your breadcrumb path & Resource Type. Here I gave sample code.

    
    @ValueMapValue(name=PROPERTY_RESOURCE_TYPE, injectionStrategy=InjectionStrategy.OPTIONAL)
    @Default(values="No resourceType")
    protected String resourceType;
    
    public String getResourceType() {
    	
    	return resourceType;
    }
    public String getcurrentPagePath() {
        currentPagePath =    Optional.ofNullable(pageManager)
                .map(pm -> pm.getContainingPage(currentResource))
                .map(Page::getPath).orElse("");
    	
    	return currentPagePath;
    }

Step 2: Remove JSP code & pick path & resourceType from the java class as shown below.

                onclick='CQ_Analytics.record({
                event:"followBreadcrumb",
                values: { breadcrumbPath: ${crumb.currentPagePath} },
                collect: false,options: { obj: this },
                componentPath: ${crumb.resourcePath}
        })' 

Please let me know if this helps!

Regards,

Aditya Ch.

[Shubham_borole]

Hi @Vani1012 , As @Kiran_Vedantam mentioned as per best practices, we should try to leverage HTL instead of jsp. I would also like to suggest to explore if the Breadcrumb component from the AEM core component library matches your requirements and use that.

[arunpatidar]

what is sample in 

sample.getPath()

 You don't have to use explicit xssAPI.getValidHref(sample.getPath()) for link instead use HTL context e.g. url

href="${sample.path @ context='uri'}

I think the expression is not correct that is why it is ot working, I would suggest try to debug below

onclick="CQ_Analytics.record({event:'followBreadcrumb',values: { breadcrumbPath: '<%=xssAPI.getValidHref(sample.getPath())%>' },collect: false,options: { obj: this },componentPath: '<%=resource.getResourceType()%>'})"