Highlighted

Custom JS and CSS not getting loaded after upgrade to AEM 6.4/6.5

Nishant_Rai

31-01-2019

Hi,

After upgrading to AEM 6.4/6.5 my custom HTML pages are not rendering properly. I checked and found out my client libs are not getting loaded that used to get loaded in AEM 6.3.

If you look the path below -/etc/localization/locprojectwizard/content/jcr:content/head/clientlibs , it is referring to slingReourceType to granite/ui/components/foundation/includeclientlibs. And this node got changed in AEM 6.4 as earlier it contained a jsp file and now it has rst file. I  am not sure what is causing this issue.

1681151_pastedImage_0.png

Replies

Highlighted

Gaurav-Behl

MVP

02-02-2019

Use the new path for your component - granite/ui/components/coral/foundation/includeclientlibs

/libs/granite/ui/components/foundation has resourceSuperType that mentions below path -

/libs/granite/ui/components/coral/foundation/includeclientlibs

Highlighted

Nishant_Rai

21-02-2019

thanks gauravb10066713 . I tried making changes you suggested but still my client JS and CSS not applying to my HTML page. I can't see their references in the generated HTML code. Here is the code (HTML, JSP and JS) I am sharing -

HTML JCR code - /etc/localization/locprojectwizard/content

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
   jcr:primaryType="cq:Page">

   <jcr:content
   jcr:mixinTypes="[sling:VanityPath]"
   jcr:primaryType="nt:unstructured"
   jcr:title="GLaaS Help | Initiate HandOff"
   sling:resourceType="granite/ui/components/foundation/page"
   sling:vanityOrder="{Long}301"
   sling:vanityPath="/etc/localization/locprojectwizard">

   <head jcr:primaryType="nt:unstructured">

   <viewport
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/admin/page/viewport"/>

   <meta
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/meta"
   content="chrome=1"
   name="X-UA-Compatible"/>

   <title
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/siteadmin/admin/page/title"/>

   <favicon
   jcr:primaryType="nt:unstructured"
   sling:resourceType="/etc/designs/glaas/favicon"/>

   <clientlibs
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/includeclientlibs"
   categories="[coralui2,granite.ui.foundation,granite.ui.foundation.admin,granite.utils,cq.widgets,anuvaad.core]"
   css="[anuvaad.initiatelocho]"/>

   </head>

   <body
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/page/body">

   <layout
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/endor/layouts/page"/>

   <rail
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/endor/navcolumns"
   currentId="cq-nav-locprojectdashboard"
   srcPath="cq/core/content/nav"/>

   <breadcrumbs
   jcr:primaryType="nt:unstructured"
   sling:resourceType="workflowx/components/locprojectwizard/breadcrumb"/>

   <title
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/siteadmin/admin/endor/title"
   contentPath="${requestPathInfo.suffix}"
   rootTitle="Initiate HandOff"/>

   <helpactivator
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href="#help-popover"
   text="Help"
   toggle="popover"/>

   <badge
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/endor/badge"
   href="#cq-notifications"/>

   <user
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/endor/user"
   href="#granite-user-properties"/>

   <help
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/container"
   id="help-popover">

   <layout
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/layouts/popover"/>

   <items jcr:primaryType="nt:unstructured">

   <list
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/container">

   <layout
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/layouts/list"/>

   <items jcr:primaryType="nt:unstructured">

   <searchform
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form"
   action="http://www.adobe.com/cfusion/search/index.cfm">

   <layout
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/layouts/form"/>

   <items jcr:primaryType="nt:unstructured">

   <section
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/hidden"
   name="siteSection"
   value="marketing-cloud.html"/>

   <term
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/textfield"
   emptyText="Search"
   name="term"/>

   </items>

   </searchform>

   <anuvaad
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href_i18n="http://anuvaad-help.corp.adobe.com"
   text="Anuvaad Help">

   <layoutConfig
   jcr:primaryType="nt:unstructured"
   interactive="{Boolean}true"/>

   </anuvaad>

   <whatsnew
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href_i18n="https://microsite.omniture.com/t2/help/en_US/whatsnew/"
   text="What's New">

   <layoutConfig
   jcr:primaryType="nt:unstructured"
   interactive="{Boolean}true"/>

   </whatsnew>

   <aemdoc
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href_i18n="https://www.adobe.com/go/aem6_docs"
   text="Documentation">

   <layoutConfig
   jcr:primaryType="nt:unstructured"
   interactive="{Boolean}true"/>

   </aemdoc>

   <home
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href_i18n="http://microsite.omniture.com/t2/help/en_US/home/"
   text="Help Home">

   <layoutConfig
   jcr:primaryType="nt:unstructured"
   interactive="{Boolean}true"/>

   </home>

   <community
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href_i18n="http://helpx.adobe.com/marketing-cloud.html"
   text="Community">

   <layoutConfig
   jcr:primaryType="nt:unstructured"
   interactive="{Boolean}true"/>

   </community>

   <customercare
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/hyperlink"
   href_i18n="http://helpx.adobe.com/marketing-cloud/contact-support.html"
   text="Customer Care">

   <layoutConfig
   jcr:primaryType="nt:unstructured"
   interactive="{Boolean}true"/>

   </customercare>

   </items>

   </list>

   </items>

   </help>

   <notifications
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/endor/notifications"
   id="cq-notifications"/>

   <account
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/include"
   path="granite/ui/content/userproperties"/>

   <content
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/container">

   <layout
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/endor/layouts/content"/>

   <content
   jcr:primaryType="nt:unstructured"
   sling:resourceType="workflowx/components/locprojectwizard/content"/>

   </content>

   </body>

   </jcr:content>

