How to insert authored number from cq:dialog into HTML | Community
Skip to main content
Codewalker
Codewalker
New Participant
November 7, 2023
Solved

How to insert authored number from cq:dialog into HTML

  • November 7, 2023
  • 2 replies
  • 907 views

Compared to most questions here, this is very basic, but I can't seem to find a resource with the information. In my cq:dialog for a new component that I'm building, I'm using the sling:resourceType, "granite/ui/components/foundation/form/numberfield" to capture a number from content managers, which represents "height" in pixels. How can I insert that authored number into the following HTML?

 

For example, if the content editor enters "25", how can I get this result?

<pre style="height:25;"> </pre>

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mahedi_Sabuj

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything. 

<pre style="height: ${properties.height @ context='styleToken'}"></pre>

You can find several examples here https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive 

 

 

2 replies

Mahedi_Sabuj
Mahedi_SabujAccepted solution
New Participant
November 7, 2023

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything. 

<pre style="height: ${properties.height @ context='styleToken'}"></pre>

You can find several examples here https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive 

 

 

Mahedi Sabuj
    DPrakashRaj
    DPrakashRaj
    New Participant
    November 7, 2023

    You can use something like this 

    <div id="${models.id}" class="cmp-container" style="max-height: ${properties.maxHeight @ context="styleString"}px">
      <!-- Your content here -->
    </div> 

    so in your case it going to be

    <pre style="height:${properties.maxHeight @ context="styleString"}px"> </pre>

    to learn more on aem sightly please refer below documents https://experienceleague.adobe.com/docs/experience-manager-htl/content/getting-started.html?lang=en

      Codewalker
      CodewalkerAuthor
      New Participant
      November 7, 2023

      Thanks for the input. Do I also need to create a model, such as testComponentModel.java? 

      DPrakashRaj
      DPrakashRaj
      New Participant
      November 7, 2023

      Not necessarily, you can read dialog properties on their respective html by using {properties.fieldName} in case you are not having any back end logic for the dialog and if you need some logic or manipulation on the data you can surely write your componentModel.java and it’s test class 

        Terms & ConditionsAccessibility statement

        Loading footer...