Detecting if touch UI or Classic UI for handlebar template? | Community
Skip to main content
Kreender
Kreender
Level 2
January 7, 2016
Solved

Detecting if touch UI or Classic UI for handlebar template?

Is there any way I can detect if a component is being edited in touch or classic UI from the handlebar template of the component?

 

Thanks for reading.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
kautuk_sahni
kautuk_sahniAccepted solution
Employee
January 8, 2016

Hi 

As mentioned by Lokesh (cf# for classic and editor.html for touchUI. However this may not work if the URL changes in future), we can know if we are in Touch UI or in classic UI.

Here is a article showing use of function calling in Handlerbars.js

//

Link:- https://docs.adobe.com/docs/en/aem/6-1/develop/communities/scf/handlebars-helpers.html

 

Handlebars.js Basic Overview

 

A quick overview of helper functions from Handlebars.js documentation : 

  • A Handlebars helper call is a simple identifier (the name of the helper), followed by zero or more space-separated parameters.
  • Parameters may be a simple String, number, boolean, or JSON object, as well as an optional sequence of key-value pairs (hash arguments) as the last parameter(s).
  • The keys in hash arguments must be simple identifiers.
  • The values in hash arguments are Handlebars expressions : simple identifiers, paths, or Strings.
  • The current context, this, is always available to Handlebars helpers.
  • The context may be a String, number, boolean, or a JSON data object.
  • It is possible to pass an object nested within the current context as the context, such as this.url or this.id(see following examples of simple and block helpers).
  • Block helpers are functions that can be called from anywhere in the template.  They can invoke a block of the template zero or more times with a different context each time.  They contain a context between {{#name}} and {{/name}}.
  • Handlebars provides a final parameter to helpers named 'options'.  The special object 'options' includes
    • optional private data (options.data)
    • optional key-value properties from the call (options.hash)
    • ability to invoke itself (options.fn()) 
    • ability to invoke the inverse of itself (options.inverse())
  • It is recommended that the HTML String content returned from a helper is a SafeString.

An example of a simple helper from Handlebars.js documentation :

     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Handlebars.registerHelper('link_to', function(title, options) {
    return new Handlebars.SafeString('<a href="https://forums.adobe.com/posts' + this.url + '">' + title + "!</a>");
});
 
var context = {posts: [
    {url: "/hello-world",
      body: "Hello World!"}
  ] };
 
// when link_to is called, posts is the current context
var source = '<ul>{{#posts}}<li>{{{link_to "Post"}}}</li>{{/posts}}</ul>'
 
var template = Handlebars.compile(source);
 
template(context);

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
View reply

3 replies

kautuk_sahni
kautuk_sahniAccepted solution
Employee
January 8, 2016

Hi 

As mentioned by Lokesh (cf# for classic and editor.html for touchUI. However this may not work if the URL changes in future), we can know if we are in Touch UI or in classic UI.

Here is a article showing use of function calling in Handlerbars.js

//

Link:- https://docs.adobe.com/docs/en/aem/6-1/develop/communities/scf/handlebars-helpers.html

 

Handlebars.js Basic Overview

 

A quick overview of helper functions from Handlebars.js documentation : 

  • A Handlebars helper call is a simple identifier (the name of the helper), followed by zero or more space-separated parameters.
  • Parameters may be a simple String, number, boolean, or JSON object, as well as an optional sequence of key-value pairs (hash arguments) as the last parameter(s).
  • The keys in hash arguments must be simple identifiers.
  • The values in hash arguments are Handlebars expressions : simple identifiers, paths, or Strings.
  • The current context, this, is always available to Handlebars helpers.
  • The context may be a String, number, boolean, or a JSON data object.
  • It is possible to pass an object nested within the current context as the context, such as this.url or this.id(see following examples of simple and block helpers).
  • Block helpers are functions that can be called from anywhere in the template.  They can invoke a block of the template zero or more times with a different context each time.  They contain a context between {{#name}} and {{/name}}.
  • Handlebars provides a final parameter to helpers named 'options'.  The special object 'options' includes
    • optional private data (options.data)
    • optional key-value properties from the call (options.hash)
    • ability to invoke itself (options.fn()) 
    • ability to invoke the inverse of itself (options.inverse())
  • It is recommended that the HTML String content returned from a helper is a SafeString.

An example of a simple helper from Handlebars.js documentation :

     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Handlebars.registerHelper('link_to', function(title, options) {
    return new Handlebars.SafeString('<a href="https://forums.adobe.com/posts' + this.url + '">' + title + "!</a>");
});
 
var context = {posts: [
    {url: "/hello-world",
      body: "Hello World!"}
  ] };
 
// when link_to is called, posts is the current context
var source = '<ul>{{#posts}}<li>{{{link_to "Post"}}}</li>{{/posts}}</ul>'
 
var template = Handlebars.compile(source);
 
template(context);

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Translate
Kautuk Sahni
Jitendra_S_Toma
Jitendra_S_Toma
Level 10
January 8, 2016

Hi Santiago Del,

I don't think you can determine whether the author is in classic OR Touch UI in handlebar template. Because handlebar template is just a static block/section. 

In order to achieve this, You have to have a conditional statement in the handlebar template and while compiling this template and passing the rest of arguments to replace all placeholders, pass one more argument (isTouchUI).

{{#if isTouchUI}}author is using TOUGCH UI{{else if }}author is in classic UI{{/if}}

for more details, here is the doc. http://handlebarsjs.com/block_helpers.html

Jitendra

Santiago Del Valle wrote...

Is there any way I can detect if a component is being edited in touch or classic UI from the handlebar template of the component?

 

Thanks for reading.

 

Translate
Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
Level 10
January 7, 2016

You can just have a JS function to detect it from the URL 

cf# for classic and editor.html for touchUI. However this may not work if the URL changes in future

Translate
Terms & ConditionsAccessibility statement

Loading footer...