Creating a Custom Cloud Service creating-a-custom-cloud-service

In CRXDE Lite, create a node under /apps:

• Name: acs
• Type: nt:folder

Create a node under /apps/acs:

• Name: analytics
• Type: sling:Folder

Create two nodes under /apps/acs/analytics:

• Name: components
• Type: sling:Folder

and

• Name: templates
• Type: sling:Folder

Right-click /apps/acs/analytics/components. Select Create… followed by Create Component… The dialog that opens lets you specify:

• Label: googleanalyticspage
• Title: Google Analytics Page
• Super Type: cq/cloudserviceconfigs/components/configpage
• Group: .hidden

Click Next twice and specify:

• Allowed Parents: acs/analytics/templates/googleanalytics

Click Next twice and click OK.

Add a property to googleanalyticspage:

• Name: cq:defaultView
• Value: html

Create a file named content.jsp under /apps/acs/analytics/components/googleanalyticspage, with the following content:

<%@page contentType="text/html"
            pageEncoding="utf-8"%><%
%><%@include file="/libs/foundation/global.jsp"%><div>

<div>
    <h3>Google Analytics Settings</h3>
    <ul>
        <li><div class="li-bullet"><strong>accountID: </strong><br><%= xssAPI.encodeForHTML(properties.get("accountID", "")) %></div></li>
    </ul>
</div>

Create a node under /apps/acs/analytics/components/googleanalyticspage/:

• Name: dialog

• Type: cq:Dialog

• Properties:

  • Name: title
  • Type: String
  • Value: Google Analytics Config
  • Name: xtype
  • Type: String
  • Value: dialog

Create a node under /apps/acs/analytics/components/googleanalyticspage/dialog:

• Name: items

• Type: cq:Widget

• Properties:

  • Name: xtype
  • Type: String
  • Value: tabpanel

Create a node under /apps/acs/analytics/components/googleanalyticspage/dialog/items:

• Name: items
• Type: cq:WidgetCollection

Create a node under /apps/acs/analytics/components/googleanalyticspage/dialog/items/items:

• Name: tab1

• Type: cq:Panel

• Properties:

  • Name: title
  • Type: String
  • Value: Config

Create a node under /apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1:

• Name: items

• Type: nt:unstructured

• Properties:

  • Name: fieldLabel

  • Type: String

  • Value: Account ID

  • Name: fieldDescription

  • Type: String

  • Value: The account ID assigned by Google. Usually in the form UA-NNNNNN-N

  • Name: name

  • Type: String

  • Value: ./accountID

  • Name: validateOnBlur

  • Type: String

  • Value: true

  • Name: xtype

  • Type: String

  • Value: textfield

Copy /libs/cq/cloudserviceconfigs/components/configpage/body.jsp to /apps/acs/analytics/components/googleanalyticspage/body.jsp and change libs to apps on line 34 and make the script reference on line 79 a fully qualified path.

Create a template under /apps/acs/analytics/templates/:

• with Resource Type = acs/analytics/components/googleanalyticspage
• with Label = googleanalytics
• with Title= Google Analytics Configuration
• with allowedPath = /etc/cloudservices/googleanalytics(/.*)?
• with allowedChildren = /apps/acs/analytics/templates/googleanalytics
• with sling:resourceSuperType = cq/cloudserviceconfigs/templates/configpage (on template node, not the jcr:content node)
• with cq:designPath = /etc/designs/cloudservices/googleanalytics (on jcr:content)

Create a component: /apps/acs/analytics/components/googleanalytics.

Add the following content to googleanalytics.jsp:

<%@page import="org.apache.sling.api.resource.Resource,
                org.apache.sling.api.resource.ValueMap,
                org.apache.sling.api.resource.ResourceUtil,
                com.day.cq.wcm.webservicesupport.Configuration,
                com.day.cq.wcm.webservicesupport.ConfigurationManager" %>
<%@include file="/libs/foundation/global.jsp" %><%

String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{});
ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class);
if(cfgMgr != null) {
    String accountID = null;
    Configuration cfg = cfgMgr.getConfiguration("googleanalytics", services);
    if(cfg != null) {
        accountID = cfg.get("accountID", null);
    }

    if(accountID != null) {
    %>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '<%= accountID %>']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script><%
    }
}
%>

This should output the custom markup based on the configuration properties.

Navigate to http://localhost:4502/miscadmin#/etc/cloudservices and create a page:

• Title: Google Analytics
• Name: googleanalytics

Go back in CRXDE Lite, and under /etc/cloudservices/googleanalytics, add the following property to jcr:content:

• Name: componentReference
• Type: String
• Value: acs/analytics/components/googleanalytics

Navigate to the newly created Service page ( http://localhost:4502/etc/cloudservices/googleanalytics.html) and click the + to create a config:

• Parent Configuration: /etc/cloudservices/googleanalytics
• Title: My First GA Config

Choose Google Analytics Configuration and click Create.

Enter an Account ID, for example, AA-11111111-1. Click OK.

Navigate to a page and add the newly created configuration in the page properties, under the Cloud Services tab.

The page will have the custom markup added to it.