Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Handlebars Helpers/Variables

Avatar

Level 4

Where are helpers/variables in handlebars set? For example, in this code:

<form data-paths="{{this.ugcPath}}" class="scf-js-searchform navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" name="input_value" placeholder="{{i18n "Search..."}}" class="form-control scf-search-value, scf-js-search-value"> <input style="display:none" type="checkbox" class="scf-js-search-jcrtitle" value="jcr:title" checked></input> <input style="display:none" type="checkbox" class="scf-js-search-jcrdescription" value="jcr:description" checked></input> <input style="display:none" type="checkbox" class="scf-js-search-tag" value="tag" checked></input> <input style="display:none" type="checkbox" class="scf-js-search-userIdentifier" value="userIdentifier" checked></input> <input type="hidden" name="resultPage" class="scf-js-seach-resultPage" value="{{searchPagePath}}"></input> </div> </form>

Where are 

{{this.ugcPath}} and {{searchPagePath}}

defined? This code snippet is from here: /libs/social/console/components/hbs/searchbar/searchbar.hbs

1 Accepted Solution

Avatar

Correct answer by
Employee

Thanks Janice. Adding a few more ways to find helpers and variables.

As Janice mentioned, get the component path (not the the page path) - /content/community-components/en/forum/jcr:content/content/forum and append the selector ".social.json" . This will expose all the variables (context) that can be used inside the template.

If you are in the browser, you can inspect html markup. Look for script tags where we have loaded the json data. Grab the id on these script tags and append "social.json"

View solution in original post

7 Replies

Avatar

Level 9

For every handlebars/scf component the variables that are available are provided by the SocialComponent that backs the resourceType of the component.  In theory, all the getters in this interface are available as variables to the template. Based on the exact instance/resource, certain getters might be empty/null and hence absent. You can check the variables available for a resource by inspecting the .social.json response. Simply visit /path/to/resource.social.json to see what variables are available and their values.

Besides the SocialComponent, one other “context” is added to the scope of available data to a template. This is the “logged in user context”. This has some basic information about the current session/logged in user such as the name, avatar, profile url, etc. You can check out a typical set of such variables available – scoped under this.loggedInUser by inspecting the response to /services/social/getLoggedInUser. We add one more bit of information to this map: loggedInUser.loggedIn – true when we have a user logged in, false for anonymous users.

There is also an “environment” variable that notes whether the template is being rendered on the server or client side - environment.client.  It is true when running on client side, does not exist/false on server side.

You're looking within the implementation of one of the consoles.

If you're looking for search properties, try these examples :

  http://localhost:4502/content/community-components/en/search/jcr:content/content/search.social.json

  http://localhost:4502/content/community-components/en/search/searchresult/jcr:content/content/search...

Let me know if this is helpful.

- JK

Avatar

Correct answer by
Employee

Thanks Janice. Adding a few more ways to find helpers and variables.

As Janice mentioned, get the component path (not the the page path) - /content/community-components/en/forum/jcr:content/content/forum and append the selector ".social.json" . This will expose all the variables (context) that can be used inside the template.

If you are in the browser, you can inspect html markup. Look for script tags where we have loaded the json data. Grab the id on these script tags and append "social.json"

Avatar

Level 4

These are both really helpful answers, thanks a lot!

Avatar

Level 4

I have another question related to Handlebars. We are looking at extending the dialog for the Activity Stream component by adding in a new checkbox. This checkbox will allow the user to decide whether to show the tabs on the activity feed or not. In the repository, this field has the name './showTabs'. How do I get the json feed to pick up this new field so that I can add some logic using its value in the hbs page?

Avatar

Level 9

Hi Alistair,

When you extend the dialog, you'll be doing so in /apps directory.

The component instance located at the component path (per aponnusa's answer), e.g.

  /content/sites/engage/en/activities/jcr:content/content/primary/activitystream

will have a relative sling:resourceType, such as 'social/activitystreams/components/hbs/activitystreams'.

Sling will first append /apps to the path, and if a resource is not found, will append /libs.

Thus, if you either override (affect all instances of activitystream by using the same relative path as the original) or extend (affect specific instances of activitystream by using an unique path for the resourceType), your definition of the resource and its properties will be found.

You could try the documentation tutorials (editing in the repository only) or github tutorials (creating custom Java implementations).

This AEM developer session, Aug 13, 2014, may be of help:

Social Component Framework in AEM 6

"The Social Component Framework (SCF) is available as a featurepack for CQ 5.6.1 and shipped with AEM 6.0.   SCF provides a way to build web and mobile applications that use a hybrid of server rendering to allow search engine optimization of content along with client rendering to avoid page refreshes and provide rich in-page experiences. The same template is used for both client and server rendering, providing assurance that the experience is consistent independent of which rendering is used. Well-defined endpoints allow effective caching of pages, templates and json data, and provide clear extensibility patterns for customers to insert their own client and server logic. This session will cover how to use and extend SCF, and provide information on the documentation and cookbooks available. "

 

- JK

Avatar

Employee

Hi Alistair,

If its a property on the activity stream component, you can do {{properties.showTabs}}

Or if you want it as an API, you might have to extend the ActivityStreams backend component.

Arun

Avatar

Level 4

aponnusa wrote...

 

If its a property on the activity stream component, you can do {{properties.showTabs}}

 

Super, this is what I was looking for. Thank you.