Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Enabling Style System for Page Component (Core V2)

Avatar

Level 1

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!  

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 9

Hello,

 

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

 

rush_pawan_0-1616700195295.png

 

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.htm...

 

i hope it helps!!

 

 

View solution in original post

4 Replies

Avatar

Correct answer by
Level 9

Hello,

 

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

 

rush_pawan_0-1616700195295.png

 

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.htm...

 

i hope it helps!!

 

 

Avatar

Level 1
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!

Avatar

Level 9

hello, I did on my templates but can't share that structure.  i just did it on weretail hero page type and sharing info as below

 

1. the cq:dialog style system - /apps/core/wcm/components/page/v2/page/cq:design_dialog.infinity.json

rush_pawan_0-1616703788584.png

 

2. the policy configuration at template policy for page /conf/we-retail/settings/wcm/policies/weretail/components/structure/page/we-retail-page.infinity.json

 

rush_pawan_1-1616703832239.png

 

 

i hope it will help you now, as it should be very straight forward.

 

 

Avatar

Level 1

Thank you @Pawan-Gupta. I got it working. I was including tab_edit instead of the tab_design dialog.