JavaScript Use-API with a Simple component in Sightly

 

The Sightly JavaScript Use-API enables a Sightly file to access helper code written in JavaScript (server side execution). This allows all complex business logic to be encapsulated in the JavaScript code, while the Sightly code deals only with direct markup production.

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 

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

  • 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

  • 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

This shows a simple use case with JavaScript Use API, we will cover much more details in upcoming articles.

15 thoughts on “JavaScript Use-API with a Simple component in Sightly

  1. In component JSP all CQ implicit objects are available because of in global taglib, Are all these implicit obejcts accessible in — USE API as well?

     
  2. Hi PRAVEEN,
    Thanks for the great article.
    I suddenly have one question about using javascript to make an aem dialog.
    I am trying to make an Image Freeview field, and I hope it acts like when you are submitted image in your image Field, it shows what kind of image your going to submitted.
    I know how to solve this problem using multi-Field.
    But, I need to make without multi-Field.
    Can you plz help me with this?
    Thanks in advance!

     
  3. I have a component in which I need to display image which is present in another component. How can I use image.js to resolve the image uploaded in the second component.

     
  4. Hi, There is a requirement in which I need to get the current node and from current node get the child node and get child node’s property in JavaScript(JS). Please share the syntax related to this, since I am new to JS.

    Thanks

     
    1. Hi Ashish,

      It would be much better if you use Sling Resource API to perform this operation. JS — USE API’s are slow as compare to normal java code which uses WCM– USEPojo. Sling API will definitely help with available methods

      Thanks

       
  5. How to get the string array value in jquery from service. I am able to get the single valued string but getting error on mutivalue string.
    I used

    ${use.object}

    in some.js
    use(function(){
    var object = Package.ab.cd.com.ClassName;
    return{
    object = object.get(“propertyname”);
    }
    })

     
    1. Hi,

      When you return single value, you return them as type String, but in case of multivalue they return as Array where you need to use data-sly-list in order to iterate them in sightly

      Thanks

       
  6. Hey Guys,
    One quick question: how we can go vice versa. suppose I have a variable in Sightly and I want access that variable in my JS file or in the tag.
    Please suggest if any one have any idea or code for this.
    Thanks in advance.

    Thnak You!
    Rashid

     
    1. Hi Rashid,

      There is no direct way as sightly executes on server where as JS on client side (browser). But you can save the value from sightly in some custom data attribute and read that value in JS front end. Like

      My Custom HTML

      Make sure you populate the value of “data-custom” from sightly and then read this in JS.
      Hope this helps

      Thanks

       

Leave a Reply

Your email address will not be published. Required fields are marked *