Tuesday, December 25, 2018

com.google.appengine.tools.admin.AdminException: Unable to stage app: Cannot get the System Java Compiler. Please use a JDK, not a JRE - Google SDK App Deployment

I was getting the below exception while deploying the application through google cloud SDK command line interface - gcloud app deploy appengine-web.xml

gcloud-app-deploy-no-jdk

Unable to stage:
java.lang.RuntimeException: Cannot get the System Java Compiler. Please use a JDK, not a JRE.
at com.google.appengine.tools.admin.Application.compileJspJavaFiles(Application.java:1297)
at com.google.appengine.tools.admin.Application.compileJsps(Application.java:1273)
at com.google.appengine.tools.admin.Application.populateStagingDirectory(Application.java:983)
at com.google.appengine.tools.admin.Application.createStagingDirectory(Application.java:875)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplication(AppAdminImpl.java:539)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplicationWithDefaultResourceLimits(AppAdminImpl.java:492)
at com.google.appengine.tools.admin.AppCfg$StagingAction.execute(AppCfg.java:2508)
at com.google.appengine.tools.admin.AppCfg.executeAction(AppCfg.java:363)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:211)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:118)
at com.google.appengine.tools.admin.AppCfg.main(AppCfg.java:114)
com.google.appengine.tools.admin.AdminException: Unable to stage app: Cannot get the System Java Compiler. Please use a JDK, not a JRE.
at com.google.appengine.tools.admin.AppAdminImpl.stageApplication(AppAdminImpl.java:543)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplicationWithDefaultResourceLimits(AppAdminImpl.java:492)
at com.google.appengine.tools.admin.AppCfg$StagingAction.execute(AppCfg.java:2508)
at com.google.appengine.tools.admin.AppCfg.executeAction(AppCfg.java:363)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:211)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:118)
at com.google.appengine.tools.admin.AppCfg.main(AppCfg.java:114)
Caused by: java.lang.RuntimeException: Cannot get the System Java Compiler. Please use a JDK, not a JRE.
at com.google.appengine.tools.admin.Application.compileJspJavaFiles(Application.java:1297)
at com.google.appengine.tools.admin.Application.compileJsps(Application.java:1273)
at com.google.appengine.tools.admin.Application.populateStagingDirectory(Application.java:983)
at com.google.appengine.tools.admin.Application.createStagingDirectory(Application.java:875)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplication(AppAdminImpl.java:539)
... 6 more

The Java/Javac versions and the JAVA_HOME and PATH variables were configured properly.

gcloud-app-deploy-no-jdk

Also the java runtime was configured properly in appengine-web.xml

gcloud-app-deploy-no-jdk

After little struggle,  the root cause of the issue was with wrong configuration of PATH environment variable.

Other Java executables added to the PATH variable caused the SDK to choose the JRE version for deployment. 

gcloud-app-deploy-no-jdk


The issue got fixed after changing the order of PATH variable - moved up the JAVA bin path over other path configurations

gcloud-app-deploy-no-jdk

Posted by at No comments:
Labels: ,

Monday, December 24, 2018

How to enable the authors to override or add new meta tags to the pages? - Adobe Experience Manager(AEM)

How to enable the authors to override or add new meta tags to the pages? - Adobe Experience Manager(AEM)


The custom meta tags in AEM are predefined in components with required values - the values can be dynamically taken from properties or external system in case of eCommerce websites,  the authors will not be able to overwrite(the values can be changed but some cases we may required the value should be changed only for meta tags but not in the source) or add new meta tags during the page authoring.

Meta tags in page components:

meta-tags-aem

meta-tags-aem


This post will explain the approach to enable the authoring capability to override the meta tags defined in the page components and also to add new meta tags to the pages.

Enabling the meta tag management(overridden the existing meta tags and add new meta tags ) for author:

Override the Page Proprieties to add additional tab to define meta tags:


Create a node cq:dialog under page component(e.g /apps/weretail/components/structure/page/)

Name  : cq:dialog
Type : nt:unstructured

Property

sling:resourceType cq/gui/components/authoring/dialog

