Create a node under /content by name sampleApplication and type nt:unstructured. In the properties of this node add sling:resourceType of type String and value sampleApplication. In the Access Control List of this node add an entry for PERM_WORKSPACE_USER allowing jcr:read privileges. Also, in the Access Control List of /apps/sampleApplication add an entry for PERM_WORKSPACE_USER allowing jcr:read privileges.

In /apps/sampleApplication/wscomponents/js/registry.js update paths from /lc/libs/ws/ to /lc/apps/sampleApplication/wscomponents/ for template values.

In your portal home page JSP file at /apps/sampleApplication/GET.jsp, add the following code to include the required components inside the portal.

Also include the CSS files required for the AEM Forms workspace components.

Note:

Each component is added to the component tag (having class gcomponent) while rendering. Ensure that your home page contains these tags. See the html.jsp file of AEM Forms workspace to know more about these base control tags.

To customize the components, you may extend the existing views for the required component as follows:

Modify the portal CSS to configure the layout, positioning, and style of the required components on your portal. For instance you would like to keep background color as black for this portal to view userInfo component well. You can do this by changing background color in /apps/sampleApplication/wscomponents/css/style.css as follows: