Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Enabling Style System for Page Component (Core V2)

Avatar

Avatar
Give Back
Level 1
SammyK267
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
Top badges earned
Give Back
Validate 1
View profile

Avatar
Give Back
Level 1
SammyK267
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
Top badges earned
Give Back
Validate 1
View profile
SammyK267
Level 1

25-03-2021

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!  

AEM core components page component Style style system

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

120 likes

Total Posts

192 posts

Correct Reply

77 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

120 likes

Total Posts

192 posts

Correct Reply

77 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

25-03-2021

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

 

 

Answers (0)