@sap-ux/fe-fpm-writer 0.42.19 → 0.42.20

package/dist/building-block/index.js

@@ -73,10 +73,9 @@ const PLACEHOLDERS = {
 async function generateBuildingBlock(basePath, config, fs) {
     const { viewOrFragmentPath, aggregationPath, buildingBlockData, allowAutoAddDependencyLib = true } = config;
     // Validate the base and view paths
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    fs ??= (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     await (0, validate_1.validateBasePath)(basePath, fs, []);
+    const fnGenerateId = config.buildingBlockData.generateId ?? (await (0, file_1.createIdGenerator)(basePath, fs));
     if (!fs.exists((0, node_path_1.join)(basePath, viewOrFragmentPath))) {
         throw new Error(`Invalid view path ${viewOrFragmentPath}.`);
     }
@@ -88,7 +87,7 @@ async function generateBuildingBlock(basePath, config, fs) {
         hasAggregation,
         aggregationNamespace
     };
-    const templateDocument = getTemplateDocument(processedBuildingBlockData, xmlDocument, fs, manifest, templateConfig);
+    const templateDocument = getTemplateDocument({ ...processedBuildingBlockData, generateId: fnGenerateId }, xmlDocument, fs, manifest, templateConfig);
     if (buildingBlockData.buildingBlockType === types_1.BuildingBlockType.RichTextEditor ||
         buildingBlockData.buildingBlockType === types_1.BuildingBlockType.RichTextEditorButtonGroups) {
         const minUI5Version = manifest ? (0, semver_1.coerce)((0, project_access_1.getMinimumUI5Version)(manifest)) : undefined;
@@ -235,11 +234,18 @@ function getTemplateContent(buildingBlockData, viewDocument, manifest, fs, usePl
     if (!buildingBlockData.id) {
         buildingBlockData.id = PLACEHOLDERS.id;
     }
-    return (0, ejs_1.render)(fs.read(templateFilePath), {
+    const configKey = (0, file_1.getRelativeTemplateComponentPath)(templateFilePath);
+    const config = file_1.CONFIG[configKey];
+    let context = {
         macrosNamespace: viewDocument ? (0, xml_1.getOrAddNamespace)(viewDocument, 'sap.fe.macros', 'macros') : 'macros',
         data: buildingBlockData,
         config: templateConfig
-    }, {});
+    };
+    if (config?.getData) {
+        const additionalContext = config.getData(buildingBlockData.generateId, buildingBlockData);
+        context = { ...context, ...additionalContext };
+    }
+    return (0, ejs_1.render)(fs.read(templateFilePath), context, {});
 }
 /**
  * Method returns the manifest content for the required dependency library.

package/dist/building-block/processor.js

@@ -42,6 +42,7 @@ const templates_1 = require("../templates");
 const event_handler_1 = require("../common/event-handler");
 const defaults_1 = require("../common/defaults");
 const xml_1 = require("./prompts/utils/xml");
+const file_1 = require("../common/file");
 /**
  * Button group configurations used for validation and providing available button groups.
  */
@@ -124,7 +125,7 @@ function processCustomColumn(buildingBlockData, context) {
         });
         columnConfig.eventHandler = processedEventHandler;
     }
-    columnConfig.content = (0, defaults_1.getDefaultFragmentContent)('Sample Text', processedEventHandler);
+    columnConfig.content = (0, defaults_1.getDefaultFragmentContent)('Sample Text', buildingBlockData.generateId, processedEventHandler);
     if (viewPath && !fs.exists(viewPath)) {
         fs.copyTpl((0, templates_1.getTemplatePath)(config.templateFile), viewPath, columnConfig);
     }
@@ -153,7 +154,7 @@ function processCustomFilterField(buildingBlockData, context) {
         throw new Error('EmbeddedFragment is required for CustomFilterField');
     }
     const config = getBuildingBlockConfig(types_1.BuildingBlockType.CustomFilterField);
-    const filterConfig = {
+    let filterConfig = {
         label: buildingBlockData.label,
         property: buildingBlockData.property,
         required: buildingBlockData.required ?? false,
@@ -171,6 +172,12 @@ function processCustomFilterField(buildingBlockData, context) {
             templatePath: 'filter/Controller'
         });
     }
+    const configKey = config.templateFile;
+    const additionnalDataConfig = file_1.CONFIG[configKey];
+    if (additionnalDataConfig?.getData) {
+        const additionalContext = additionnalDataConfig.getData(buildingBlockData.generateId, buildingBlockData);
+        filterConfig = { ...filterConfig, ...additionalContext };
+    }
     if (viewPath && !fs.exists(viewPath)) {
         fs.copyTpl((0, templates_1.getTemplatePath)(config.templateFile), viewPath, filterConfig);
     }

package/dist/building-block/prompts/utils/questions.js

@@ -15,11 +15,11 @@ exports.getBuildingBlockIdPrompt = getBuildingBlockIdPrompt;
 const node_path_1 = require("node:path");
 const service_1 = require("./service");
 const project_access_1 = require("@sap-ux/project-access");
-const file_1 = require("@sap-ux/project-access/dist/file");
 const types_1 = require("../../types");
 const xml_1 = require("./xml");
 const i18n_1 = require("../../../i18n");
 const prompt_helpers_1 = require("./prompt-helpers");
+const file_1 = require("../../../common/file");
 /* eslint-disable @typescript-eslint/no-floating-promises */
 (0, i18n_1.initI18n)();
 const t = (0, i18n_1.translate)(i18n_1.i18nNamespaces.buildingBlock, 'prompts.common.');
@@ -101,11 +101,8 @@ function getViewOrFragmentPathPrompt(context, validationErrorMessage, properties
         name: 'viewOrFragmentPath',
         choices: project
             ? async () => {
-                const files = await (0, file_1.findFilesByExtension)('.xml', appPath, ['.git', 'node_modules', 'dist', 'annotations', 'localService'], fs);
-                const lookupFiles = ['.fragment.xml', '.view.xml'];
-                return transformChoices(files
-                    .filter((fileName) => lookupFiles.some((lookupFile) => fileName.endsWith(lookupFile)))
-                    .map((file) => (0, node_path_1.relative)(appPath, file)));
+                const fragmentAndViewFiles = await (0, file_1.getFragmentAndViewFiles)(appPath, fs);
+                return transformChoices(fragmentAndViewFiles.map((file) => (0, node_path_1.relative)(appPath, file)));
             }
             : [],
         validate: (value) => (!project || value ? true : validationErrorMessage),

package/dist/building-block/types.d.ts

@@ -1,3 +1,4 @@
+import type { IdGeneratorFunction } from '../common/file';
 import type { CustomElement, CustomFragment, EventHandler, FragmentContentData, Position } from '../common/types';
 /**
  * Building block type.
@@ -63,6 +64,13 @@ export interface BuildingBlock {
      * Defines the relative path of the property in the metamodel, based on the current contextPath.
      */
     metaPath?: string | BuildingBlockMetaPath;
+    /**
+     * Generates a unique ID for the building block based on the provided base ID.
+     *
+     * @param baseId - The base ID to generate from, usually related to the building block type.
+     * @returns A unique ID string.
+     */
+    generateId: IdGeneratorFunction;
 }
 /**
  * Represents a Chart building block control.

package/dist/column/index.js

@@ -38,9 +38,10 @@ function getManifestRoot(ui5Version) {
  * @param {CustomTableColumn} data - a custom column configuration object
  * @param {string} manifestPath - path to the project's manifest.json
  * @param {Manifest} manifest - the application manifest
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @returns enhanced configuration
  */
-function enhanceConfig(fs, data, manifestPath, manifest) {
+function enhanceConfig(fs, data, manifestPath, manifest, generateId) {
     // clone input and set defaults
     const config = { ...data };
     (0, defaults_1.setCommonDefaults)(config, manifestPath, manifest);
@@ -55,7 +56,7 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
     const content = config.properties && config.properties.length > 0
         ? `{=%{${config.properties.join("} + ' ' + %{")}}}`
         : 'Sample Text';
-    config.content = config.control || (0, defaults_1.getDefaultFragmentContent)(content, config.eventHandler);
+    config.content = config.control || (0, defaults_1.getDefaultFragmentContent)(content, generateId, config.eventHandler);
     return config;
 }
 /**
@@ -68,17 +69,16 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
  */
 async function generateCustomColumn(basePath, customColumn, fs) {
     (0, validate_1.validateVersion)(customColumn.minUI5Version);
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    fs ??= (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     await (0, validate_1.validateBasePath)(basePath, fs);
+    const fnGenerateId = await (0, file_1.createIdGenerator)(basePath, fs);
     const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fs);
     // merge with defaults
-    const completeColumn = enhanceConfig(fs, customColumn, manifestPath, manifest);
+    const completeColumn = enhanceConfig(fs, customColumn, manifestPath, manifest, fnGenerateId);
     // add fragment
     const viewPath = (0, node_path_1.join)(completeColumn.path, `${completeColumn.fragmentFile ?? completeColumn.name}.fragment.xml`);
     if (completeColumn.control || !fs.exists(viewPath)) {
-        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/Fragment.xml'), viewPath, completeColumn);
+        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/Fragment.xml'), viewPath, completeColumn, fnGenerateId);
     }
     // enhance manifest with column definition
     const manifestRoot = getManifestRoot(customColumn.minUI5Version);

package/dist/common/defaults.d.ts

@@ -1,3 +1,4 @@
+import type { IdGeneratorFunction } from './file';
 import type { CustomElement, FragmentContentData, InternalCustomElement, Manifest } from './types';
 export declare const FCL_ROUTER = "sap.f.routing.Router";
 /**
@@ -13,6 +14,7 @@ export declare function setCommonDefaults<T extends CustomElement & Partial<Inte
  * Method to generate default content data for xml fragment.
  *
  * @param {string} text - text of button or label
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @param {string} [eventHandler] - event handler path
  *      if value is passed then "Button" control with 'press' event would be generated
  *      if value is not passed then "Text" control would be generated
@@ -21,11 +23,12 @@ export declare function setCommonDefaults<T extends CustomElement & Partial<Inte
  * @param {boolean} includeRequireInContent - controls if `core:require` attribute should be included to fragment content
  * @returns default content for fragment
  */
-export declare function getDefaultFragmentContentData(text: string, eventHandler?: string, isController?: boolean, prefferInput?: boolean, includeRequireInContent?: boolean): FragmentContentData;
+export declare function getDefaultFragmentContentData(text: string, generateId: IdGeneratorFunction, eventHandler?: string, isController?: boolean, prefferInput?: boolean, includeRequireInContent?: boolean): FragmentContentData;
 /**
  * Method to generate default content for xml fragment.
  *
  * @param {string} text - text of button or label
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @param {string} [eventHandler] - event handler path
  *      if value is passed then "Button" control with 'press' event would be generated
  *      if value is not passed then "Text" control would be generated
@@ -33,5 +36,5 @@ export declare function getDefaultFragmentContentData(text: string, eventHandler
  * @param {boolean} prefferInput - controls if `input` element should be added to default fragment content
  * @returns default content for fragment
  */
-export declare function getDefaultFragmentContent(text: string, eventHandler?: string, isController?: boolean, prefferInput?: boolean): string;
+export declare function getDefaultFragmentContent(text: string, generateId: IdGeneratorFunction, eventHandler?: string, isController?: boolean, prefferInput?: boolean): string;
 //# sourceMappingURL=defaults.d.ts.map

package/dist/common/defaults.js

@@ -26,6 +26,7 @@ function setCommonDefaults(config, manifestPath, manifest) {
  * Method to generate default content data for xml fragment.
  *
  * @param {string} text - text of button or label
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @param {string} [eventHandler] - event handler path
  *      if value is passed then "Button" control with 'press' event would be generated
  *      if value is not passed then "Text" control would be generated
@@ -34,7 +35,7 @@ function setCommonDefaults(config, manifestPath, manifest) {
  * @param {boolean} includeRequireInContent - controls if `core:require` attribute should be included to fragment content
  * @returns default content for fragment
  */
-function getDefaultFragmentContentData(text, eventHandler, isController = false, prefferInput = false, includeRequireInContent = true) {
+function getDefaultFragmentContentData(text, generateId, eventHandler, isController = false, prefferInput = false, includeRequireInContent = true) {
     let content;
     let requireAttribute;
     if (eventHandler) {
@@ -49,19 +50,23 @@ function getDefaultFragmentContentData(text, eventHandler, isController = false,
         if (prefferInput) {
             attributes.push(`value="${text}"`);
             attributes.push(`change="handler.${method}"`);
-            content = `<Input ${attributes.join(' ')} />`;
+            const id = generateId('Input');
+            content = `<Input id="${id}" ${attributes.join(' ')} />`;
         }
         else {
             attributes.push(`text="${text}"`);
             attributes.push(`press="handler.${method}"`);
-            content = `<Button ${attributes.join(' ')} />`;
+            const id = generateId('Button');
+            content = `<Button id="${id}" ${attributes.join(' ')} />`;
         }
     }
     else if (prefferInput) {
-        content = `<Input value="${text}" />`;
+        const id = generateId('Input');
+        content = `<Input id="${id}" value="${text}" />`;
     }
     else {
-        content = `<Text text="${text}" />`;
+        const id = generateId('Text');
+        content = `<Text id="${id}" text="${text}" />`;
     }
     return {
         content,
@@ -72,6 +77,7 @@ function getDefaultFragmentContentData(text, eventHandler, isController = false,
  * Method to generate default content for xml fragment.
  *
  * @param {string} text - text of button or label
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @param {string} [eventHandler] - event handler path
  *      if value is passed then "Button" control with 'press' event would be generated
  *      if value is not passed then "Text" control would be generated
@@ -79,8 +85,8 @@ function getDefaultFragmentContentData(text, eventHandler, isController = false,
  * @param {boolean} prefferInput - controls if `input` element should be added to default fragment content
  * @returns default content for fragment
  */
-function getDefaultFragmentContent(text, eventHandler, isController = false, prefferInput = false) {
-    const contentData = getDefaultFragmentContentData(text, eventHandler, isController, prefferInput);
+function getDefaultFragmentContent(text, generateId, eventHandler, isController = false, prefferInput = false) {
+    const contentData = getDefaultFragmentContentData(text, generateId, eventHandler, isController, prefferInput);
     return contentData.content;
 }
 //# sourceMappingURL=defaults.js.map

package/dist/common/file.d.ts

@@ -1,5 +1,76 @@
 import type { CopyOptions, Editor } from 'mem-fs-editor';
 import type { TabInfo } from '../common/types';
+interface ButtonGroup {
+    name: string;
+    buttons: string[];
+    visible?: boolean;
+    priority?: number;
+    customToolbarPriority?: number;
+    row?: number;
+    id?: string;
+}
+export type IdGeneratorFunction = (baseId: string, validatedIds?: string[]) => string;
+interface TemplateContext {
+    buttonGroups?: ButtonGroup[];
+    name?: string;
+    data?: {
+        buttonGroups?: ButtonGroup[];
+    };
+}
+export declare const CONFIG: {
+    "page/custom/1.94/ext/View.xml": {
+        getData: (generateId: IdGeneratorFunction, context?: TemplateContext) => {
+            ids: Record<string, string>;
+        };
+    };
+    "page/custom/1.84/ext/View.xml": {
+        getData: (generateId: IdGeneratorFunction, context?: TemplateContext) => {
+            ids: Record<string, string>;
+        };
+    };
+    "common/FragmentWithForm.xml": {
+        getData: (generateId: IdGeneratorFunction) => {
+            ids: Record<string, string>;
+        };
+    };
+    "common/FragmentWithVBox.xml": {
+        getData: (generateId: IdGeneratorFunction) => {
+            ids: Record<string, string>;
+        };
+    };
+    "view/ext/CustomViewWithTable.xml": {
+        getData: (generateId: IdGeneratorFunction) => {
+            ids: Record<string, string>;
+        };
+    };
+    "filter/fragment.xml": {
+        getData: (generateId: IdGeneratorFunction) => {
+            ids: Record<string, string>;
+        };
+    };
+    "building-block/rich-text-editor-button-groups/View.xml": {
+        getData: (generateId: IdGeneratorFunction, context?: TemplateContext) => {
+            ids: Record<string, string>;
+        };
+    };
+};
+/**
+ * Retrieves all view and fragment files in the application.
+ *
+ * @param appPath - The root path of the application
+ * @param fs - The file system object for reading files
+ * @returns A list of view and fragment files
+ */
+export declare function getFragmentAndViewFiles(appPath: string, fs: Editor): Promise<string[]>;
+/**
+ * Creates an ID generator function for a given base path and editor.
+ * The generator ensures unique IDs across all fragment and view files in the project.
+ *
+ * @param basePath - Base path of the project
+ * @param fsEditor - mem-fs-editor instance
+ * @returns A function that generates unique IDs based on a base ID string
+ */
+export declare function createIdGenerator(basePath: string | undefined, fsEditor: Editor): Promise<(baseId: string) => string>;
 export declare const COPY_TEMPLATE_OPTIONS: CopyOptions & {
     noGlob: boolean;
 };
@@ -44,7 +115,16 @@ export declare function extendJSON(fs: Editor, params: ExtendJsonParams): void;
  * @param from - Source path of the template file or directory.
  * @param to - Destination path where the rendered files will be written.
  * @param context - Optional template context used for interpolation.
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
+ */
+export declare function copyTpl(fs: Editor, from: string, to: string, context?: object, generateId?: (baseId: string) => string): void;
+/**
+ * Extracts the relative path from the templates directory.
+ * Works cross-platform by normalizing path separators.
+ *
+ * @param absolutePath - Absolute path to a template file or directory
+ * @returns Relative path from templates directory with forward slashes, or original path if 'templates' not found
  */
-export declare function copyTpl(fs: Editor, from: string, to: string, context?: object): void;
+export declare function getRelativeTemplateComponentPath(absolutePath: string): string;
 export {};
 //# sourceMappingURL=file.d.ts.map

package/dist/common/file.js

@@ -1,12 +1,151 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COPY_TEMPLATE_OPTIONS = void 0;
+exports.COPY_TEMPLATE_OPTIONS = exports.CONFIG = void 0;
+exports.getFragmentAndViewFiles = getFragmentAndViewFiles;
+exports.createIdGenerator = createIdGenerator;
 exports.detectTabSpacing = detectTabSpacing;
 exports.getJsonSpace = getJsonSpace;
 exports.extendJSON = extendJSON;
 exports.copyTpl = copyTpl;
+exports.getRelativeTemplateComponentPath = getRelativeTemplateComponentPath;
+const node_path_1 = require("node:path");
+const file_1 = require("@sap-ux/project-access/dist/file");
+const utils_1 = require("../building-block/prompts/utils");
 const CHAR_SPACE = ' ';
 const CHAR_TAB = '\t';
+exports.CONFIG = {
+    ['page/custom/1.94/ext/View.xml']: {
+        getData: (generateId, context) => {
+            return {
+                ids: {
+                    page: generateId(context?.name ?? 'Page')
+                }
+            };
+        }
+    },
+    ['page/custom/1.84/ext/View.xml']: {
+        getData: (generateId, context) => {
+            return {
+                ids: {
+                    page: generateId(context?.name ?? 'Page')
+                }
+            };
+        }
+    },
+    ['common/FragmentWithForm.xml']: {
+        getData: (generateId) => {
+            return {
+                ids: {
+                    formElement: generateId('FormElement')
+                }
+            };
+        }
+    },
+    ['common/FragmentWithVBox.xml']: {
+        getData: (generateId) => {
+            return {
+                ids: {
+                    vbox: generateId('VBox')
+                }
+            };
+        }
+    },
+    ['view/ext/CustomViewWithTable.xml']: {
+        getData: (generateId) => {
+            return {
+                ids: {
+                    table: generateId('Table')
+                }
+            };
+        }
+    },
+    ['filter/fragment.xml']: {
+        getData: (generateId) => {
+            const item1 = generateId('Item');
+            const item2 = generateId('Item', [item1]);
+            const item3 = generateId('Item', [item1, item2]);
+            return {
+                ids: {
+                    comboBox: generateId('ComboBox'),
+                    item1,
+                    item2,
+                    item3
+                }
+            };
+        }
+    },
+    ['building-block/rich-text-editor-button-groups/View.xml']: {
+        getData: (generateId, context) => {
+            // Get buttonGroups from context
+            const buttonGroups = context?.buttonGroups || context?.data?.buttonGroups || [];
+            // Generate IDs for each button group and store in ids object
+            const ids = {};
+            const validatedIds = [];
+            buttonGroups.forEach((group, index) => {
+                const id = generateId(`${'ButtonGroup'}`, validatedIds);
+                ids[index] = group.id ?? id;
+                if (!group.id) {
+                    validatedIds.push(id);
+                }
+            });
+            return { ids };
+        }
+    }
+};
+/**
+ * Generates a unique element ID that is not already used in any view or fragment file.
+ * Uses an incremental counter for predictable, readable IDs.
+ *
+ * @param fs - The file system object for reading files
+ * @param baseId - The base name for the ID (e.g., 'filterBar', 'chart')
+ * @param filteredFiles - The list of files to check for ID availability
+ * @param validatedIds - A list of IDs that have already been validated in the current session to avoid duplicates
+ * @returns A unique ID that is available across all view and fragment files
+ */
+function generateUniqueElementId(fs, baseId, filteredFiles, validatedIds = []) {
+    const maxAttempts = 1000;
+    if (filteredFiles.every((file) => (0, utils_1.isElementIdAvailable)(fs, file, baseId)) && !validatedIds.includes(baseId)) {
+        return baseId;
+    }
+    for (let counter = 1; counter < maxAttempts; counter++) {
+        const candidateId = `${baseId}${counter}`;
+        if (filteredFiles.every((file) => (0, utils_1.isElementIdAvailable)(fs, file, candidateId)) &&
+            !validatedIds.includes(candidateId)) {
+            return candidateId;
+        }
+    }
+    // If we couldn't find an available ID after maxAttempts
+    throw new Error(`Failed to generate unique ID for base '${baseId}' after ${maxAttempts} attempts`);
+}
+/**
+ * Retrieves all view and fragment files in the application.
+ *
+ * @param appPath - The root path of the application
+ * @param fs - The file system object for reading files
+ * @returns A list of view and fragment files
+ */
+async function getFragmentAndViewFiles(appPath, fs) {
+    const files = await (0, file_1.findFilesByExtension)('.xml', appPath, ['.git', 'node_modules', 'dist', 'annotations', 'localService'], fs);
+    const lookupFiles = ['.fragment.xml', '.view.xml'];
+    return files.filter((fileName) => lookupFiles.some((lookupFile) => fileName.endsWith(lookupFile)));
+}
+/**
+ * Creates an ID generator function for a given base path and editor.
+ * The generator ensures unique IDs across all fragment and view files in the project.
+ *
+ * @param basePath - Base path of the project
+ * @param fsEditor - mem-fs-editor instance
+ * @returns A function that generates unique IDs based on a base ID string
+ */
+async function createIdGenerator(basePath, fsEditor) {
+    let files = [];
+    if (basePath) {
+        files = await getFragmentAndViewFiles(basePath, fsEditor);
+    }
+    return (baseId, validatedIds = []) => {
+        return generateUniqueElementId(fsEditor, baseId, files, validatedIds);
+    };
+}
 // `noGlob` is supported in `mem-fs-editor` v9,
 // but is missing from `@types/mem-fs-editor` (no v9 typings), so we extend the type here.
 exports.COPY_TEMPLATE_OPTIONS = {
@@ -102,8 +241,34 @@ function extendJSON(fs, params) {
  * @param from - Source path of the template file or directory.
  * @param to - Destination path where the rendered files will be written.
  * @param context - Optional template context used for interpolation.
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  */
-function copyTpl(fs, from, to, context) {
+function copyTpl(fs, from, to, context, generateId) {
+    const configKey = getRelativeTemplateComponentPath(from);
+    const config = exports.CONFIG[configKey];
+    if (generateId && config?.getData) {
+        const additionalContext = config.getData(generateId, context);
+        context = { ...context, ...additionalContext };
+    }
     fs.copyTpl(from, to, context, undefined, exports.COPY_TEMPLATE_OPTIONS);
 }
+/**
+ * Extracts the relative path from the templates directory.
+ * Works cross-platform by normalizing path separators.
+ *
+ * @param absolutePath - Absolute path to a template file or directory
+ * @returns Relative path from templates directory with forward slashes, or original path if 'templates' not found
+ */
+function getRelativeTemplateComponentPath(absolutePath) {
+    const normalizedPath = (0, node_path_1.normalize)(absolutePath);
+    const templatesMarker = `${node_path_1.sep}templates${node_path_1.sep}`;
+    const templatesIndex = normalizedPath.indexOf(templatesMarker);
+    if (templatesIndex === -1) {
+        return absolutePath;
+    }
+    // Extract everything after '/templates/' or '\\templates\\'
+    const relativePath = normalizedPath.substring(templatesIndex + templatesMarker.length);
+    // Normalize to forward slashes for consistency
+    return relativePath.split(node_path_1.sep).join('/');
+}
 //# sourceMappingURL=file.js.map

package/dist/field/index.js

@@ -18,9 +18,10 @@ const utils_1 = require("../common/utils");
  * @param {CustomField} data - a custom field configuration object
  * @param {string} manifestPath - path to the project's manifest.json
  * @param {Manifest} manifest - the application manifest
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @returns enhanced configuration
  */
-function enhanceConfig(fs, data, manifestPath, manifest) {
+function enhanceConfig(fs, data, manifestPath, manifest, generateId) {
     // clone input and set defaults
     const config = { ...data };
     (0, defaults_1.setCommonDefaults)(config, manifestPath, manifest);
@@ -36,7 +37,7 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
         config.content = config.control;
     }
     else {
-        Object.assign(config, (0, defaults_1.getDefaultFragmentContentData)(config.name, config.eventHandler));
+        Object.assign(config, (0, defaults_1.getDefaultFragmentContentData)(config.name, generateId, config.eventHandler));
     }
     return config;
 }
@@ -50,17 +51,16 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
  */
 async function generateCustomField(basePath, customField, fs) {
     (0, validate_1.validateVersion)(customField.minUI5Version);
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    fs ??= (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     await (0, validate_1.validateBasePath)(basePath, fs);
+    const generateId = await (0, file_1.createIdGenerator)(basePath, fs);
     const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fs);
     // merge with defaults
-    const completeField = enhanceConfig(fs, customField, manifestPath, manifest);
+    const completeField = enhanceConfig(fs, customField, manifestPath, manifest, generateId);
     // add fragment
     const viewPath = (0, node_path_1.join)(completeField.path, `${completeField.fragmentFile ?? completeField.name}.fragment.xml`);
     if (!fs.exists(viewPath)) {
-        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/Fragment.xml'), viewPath, completeField);
+        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/Fragment.xml'), viewPath, completeField, generateId);
     }
     // enhance manifest with field definition
     const templatePath = (0, templates_1.getTemplatePath)('/field/manifest.json');

package/dist/filter/index.js

@@ -48,6 +48,7 @@ async function generateCustomFilter(basePath, filterConfig, fs) {
         fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     }
     await (0, validate_1.validateBasePath)(basePath, fs);
+    const fnGenerateId = await (0, file_1.createIdGenerator)(basePath, fs);
     const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fs);
     const config = enhanceConfig(filterConfig, manifestPath, manifest);
     // Apply event handler
@@ -65,7 +66,7 @@ async function generateCustomFilter(basePath, filterConfig, fs) {
     // create a fragment file
     const fragmentPath = (0, node_path_1.join)(config.path, `${config.fragmentFile}.fragment.xml`);
     if (!fs.exists(fragmentPath)) {
-        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)(`filter/fragment.xml`), fragmentPath, config);
+        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)(`filter/fragment.xml`), fragmentPath, config, fnGenerateId);
     }
     return fs;
 }

package/dist/page/custom.js

@@ -17,7 +17,7 @@ const utils_1 = require("../common/utils");
 const file_1 = require("../common/file");
 const building_block_1 = require("../building-block");
 const types_2 = require("../building-block/types");
-const xml_1 = require("../building-block/prompts/utils/xml");
+const utils_2 = require("../building-block/prompts/utils");
 const i18n_1 = require("../i18n");
 /**
  * Enhances the provided custom page configuration with default data.
@@ -80,23 +80,26 @@ function getTemplateRoot(ui5Version) {
  * @param data.minUI5Version
  * @param {string} viewPath - The path to the view XML file.
  * @param {Editor} fs - The memfs editor instance.
+ * @param {(baseId: string) => Promise<string>} generateId - Function to generate unique IDs for the building block elements.
  * @param {Logger} [log] - Logger instance.
  * @returns {Promise<void>} Resolves when the building block is handled or skipped due to version constraints.
  */
-async function handlePageBuildingBlock(basePath, data, viewPath, fs, log) {
+async function handlePageBuildingBlock(basePath, data, viewPath, fs, generateId, log) {
     const minVersion = (0, semver_1.coerce)(data.minUI5Version);
     const t = (0, i18n_1.translate)(i18n_1.i18nNamespaces.buildingBlock, 'pageBuildingBlock.');
     if (minVersion && (0, semver_1.lt)(minVersion.version, '1.136.0')) {
         log?.warn(t('minUi5VersionRequirement', { minUI5Version: data.minUI5Version }));
         return;
     }
+    const pageId = await generateId('Page');
     await (0, building_block_1.generateBuildingBlock)(basePath, {
         viewOrFragmentPath: (0, node_path_1.relative)(basePath, viewPath),
-        aggregationPath: (0, xml_1.augmentXpathWithLocalNames)(`/mvc:View/Page`),
+        aggregationPath: (0, utils_2.augmentXpathWithLocalNames)(`/mvc:View/Page`),
         replace: true,
         buildingBlockData: {
-            id: 'Page',
+            id: pageId,
             buildingBlockType: types_2.BuildingBlockType.Page,
+            generateId,
             title: data.pageBuildingBlockTitle
         }
     }, fs);
@@ -111,12 +114,11 @@ async function handlePageBuildingBlock(basePath, data, viewPath, fs, log) {
  * @returns {Promise<Editor>} the updated memfs editor instance
  */
 async function generate(basePath, data, fs, log) {
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    fs ??= (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     (0, validate_1.validateVersion)(data.minUI5Version);
     await (0, common_1.validatePageConfig)(basePath, data, fs, []);
     const manifestPath = await (0, utils_1.getManifestPath)(basePath, fs);
+    const fnGenerateId = await (0, file_1.createIdGenerator)(basePath, fs);
     const config = enhanceData(data, manifestPath, fs);
     // merge content into existing files
     const root = getTemplateRoot(data.minUI5Version);
@@ -130,7 +132,7 @@ async function generate(basePath, data, fs, log) {
     // add extension content
     const viewPath = (0, node_path_1.join)(config.path, `${config.name}.view.xml`);
     if (!fs.exists(viewPath)) {
-        (0, file_1.copyTpl)(fs, (0, node_path_1.join)(root, 'ext/View.xml'), viewPath, config);
+        (0, file_1.copyTpl)(fs, (0, node_path_1.join)(root, 'ext/View.xml'), viewPath, config, fnGenerateId);
         // i18n.properties
         const manifest = fs.readJSON(manifestPath);
         const defaultI18nPath = 'i18n/i18n.properties';
@@ -145,7 +147,7 @@ async function generate(basePath, data, fs, log) {
         }
     }
     if (data.pageBuildingBlockTitle) {
-        await handlePageBuildingBlock(basePath, { pageBuildingBlockTitle: data.pageBuildingBlockTitle, minUI5Version: data.minUI5Version }, viewPath, fs, log);
+        await handlePageBuildingBlock(basePath, { pageBuildingBlockTitle: data.pageBuildingBlockTitle, minUI5Version: data.minUI5Version }, viewPath, fs, fnGenerateId, log);
     }
     const ext = data.typescript ? 'ts' : 'js';
     const controllerPath = (0, node_path_1.join)(config.path, `${config.name}.controller.${ext}`);

package/dist/prompts/api.d.ts

@@ -10,7 +10,7 @@ export declare class PromptsAPI {
     context: PromptContext;
     private cache;
     /**
-     * Contructore of prompt API.
+     * Constructor of prompt API.
      *
      * @param fs the file system object for reading files
      * @param project

package/dist/prompts/api.js

@@ -20,7 +20,7 @@ class PromptsAPI {
     // Cached questions
     cache = {};
     /**
-     * Contructore of prompt API.
+     * Constructor of prompt API.
      *
      * @param fs the file system object for reading files
      * @param project
@@ -46,9 +46,7 @@ class PromptsAPI {
      * @returns Instance of prompt api.
      */
     static async init(projectPath, appId, fs, options) {
-        if (!fs) {
-            fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-        }
+        fs = fs ?? (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
         await (0, i18n_1.initI18n)();
         const project = projectPath ? await (0, project_access_1.getProject)(projectPath) : undefined;
         return new PromptsAPI(fs, project, appId, options);
@@ -147,7 +145,8 @@ class PromptsAPI {
         const generator = map_1.PromptsGeneratorsMap.hasOwnProperty(config.type)
             ? map_1.PromptsGeneratorsMap[config.type]
             : undefined;
-        return generator?.(this.context.appPath, config.answers, this.context.fs) ?? this.context.fs;
+        config.answers.buildingBlockData = { ...config.answers.buildingBlockData };
+        return generator?.(this.context.appPath, { ...config.answers }, this.context.fs) ?? this.context.fs;
     }
     /**
      * Method returns code snippet for passed answers and prompt type.

package/dist/section/index.js

@@ -48,9 +48,10 @@ function getAdditionalDependencies(ui5Version) {
  * @param {CustomSection} data - a custom section configuration object
  * @param {string} manifestPath - path to the project's manifest.json
  * @param {Manifest} manifest - the application manifest
+ * @param {(baseId: string) => string} generateId - Function to generate unique IDs for the building block elements.
  * @returns enhanced configuration
  */
-function enhanceConfig(fs, data, manifestPath, manifest) {
+function enhanceConfig(fs, data, manifestPath, manifest, generateId) {
     const config = { ...data };
     (0, defaults_1.setCommonDefaults)(config, manifestPath, manifest);
     // Apply event handler
@@ -65,7 +66,7 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
         config.content = config.control;
     }
     else {
-        Object.assign(config, (0, defaults_1.getDefaultFragmentContentData)(config.name, config.eventHandler, undefined, undefined, false));
+        Object.assign(config, (0, defaults_1.getDefaultFragmentContentData)(config.name, generateId, config.eventHandler, undefined, undefined, false));
     }
     // Additional dependencies to include into 'Fragment.xml'
     config.dependencies = getAdditionalDependencies(config.minUI5Version);
@@ -82,13 +83,12 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
  */
 async function generate(basePath, customSection, manifestTemplateRoot, fs) {
     (0, validate_1.validateVersion)(customSection.minUI5Version);
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    fs ??= (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     await (0, validate_1.validateBasePath)(basePath, fs);
+    const fnGenerateId = await (0, file_1.createIdGenerator)(basePath, fs);
     const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fs);
     // merge with defaults
-    const completeSection = enhanceConfig(fs, customSection, manifestPath, manifest);
+    const completeSection = enhanceConfig(fs, customSection, manifestPath, manifest, fnGenerateId);
     // enhance manifest with section definition
     const filledTemplate = (0, ejs_1.render)(fs.read((0, node_path_1.join)(manifestTemplateRoot, `manifest.json`)), completeSection, {});
     (0, file_1.extendJSON)(fs, {
@@ -99,7 +99,7 @@ async function generate(basePath, customSection, manifestTemplateRoot, fs) {
     // add fragment
     const viewPath = (0, node_path_1.join)(completeSection.path, `${completeSection.fragmentFile ?? completeSection.name}.fragment.xml`);
     if (!fs.exists(viewPath)) {
-        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/FragmentWithVBox.xml'), viewPath, completeSection);
+        (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/FragmentWithVBox.xml'), viewPath, completeSection, fnGenerateId);
     }
     return { editor: fs, section: completeSection };
 }
@@ -112,21 +112,20 @@ async function generate(basePath, customSection, manifestTemplateRoot, fs) {
  * @returns {Promise<Editor>} the updated mem-fs editor instance
  */
 async function generateCustomHeaderSection(basePath, customHeaderSection, fs) {
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    const fsEditor = fs ?? (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
+    const fnGenerateId = await (0, file_1.createIdGenerator)(basePath, fsEditor); // initialize ID generator to ensure unique IDs across both section and edit fragment
     const manifestRoot = getManifestRoot('header-section', customHeaderSection.minUI5Version);
     const minVersion = (0, semver_1.coerce)(customHeaderSection.minUI5Version);
     let editSection;
     // Prepare 'templateEdit' - apply namespace and folder path resolution
     if (customHeaderSection.edit && (!minVersion || (0, semver_1.gte)(minVersion, '1.86.0'))) {
         editSection = customHeaderSection.edit;
-        const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fs);
+        const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fsEditor);
         // Set folder, ns and path for edit fragment
         (0, defaults_1.setCommonDefaults)(editSection, manifestPath, manifest);
     }
     // Call standard custom section generation
-    const { editor, section } = await generate(basePath, customHeaderSection, manifestRoot, fs);
+    const { editor, section } = await generate(basePath, customHeaderSection, manifestRoot, fsEditor);
     // Handle 'templateEdit' - edit fragment details
     if (editSection) {
         // Apply event handler for edit fragment
@@ -142,12 +141,12 @@ async function generateCustomHeaderSection(basePath, customHeaderSection, fs) {
             editSection.content = editSection.control;
         }
         else {
-            Object.assign(editSection, (0, defaults_1.getDefaultFragmentContentData)(editSection.name, editSection.eventHandler, false, true, false));
+            Object.assign(editSection, (0, defaults_1.getDefaultFragmentContentData)(editSection.name, fnGenerateId, editSection.eventHandler, false, true, false));
         }
         if (editSection.path) {
             const viewPath = (0, node_path_1.join)(editSection.path, `${editSection.name}.fragment.xml`);
             if (!editor.exists(viewPath)) {
-                (0, file_1.copyTpl)(editor, (0, templates_1.getTemplatePath)('common/FragmentWithForm.xml'), viewPath, editSection);
+                (0, file_1.copyTpl)(editor, (0, templates_1.getTemplatePath)('common/FragmentWithForm.xml'), viewPath, editSection, fnGenerateId);
             }
         }
     }

package/dist/view/index.js

@@ -49,9 +49,10 @@ function mergeViews(config, manifest) {
  * @param {CustomView} data - a custom view configuration object
  * @param {string} manifestPath - path to the project's manifest.json
  * @param {Manifest} manifest - the application manifest
+ * @param {IdGeneratorFunction} generateId - Function to generate unique IDs for the building block elements.
  * @returns enhanced configuration
  */
-function enhanceConfig(fs, data, manifestPath, manifest) {
+function enhanceConfig(fs, data, manifestPath, manifest, generateId) {
     const config = { ...data };
     (0, defaults_1.setCommonDefaults)(config, manifestPath, manifest);
     // apply event handler
@@ -68,7 +69,7 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
         config.content = config.control;
     }
     else {
-        config.content = (0, defaults_1.getDefaultFragmentContent)(config.name, config.eventHandler, true);
+        config.content = (0, defaults_1.getDefaultFragmentContent)(config.name, generateId, config.eventHandler, true);
     }
     return config;
 }
@@ -82,13 +83,12 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
  */
 async function generateCustomView(basePath, customView, fs) {
     (0, validate_1.validateVersion)(customView.minUI5Version);
-    if (!fs) {
-        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
-    }
+    fs ??= (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
     await (0, validate_1.validateBasePath)(basePath, fs);
+    const fnGenerateId = await (0, file_1.createIdGenerator)(basePath, fs);
     const { path: manifestPath, content: manifest } = await (0, utils_1.getManifest)(basePath, fs);
     // merge with defaults
-    const completeView = enhanceConfig(fs, customView, manifestPath, manifest);
+    const completeView = enhanceConfig(fs, customView, manifestPath, manifest, fnGenerateId);
     // enhance manifest with view definition
     const filledTemplate = (0, ejs_1.render)(fs.read((0, templates_1.getTemplatePath)('view/manifest.json')), completeView, {});
     (0, file_1.extendJSON)(fs, {
@@ -100,10 +100,10 @@ async function generateCustomView(basePath, customView, fs) {
     if (customView.viewUpdate !== false) {
         const viewPath = (0, node_path_1.join)(completeView.path, `${completeView.name}.fragment.xml`);
         if (completeView.control === true) {
-            (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('view/ext/CustomViewWithTable.xml'), viewPath, completeView);
+            (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('view/ext/CustomViewWithTable.xml'), viewPath, completeView, fnGenerateId);
         }
         else if (!fs.exists(viewPath)) {
-            (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/Fragment.xml'), viewPath, completeView);
+            (0, file_1.copyTpl)(fs, (0, templates_1.getTemplatePath)('common/Fragment.xml'), viewPath, completeView, fnGenerateId);
         }
     }
     return fs;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sap-ux/fe-fpm-writer",
   "description": "SAP Fiori elements flexible programming model writer",
-  "version": "0.42.19",
+  "version": "0.42.20",
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/open-ux-tools.git",
@@ -42,7 +42,7 @@
     "@types/semver": "7.7.1",
     "@types/vinyl": "2.0.7",
     "@sap-ux/i18n": "0.3.9",
-    "@sap-ux/ui-prompting": "0.6.7"
+    "@sap-ux/ui-prompting": "0.6.8"
   },
   "engines": {
     "node": ">=20.x"

package/templates/building-block/rich-text-editor-button-groups/View.xml

@@ -1,6 +1,7 @@
 <<%- config.aggregationNamespace %>:buttonGroups>
-<% (data.buttonGroups || []).forEach(function(buttonGroup) { %>
+<% (data.buttonGroups || []).forEach(function(buttonGroup, idKey) { %>
     <richtexteditor:ButtonGroup 
+        id="<%- buttonGroup.id || ids[idKey] %>"
         name="<%- buttonGroup.name %>" 
         visible="<%- buttonGroup.visible !== undefined ? buttonGroup.visible : true %>" 
         buttons="<%- buttonGroup.buttons %>"<% 
@@ -12,9 +13,6 @@
         } %><% 
         if (buttonGroup.row !== undefined) { %>
         row="<%- buttonGroup.row %>"<% 
-        } %><% 
-        if (buttonGroup.id !== undefined) { %>
-        id="<%- buttonGroup.id %>"<% 
         } %>/>
 <% }); %>
 </<%- config.aggregationNamespace %>:buttonGroups>

package/templates/common/FragmentWithForm.xml

@@ -1,5 +1,5 @@
 <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form"<%- typeof dependencies !== 'undefined' ? ` ${dependencies}` : '' %>>
-    <f:FormElement<%- typeof requireAttribute !== 'undefined' ? ` ${requireAttribute}` : '' %>>
+    <f:FormElement id="<%- ids.formElement %>"<%- typeof requireAttribute !== 'undefined' ? ` ${requireAttribute}` : '' %>>
         <f:fields>
             <%- content %>
         </f:fields>

package/templates/common/FragmentWithVBox.xml

@@ -1,5 +1,5 @@
 <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"<%- typeof dependencies !== 'undefined' ? ` ${dependencies}` : '' %>>
-	<VBox<%- typeof requireAttribute !== 'undefined' ? ` ${requireAttribute}` : '' %>>
+	<VBox id="<%- ids.vbox %>"<%- typeof requireAttribute !== 'undefined' ? ` ${requireAttribute}` : '' %>>
 		<%- content %>
 	</VBox>
 </core:FragmentDefinition>

package/templates/filter/fragment.xml

@@ -1,15 +1,15 @@
 <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"><%if (typeof eventHandler !== 'undefined') {%>
         <ComboBox
-            <% if (typeof controlID !== 'undefined') { %>id="<%- controlID %>"<% } %>
+            id="<% if (typeof controlID !== 'undefined' && controlID) { %><%- controlID %><% } else { %><%- ids.comboBox %><% } %>"
             width="100%"
             core:require="{handler: '<%- eventHandler.split('.').slice(0, -1).join('/') %>'}"
             selectedKey="{path: 'filterValues>', type: 'sap.fe.macros.filter.type.Value', formatOptions: { operator: '<%- eventHandler %>' }}"
         ><% } else { %>
-        <ComboBox<% if (typeof controlID !== 'undefined') { %> id="<%- controlID %>"<% } %> width="100%"><% } %>
+        <ComboBox id="<% if (typeof controlID !== 'undefined' && controlID) { %><%- controlID %><% } else { %><%- ids.comboBox %><% } %>" width="100%"><% } %>
             <items>
-                <core:Item key="0" text="Item1"/>
-                <core:Item key="1" text="Item2"/>
-                <core:Item key="2" text="Item3"/>
+                <core:Item id="<%- ids.item1 %>" key="0" text="Item1"/>
+                <core:Item id="<%- ids.item2 %>" key="1" text="Item2"/>
+                <core:Item id="<%- ids.item3 %>" key="2" text="Item3"/>
             </items>
         </ComboBox>
 </core:FragmentDefinition>

package/templates/page/custom/1.84/ext/View.xml

@@ -1,6 +1,6 @@
 <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
     xmlns:html="http://www.w3.org/1999/xhtml" controllerName="<%- ns %>.<%- name %>">
-    <Page id="<%- name %>" title="{i18n><%- name %>Title}">
+    <Page id="<%- ids.page %>" title="{i18n><%- name %>Title}">
         <content></content>
     </Page>
 </mvc:View>

package/templates/page/custom/1.94/ext/View.xml

@@ -1,6 +1,6 @@
 <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:macros="sap.fe.macros"
     xmlns:html="http://www.w3.org/1999/xhtml" controllerName="<%- ns %>.<%- name %>">
-    <Page id="<%- name %>" title="{i18n><%- name %>Title}">
+    <Page id="<%- ids.page %>" title="{i18n><%- name %>Title}">
         <content></content>
     </Page>
 </mvc:View>

package/templates/view/ext/CustomViewWithTable.xml

@@ -1,3 +1,3 @@
 <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:macros="sap.fe.macros" xmlns:u="sap.ui.unified">
-    <macros:Table id="<%- name %>" metaPath="@com.sap.vocabularies.UI.v1.LineItem" displayMode="true" />
+    <macros:Table id="<%- ids.table %>" metaPath="@com.sap.vocabularies.UI.v1.LineItem" displayMode="true" />
 </core:FragmentDefinition>