How to render a simple JSP page in CQ?

Question

We have deployed an AngularJS app to CQ5. At the moment, the views for this app are just static HTML files and stored underneath, say, /apps/myapp/views/:

• /apps/myapp/views/list.html
• /apps/myapp/views/view.html
• etc.

Angular then sends AJAX requests to the server and loads and renders these views as needed.

We want to add some dynamic content to these pages. For example:

<% if (isGordonFreeman()) { %>
    <button>Launch the Hadron Collider!</button>
<% } %>

How can this be done in CQ?

Answer 1

You cannot render a JSP directly in CQ5 as Sling renders only the content/resource and not the scripts.

As a quix fix you can create an nt:unstructured node with the sling:resourceType property set to the path of the jsp (something like below)

list: {
    sling:resourceType: "/apps/myapp/views/list.jsp",
    jcr:primaryType: "nt:unstructured"
},
view: {
    sling:resourceType: "/apps/myapp/views/view.jsp",
    jcr:primaryType: "nt:unstructured"
}

and then call these paths in your AJAX requests.

But then, it is not recommended to point directly to scripts, as @BertrandDelacretaz rightly points out. Instead you can have components that can service your requests. If there are too many components to create then you can have a single component service your requests with the help of selectors.

For e.g., your component structure can be like the one shown below.

/apps/myapp/views
    |_ list.jsp
    |_ view.jsp
    |_ anythingelse.jsp

And the resource( say /content/myapp/views) will now have the sling:resourceType as /apps/myapp/views. And your AJAX requests would be

/content/myapp/views.list.html
/content/myapp/views.view.html
/content/myapp/views.anythingelse.html