Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Mobile Apps - Component referred using reference component - JSON not set in scope

sandeepk7656774
Level 4
Level 4

Mobile Apps based implementation provides ability to integrate angular with AEM and to pass data to angular scope from AEM using angular.json.jsp and controller.js.jsp. When I am using this as standalone component and dragging to page which is based on angular template. The JSON created in angular.json.jsp is successfully read in controller.js.jsp with "frameworkType=angular"

When this component is authored in a separate page, in another page trying to use this inside reference component, the angular.json.jsp, controller.js.jsp is not coming to picture at all.

I had a use case to author the JSON structure (to be passed to angular scope) in one place, then use in all pages using reference component. Any pointers would be helpful

1 Accepted Solution
Bruce_Lefebvre
Correct answer by
Employee
Employee

Hi Sandeep,

The best recommendation I can offer at this point is to create an extension of the /libs/foundation/components/reference component that includes the cq:template node specifying frameworkType: angular, and supports proxying angular.json and controller.js requests to the "referenced" resource. I hacked together an example component to prove this out:

Mobile reference component example · GitHub

Hope this helps,

Bruce

View solution in original post

5 Replies
Bruce_Lefebvre
Employee
Employee

Hi Sandeep,

Can you clarify what you mean by this? Providing a piece of sample code to reproduce the issue would be very helpful.

sandeepk7656774
Level 4
Level 4

Hi Bruce

As part of component (say mycomponent), I have angular.json.jsp with some json content (In actual functionality this would be constructed through dialog properties)

{

    items:

[

        {

            'content': 'contentValue',

            'another': 'anotherValue'

        }

    ]

}

In controller.js.jsp there is a javascript promise from page component (similar to implementation in /libs/mobileapps/components/angular)

data.then(function(response) {

        $scope.<c:out value="${componentDataPath}"/> = response.data["<c:out value='${componentPath}'/>"].items;

  });

Now this component (this has frameworkType=angular property) is dragged in angular based template. There JSON from angular.json.jsp is set to $scope. This works fine in normal page.

Now say if I have 3 pages (Page1, Page2, Page3).In page 1 I have mycomponent dragged. In Page2, Page3, I drag reference component (/libs/foundation/components/reference). In both pages I refer to mycomponent authored in Page1. But here the call is not made to controller.js.jsp (Prob because reference node is not having frameworkType=angular). I was trying to have json in one page and refer in other 2 pages.

{    items: [        {            'content': '<%= xssAPI.encodeForJSString(properties.get("text", "")) %>',            'textIsRich': '<%= xssAPI.encodeForJSString(properties.get("textIsRich", "false")) %>'        }    ]}

sandeepk7656774
Level 4
Level 4

Some Junk JSON got added to the post, not able to edit the post as Actions button not working for me, ignore that, would edit that part once Action starts working for me.

Bruce_Lefebvre
Employee
Employee

Thanks for the details. I'm working on reproducing it locally and will get back to you with my recommendation.

Bruce_Lefebvre
Correct answer by
Employee
Employee

Hi Sandeep,

The best recommendation I can offer at this point is to create an extension of the /libs/foundation/components/reference component that includes the cq:template node specifying frameworkType: angular, and supports proxying angular.json and controller.js requests to the "referenced" resource. I hacked together an example component to prove this out:

Mobile reference component example · GitHub

Hope this helps,

Bruce

View solution in original post