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

[AEM 6.3] AEM form components with data-sly-resource result javascript errors

Avatar

Avatar
Validate 1
Level 1
Jarflux
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
Jarflux
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
Jarflux
Level 1

12-07-2017

I'm trying to build a component that consists of multiple other components without duplication of code.

So I tried to build an empty component that contains a data-sly-resource to include another component

<div data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></div>

This resulted in a component that can be dragged from the sidekick and is rendered correctly.
But when I try to click the component to configure the the component, instead of showing the black edit bar it throws the javascript error below.

Uncaught TypeError: Cannot read property ‘hideTitle’ of undefined

   at hideTitleExists (form.js:2430)

   at guidetouchlib.editToolbar.appendButton (form.js:2461)

   at core.js:23633

   at Array.forEach (<anonymous>)

   at guidetouchlib.editToolbar.render (core.js:23632)

   at guidetouchlib.editToolbar.render (form.js:2538)

   at guidetouchlib.editToolbar.open (core.js:9645)

   at HTMLDocument.<anonymous> (core.js:9385)

   at HTMLDocument.dispatch (jquery.js:5226)

   at HTMLDocument.elemData.handle (jquery.js:4878)

The included component is working perfectly on its own.

I have tried to add a data-sly-unwrap, without any succes

Steps to replicate this issue:
- Install AEM 6.3
- Install Adobe Forms packages ( adobe-aemfd-osx-pkg-4.0.74.zip )

- Restart AEM to complete Adobe Forms installation
- Install custom content package containing 2 components and a test form ( demo-form-sly-resource.zip - Google Drive )
- Go to test form containing the 2 components http://localhost:4502/editor.html/content/forms/af/blank-test-form.html
- Open javascript console in developer tools
- Click on child component to validate the edit bar appears
- Click on the parent component to trigger the javascript error that prevents the edit bar from appearing

Kind Regards,

Ben

Het bericht is bewerkt door: Ben Oeyen
Added steps to replicate this issue.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct Reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct Reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
viveksachdeva
Level 5

17-07-2017

For parent component, the editable DOM points one level down(guideNode) than what it should point to(guide), causing this JS error.

Can be fixed by changing line 100 in /etc/clientlibs/fd/af/guideTouchAuthoringEditLayer/javascript/GuideTouchAuthoringCustomToolbar.js..

Currently it is:

        if (authoringConfigJson.hideTitle) {

Change it to:

        if (authoringConfigJson && authoringConfigJson.hideTitle) {

Answers (9)

Answers (9)

Avatar

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
christofhed3545
Level 1

24-07-2017

error-message.png

This is the error that I receive when selecting the properties of the child component.

The reason why I don't receive any SOM expression is because the child components don't exist beneath the parent component in CRX.

Is there a way to add the child component beneath the parent component? So we can call the SOM expression?

Avatar

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct Reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct Reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
viveksachdeva
Level 5

21-07-2017

Strange enough I dont see an error when clicking on Edit... I can edit but while saving it throws some error in the backend, which seems unrelated to this.

Avatar

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
christofhed3545
Level 1

20-07-2017

I was able to call the properties of the child component by adding a div-tag around dala-sly-resource. The div-tag contains the guideConstants.GUIDE_FIELD_WIDGET constant.

Now we receive a 404 error from the child.component.af.somprovider when we call the som expression via the toolbar.

Do we need add or change something so that we can receive the som expression?

Avatar

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
christofhed3545
Level 1

19-07-2017

when open the properties of the child component.

Avatar

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct Reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct Reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
viveksachdeva
Level 5

19-07-2017

when are you seeing this error?

Avatar

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
christofhed3545
Level 1

Likes

2 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
christofhed3545
Level 1

19-07-2017

This indeed worked but now I receive this error

guideTouchAuthoringDialog.js:1344 Uncaught TypeError: Cannot read property ‘hasOwnProperty’ of undefined

    at Object.guidetouchlib.editLayer.dialogUtils.enableVisibleOnLoad (guideTouchAuthoringDialog.js:1344)

    at eval (eval at <anonymous> (eval at guidetouchlib.editLayer.dialogUtils.getExpression (guideTouchAuthoringDialog.js:149)), <anonymous>:1:41)

    at eval (eval at guidetouchlib.editLayer.dialogUtils.getExpression (guideTouchAuthoringDialog.js:149), <anonymous>:3:24)

    at guideTouchAuthoringDialog.js:186

    at coralui2.js:35240

And adding two child components with data-sly-resource doesn't seems to work. You can only get the properties of the last child component. Getting the properties of the first child component is impossible. It is not clear is has something to do with the mentioned error.

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,162 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,162 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

13-07-2017

Feike Visser​ any help here?

Avatar

Avatar
Validate 1
Level 1
Jarflux
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
Jarflux
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
Jarflux
Level 1

12-07-2017

Yes, it's still possible to drag the components to the page.
Only clicking on the component in the page to configure it, will result in the error and no edit bar showing.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

12-07-2017

Can you drag your component from the side rail?