Skip to main content

Components

Using AEM Core Components​

Creating a Custom Component​

Style System​

Configuration and Usage​

// todo

Reading the Style Value in a Sling Model / Template​

You can read your current sling models applied Style (System), if you adapt your Resource to the ComponentStyleInfo.class.

ComponentStyleInfo componentStyleInfo = request.getResource().adaptTo(ComponentStyleInfo.class);

ComponentStyleInfo.class holds the currently applied StyleSystem variation, as well as a reference to all applicable and available style variations.

You could use this, to alter the markup, based on the selected style / css class.

Dialogs​

Coral Radio Group + Well​

<items jcr:primaryType="nt:unstructured">
    <radio-group-heading
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/heading"
        text="Radio Group Heading"
        level="3"/>
    <radio-group
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
        deleteHint="{Boolean}false"
        vertical="{Boolean}true"
        name="./radioGroup">
        <items
            jcr:primaryType="nt:unstructured">
            <radio-1
                jcr:primaryType="nt:unstructured"
                text="Descriptive Content 1"
                value="somevalue"
                checked="{Boolean}true"/>
            <radio-2
                jcr:primaryType="nt:unstructured"
                text="Descriptive Content 2"
                value="someOtherValue"
                checked="{Boolean}false"/>
        </items>
    </radio-group>
</items>

The above excerpt can be combined with a well, which results in the following output

The full dialog tab in xml looks like this

<properties jcr:primaryType="nt:unstructured"
			jcr:title="Properties"
			margin="{Boolean}true"
			sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
    	<columns jcr:primaryType="nt:unstructured"
    		    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
    		    margin="{Boolean}true">
    		<items jcr:primaryType="nt:unstructured">
    			<column jcr:primaryType="nt:unstructured"
    				    sling:resourceType="granite/ui/components/coral/foundation/container">
    				<items jcr:primaryType="nt:unstructured">
    					<assetPropertiesGroup jcr:primaryType="nt:unstructured"
    										  sling:resourceType="granite/ui/components/coral/foundation/well">
                            <!-- items block from above	-->
    					</assetPropertiesGroup>
    				</items>
    			</column>
    		</items>
    	</columns>
    </items>
</properties>

JCR Repo Sync​

IntelliVault​

For Jetbrains IDEs, the IntelliVault Plugin works well. It can export from the JCR to your local file system and import your local filesystem into the JCR.

IntelliVault Marketplace

It needs a version of the FileVault tool vault-cli.

A valid configuration looks like this:

IntelliVault commands can be invoked, via right clicking any path below a jcr_root node.

  1. Right Click Pull from CRX to copy and overwrite any content from the selected path from the JCR to your local filesystem.
  2. Right Click and Push to CRX top import and overwrite your local filesystem content to the selected path in your JCR.

The IntelliVault plugin unfortunately does not get updated often and might not be available via the Jetbrains Plugin Marketplace, or not work altogether with your IDE Version.

AEM Repo Tool​

The official repo tool is also a great way for content syncing, however, it can be a bit tedious to set up and / or integrate into your workflow.

I have not used it in a couple of years and would therefore ask you to have a look at the read me for usage and installation guides.