fetching dialog fields from a extended voting component

[jesse_wang]

Hi, I extended the tally voting component and I added a number field in the dialog. My question is, how do I fetch data from the number field input and read it from the javascript file? All the documentation regarding fetching dialog field are using JSP but since the voting component is only using javascript and SCF handlebars how do I access the dialog fields from there? Thanks in advance. 

[kautuk_sahni]

Hi 

Please have a look at this community article, this would help you achieve the needful Link:- http://adobeaemclub.com/javascript-use-api-with-a-simple-component-in-sightly/

// A simple use of JavaScript Use-API can be be seen here. These are predefined method defined in sightly, those can be used in JS file to read the values and return it. Example has been shown with a simple component which excepts a title and description. These values are then read by server side JS using available Use API. Once read they will be returned to component sightly file for rendering in html. 

Let’s get started,

1. Create a component with same dialog structure as shown below 

<dialog jcr:primaryType="cq:Dialog" xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <title-desc jcr:primaryType="nt:unstructured" autoScroll="true" height="1200" title="Relates Articles" width="1200" xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <title jcr:primaryType="cq:Widget" allowBlank="false" fieldLabel="Title" name="./title" xtype="textfield"/>
                <desc jcr:primaryType="cq:Widget" allowBlank="false" fieldLabel="Description" name="./description" xtype="richtext"/>
            </items>
        </title-desc>
    </items>
</dialog>

2. Create two files as shown in below image with name sightly-component.html and sightly-component.js

Sightly component structure

3. Use the following code in sightly-component.js

"use strict";

use( function () {
 var Constants = {
         TITLE: "title",
        DESCRIPTION_PROP: "description",
    };
  
    var title = properties.get(Constants.TITLE, "")
    var description = properties.get(Constants.DESCRIPTION_PROP, "");

    return {
        title: title,
        description: description
    };
});

Line 9 – 10 :- Reading values stored in JCR after authoring
Line 13 – 14 :- Return title and description to sightly file ( sightly-component.html )
4. Use following code in sightly-component.html

<div data-sly-test="${wcmmode.edit}"><p class="text-warning">--- Author the component ---</p></div>
<div data-sly-use.data="sightly-component.js"> 
    <sly data-sly-test="${data}">    
        <span class="label label-info">Title</span> <br>
        ${data.title}
        <br>
        <span class="label label-info">Description</span> <br>
        ${data.description @ context='html'}
    </sly>
</div>

Line 2 :- Reading returned values from JS file
Line 5, 8 :- Output the title and description. As description was authored using richtext, we are using ‘html’ context to render.
5. Author the component

Sightly component author

6. That’s it, you can see the title and description on the page

Sightly component output

Note:- Article written by Praveen(Our community member). 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[jesse_wang]

Hi Kautuk,

Thanks for your help. I tried to add sightly components but I got an error message "ReferenceError: Can't find variable: use". Do you know what could be the cause of this issue? 

Thanks

[Siddharth_Palan · Accepted solution]

Hello Jesse,

You can access all properties set on a component/resource by using the following keys in the handlebars template:

{{properties.<property_name>}}

Please let me know if that works for you.