Create a node content under /apps/weretail/components/structure/page/cq:dialog

Name  : content
Type : nt:unstructured

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content

Name  : items
Type : nt:unstructured

Create a node tabs under /apps/weretail/components/structure/page/cq:dialog/content/items

Name  : tabs
Type : nt:unstructured

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs

Name  : items
Type : nt:unstructured

Create a node metatags under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items

Name  : metatags
Type : nt:unstructured

Properties

jcr:title Meta Tags
sling:resourceType granite/ui/components/coral/foundation/fixedcolumns

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags

Name  : items
Type : nt:unstructured

Create a node column under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags

Name  : column
Type : nt:unstructured

Properties
sling:resourceType granite/ui/components/coral/foundation/container

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column

Name  : items
Type : nt:unstructured

Create a node overridemetatags  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items

Name  : overridemetatags
Type : nt:unstructured

Properties
composite true
fieldLabel Override Meta tags
sling:resourceType granite/ui/components/coral/foundation/form/multifield

Create a node newmetatags  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items

Name  : newmetatags
Type : nt:unstructured

Properties
composite true
fieldLabel New Meta tags
sling:resourceType granite/ui/components/coral/foundation/form/multifield

Create a node field  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags

Name  : field
Type : nt:unstructured

Properties
name ./overRideMetadata
sling:resourceType granite/ui/components/coral/foundation/container

Create a node items  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags/field

Name  : items
Type : nt:unstructured

Create a node metaname  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags/field/items

Name  : metaname
Type : nt:unstructured

Properties
name ./metaname
fieldLabel Meta tag Name
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Create a node metavalue  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags/field/items

Name  : metavalue
Type : nt:unstructured

Properties
name ./metavalue
fieldLabel Meta tag Value
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Create a node field  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags

Name  : field
Type : nt:unstructured

Properties
name ./newMetadata
sling:resourceType granite/ui/components/coral/foundation/container

Create a node items  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags/field

Name  : items
Type : nt:unstructured

Create a node metaname  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags/field/items

Name  : metaname
Type : nt:unstructured

Properties
name ./metaname
fieldLabel Meta tag Name
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Create a node metavalue  under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags/field/items

Name  : metavalue
Type : nt:unstructured

Properties
name ./metavalue
fieldLabel Meta tag Value
sling:resourceType granite/ui/components/coral/foundation/form/textfield
Read more »
Posted by at No comments:
Labels:

Saturday, December 15, 2018

Different approaches to dynamically include custom scripts into websites - Adobe Experience Manager(AEM)


The standard way to include a client-side library (that is, a JS or CSS file) in the HTML of a page is simply to include a <script> or <link> tag for that page, containing the path to the JS or CSS files. For example

...
<head>...
<script type="text/javascript" src="/etc.clientlibs/clientlibs/test.js"></script>
...
</head>
...

Even the inline scripts can be added to the page

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>


While these approaches work in AEM by adding the client-side library as a link or inline to the page components, AEM provides Client-side Library Folders, which allow you to store your client-side code — JavaScript and CSS in the repository, organize it into categories, and define when and how each category of code is to be served to the client. The client-side library system then takes care of producing the correct links in your final webpage to load the correct code.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

The generated HTML page contains the reference to the final script URL

....
<head>
...
<script type="text/javascript" src="/etc.clientlibs/clientlibs/test.js"></script>
...
</head>
...

Sometimes we may need to include scripts dynamically into the websites without changing the code, this tutorial will explain the different approaches to include the scripts dynamically in the websites without performing the code changes.

Tag Manager:


Tag management software simplifies and unifies the management and maintenance of tags — A tag is a short snippet of code across, all digital properties. Inject the custom scripts remotely by enabling container on the pages, this will provide better management of tags without changing the code.

You can use any one of the tag managers in the market to include the custom scripts into the page. GTM and Adobe Launch are the two popular tag management system in the market.

GTM(Google Tag Manager) — Refer to the below URL for more details on injecting the custom script through GTM.