</jcr:root>

THE JSP Code - /apps/workflowx/components/locprojectwizard/content/content.jsp

<%--

  ADOBE CONFIDENTIAL

  Copyright 2012 Adobe Systems Incorporated

  All Rights Reserved.

  NOTICE: All information contained herein is, and remains

  the property of Adobe Systems Incorporated and its suppliers,

  if any. The intellectual and technical concepts contained

  herein are proprietary to Adobe Systems Incorporated and its

  suppliers and may be covered by U.S. and Foreign Patents,

  patents in process, and are protected by trade secret or copyright law.

  Dissemination of this information or reproduction of this material

  is strictly forbidden unless prior written permission is obtained

  from Adobe Systems Incorporated.

--%><%@page session="false" %><%

%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%

%><%@include file="/libs/granite/ui/global.jsp" %><%

%><%@page import="com.adobe.granite.i18n.LocaleUtil,
   com.adobe.granite.ui.components.AttrBuilder,

  com.adobe.granite.ui.components.ClientState" %><%
%><%

  Resource header = resource.getChild("header");

  if (header != null) {

  ValueMap headerVm = header.adaptTo(ValueMap.class);

  String headerResourceType = headerVm.get("sling:resourceType", "granite/ui/components/foundation/contsys");

%><sling:include path="<%= header.getPath() %>" resourceType="<%= headerResourceType %>" /><%

  }

  // page class attributes

  AttrBuilder pageAttrs = new AttrBuilder(request, xssAPI);

  ValueMap pageVm = resource.adaptTo(ValueMap.class);

  pageAttrs.addClass("page"); //default class

  pageAttrs.addClass(pageVm.get("class", String.class));

  pageAttrs.add("role", "main"); %>

<div <%= pageAttrs.build() %>><%

  Resource rail = resource.getChild("rail");

  if (rail != null) {

  AttrBuilder railAttrs = new AttrBuilder(request, xssAPI);

  railAttrs.addClass("rail");

  railAttrs.addClass("left");

  railAttrs.add("id", "rail");

  railAttrs.add("role", "complementary");

  ValueMap railVm = rail.adaptTo(ValueMap.class);

  String railResourceType = railVm.get("sling:resourceType", "granite/ui/components/foundation/contsys");

  ClientState state = new ClientState(slingRequest);

  state.restoreState(railAttrs, "#rail", new String[] {"class"}); %>

  <div <%= railAttrs.build() %>>

  <div class="wrap"><sling:include path="<%= rail.getPath() %>" resourceType="<%= railResourceType %>" /></div>

  </div><%

  } %>

  <div id="content" class="content foundation-content">

  <div class="foundation-content-current"><%

  Resource content = resource.getChild("content");

  if (content != null) {

  ValueMap contentVm = content.adaptTo(ValueMap.class);

  String contentResourceType = contentVm.get("sling:resourceType", "granite/ui/components/foundation/contsys"); %>

  <sling:include path="<%= content.getPath() %>" resourceType="<%= contentResourceType %>" /><%

  } %>

  

  <div class="content-container">

 

  <div class="mainDiv xsmall">

  <div name=frmCreateLocJob style="height:92%;">

  <!-- <iframe id="extFrame" src="jobDetailsPage.html" width="100%" height="80%"></iframe> -->

  <div id="jobDetailsDiv"></div>

  </div>

  </div>

  <div id="loaderDiv">

  <div class="coral-Wait coral-Wait--large coral-Wait--center"></div>

  </div>

  <cq:include script="../../common/modalDialogs.html"/>

  </div>

  </div>

  </div>

</div>

<script type="text/javascript">

  Granite.I18n.init({

  locale: "<%= LocaleUtil.toRFC4646(request.getLocale()).toLowerCase() %>",

  urlPrefix: "<%= request.getContextPath() %>/libs/cq/i18n/dict."
  });

  function getCQProductNames()

  {

  return ${productnames}; 

  }

  function getWSProductNames()

  {

  return ${productnames};

  }

  function getCombinedAssetProductMap(){

  return ${combinedAssetList};

  }

  function getLocales(){

  return ${localemap};

  }

 

  function getCallingSystem(){

  return ${callingSystem};

  }

 

  function getGlaasProjectName(){

  return ${projectName};

  }

  $(document).ready(function() {

  initiatelocho.init();

  });

</script>

<ui:includeClientLib js="anuvaad.initiatelocho"/>

JS Description -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
   jcr:primaryType="cq:ClientLibraryFolder"
   categories="[anuvaad.initiatelocho]"
   dependencies="[anuvaad.core,anuvaad.detailspage]"/>

Highlighted

Gaurav-Behl

MVP

22-02-2019

Modify sling:resourceType="granite/ui/components/foundation/includeclientlibs"  to

sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"   and test