:

Teaser text is empty, please configure it in the CQ-dialog!

;
}

render() {
return (

className="full-width">

{this.teaserHeadline}

{this.teaserTextContent}

);
}
}

`

Now, this great React application should be included into an AEM project. The pure React developer does not know anything about AEM and this is ok!
So this developer only has to create a component-configuration file, based on TypeScript and the CQ-Factory Component-Generator classes, to ensure correct value usage.
This example component-configuration file would now create a React enabled AEM component with a Touch UI dialog and the needed TSX files.

File: /aemproject/npm/src/cqfactory-teaser-react.component.ts
`typescript
import {
AEMTouchUIDialog,
TouchUIDialogTab,
TouchUIField,
ComponentGenerator
} from '@cqfactory/component-generator';
import { ReactConfiguration } from '@cqfactory/component-generator/uiconfigs/reactConfiguration';

/ Definition of dialog tabs. /
const tabs: TouchUIDialogTab[] = [
/ Headline und Text tab. /
{
title: 'Headline und Text',
fields: [
{
label: 'Headline',
type: TouchUIField.Text,
databaseName: 'teaserHeadline',
description: 'Teaser Headline.'
},
{
label: 'Text',
type: TouchUIField.RichText,
databaseName: 'teaserText',
description: 'Teaser Text.'
}
]
},
/ Image tab. /
{
title: 'Image Tab',
fields: [
{
label: 'Teaser Image',
type: TouchUIField.Imagefield,
databaseName: 'image',
description: 'Teaser Image.',
isRequired: false
},
{
label: 'Teaser Image Alternative Text',
type: TouchUIField.Text,
databaseName: 'image/alt',
description: 'Textual alternative of the meaning or function of the image, for visually impaired readers.'
},
{
label: 'Image is decorative',
type: TouchUIField.Checkbox,
databaseName: 'image/isDecorative',
uncheckedValue: 'false',
value: '{Boolean}true',
checked:
'${not empty cqDesign.isDecorative ? cqDesign.isDecorative : false}',
description: 'Check if the image should be ignored by assistive technology and therefore does not require an alternative text. This applies to decorative images only.'
},
{
label: 'Mein Hidden Field',
type: TouchUIField.HiddenField,
databaseName: 'image/sling:resourceType',
value: 'componentgenerator/components/content/image'
}
]
}
];

export const exampleTouchUIDialog: AEMTouchUIDialog = {
buildComponent: true / Create the component from scratch /,
buildConfigForAem: true / Create the file .content.xml /,
overwriteAllFilesOnBuild: true / Works only when buildComponent: true, later deactivate it to avoid recreation. /,
componentName: 'CQ-Factory Teaser React',
componentGroup: 'componentgenerator',
componentDescription: 'CQ-Factory Teaser React Component',
noDecoration: false,
isContainer: false,
componentPath: './../ui.apps/src/main/content/jcr_root/apps/componentgenerator/components/content/cqfteaserreact',
title: 'CQ-Factory Teaser React Component',
tag: 'div',
css: 'cqf-teaser-react',
tabs,
analytics: {
values: ['value1', 'value2'],
events: ['event1', 'event2']
},
fullyQualifiedClassName:
'de.cqfactory.componentgenerator.core.models.TeaserReactComponentModel', / Only needed for manipulating JCR values /
resourceSuperType: ''
};


let reactConfiguration = new ReactConfiguration(
'cqf-teaser-react-app',
'CqfTeaserReactComponent',
'./src/components/cqfteaserreactcomponent'
);

/**
* Special configuration for React only.
*/
new ComponentGenerator(
exampleTouchUIDialog,
reactConfiguration
).writeFilesToAEM();

`

Running node node_modules/@cqfactory/component-generator/builder.js would search for all files containing \.component.ts* in their filename:
!TypeScript REPL

When this task ended successfully, there will be a complete new folder /aemproject/ui.apps/src/main/content/jcr_root/apps/componentgenerator/components/content/cqfteaserreact created with all files for this AEM-component.
No changes are needed. Just leave it as it is (but you can!):
!TypeScript REPL

There is also a newly created React app folder /aemproject/npm/src/components/cqfteaserreactcomponent, containing the React component index.tsx with our provided magic AEM React-Loading mechanism:
!TypeScript REPL

The Component-Generator also created a basic react component (CqfTeaserReactComponent.tsx), which gives the developer access to all CQ-dialog properties via this.props.cqComponent:
!TypeScript REPL

After deploying this component to an AEM instance, it will work with its basic functionality:
!TypeScript REPL

Opening the CQ-dialog would show the JCR properties fields, which were previously defined in the file /aemproject/npm/src/cqfactory-teaser-react.component:
!TypeScript REPL

After saving the dialog, in this view it shows only what the JCR is containing - inside the React component:
!TypeScript REPL

This magic is done via our React-Loader which let React access the JCR properties (seen above in file CqfTeaserReactComponent.tsx):
!TypeScript REPL

Now that we have the basic component structure with a dialog, it is time to move the real React code inside the AEM project. All the developer has to do, is to copy & paste the
content of the React component TSX-file into the created file CqfTeaserReactComponent.tsx:
!TypeScript REPL

Build with WebPack and deploy to AEM to see the result:
!TypeScript REPL



Modify a created component

`typescript
buildComponent: false
``

Need Support?

Visit: www.cq-factory.de

Email: info@cq-factory.de