Adobe Launch- Refer to the below URL for more details on injecting the custom script through Adobe Launch.


AEM Custom Component:


In this approach define a custom component and include that wherever required in the page to inject the custom scripts and HTML dynamically.

Let us now enable a custom component e.g OpenHTML that will include the scripts to the page.

The component should be enabled with the required dialog to configure the custom scripts and HTML


Add the following content into openhtml.html

<sly data-sly-test.editor="${wcmmode.edit}">
<p>
Open HTML
</p>
</sly><!-- Open HTML component -->
${properties.openhtml @ context='unsafe'}
<!-- end of Open HTML component -->


Drag and drop the component to the parsys on the required website and configure the script — make sure the script/HTML is valid and all the tags are closed.

In Edit mode the place holder string “Open Html” is displayed


Now author the required scripts and HTML— ensure the script/HTML is valid otherwise the page may break


Now the HTML content and the script is included into the website page


AEM Cloud configuration:


This approach uses the custom AEM Cloud Configuration to include the dynamic scripts — header and footer to the website

Define a custom Cloud configuration to enable the header and footer scripts, attach the cloud configuration to the required websites to inject the custom dynamic scripts. Even you should be able to manage the scripts through page properties or through an external configuration page.

Refer to the following URL for the sample cloud service that enables the configuration option for header and footer scripts.

https://github.com/techforum-repo/youttubedata/tree/master/aem/customcloudservice

Add the below line to the header file(e.g /apps/wknd/components/structure/page/customheaderlibs.html) of your page rendering component — this will display the header script configured in the generic-script cloud configuration to head section

<sly data-sly-include="/apps/utilities/cloudserviceconfigs/components/servicelibs/serviceheaderlibs.jsp" />

Add the below line to the footer file(/apps/wknd/components/structure/page/customfooterlibs.html) of your page rendering component — this will display the footer script configured in the generic-script cloud configuration to the end of the body section

<sly data-sly-include="/apps/utilities/cloudserviceconfigs/components/servicelibs/servicefooterlibs.jsp" />

Create a service user with the name “script-service” and enable the read access for “/apps/utilities” and “/etc/cloudservices/generic-script”


Add an entry in “Apache Sling Service User Mapper Service Amendment” for “script-service” — “customcloudservice.core:script-service=script-service”


Create a configuration page of type “generic-script” e.g sample-script through http://localhost:4503/libs/cq/core/content/tools/cloudservices.html and configure the required head and footer scripts.




Configure the cloud configuration in parent page properties


Now the website displays the header and footer scripts



This covers some of the feasible options to dynamically include the scripts into the pages without modifying the code, even some of the other options e.g configure through separate site-specific configuration pages, enable through page properties dialog, etc can be used based on the requirement.
Posted by at No comments:
Labels:

How to include a dynamic custom script to websites through Adobe Launch - Adobe Experience Manager(AEM)


Launch, by Adobe is a next-generation tag management system that unifies the client-side marketing ecosystem by empowering developers to build integrations on a robust, extensible platform that partners, clients, and the broader industry can build on and contribute to.

Adobe Launch is the upgraded version of Adobe’s Dynamic Tag Manager (DTM), Adobe’s Dynamic Tag Manager (DTM) will be replaced by Adobe Launch (It doesn’t mean the platform will be shut down anytime soon).

This post explains the approach to use Adobe Launch to include the dynamic scripts as part of Adobe Experience Manager (AEM) websites, the same steps can be followed to include the scripts into the websites hosted on a different platform.

Define Property:


A property, or web property, is a collection of rules, data elements, configured extensions, environments, and libraries.

Log in to Adobe Launch and create new property- LAUNCH_CUSTOM_SCRIPT, specify the domain as localhost.local for localhost testing and Save the Property(add the other website domains where this script need to be enabled).


Define New Rule:


The launch is a rule-based system. It looks for user interaction and associated data. When the criteria outlined in your rules are met, the rule triggers the extension, script, or HTML you identified.

Create a new rule and configure the Event Type as “DOM Ready”, the event is what you want the rule to look for, this is defined by choosing an event, any applicable conditions, and any exceptions




