![\"Teclead](\"https://teclead-ventures.de/wp-content/uploads/2021/11/cropped-TLV-NEW_h_l.png\"\n)
\n![\"Teclead](\"https://teclead.de/assets/custom_img/teclead_black.svg\"\n)
\n\n# AEM Dialog Generator\n\nThis project contains the Custom Dialog Generator for AEM. The Library provides the creating of all necessary AEM Files (XML, HTML) to create an AEM component\nbased on a TypeScript file, which describes the structure of the dialog and the component\n\n## Development\n\nThe library can be run by executing builder.js. It is recommended to implement a script in the package.json, that looks like this\n\n```json\n“build:dialogues”: “node node_modules/@teclead/aem-generator/builder.js”,\n```\n\nBuilding the dialogues can then be executed by running npm run build:dialogues\n\n## API\n\nThe following example shows a \\*.dialog.ts file with the necessary configuration for the creating of an AEM component.\n\n---\n\n### Full Example\n\n```typescript\nimport {\n TouchUIDialogFieldOptions,\n TouchUIDialogTab,\n TouchUIField,\n AEMTouchUIDialog\n} from '@teclead/aem-generator/models';\n\nimport {\n TouchUIXMLGenerator\n} from '@teclead/aem-generator';\n\nconst fields: TouchUIDialogFieldOptions[] = [\n {\n label: 'Mein Textfeld',\n type: TouchUIField.Text,\n databaseName: 'label',\n isRequired: true,\n description: 'Meine Beschreibung für Textfeld...'\n },\n {\n label: 'Mein PathField',\n type: TouchUIField.Path,\n databaseName: 'path',\n description: 'Meine Beschreibung für PathField...',\n },\n ...]\n\n\nconst tabs: TouchUIDialogTab[] = [\n { title: 'Mein erstes Tab', fields },\n {\n title: 'Mein zweites Tab',\n fields: [\n {\n label: 'Mein Touch UI Multifield',\n type: TouchUIField.Multifield,\n description: 'Meine Beschreibung für das Multifield...',\n databaseName: 'multitouchuidatabase',\n multifieldtype: TouchUIField.Text\n }\n ]\n },\n ...]\n\n\nexport const dialog: AEMTouchUIDialog = {\n sightlyTemplate: ReactTemplate, // HTML String\n componentName: 'MyTestComponent',\n componentGroup: 'MyTestGroup',\n componentDescription: 'MyTestComponentDescription',\n componentPath: './src/__tests___/results/touchUI',\n tabs,\n resourceSuperType: 'core/wcm/components/text/v2/text',\n};\n\nnew TouchUIXMLGenerator(dialog).writeFilesToAEM();\n```\n\nThe variable fields: TouchUIDialogFieldOptions[] describes the individual fields of the Dialog. Label, type, databaseName are always required,\nall additional configurations are optional and also based on the selected type. To select the Type the TouchUiField-Object should be include and the wanted field-type needs to be selected in the properties. The hide property is optional and can be used to hide a dialog field inside a specific condition. This property uses a function where return a boolean. For further information check out the individual interfaces for the different field types.\n\nSide-Node: The button offers to execute javaScript code with the onClick listener by adding the javaScriptHandler-Property.\n\n```typescript\nconst fields: TouchUIDialogFieldOptions[] = [{\n label: 'Mein Button',\n type: TouchUIField.Button,\n databaseName: 'btn',\n javaScriptHandler: 'alert(123)',\n hide: ({contentPath: '/path/to/content'}) => contentPath.includes('/to'),\n},\n...\n];\n```\n\nThe variable tabs: TouchUiDialogTab[] describes the required tabs for the dialog, it hold a title and a field property. The field property should hold the value of the fields: TouchUIDialogFieldOptions[] variable. If more than one tab is used, then obviously more than one fields: TouchUIDialogFieldOptions[] variable needs to be configured. The hide property is optional and can be used to hide a tab inside a specific condition. This property uses a function where return a boolean.\n\n```typescript\nconst tabs: TouchUIDialogTab[] = [\n { title: 'Mein erstes Tab', fields, hide: ({contentPath: '/path/to/content'}) => contentPath.includes('/to') },\n ...\n]\n```\n\nThe sightlyTemplate variable is referencing the HTMl-Template that is used to build the AEM component. It is mandatory to create this reference on a component Level.\n\n```typescript\nconst sightlyTemplate = \"\n\n# AEM Dialog Generator\n\nThis project contains the Custom Dialog Generator for AEM. The Library provides the creating of all necessary AEM Files (XML, HTML) to create an AEM component\nbased on a TypeScript file, which describes the structure of the dialog and the component\n\n## Development\n\nThe library can be run by executing builder.js. It is recommended to implement a script in the package.json, that looks like this\n\n```json\n“build:dialogues”: “node node_modules/@teclead/aem-generator/builder.js”,\n```\n\nBuilding the dialogues can then be executed by running npm run build:dialogues\n\n## Touch UI fields\n\nThe default props for the touch ui fields will be define with TouchUIFieldOptionKeysEnum.model.ts\nExpand the default props with the enum\n\n## API\n\nThe following example shows a \\*.dialog.ts file with the necessary configuration for the creating of an AEM component.\n\n---\n\n### Full Example\n\n```typescript\nimport {\n TouchUIDialogFieldOptions,\n TouchUIDialogTab,\n TouchUIField,\n AEMTouchUIDialog\n} from '@teclead/aem-generator/models';\n\nimport {\n TouchUIXMLGenerator\n} from '@teclead/aem-generator';\n\nconst fields: TouchUIDialogFieldOptions[] = [\n {\n label: 'Mein Textfeld',\n type: TouchUIField.Text,\n databaseName: 'label',\n isRequired: true,\n description: 'Meine Beschreibung für Textfeld...'\n },\n {\n label: 'Mein PathField',\n type: TouchUIField.Path,\n databaseName: 'path',\n description: 'Meine Beschreibung für PathField...',\n },\n ...]\n\n\nconst tabs: TouchUIDialogTab[] = [\n { title: 'Mein erstes Tab', fields },\n {\n title: 'Mein zweites Tab',\n fields: [\n {\n label: 'Mein Touch UI Multifield',\n type: TouchUIField.Multifield,\n description: 'Meine Beschreibung für das Multifield...',\n databaseName: 'multitouchuidatabase',\n multifieldtype: TouchUIField.Text\n }\n ]\n },\n ...]\n\n\nexport const dialog: AEMTouchUIDialog = {\n sightlyTemplate: ReactTemplate, // HTML String\n componentName: 'MyTestComponent',\n componentGroup: 'MyTestGroup',\n componentDescription: 'MyTestComponentDescription',\n componentPath: './src/__tests___/results/touchUI',\n tabs,\n resourceSuperType: 'core/wcm/components/text/v2/text',\n};\n\nnew TouchUIXMLGenerator(dialog).writeFilesToAEM();\n```\n\nThe variable fields: TouchUIDialogFieldOptions[] describes the individual fields of the Dialog. Label, type, databaseName are always required,\nall additional configurations are optional and also based on the selected type. To select the Type the TouchUiField-Object should be include and the wanted field-type needs to be selected in the properties. You can add custom additional common keys for own implementations on touch ui dialog field level. The hide property is optional and can be used to hide a dialog field inside a specific condition. This property uses a function where return a boolean. For further information check out the individual interfaces for the different field types.\n\nSide-Node: The button offers to execute javaScript code with the onClick listener by adding the javaScriptHandler-Property.\n\n```typescript\nconst fields: TouchUIDialogFieldOptions[] = [{\n label: 'Mein Button',\n type: TouchUIField.Button,\n 'acs-commons-nested': \"JSON_STORE\",\n databaseName: 'btn',\n javaScriptHandler: 'alert(123)',\n hide: ({contentPath: '/path/to/content'}) => contentPath.includes('/to'),\n},\n...\n];\n```\n\nThe variable tabs: TouchUiDialogTab[] describes the required tabs for the dialog, it hold a title and a field property. The field property should hold the value of the fields: TouchUIDialogFieldOptions[] variable. If more than one tab is used, then obviously more than one fields: TouchUIDialogFieldOptions[] variable needs to be configured. The hide property is optional and can be used to hide a tab inside a specific condition. This property uses a function where return a boolean.\n\n```typescript\nconst tabs: TouchUIDialogTab[] = [\n { title: 'Mein erstes Tab', fields, hide: ({contentPath: '/path/to/content'}) => contentPath.includes('/to') },\n ...\n]\n```\n\nThe sightlyTemplate variable is referencing the HTMl-Template that is used to build the AEM component. It is mandatory to create this reference on a component Level.\n\n```typescript\nconst sightlyTemplate = \"\n \n