Detecting if touch UI or Classic UI for handlebar template?

[Kreender]

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.

[Lokesh_Shivalingaiah]

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

[Jitendra_S_Toma]

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.

[kautuk_sahni · Accepted solution]

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