Configure the Action — When the criteria outlined in your rules are met and conditions are satisfied, the actions you define are executed in order.

Select the Action Type as “Custom Code”, Select Language as “JavaScript”


Define the required script in the “Script Editor”, I am just enabling some sample script to display an alert on page load but you can insert the required custom script.


var s = document.createElement("script");
s.innerHTML = "alert('Custom Script from GTM');"; // add the custom script content
//s.src="test.js";// specify the script file instead of script content
document.head.appendChild(s);

Adding multi-line script — example

s.innerHTML = "document.onreadystatechange = function(){ "+
"if(document.readyState=='loaded' || document.readyState=='complete') "+
"alert('test');"+
"}";

Approval Workflow:


New properties are created with three environments: one Development, one Staging, and one Production. This is enough to run the publishing workflow. If desired, you may add additional Development environments. This is most common on larger teams with multiple developers working on different projects at the same time.

The approval flow is going to be like below for the properties


Different Launch artifacts can exist in each Environment. This allows you to test different Libraries in different environments as you push them through your Workflow.

Extensions, rules, and data elements are building blocks. When you want to make your application do something, these building blocks are added to a Library. This Library is then built to produce the actual artifacts that are used by your application.

When you create a Library, you must assign it to an Environment. Each Environment corresponds to a different state in the Publishing workflow.

Publish the change to the Development environment:


“Add New Library” to apply the changes to Development Environment


Select the Environment value as Development


Add Specific Resource or All changed Resources to Library for Deployment to Development environment (to deploy the latest change to the Development environment, remove the current version from Library and add the latest version)


Select the Resource (CUSTOM_SCRIPT rule) Version (Latest) and Create New Revision and finally Save the Library.


Click on Apply Updates and Continue (this is required only for the first time)


Build the library for Development


Now the changes are deployed to Development Environment


To apply the new changes (latest pending changes) to the Development environment, remove the current version from the Library (My case Revision 2)


Add the latest resource version and Click on Select&Create New Revision



Click on Save & Build for Development


Now the latest rule change is deployed to Development Environment

For testing the Property in a Development environment, install the Development script to the AEM(Adobe Experience Manager) website header.


(Multiple Development Environment can be added for testing)

Copy the script to clipboard


Add the script to the head section of the website pages (The script can be added through Adobe IO integration for AEM, I am directly enabling the script through CRXDE for demo)


Now the script is inserted into the website pages, the alert box is displayed on every page load


Publish the changes to Stage and Prod environments:


Click on Submit for Approval on Library


Click on Submit


Click on Build for Stage


Now the changes are deployed to Stage

Click on Approve for Publishing to publish the changes to Production Environment


Click on Approve


Build & Publish to Production


Click on Publish


Now the changes are published to the Production environment.


Configure the Stage and Production environment scripts to corresponding Website(AEM) environments(Stage and Prod)


Add New Library and follow the process explained above to send the additional changes to Development to Production Environments
Posted by at No comments:
Labels:

How to include dynamic custom script to websites through GTM(Google Tag Manager) - Adobe Experience Manager(AEM)

How to include dynamic custom script to websites through GTM(Google Tag Manager) - Adobe Experience Manager(AEM)


Google Tag Manager is a tag management system that allows you to quickly and easily update tracking codes and related code fragments collectively known as "tags" on your website or mobile app. Once a small segment of Tag Manager code has been added to your project, you can easily configure and deploy your tag configurations from a web-based user interface without the need to deploy additional code in most cases. This reduces errors and frees you from having to involve a developer every time you need to make changes.

This post explains the approach to use Google Tag Manager(GTM) to include the dynamic scripts as part of Adobe Experience Manager(AEM) websites.


Create a free google tag manager account if one is not available

tagmanager-GTM


Install the GTM header and body scripts to the AEM website

tagmanager-GTM


tagmanager-GTM


Copy the head script to the header file and body script to body footer(start of body section)

tagmanager-GTM

tagmanager-GTM

tagmanager-GTM


Read more »
Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)