Editing components in partials in Angular single-page application

Avatar

Avatar
Validate 1
Level 2
blkhatpersian
Level 2

Likes

4 likes

Total Posts

32 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 1
Level 2
blkhatpersian
Level 2

Likes

4 likes

Total Posts

32 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
blkhatpersian
Level 2

15-03-2016

Hi everyone,

I am in a dilemma with my Angular single-page application in AEM 6.0(base version, no updates). I cannot properly edit my components in Classical UI(touch-based UI is not enabled) for the partial pages in my website. I can see the components I've included in the partial page, but they are incorrectly placed. The sidekick and editing properties are set for the "master" page so I imagine that has something to do with resolving the issue.

Here is the code for my "master" page:
 

<%@include file="/libs/foundation/global.jsp" %> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <!DOCTYPE html> <html ng-app="app"> <head> <cq:includeClientLib categories="coredashboard"/> <style> /* This helps the ng-show/ng-hide animations start at the right place. */ /* Since Angular has this but needs to load, this gives us the class early. */ .ng-hide { display: none!important; } </style> <title ng-bind="title">aos-dashboard</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <link rel="icon" type="image/png" href="<%=currentDesign.getPath()%>/dashboard/img/favicon/hotwater.ico"> <base href="https://forums.adobe.com/"> </head> <body> <div ng-include="'app/layout/shell.html'"></div> </body> </html>

Here is the code for the partial page loaded in the "app/layout/shell.html":
 

<%@include file="/libs/foundation/global.jsp" %> <% String indexDesignPath = designer.getDesignPath(currentPage.getAbsoluteParent(2)); %> <section id="home-view" > <div class="hero"> <div class="container-fluid"> <div ui-view> <div class="container landing-overview-content"> <h1>Professional Contractor Resources &amp; Tool</h1> <cq:include path="paragraph1" resourceType="foundation/components/parsys"/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam sem, blandit sed metus sed, vehicula tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel mi non sapien lacinia imperdiet. Morbi fringilla vestibulum eros ut tempus.</p> <div class="btn-block"> <a ui-sref="home.register" class="register btn">Get Started</a> <a ui-sref="home.login" class="login btn btn--secondary-ghost">Log In</a> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12 card card__center"> <span class="icon-contractor-locator"></span> <h3>Contractor Locator</h3> <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras Contractor Rewards justo odio, dapibus ac facilisis in, posuere consectetur egestas eget quam.</p> <a href="#" class="btn btn--primary-ghost">Learn More</a> </div> <div class="col-md-6 col-sm-6 col-xs-12 card card__center line__left"> <span class="icon-product-selector-hotwater"></span> <h3>Product Selector</h3> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.</p> <a href="#" class="btn btn--primary-ghost">Learn More</a> <img src="<%=indexDesignPath%>/dashboard/img/xpert-logo.png"/> </div> </div> </div> </section>

An image of the master page in classical UI is attached, showing the misplacement (the parsys should be under the "Professional Contractors header"). 

Everything is fine when I access the parital page directly with Classical UI. An image of this is also attached, but obviously no styling is available since its loaded in the "master page" and it would be a huge inconvenience for my authors.

Here is a rundown of what I have checked/tried in debugging:

  • Installed a fresh instance of AEM
  • Included "<cq:include script="/libs/wcm/core/components/init/init.jsp"/>" only in the partial page. This made the page turn completely white with no sidekick or anything present. No errors were reported in the Google Chrome "Inspect" debugging dialog.
  • Included "<cq:include script="/libs/wcm/core/components/init/init.jsp"/>" in both the master and partial page. The page loaded with the partial page under the "page properties", but I again still had the same placement problems and I could not edit any component beyond parsys(which I have to double-click to drag and drop components).
  • Both the partial and master page components have a sling:resourceSuperType of "foundation/components/page". 


Thanks!

Ali


 

View Entire Topic

Avatar

Avatar
Validate 1
Level 2
blkhatpersian
Level 2

Likes

4 likes

Total Posts

32 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 1
Level 2
blkhatpersian
Level 2

Likes

4 likes

Total Posts

32 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
blkhatpersian
Level 2

15-03-2016

Scott,

I cannot drag and drop components, the only I added it in was by double-clicking the parsys. That is the only component that responded to a click/double-click.  The sidekick list of components is empty.

bsolki,

My css is not the issue since the styling and functionality of sidekick works perfectly when viewing the pages individually. 

kunal23,

That would be a work-around, but again I do not want my authors to view each partial individually to edit. I want them to be able to edit when taking account the full page. It does set me on a different path of thinking though.

Thanks again to everyone for the responses, I will try a few different things and will report back.

Ali