Reference new properties in HTML file

[odabio]

Hello

I’m struggling to display the new properties that I added in form options..

Just to give a little bit of context, I’m want to extend the form option component  and add some new option (Title, URL and Image), I’ve successfully added those option as we can see in the image below

My issue is that I cannot reference the newly added option in my html (imageview.html) here’s my here’s the content of the file:

Gist link to some files:

_cq_dialog/.content.xml: https://gist.github.com/odaBio/e8ebb790d0541b6cb295d2b72dbb6246

Imageview.html: https://gist.github.com/odaBio/e9d97c25539f949e108487e1f301ddaf

ImageView.java: https://gist.github.com/odaBio/bb977ff6296d9fbdecee481b8c18540c

ImageViewImpl.java: https://gist.github.com/odaBio/3cad00f7b5014b69abbe0b5aa1501053

OptionItem.java: https://gist.github.com/odaBio/4f52045f8b124e6dcd2a3fa7b858c2de

OptionItemImpl.java: https://gist.github.com/odaBio/5087321aec7016564383b0c44ee8ab1e

Is there any way that I can reference the Title, url and image in my HTML ?

Thanks in advance.

[Asutosh_Jena_]

HI @odabio 

Have you included these additional properties in the sling model class where you are trying to refer the object in HTL?

If these additional fields are not included, you will not be able to use the fields in HTL and it will always return null.

Thanks!

[odabio]

ImageView.java: https://gist.github.com/odaBio/bb977ff6296d9fbdecee481b8c18540c

ImageViewImpl.java: https://gist.github.com/odaBio/3cad00f7b5014b69abbe0b5aa1501053

[Ankur_Khare]

Could u pls ur sling model as well?

[odabio]

ImageView.java: https://gist.github.com/odaBio/bb977ff6296d9fbdecee481b8c18540c

ImageViewImpl.java: https://gist.github.com/odaBio/3cad00f7b5014b69abbe0b5aa1501053

[Ankur_Khare]

Please follow this-

https://levelup.gitconnected.com/aem-extend-core-component-models-using-resource-type-association-an...

[Sanjay_Bangar]

Hi @odabio ,

      Did you inject the above 3 field in the options sling model.

Regards,

Sanjay

[MohitKumarK · Accepted solution]

Hi @odabio ,

I can see you have created a new sling model for ImageView, but in the HTL you are using "com.adobe.cq.wcm.core.components.models.form.Options" which may not have your new members. What you can do is extend Options model with your sling model and then add you new members and then you can refer sling model which you have created.

Refer this article https://github.com/adobe/aem-core-wcm-components/wiki/Delegation-Pattern-for-Sling-Models on extending a core component.

Thanks!