Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
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.