Enabling Style System for Page Component (Core V2) | Community
Skip to main content
SammyK267
March 25, 2021
Solved

Enabling Style System for Page Component (Core V2)

  • March 25, 2021
  • 1 reply
  • 1813 views

Following this guide, I'm trying to enable the style system for the Core Page Component (v2) in edit mode (Page Properties) for a use I have. 

<?xml version="1.0" encoding="UTF-8"?> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Copyright 2017 Adobe ~ ~ Licensed under the Apache License, Version 2.0 (the "License"); ~ you may not use this file except in compliance with the License. ~ You may obtain a copy of the License at ~ ~ http://www.apache.org/licenses/LICENSE-2.0 ~ ~ Unless required by applicable law or agreed to in writing, software ~ distributed under the License is distributed on an "AS IS" BASIS, ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. ~ See the License for the specific language governing permissions and ~ limitations under the License. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" jcr:primaryType="nt:unstructured" jcr:title="Page" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[cq.common.wcm,core.wcm.components.page.v2.editor,cq.wcm.msm.properties,granite.contexthub.configuration,cq.siteadmin.admin.properties]" helpPath="https://www.adobe.com/go/aem_cmp_page_v2" mode="edit" trackingFeature="core-components:page:v2"> <content granite:class="cq-dialog-content-page" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs granite:class="cq-siteadmin-admin-properties-tabs" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" size="L"> <items jcr:primaryType="nt:unstructured"> <basic jcr:primaryType="nt:unstructured" jcr:title="Basic" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="/mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/title"/> <branding jcr:primaryType="nt:unstructured" jcr:title="Branding" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <brandSlug granite:class="cq-siteadmin-admin-properties-basic-brandSlug" jcr:primaryType="nt:unstructured" sling:resourceType="core/wcm/components/commons/editor/dialog/inherited/v1/inherited" prop="brandSlug" heading="Brand Slug" path="${empty param.item ? requestPathInfo.suffix : param.item}"/> </items> </branding> <htmlid jcr:primaryType="nt:unstructured" jcr:title="HTML ID" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <id jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="HTML ID attribute to apply to the component." fieldLabel="ID" name="./id"/> </items> </htmlid> <moretitles jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="/mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/moretitles"/> <onofftime jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="/mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/onofftime"/> <vanityurl jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="/mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/vanityurl"/> </items> </column> </items> </basic> <socialmedia cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" jcr:title="Social Media" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" sling:orderBefore="cloudservices"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <section jcr:primaryType="nt:unstructured" jcr:title="Social Media sharing" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <inputgroup jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/text" text="Enable user sharing for"/> <field cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <facebook cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" name="./socialMedia" renderReadOnly="{Boolean}true" text="Facebook" value="facebook"> <granite:data jcr:primaryType="nt:unstructured" cq-msm-lockable="socialMedia"/> </facebook> <pinterest cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" name="./socialMedia" renderReadOnly="{Boolean}true" text="Pinterest" value="pinterest"> <granite:data jcr:primaryType="nt:unstructured" cq-msm-lockable="socialMedia"/> </pinterest> </items> </field> <facebookAppId cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" name="./facebookAppId" fieldLabel="Facebook App ID" fieldDescription="Facebook APP ID to be used if Facebook sharing is enabled. See https://developers.facebook.com/apps for details"> <granite:data jcr:primaryType="nt:unstructured" cq-msm-lockable="facebookAppId"/> </facebookAppId> <variantpath cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" sling:resourceType="cq/experience-fragments/editor/components/xffield" fieldDescription="Choose the social media variation of experience fragment to be used for generating page meta data for social media." fieldLabel="Preferred XF variation" filter="folderOrVariant" name="./variantPath" renderReadOnly="{Boolean}true" translateOptions="{Boolean}false" variant="sm"> <granite:data jcr:primaryType="nt:unstructured" cq-msm-lockable="fragmentPath"/> </variantpath> <socialmedia_type cq:showOnCreate="{Boolean}true" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/hidden" allowBulkEdit="{Boolean}true" ignoreData="{Boolean}true" name="./socialMedia@TypeHint" value="String[]"/> </items> </section> </items> </column> </items> </socialmedia> <pwa jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="/mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/pwa"/> <styletab jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"/> </items> </tabs> </items> </content> </jcr:root>

Above is my .content.xml under _cq_dialog folder. Once I open the page, and hit page properties I don't see the style system enabled. Any ideas would be greatly appreciated!  

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Pawan-Gupta

Hello,

 

after enabling (if you have followed correct steps as below) styling system icon would appear as below on page edit mode

 

 

steps:

1. enable style system tab under cq:dialog hierarchy 

2. go to edit template and then configure the page style system by clicking on configure policy

 

https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/style-system.html?lang=en#setup

 

i hope it helps!!

 

 

1 reply

Pawan-Gupta
Pawan-GuptaAccepted solution
Level 8
March 25, 2021

Hello,

 

after enabling (if you have followed correct steps as below) styling system icon would appear as below on page edit mode

 

 

steps:

1. enable style system tab under cq:dialog hierarchy 

2. go to edit template and then configure the page style system by clicking on configure policy

 

https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/style-system.html?lang=en#setup

 

i hope it helps!!

 

 

SammyK267
SammyK267Author
March 25, 2021
I'm following the guide as you linked but it not showing up. Can you post your .content.xml file? Or a link to the source repo for that screenshot? Thanks!