@acorex/platform 20.2.4-next.2 → 20.2.4-next.5

package/fesm2022/acorex-platform-layout-entity.mjs

@@ -10,7 +10,7 @@ import { AXPExpressionEvaluatorService, AXPPlatformScope, AXPDistributedEventLis
 import * as i2$2 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i2 from '@acorex/platform/layout/builder';
-import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetsCatalog, AXPValueWidgetComponent, AXPWidgetContainerComponent, AXPWidgetRendererDirective, AXPLayoutBuilderModule, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/builder';
+import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetsCatalog, AXPValueWidgetComponent, AXPWidgetRendererDirective, AXPLayoutBuilderModule, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/builder';
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import { Subject, takeUntil } from 'rxjs';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
@@ -265,7 +265,6 @@ class AXPEntityDetailListViewModel {
         }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
         this.evaluateExpressions = async (actionData) => {
             const parentData = this.parent.data;
-            console.log({ actionData, parentData });
             const scope = {
                 context: {
                     eval: (path) => {
@@ -972,6 +971,7 @@ class AXPEntityMasterCreateViewModel {
             const createProps = interfaces?.master?.create?.properties?.map(({ name }) => name) ?? [];
             const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && createProps.includes(name));
             const sections = interfaces?.master?.create?.sections?.filter(({ id }) => visibleProperties.some(({ groupId }) => groupId === id)) ?? [];
+            console.log({ sections, visibleProperties });
             return sections.map((section) => new AXPEntityCreateViewSectionViewModel(this.entityDef, section));
         }, ...(ngDevMode ? [{ debugName: "sections" }] : []));
         if (!initialData)
@@ -1157,10 +1157,28 @@ class AXPEntityMasterListViewModel {
             const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
             const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
             return columns
-                .filter(({ name }) => visiblePropNames.has(name))
+                .filter(({ name, showAs }) => visiblePropNames.has(name) || showAs)
                 .map((column) => {
-                const property = visibleProperties.find(({ name }) => name === column.name);
-                return new AXPEntityListViewColumnViewModel(property, column);
+                if (column.showAs) {
+                    const widgetConfig = this.widgetResolver.resolve(column.showAs.type);
+                    const property = {
+                        ...widgetConfig,
+                        name: column.name,
+                        title: column.title ?? '',
+                        schema: {
+                            dataType: 'string',
+                            interface: {
+                                type: column.showAs.type,
+                                options: column.showAs.options,
+                            },
+                        },
+                    };
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
+                else {
+                    const property = visibleProperties.find(({ name }) => name === column.name);
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
             });
         };
         this.visibleColumnCount = () => {
@@ -1459,8 +1477,7 @@ class AXPEntityMasterListViewModel {
         const cols = this.view().columns;
         const cloned = this.allAvailableColumns().map((c) => {
             const column = this.entityDef.columns?.find((cc) => cc.name == c.name);
-            const prop = this.entityDef.properties.find((p) => p.name == c.name);
-            const col = new AXPEntityListViewColumnViewModel(prop, column);
+            const col = new AXPEntityListViewColumnViewModel(c.property, column);
             col.visible = !cols.some((c) => c == col.name) && col.visible != false;
             return col;
         });
@@ -1976,7 +1993,6 @@ class AXPEntityMasterSingleViewGroupViewModel {
         this.group = this.entity.groups?.find((c) => c.id == this.section.id);
         this.name = signal(this.group.id, ...(ngDevMode ? [{ debugName: "name" }] : []));
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.type = signal(this.section.type ?? 'section', ...(ngDevMode ? [{ debugName: "type" }] : []));
         this.title = computed(() => {
             return this.group.title ?? this.group.id;
         }, ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -2556,9 +2572,15 @@ class AXPLayoutAdapterBuilder {
         this.adapter.pages = [...(this.adapter.pages || []), ...relatedPages];
         return this;
     }
+    setPages(pages) {
+        this.adapter.pages = pages;
+        return this;
+    }
     build() {
         return {
-            title: this.entity?.formats.plural || this.entity?.title,
+            name: `${this.entity?.module}.${this.entity?.name}`,
+            title: `${this.entity?.interfaces?.master?.single?.title}`,
+            label: this.entity?.formats.plural,
             actions: [],
             breadcrumbs: this.createBreadcrumbs(),
             execute: this.createExecuteFunction(),
@@ -2585,7 +2607,7 @@ class AXPLayoutAdapterBuilder {
                 command: {
                     name: 'navigate',
                     options: {
-                        path: `/${session.application?.name}/m/${moduleName}/e/${entityName}/${this.rootContext.id}/view`,
+                        path: `/${session.application?.name}/m/${moduleName}/e/${entityName}/${this.rootContext.id}/new-view`,
                     },
                 },
             },
@@ -2655,40 +2677,29 @@ class AXPBaseRelatedEntityConverter {
             groups,
         };
     }
-    createGridLayoutStructure(singleInterface, helpers) {
-        return {
-            type: 'grid-layout',
-            options: {
-                grid: {
-                    default: {
-                        gridTemplateColumns: 'repeat(12, 1fr)',
-                        gridTemplateRows: 'repeat(1, 1fr)',
-                        gap: '20px',
-                    },
-                },
-            },
-            children: singleInterface?.sections.map((s) => ({
-                type: 'grid-item-layout',
-                name: s.id,
-                options: {
-                    colSpan: s.layout?.positions?.lg?.colSpan ?? 12,
-                    colStart: s.layout?.positions?.lg?.colStart,
-                    colEnd: s.layout?.positions?.lg?.colEnd,
-                },
-                children: [
-                    {
-                        type: 'fieldset-layout',
-                        options: {
-                            title: helpers.getGroupById(s.id)?.title ?? '',
-                            collapsible: true,
-                        },
-                        children: [this.createPropertyGrid(s.id, helpers)],
-                    },
-                ],
-            })),
-        };
+    async createGridLayoutStructure(singleInterface, helpers, evaluateExpressions) {
+        return await this.createGridLayoutStructureInternal(singleInterface, helpers, evaluateExpressions);
     }
-    createPropertyGrid(sectionId, helpers) {
+    //#region ----   Hidden Evaluation Helpers   ----
+    async getVisiblePropertiesByGroupId(sectionId, helpers, evaluateExpressions) {
+        const properties = helpers.getPropertyByGroupId(sectionId) ?? [];
+        const evaluated = await Promise.all(properties.map(async (property) => {
+            let hidden = property?.schema?.hidden;
+            if (typeof hidden === 'string' && evaluateExpressions) {
+                try {
+                    const result = await evaluateExpressions({ hidden });
+                    hidden = result.hidden;
+                }
+                catch {
+                    hidden = false;
+                }
+            }
+            return { property, hidden: !!hidden };
+        }));
+        return evaluated.filter((x) => !x.hidden).map((x) => x.property);
+    }
+    async createPropertyGrid(sectionId, helpers, evaluateExpressions) {
+        const visibleProperties = await this.getVisiblePropertiesByGroupId(sectionId, helpers, evaluateExpressions);
         return {
             type: 'grid-layout',
             mode: 'edit',
@@ -2701,10 +2712,7 @@ class AXPBaseRelatedEntityConverter {
                     },
                 },
             },
-            children: helpers
-                .getPropertyByGroupId(sectionId)
-                .filter((property) => !property.schema.hidden)
-                .map((p) => {
+            children: visibleProperties.map((p) => {
                 const layout = helpers.getPropertyLayout(p.name);
                 return {
                     type: 'grid-item-layout',
@@ -2719,6 +2727,7 @@ class AXPBaseRelatedEntityConverter {
                             type: 'form-field',
                             options: {
                                 label: p.title,
+                                showLabel: layout?.label?.visible ?? true,
                             },
                             children: [
                                 {
@@ -2738,12 +2747,58 @@ class AXPBaseRelatedEntityConverter {
             }),
         };
     }
+    async createGridLayoutStructureInternal(singleInterface, helpers, evaluateExpressions) {
+        return {
+            type: 'grid-layout',
+            options: {
+                grid: {
+                    default: {
+                        gridTemplateColumns: 'repeat(12, 1fr)',
+                        gridTemplateRows: 'repeat(1, 1fr)',
+                        gap: '20px',
+                    },
+                },
+            },
+            children: await Promise.all(singleInterface?.sections.map(async (s) => ({
+                type: 'grid-item-layout',
+                name: s.id,
+                options: {
+                    colSpan: s.layout?.positions?.lg?.colSpan ?? 12,
+                    colStart: s.layout?.positions?.lg?.colStart,
+                    colEnd: s.layout?.positions?.lg?.colEnd,
+                },
+                children: [
+                    {
+                        type: 'fieldset-layout',
+                        options: {
+                            title: helpers.getGroupById(s.id)?.title ?? '',
+                            collapsible: true,
+                        },
+                        children: [await this.createPropertyGrid(s.id, helpers, evaluateExpressions)],
+                    },
+                ],
+            }))),
+        };
+    }
 }
 
 class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
     async convert(relatedEntity, context) {
         const { entityDef } = await this.getEntityDefinition(relatedEntity, context.entityResolver);
-        const helpers = this.createEntityHelpers(entityDef);
+        const baseHelpers = this.createEntityHelpers(entityDef);
+        // If referenced strategy with mapping and detail type, exclude mapped properties from UI
+        const p = relatedEntity?.persistence || {};
+        const strategy = p.strategy || 'embedded';
+        const mappedTargets = Object.keys(p.map || {}).map((k) => (k || '').split('.')[0]);
+        const helpers = {
+            ...baseHelpers,
+            getPropertyByGroupId: (groupId) => {
+                const props = baseHelpers.getPropertyByGroupId(groupId) ?? [];
+                if (strategy !== 'referenced' || mappedTargets.length === 0)
+                    return props;
+                return props.filter((prop) => !mappedTargets.includes(prop?.name));
+            },
+        };
         const evaluateExpressions = async (actionData) => {
             const scope = {
                 context: {
@@ -2754,17 +2809,25 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             };
             return await context.expressionEvaluator.evaluate(actionData, scope);
         };
+        // Build related tabs for the related entity page (mirrors main-entity tab building)
+        const tabDetailEntities = entityDef?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'tab-detail');
+        const tabListEntities = entityDef?.relatedEntities?.filter((re) => !re.hidden && (!re.layout?.type || re.layout?.type === 'tab-list'));
+        const factory = new AXPRelatedEntityConverterFactory();
+        const tabDetailTabs = await this.buildTabDetails(factory, tabDetailEntities ?? [], context);
+        const tabListTabs = await this.buildTabLists(factory, tabListEntities ?? [], context);
         return {
             id: entityDef?.name ?? '',
-            title: relatedEntity.title ?? entityDef?.title ?? '',
+            title: `${context.rootTitle}`,
             label: relatedEntity.title ?? entityDef?.formats.displayName ?? '',
             icon: relatedEntity.icon || entityDef.icon,
             settings: this.createPageSettings(),
             load: this.createLoadFunction(entityDef, relatedEntity, evaluateExpressions),
             execute: this.createExecuteFunction(entityDef),
-            content: [this.createGridLayoutStructure(helpers.singleInterface, helpers)],
+            // tabs: [...tabDetailTabs, ...tabListTabs],
+            content: [await this.createGridLayoutStructure(helpers.singleInterface, helpers, evaluateExpressions)],
         };
     }
+    //#region ----   Utility Methods   ----
     createPageSettings() {
         return {
             commands: {
@@ -2787,7 +2850,7 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
         return async (context) => {
             const fn = entityDef?.queries.byKey?.execute;
             const conditionValues = relatedEntity.conditions?.map((c) => c.value) ?? [];
-            const evaluatedConditionValues = await evaluateExpressions(conditionValues);
+            const evaluatedConditionValues = await Promise.all(conditionValues.map((c) => evaluateExpressions(c)));
             const id = evaluatedConditionValues[0];
             const result = await fn(id);
             return { success: true, result };
@@ -2808,6 +2871,42 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             }
         };
     }
+    //#endregion
+    //#region ----   Tab Builders   ----
+    /**
+     * Builds tab-detail items for a related entity page using the shared converters.
+     */
+    async buildTabDetails(factory, tabDetailEntities, ctx) {
+        if (!ctx?.entityResolver || !tabDetailEntities?.length) {
+            return [];
+        }
+        const tabs = [];
+        for (const re of tabDetailEntities) {
+            const converter = factory.createTabDetailsConverter();
+            tabs.push(await converter.convert(re, {
+                entityResolver: ctx.entityResolver,
+            }));
+        }
+        return tabs;
+    }
+    /**
+     * Builds tab-list items for a related entity page using the shared converters with context-aware filters/actions.
+     */
+    async buildTabLists(factory, tabListEntities, ctx) {
+        if (!ctx?.entityResolver || !tabListEntities?.length) {
+            return [];
+        }
+        const tabs = [];
+        for (const re of tabListEntities) {
+            const converter = factory.createTabListConverter();
+            tabs.push(await converter.convert(re, {
+                entityResolver: ctx.entityResolver,
+                expressionEvaluator: ctx.expressionEvaluator,
+                context: ctx.context,
+            }));
+        }
+        return tabs;
+    }
 }
 
 class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
@@ -2823,6 +2922,7 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
             };
             return await context.expressionEvaluator.evaluate(actionData, scope);
         };
+        const evaluatedActions = await evaluateExpressions(relatedEntity?.actions);
         const filters = relatedEntity.conditions?.map(async (c) => {
             const value = await evaluateExpressions(c.value);
             return {
@@ -2837,17 +2937,13 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
             title: `${context.rootTitle}`,
             label: relatedEntity.title,
             icon: relatedEntity.icon || entityDef.icon,
-            actions: this.mergeActions(entityDef, relatedEntity)
+            actions: this.mergeActions(entityDef, evaluatedActions)
                 ?.filter((a) => a.priority === 'primary')
                 ?.map((a) => {
                 return {
                     ...a,
                     zone: 'header',
-                    // visible:
-                    //   a.scope === AXPEntityCommandScope.Selected
-                    //     ? "{{widget.find('table').outputs().selectedItem().length > 0}}"
-                    //     : true,
-                    visible: '{{context.eval("table")}}',
+                    visible: !a.hidden,
                     priority: 'primary',
                     name: a.name,
                     title: a.title,
@@ -2865,7 +2961,7 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
             execute: async (command, executeContext) => {
                 try {
                     const commandName = command.name.split('&')[0];
-                    const mergedActions = this.mergeActions(entityDef, relatedEntity);
+                    const mergedActions = this.mergeActions(entityDef, evaluatedActions);
                     const action = mergedActions.find((a) => {
                         return a.name === commandName || a.name.split('&')[0] === commandName;
                     });
@@ -2880,10 +2976,6 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                             },
                         };
                     }
-                    let evaluatedOptions = command.options;
-                    if (action.options) {
-                        evaluatedOptions = await evaluateExpressions(action.options);
-                    }
                     await context.workflowService.execute(commandName, {
                         entity: getEntityInfo(entityDef).source,
                         entityInfo: {
@@ -2895,8 +2987,8 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                         },
                         data: action.scope == AXPEntityCommandScope.Selected
                             ? executeContext
-                            : evaluatedOptions?.['process']?.data || null,
-                        options: evaluatedOptions,
+                            : action.options?.['process']?.data || null,
+                        options: action.options,
                         metadata: action.metadata,
                     });
                     return { success: true };
@@ -2925,14 +3017,15 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                     options: {
                         entity: relatedEntity.entity,
                         showEntityActions: false,
+                        actions: evaluatedActions,
                     },
                 },
             ],
         };
     }
-    mergeActions(entityDef, relatedEntity) {
+    mergeActions(entityDef, relatedEntityActions) {
         const originalList = entityDef?.interfaces?.master?.list?.actions ?? [];
-        const relatedEntityActionList = relatedEntity.actions ?? [];
+        const relatedEntityActionList = relatedEntityActions ?? [];
         // Create a map to track which actions from relatedEntityActionList have been used
         const usedOverrideActions = new Set();
         // Start with original actions, applying overrides where they exist
@@ -2964,12 +3057,25 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
 class AXPTabDetailsConverter extends AXPBaseRelatedEntityConverter {
     async convert(relatedEntity, context) {
         const { entityDef } = await this.getEntityDefinition(relatedEntity, context.entityResolver);
-        const helpers = this.createEntityHelpers(entityDef);
+        const baseHelpers = this.createEntityHelpers(entityDef);
+        // If referenced strategy with mapping and detail type, exclude mapped properties from UI
+        const p = relatedEntity?.persistence || {};
+        const strategy = p.strategy || 'embedded';
+        const mappedTargets = Object.keys(p.map || {}).map((k) => (k || '').split('.')[0]);
+        const helpers = {
+            ...baseHelpers,
+            getPropertyByGroupId: (groupId) => {
+                const props = baseHelpers.getPropertyByGroupId(groupId) ?? [];
+                if (strategy !== 'referenced' || mappedTargets.length === 0)
+                    return props;
+                return props.filter((prop) => !mappedTargets.includes(prop?.name));
+            },
+        };
         return {
             id: entityDef?.name ?? '',
             title: relatedEntity.title ?? entityDef?.title ?? '',
             icon: relatedEntity.icon || entityDef.icon,
-            content: [this.createGridLayoutStructure(helpers.singleInterface, helpers)],
+            content: [await this.createGridLayoutStructure(helpers.singleInterface, helpers)],
         };
     }
 }
@@ -3066,41 +3172,270 @@ class AXPMainEntityContentBuilder {
         this.workflowService = inject(AXPWorkflowService);
         this.commandService = inject(AXPCommandService);
     }
-    async build(entity, rootContext, dependencies) {
+    async build(entity, rootContext, dependencies, rootTitle) {
         const groups = entity?.groups ?? [];
         const singleInterface = entity?.interfaces?.master?.single;
+        // Accumulate groups from main and merge-detail related entities for validation/title lookup
+        const allGroups = [...groups];
+        // Prepare merge-details structures (sections and properties per section)
+        const mergeDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'merge-detail');
+        const mainPropsByGroup = (entity?.properties ?? []).reduce((acc, p) => {
+            if (!acc[p.groupId])
+                acc[p.groupId] = [];
+            acc[p.groupId].push(p);
+            return acc;
+        }, {});
+        // Will hold merged properties per group (section)
+        const mergedPropsByGroup = { ...mainPropsByGroup };
+        // Collect sections from main interface (validated later) and related ones for ordering
+        const mainSections = singleInterface?.sections ?? [];
+        // Track extra sections with entity-level ordering context
+        const beforeExtraSections = [];
+        const middleExtraSections = [];
+        const afterExtraSections = [];
+        const beforeExtraIds = new Set();
+        const middleExtraIds = new Set();
+        const afterExtraIds = new Set();
+        // Effective order overrides for main sections when merged with BEFORE related entities
+        let beforeOverrideSectionOrders = {};
+        // Collect tab-list tabs from merge-detail related entities to merge with main tabs
+        const nestedTabListTabs = [];
+        // Helper to append related-only sections into before/after buckets
+        const queueRelatedSection = (section, position, entityOrder) => {
+            if (!section)
+                return;
+            if (position === 'before') {
+                if (!beforeExtraIds.has(section.id)) {
+                    beforeExtraIds.add(section.id);
+                    beforeExtraSections.push({ section, entityOrder });
+                }
+            }
+            else if (position === 'middle') {
+                if (!middleExtraIds.has(section.id)) {
+                    middleExtraIds.add(section.id);
+                    middleExtraSections.push({ section });
+                }
+            }
+            else {
+                if (!afterExtraIds.has(section.id)) {
+                    afterExtraIds.add(section.id);
+                    afterExtraSections.push({ section, entityOrder });
+                }
+            }
+        };
+        // Resolve and merge merge-detail entities
+        // Sort related entities by position group then by layout.order
+        if (mergeDetailEntities?.length && dependencies?.entityResolver) {
+            const beforeEntities = (mergeDetailEntities || [])
+                .filter((re) => (re.layout?.position ?? 'middle') === 'before')
+                .sort((a, b) => (a.layout?.order ?? Number.MAX_SAFE_INTEGER) - (b.layout?.order ?? Number.MAX_SAFE_INTEGER));
+            const middleEntities = (mergeDetailEntities || []).filter((re) => (re.layout?.position ?? 'middle') === 'middle');
+            const afterEntities = (mergeDetailEntities || [])
+                .filter((re) => (re.layout?.position ?? 'middle') === 'after')
+                .sort((a, b) => (a.layout?.order ?? Number.MAX_SAFE_INTEGER) - (b.layout?.order ?? Number.MAX_SAFE_INTEGER));
+            const processRelated = async (relatedEntity) => {
+                try {
+                    const [moduleName, entityName] = relatedEntity.entity.split('.');
+                    const entityDef = await dependencies.entityResolver.resolve(moduleName, entityName);
+                    if (!entityDef) {
+                        return;
+                    }
+                    const relSingle = entityDef?.interfaces?.master?.single;
+                    const relGroups = entityDef?.groups ?? [];
+                    // Merge related groups into allGroups (avoid duplicates by id)
+                    for (const rg of relGroups) {
+                        if (!allGroups.some((g) => g.id === rg.id)) {
+                            allGroups.push(rg);
+                        }
+                    }
+                    // Collect nested tab-list related entities from this merge-detail entity and convert to tabs
+                    try {
+                        const nestedTabListEntities = entityDef?.relatedEntities?.filter((re) => !re.hidden && (!re.layout?.type || re.layout?.type === 'tab-list'));
+                        if (nestedTabListEntities?.length) {
+                            const converter = this.relatedEntityConverterFactory.createTabListConverter();
+                            const nestedDataPath = relatedEntity?.persistence?.dataPath || entityName;
+                            const nestedContext = get(rootContext, nestedDataPath) ?? rootContext;
+                            for (const nre of nestedTabListEntities) {
+                                try {
+                                    const tab = await converter.convert(nre, {
+                                        entityResolver: dependencies.entityResolver,
+                                        expressionEvaluator: dependencies.expressionEvaluator,
+                                        // Evaluate conditions relative to the merge-detail entity's dataPath
+                                        context: nestedContext,
+                                    });
+                                    nestedTabListTabs.push(tab);
+                                }
+                                catch { }
+                            }
+                        }
+                    }
+                    catch { }
+                    // Build related props map per group with metadata: __dataPath and __layout
+                    // If referenced strategy with mapping, exclude mapped target property names from UI props
+                    const p = relatedEntity?.persistence || {};
+                    const strategy = p.strategy || 'embedded';
+                    const mappedTargets = Object.keys(p.map || {}).map((k) => (k || '').split('.')[0]);
+                    const relPropsByGroup = (entityDef?.properties ?? []).reduce((acc, p) => {
+                        if (strategy === 'referenced' &&
+                            (relatedEntity?.layout?.type === 'merge-detail' ||
+                                relatedEntity?.layout?.type === 'page-detail' ||
+                                relatedEntity?.layout?.type === 'tab-detail') &&
+                            mappedTargets.includes(p.name)) {
+                            return acc; // skip mapped properties
+                        }
+                        if (!acc[p.groupId])
+                            acc[p.groupId] = [];
+                        // Clone shallow to not mutate original definitions
+                        const propClone = { ...p };
+                        propClone.__dataPath = relatedEntity?.persistence?.dataPath || entityName;
+                        propClone.__layout = relSingle?.properties?.find((x) => x.name === p.name)?.layout;
+                        acc[p.groupId].push(propClone);
+                        return acc;
+                    }, {});
+                    // Merge properties by section id
+                    const position = relatedEntity.layout?.position ?? 'middle';
+                    const entityOrder = relatedEntity.layout?.order ?? Number.MAX_SAFE_INTEGER;
+                    const relSections = (relSingle?.sections ?? []).filter((s) => relGroups.some((g) => g.id === s.id));
+                    for (const rs of relSections) {
+                        const sectionId = rs.id;
+                        const mainHasSection = !!mainSections?.some((s) => s.id === sectionId);
+                        const relProps = relPropsByGroup[sectionId] ?? [];
+                        if (mainHasSection) {
+                            const current = mergedPropsByGroup[sectionId] ?? [];
+                            mergedPropsByGroup[sectionId] =
+                                position === 'before' ? [...relProps, ...current] : [...current, ...relProps];
+                            // Capture override order for main section when position is 'before'
+                            if (position === 'before') {
+                                const order = rs?.order ?? 0;
+                                const prev = beforeOverrideSectionOrders[sectionId] ?? Number.MAX_SAFE_INTEGER;
+                                beforeOverrideSectionOrders[sectionId] = Math.min(prev, order);
+                            }
+                        }
+                        else {
+                            // Section isn't in main; queue section for rendering and set its props
+                            if (!mergedPropsByGroup[sectionId]) {
+                                mergedPropsByGroup[sectionId] = [];
+                            }
+                            mergedPropsByGroup[sectionId] =
+                                position === 'before'
+                                    ? [...(relProps ?? []), ...(mergedPropsByGroup[sectionId] ?? [])]
+                                    : [...(mergedPropsByGroup[sectionId] ?? []), ...(relProps ?? [])];
+                            queueRelatedSection(rs, position, entityOrder);
+                        }
+                    }
+                }
+                catch {
+                    // Silently ignore failures to resolve or merge
+                }
+            };
+            // Process BEFORE entities first (sorted), then AFTER entities
+            for (const re of beforeEntities) {
+                await processRelated(re);
+            }
+            for (const re of middleEntities) {
+                await processRelated(re);
+            }
+            for (const re of afterEntities) {
+                await processRelated(re);
+            }
+        }
         const getGroupById = (id) => {
             return groups.find((s) => s.id === id);
         };
         const filterValidSections = (sections) => {
             return (sections?.filter((section) => {
-                return groups.some((group) => group.id === section.id);
+                return allGroups.some((group) => group.id === section.id);
             }) ?? []);
         };
-        const getPropertyByGroupId = (groupId) => {
-            return entity?.properties.filter((p) => p.groupId === groupId) ?? [];
+        // Utility: sort related-only sections by entity order then section order
+        const sortRelatedSections = (sections) => [...(sections ?? [])]
+            .filter((e) => !!e?.section)
+            .sort((a, b) => {
+            const ae = a.entityOrder ?? Number.MAX_SAFE_INTEGER;
+            const be = b.entityOrder ?? Number.MAX_SAFE_INTEGER;
+            if (ae !== be)
+                return ae - be;
+            const ao = a.section?.order ?? 0;
+            const bo = b.section?.order ?? 0;
+            return ao - bo;
+        })
+            .map((e) => e.section);
+        // Determine effective order for main sections: if any BEFORE related merged that section, use its order; otherwise keep main order
+        const computeEffectiveMainOrder = (s) => {
+            const defaultOrder = s?.order ?? 0;
+            const beforeOverride = beforeOverrideSectionOrders?.[s?.id ?? ''];
+            return beforeOverride != null ? beforeOverride : defaultOrder;
         };
-        const getPropertyLayout = (name) => {
-            return singleInterface?.properties?.find((p) => p.name === name)?.layout;
+        // Build combined section list:
+        // 1) related-before (entity-sorted)
+        // 2) middle block: main sections + related-middle-only sections sorted by their section.order (with effective order for main)
+        // 3) related-after (entity-sorted)
+        const beforeSections = sortRelatedSections(beforeExtraSections);
+        const mainSectionsList = [...filterValidSections(mainSections)];
+        const middleOnlySections = middleExtraSections.map((e) => e.section);
+        const middleBlock = [...mainSectionsList, ...middleOnlySections].sort((a, b) => {
+            const ao = computeEffectiveMainOrder(a);
+            const bo = computeEffectiveMainOrder(b);
+            return ao - bo;
+        });
+        const afterSections = sortRelatedSections(afterExtraSections);
+        const combinedSections = [...beforeSections, ...middleBlock, ...afterSections];
+        // Debug: Log final sorted sections for verification
+        try {
+            const beforeEntityOrderMap = new Map(beforeExtraSections.map((e) => [e.section?.id, e.entityOrder ?? Number.MAX_SAFE_INTEGER]));
+            const afterEntityOrderMap = new Map(afterExtraSections.map((e) => [e.section?.id, e.entityOrder ?? Number.MAX_SAFE_INTEGER]));
+            const debugSections = [
+                ...beforeSections.map((s) => ({
+                    bucket: 'before',
+                    id: s?.id,
+                    sectionOrder: s?.order ?? 0,
+                    entityOrder: beforeEntityOrderMap.get(s?.id) ?? Number.MAX_SAFE_INTEGER,
+                })),
+                ...middleBlock.map((s) => ({
+                    bucket: 'middle',
+                    id: s?.id,
+                    sectionOrder: s?.order ?? 0,
+                    effectiveOrder: computeEffectiveMainOrder(s),
+                })),
+                ...afterSections.map((s) => ({
+                    bucket: 'after',
+                    id: s?.id,
+                    sectionOrder: s?.order ?? 0,
+                    entityOrder: afterEntityOrderMap.get(s?.id) ?? Number.MAX_SAFE_INTEGER,
+                })),
+            ];
+            // eslint-disable-next-line no-console
+            console.debug('[AXP] merge-details sorted sections', debugSections);
+        }
+        catch { }
+        // Create expression evaluator for actions
+        const evaluateExpressions = dependencies?.expressionEvaluator
+            ? this.createExpressionEvaluator(rootContext, dependencies.expressionEvaluator)
+            : null;
+        const getVisiblePropertyByGroupId = async (groupId) => {
+            return (mergedPropsByGroup[groupId] ?? []);
+        };
+        const getPropertyLayout = (name, prop) => {
+            // Prefer per-property layout (for merged related props), fallback to main entity layout
+            return prop?.__layout ?? singleInterface?.properties?.find((p) => p.name === name)?.layout;
         };
         // Get related entities for tabs
-        const tabDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layoutType === 'tab-detail');
-        const tabListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && (!re.layoutType || re.layoutType === 'tab-list'));
+        const tabDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'tab-detail');
+        const tabListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && (!re.layout?.type || re.layout?.type === 'tab-list'));
         // Build related tabs if dependencies are provided
         const tabDetailTabs = await this.buildTabDetails(tabDetailEntities ?? [], dependencies);
         const tabListTabs = await this.buildTabLists(tabListEntities ?? [], rootContext, dependencies);
         // Build actions from single interface
         const actions = this.buildActions(entity, singleInterface);
-        // Create expression evaluator for actions
-        const evaluateExpressions = dependencies?.expressionEvaluator
-            ? this.createExpressionEvaluator(rootContext, dependencies.expressionEvaluator)
-            : null;
+        console.log({ rootContext, dependencies });
         return {
             id: entity?.name ?? '',
-            title: singleInterface?.title ?? entity?.formats.individual ?? '',
+            // title: singleInterface?.title ?? entity?.formats.individual ?? '',
+            title: rootTitle ?? entity?.formats.individual,
             label: entity?.formats.displayName ?? singleInterface?.title ?? '',
             icon: entity?.icon,
             actions: await this.buildEvaluatedActions(actions, evaluateExpressions),
+            isPrimary: true,
             settings: {
                 commands: {
                     reject: {
@@ -3183,7 +3518,7 @@ class AXPMainEntityContentBuilder {
                     };
                 }
             },
-            tabs: [...tabDetailTabs, ...tabListTabs],
+            tabs: [...tabDetailTabs, ...tabListTabs, ...nestedTabListTabs],
             content: [
                 {
                     type: 'grid-layout',
@@ -3197,7 +3532,7 @@ class AXPMainEntityContentBuilder {
                             },
                         },
                     },
-                    children: filterValidSections(singleInterface?.sections ?? []).map((s) => ({
+                    children: await Promise.all(combinedSections.map(async (s) => ({
                         type: 'grid-item-layout',
                         name: s.id,
                         options: {
@@ -3209,9 +3544,10 @@ class AXPMainEntityContentBuilder {
                             {
                                 type: 'fieldset-layout',
                                 options: {
-                                    title: getGroupById(s.id)?.title ?? '',
+                                    title: allGroups.find((g) => g.id === s.id)?.title ?? '',
                                     collapsible: true,
                                     isOpen: !s.collapsed,
+                                    look: 'card'
                                 },
                                 children: [
                                     {
@@ -3225,29 +3561,30 @@ class AXPMainEntityContentBuilder {
                                                 },
                                             },
                                         },
-                                        children: getPropertyByGroupId(s.id)
-                                            .filter((property) => !property.schema.hidden)
-                                            .map((p) => {
-                                            const layout = getPropertyLayout(p.name);
+                                        children: (await getVisiblePropertyByGroupId(s.id)).map((p) => {
+                                            const layout = getPropertyLayout(p.name, p);
+                                            const prefixed = p.__dataPath ? `${p.__dataPath}.${p.name}` : p.name;
                                             return {
                                                 type: 'grid-item-layout',
-                                                name: p.name,
+                                                name: prefixed,
                                                 options: {
                                                     colSpan: layout?.positions?.lg?.colSpan,
                                                     colStart: layout?.positions?.lg?.colStart,
                                                     colEnd: layout?.positions?.lg?.colEnd,
+                                                    hidden: p.schema.hidden,
                                                 },
                                                 children: [
                                                     {
                                                         type: 'form-field',
                                                         options: {
                                                             label: p.title,
+                                                            showLabel: layout?.label?.visible ?? true,
                                                         },
                                                         children: [
                                                             {
                                                                 type: p.schema.interface?.type ?? '',
-                                                                path: p.name,
-                                                                name: p.name,
+                                                                path: prefixed,
+                                                                name: prefixed,
                                                                 defaultValue: p.schema.defaultValue,
                                                                 children: p.schema.interface?.children,
                                                                 triggers: p.schema.interface?.triggers,
@@ -3258,6 +3595,8 @@ class AXPMainEntityContentBuilder {
                                                                         message: c.message,
                                                                         options: c.options,
                                                                     })),
+                                                                    // Attach dataPath for merged properties to be available in widgets/options if needed
+                                                                    dataPath: p.__dataPath,
                                                                 }),
                                                             },
                                                         ],
@@ -3269,7 +3608,7 @@ class AXPMainEntityContentBuilder {
                                 ],
                             },
                         ],
-                    })),
+                    }))),
                 },
             ],
         };
@@ -3283,7 +3622,8 @@ class AXPMainEntityContentBuilder {
             const scope = {
                 context: {
                     eval: (path) => {
-                        return get(context, path);
+                        const value = get(context, path);
+                        return value;
                     },
                 },
             };
@@ -3395,11 +3735,15 @@ class AXPLayoutAdapterFactory {
             throw new Error(`Entity ${moduleName}.${entityName} not found`);
         }
         const rootContext = await this.loadRootContext(entity, id);
+        // Build main and related pages
+        const mainPage = await this.buildMainPage(entity, rootContext, dependencies);
+        const relatedPages = await this.buildRelatedPages(entity, rootContext, dependencies);
+        // Compose ordered pages around the primary page
+        const orderedPages = this.composePagesWithPositions(mainPage, relatedPages, entity);
         return this.layoutAdapterBuilder
             .setEntity(entity, rootContext)
             .setDependencies(dependencies)
-            .setMainPage(await this.buildMainPage(entity, rootContext, dependencies))
-            .setRelatedPages(await this.buildRelatedPages(entity, rootContext, dependencies))
+            .setPages(orderedPages)
             .build();
     }
     async loadRootContext(entity, id) {
@@ -3407,31 +3751,107 @@ class AXPLayoutAdapterFactory {
         return await fn(id);
     }
     async buildMainPage(entity, rootContext, dependencies) {
-        return this.mainEntityContentBuilder.build(entity, rootContext, dependencies);
+        return this.mainEntityContentBuilder.build(entity, rootContext, dependencies, await this.getRootTitle(entity, rootContext, dependencies));
     }
     async buildRelatedPages(entity, rootContext, dependencies) {
         const pages = [];
+        const rootTitle = await this.getRootTitle(entity, rootContext, dependencies);
         // Page Details
-        const pageDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layoutType === 'page-detail');
+        const pageDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'page-detail');
         for (const relatedEntity of pageDetailEntities || []) {
             const converter = this.relatedEntityConverterFactory.createPageDetailsConverter();
-            pages.push(await converter.convert(relatedEntity, { entityResolver: dependencies.entityResolver }));
+            pages.push(await converter.convert(relatedEntity, {
+                ...dependencies,
+                context: rootContext,
+                rootTitle: rootTitle,
+            }));
         }
         // Page Lists
-        const pageListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layoutType === 'page-list');
+        const pageListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'page-list');
         for (const relatedEntity of pageListEntities || []) {
             const converter = this.relatedEntityConverterFactory.createPageListConverter();
             pages.push(await converter.convert(relatedEntity, {
                 ...dependencies,
                 context: rootContext,
-                rootTitle: await this.getRootTitle(entity, rootContext, dependencies),
+                rootTitle: rootTitle,
             }));
         }
+        // Include nested page-related entities from merge-detail related entities
+        const mergeDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'merge-detail');
+        for (const mergeRelated of mergeDetailEntities || []) {
+            try {
+                const [moduleName, childEntityName] = (mergeRelated.entity || '').split('.');
+                const childEntity = await dependencies.entityResolver.resolve(moduleName, childEntityName);
+                if (!childEntity) {
+                    continue;
+                }
+                const nestedDataPath = mergeRelated?.persistence?.dataPath || childEntityName;
+                const nestedContext = get(rootContext, nestedDataPath) ?? rootContext;
+                const nestedPageDetailEntities = childEntity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'page-detail');
+                for (const nestedRelated of nestedPageDetailEntities || []) {
+                    const converter = this.relatedEntityConverterFactory.createPageDetailsConverter();
+                    pages.push(await converter.convert(nestedRelated, {
+                        ...dependencies,
+                        context: nestedContext,
+                        rootTitle: rootTitle,
+                    }));
+                }
+                const nestedPageListEntities = childEntity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'page-list');
+                for (const nestedRelated of nestedPageListEntities || []) {
+                    const converter = this.relatedEntityConverterFactory.createPageListConverter();
+                    pages.push(await converter.convert(nestedRelated, {
+                        ...dependencies,
+                        context: nestedContext,
+                        rootTitle: rootTitle,
+                    }));
+                }
+            }
+            catch {
+                // Silently ignore failures for nested page inclusions
+            }
+        }
         return pages;
     }
+    composePagesWithPositions(mainPage, relatedPages, entity) {
+        // Only consider related entities with layout types page-detail or page-list
+        const pageEntities = (entity?.relatedEntities || []).filter((re) => !re.hidden && (re.layout?.type === 'page-detail' || re.layout?.type === 'page-list'));
+        // Build a map from entity name to its layout config (order/position)
+        const layoutConfigByEntity = {};
+        for (const re of pageEntities) {
+            const [, entityName] = (re.entity || '').split('.');
+            const key = entityName || re.entity;
+            layoutConfigByEntity[key] = { order: re.layout?.order, position: re.layout?.position };
+        }
+        // Split related pages into before/after buckets based on their relatedEntity layout
+        const before = [];
+        const after = [];
+        for (const page of relatedPages) {
+            const conf = layoutConfigByEntity[page.id];
+            const position = conf?.position ?? 'after';
+            if (position === 'before') {
+                before.push(page);
+            }
+            else {
+                after.push(page);
+            }
+        }
+        // Sort by order within each bucket (undefined orders go last)
+        const sortByOrder = (a, b) => {
+            const ao = layoutConfigByEntity[a.id]?.order ?? Number.POSITIVE_INFINITY;
+            const bo = layoutConfigByEntity[b.id]?.order ?? Number.POSITIVE_INFINITY;
+            return ao - bo;
+        };
+        before.sort(sortByOrder);
+        after.sort(sortByOrder);
+        // Ensure the main page is primary
+        mainPage.isPrimary = true;
+        // Compose final pages: before -> main -> after
+        return [...before, mainPage, ...after];
+    }
     async getRootTitle(entity, rootContext, dependencies) {
         // Logic for getting root title
-        return await dependencies.expressionEvaluator.evaluate(entity.interfaces?.master?.single?.title, rootContext);
+        const title = await dependencies.expressionEvaluator.evaluate(entity.interfaces?.master?.single?.title, rootContext);
+        return title;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutAdapterFactory, deps: [{ token: AXPRelatedEntityConverterFactory }, { token: AXPMainEntityContentBuilder }, { token: AXPLayoutAdapterBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutAdapterFactory, providedIn: 'root' }); }
@@ -3499,6 +3919,81 @@ class AXPEntitySearchDefinitionProvider {
     }
 }
 
+//#region ----   Column Mapping Helpers   ----
+/**
+ * Maps an entity property to a list widget column configuration.
+ * Preserves readonly behavior and leverages the property's interface options when available.
+ */
+function mapPropertyToWidgetColumn(property) {
+    return {
+        name: property.name,
+        title: property.title,
+        visible: true,
+        widget: property.schema?.interface
+            ? {
+                type: property.schema.interface.type || 'text-editor',
+                path: property.name,
+                options: {
+                    readonly: true,
+                    ...property.schema.interface.options,
+                },
+            }
+            : {
+                type: 'text-editor',
+                path: property.name,
+                options: { readonly: true },
+            },
+    };
+}
+/**
+ * Maps an entity column metadata (and its related property) to a list widget column configuration.
+ */
+function mapEntityColumnToWidgetColumn(entity, column) {
+    const property = entity.properties.find((p) => p.name === column.name);
+    return {
+        name: column.name,
+        title: column.title || property?.title || column.name,
+        width: column.options?.width,
+        visible: column.options?.visible !== false,
+        widget: property?.schema?.interface
+            ? {
+                type: property.schema.interface.type || 'text-editor',
+                path: column.options?.dataPath || column.name,
+                options: {
+                    readonly: true,
+                    ...property.schema.interface.options,
+                },
+            }
+            : {
+                type: 'text-editor',
+                path: column.options?.dataPath || column.name,
+                options: { readonly: true },
+            },
+    };
+}
+//#endregion
+//#region ----   Include/Exclude Utilities   ----
+/**
+ * Applies include and exclude filters to a named collection while preserving order.
+ */
+function applyIncludeExclude(items, include = [], exclude = []) {
+    let result = items;
+    if (include.length > 0) {
+        result = result.filter((i) => include.includes(i.name));
+    }
+    if (exclude.length > 0) {
+        result = result.filter((i) => !exclude.includes(i.name));
+    }
+    return result;
+}
+/**
+ * Returns only visible (non-hidden) properties of an entity.
+ */
+function getVisibleProperties(entity) {
+    return entity.properties.filter((prop) => !prop.schema?.hidden);
+}
+//#endregion
+
 class AXPEntityListTableService {
     constructor() {
         //#region ----   Services & Dependencies   ----
@@ -3506,6 +4001,9 @@ class AXPEntityListTableService {
         this.workflow = inject(AXPWorkflowService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.evaluateExpressions = async (options, data) => {
+            if (!options) {
+                return {};
+            }
             const scope = {
                 context: {
                     eval: (path) => {
@@ -3521,8 +4019,7 @@ class AXPEntityListTableService {
     /**
      * Convert Entity to List Widget Options
      */
-    async convertEntityToListOptions(entity, options) {
-        const allActions = entity.interfaces?.master?.list?.actions?.map((tr) => new AXPEntityCommandTriggerViewModel(entity, tr)) ?? [];
+    async convertEntityToListOptions(entity, options, allActions) {
         const listOptions = {
             // 📊 Data Source
             dataSource: this.createDataSource(entity),
@@ -3574,72 +4071,17 @@ class AXPEntityListTableService {
     createColumnsFromProperties(entity, options) {
         const excludeColumns = options?.excludeColumns || [];
         const includeColumns = options?.includeColumns || [];
-        let columns = [];
-        // If columns are defined, use them
-        if (entity.columns && entity.columns.length > 0) {
-            columns = entity.columns.map((col) => this.mapEntityColumnToWidgetColumn(entity, col));
-        }
-        else {
-            // Otherwise use properties
-            columns = entity.properties
-                .filter((prop) => !prop.schema.hidden) // Only visible properties
-                .map((prop) => ({
-                name: prop.name,
-                title: prop.title,
-                visible: true,
-                widget: prop.schema.interface
-                    ? {
-                        type: prop.schema.interface.type || 'text-editor',
-                        path: prop.name,
-                        options: {
-                            readonly: true,
-                            ...prop.schema.interface.options,
-                        },
-                    }
-                    : {
-                        type: 'text-editor',
-                        path: prop.name,
-                        options: { readonly: true },
-                    },
-            }));
-        }
-        // Apply include/exclude filters
-        if (includeColumns.length > 0) {
-            // If includeColumns is specified, only include those columns
-            columns = columns.filter((col) => includeColumns.includes(col.name));
-        }
-        if (excludeColumns.length > 0) {
-            // If excludeColumns is specified, exclude those columns
-            columns = columns.filter((col) => !excludeColumns.includes(col.name));
-        }
-        return columns;
+        // If columns are defined, use them; otherwise use visible properties
+        const baseColumns = entity.columns && entity.columns.length > 0
+            ? entity.columns.map((col) => this.mapEntityColumnToWidgetColumn(entity, col))
+            : getVisibleProperties(entity).map((prop) => mapPropertyToWidgetColumn(prop));
+        return applyIncludeExclude(baseColumns, includeColumns, excludeColumns);
     }
     /**
      * Map EntityTableColumn to ListWidgetColumn
      */
     mapEntityColumnToWidgetColumn(entity, column) {
-        // Find corresponding property
-        const property = entity.properties.find((p) => p.name === column.name);
-        return {
-            name: column.name,
-            title: column.title || property?.title || column.name,
-            width: column.options?.width,
-            visible: column.options?.visible !== false,
-            widget: property?.schema.interface
-                ? {
-                    type: property.schema.interface.type || 'text-editor',
-                    path: column.options?.dataPath || column.name,
-                    options: {
-                        readonly: true,
-                        ...property.schema.interface.options,
-                    },
-                }
-                : {
-                    type: 'text-editor',
-                    path: column.options?.dataPath || column.name,
-                    options: { readonly: true },
-                },
-        };
+        return mapEntityColumnToWidgetColumn(entity, column);
     }
     /**
      * Convert Entity Actions to Row Commands
@@ -3655,7 +4097,7 @@ class AXPEntityListTableService {
             icon: action.icon,
             color: action.color,
             look: 'outline',
-            visible: action.hidden,
+            visible: !action.hidden,
             disabled: action.disabled,
         }));
     }
@@ -3666,6 +4108,36 @@ class AXPEntityListTableService {
         const actions = entity.interfaces?.master?.list?.actions || [];
         return actions.some((action) => action.scope === AXPEntityCommandScope.Selected);
     }
+    /**
+     * Handle execution of a row command (shared by double-click and command handlers)
+     */
+    async handleRowCommand(e, selectedRows, entity, allActions) {
+        const data = e.data;
+        const commandName = e.name;
+        const action = allActions.find((c) => {
+            return (c.name == e.name &&
+                ((selectedRows?.length
+                    ? c.scope == AXPEntityCommandScope.Selected
+                    : c.scope == AXPEntityCommandScope.Individual) ||
+                    c.scope == AXPEntityCommandScope.TypeLevel));
+        });
+        const command = commandName.split('&')[0];
+        const options = await this.evaluateExpressions(action?.options, data);
+        await this.workflow.execute(command, {
+            entity: getEntityInfo(entity).source,
+            entityInfo: {
+                name: entity.name,
+                module: entity.module,
+                title: entity.title,
+                parentKey: entity.parentKey,
+                source: entity.source,
+            },
+            data: action?.scope == AXPEntityCommandScope.Selected ? selectedRows : data,
+            options: options,
+            metadata: action?.metadata,
+        });
+        console.log('Entity List - Row command:', e.name, e.data);
+    }
     /**
      * Create default events
      */
@@ -3674,38 +4146,27 @@ class AXPEntityListTableService {
             onRowClick: (row) => {
                 console.log('Entity List - Row clicked:', row);
             },
-            onRowDoubleClick: (row) => {
-                console.log('Entity List - Row double clicked:', row);
+            onRowDoubleClick: (e) => {
+                console.log('Entity List - Row double clicked:', e);
+                const defaultAction = allActions.find((c) => {
+                    const commandName = c.name.split('&')[0];
+                    return (c.default || commandName === 'open-entity') && !c.hidden;
+                });
+                if (!defaultAction) {
+                    return;
+                }
+                const d = {
+                    component: e.component,
+                    name: defaultAction.name,
+                    data: e.data,
+                };
+                this.handleRowCommand(d, undefined, entity, allActions);
             },
             onSelectionChange: (selectedRows) => {
                 console.log('Entity List - Selection changed:', selectedRows);
             },
             onRowCommand: async (e, selectedRows) => {
-                const data = e.data;
-                const commandName = e.name;
-                const action = allActions.find((c) => {
-                    return (c.name == e.name &&
-                        ((selectedRows?.length
-                            ? c.scope == AXPEntityCommandScope.Selected
-                            : c.scope == AXPEntityCommandScope.Individual) ||
-                            c.scope == AXPEntityCommandScope.TypeLevel));
-                });
-                const command = commandName.split('&')[0];
-                const options = await this.evaluateExpressions(action?.options, data);
-                await this.workflow.execute(command, {
-                    entity: getEntityInfo(entity).source,
-                    entityInfo: {
-                        name: entity.name,
-                        module: entity.module,
-                        title: entity.title,
-                        parentKey: entity.parentKey,
-                        source: entity.source,
-                    },
-                    data: action?.scope == AXPEntityCommandScope.Selected ? selectedRows : data,
-                    options: options,
-                    metadata: action?.metadata,
-                });
-                console.log('Entity List - Row command:', e.name, e.data);
+                await this.handleRowCommand(e, selectedRows, entity, allActions);
             },
         };
     }
@@ -3767,29 +4228,29 @@ class AXPEntityListToolbarService {
      * Create Column Definitions for Toolbar
      */
     createColumnDefinitions(entity, options) {
-        const { columns = [], properties } = entity;
+        const { columns = [] } = entity;
         const excludeColumns = options?.excludeColumns || [];
         const includeColumns = options?.includeColumns || [];
-        const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
+        const visibleProperties = getVisibleProperties(entity);
         const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
-        let filteredColumns = columns.filter(({ name }) => visiblePropNames.has(name));
-        // Apply include/exclude filters
-        if (includeColumns.length > 0) {
-            // If includeColumns is specified, only include those columns
-            filteredColumns = filteredColumns.filter((col) => includeColumns.includes(col.name));
-        }
-        if (excludeColumns.length > 0) {
-            // If excludeColumns is specified, exclude those columns
-            filteredColumns = filteredColumns.filter((col) => !excludeColumns.includes(col.name));
-        }
-        return filteredColumns.map((column) => {
-            const property = visibleProperties.find(({ name }) => name === column.name);
-            return {
-                name: column.name,
-                title: property?.title,
-                visible: column?.options?.visible ?? true,
-            };
-        });
+        // Prefer explicit entity.columns if present; fallback to visible properties
+        const baseColumns = columns.length > 0
+            ? columns
+                .filter(({ name }) => visiblePropNames.has(name))
+                .map((column) => {
+                const property = visibleProperties.find(({ name }) => name === column.name);
+                return {
+                    name: column.name,
+                    title: property?.title,
+                    visible: column?.options?.visible ?? true,
+                };
+            })
+            : visibleProperties.map((property) => ({
+                name: property.name,
+                title: property.title,
+                visible: true,
+            }));
+        return applyIncludeExclude(baseColumns, includeColumns, excludeColumns);
     }
     /**
      * Create Sort Definitions for Toolbar
@@ -3818,7 +4279,6 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.entityListTableService = inject(AXPEntityListTableService);
         this.entityListToolbarService = inject(AXPEntityListToolbarService);
         this.layoutThemeService = inject(AXPLayoutThemeService);
-        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
         this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
         this.entity = signal(null, ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.listNode = signal(null, ...(ngDevMode ? [{ debugName: "listNode" }] : []));
@@ -3826,7 +4286,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.allWidgets = viewChildren(AXPWidgetRendererDirective, ...(ngDevMode ? [{ debugName: "allWidgets" }] : []));
         this.listWidget = linkedSignal(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.list));
         this.toolbarWidget = computed(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.listToolbar), ...(ngDevMode ? [{ debugName: "toolbarWidget" }] : []));
-        this.selectedItems = computed(() => this.getValue()?.table || [], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         this.toolbarNode = signal(null, ...(ngDevMode ? [{ debugName: "toolbarNode" }] : []));
         this.destroyed = new Subject();
         //options
@@ -3839,7 +4299,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         //actions
         this.allActions = computed(() => {
             const originalList = this.entity()?.interfaces?.master?.list?.actions ?? [];
-            const externalActionList = (this.options()['actions'] ?? []);
+            const externalActionList = this.externalActions() ?? [];
             const usedOverrideActions = new Set();
             const mergedActions = originalList.map((originalAction) => {
                 const originalCommandName = typeof originalAction.command === 'string' ? originalAction.command : originalAction.command?.name;
@@ -3948,7 +4408,9 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
                 parentKey: this.entity()?.parentKey,
                 source: this.entity()?.source,
             },
-            data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
+            data: action?.scope == AXPEntityCommandScope.Selected
+                ? this.selectedItems()
+                : action?.options?.['process']?.data || null,
             options: action?.options,
             metadata: action?.metadata,
         });
@@ -4014,10 +4476,30 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
      * TODO: Implement column change logic
      */
     handleColumnChanges(changeTracker) {
-        if (changeTracker.isColumnsChanged) {
-            // TODO: Implement column change handling
-            console.log('Column changes detected - implementation needed');
+        if (!changeTracker.isColumnsChanged) {
+            return;
         }
+        const listInstance = this.listWidget()?.instance;
+        const toolbarState = this.getValue()?.toolbar;
+        if (!listInstance || !toolbarState?.columns) {
+            return;
+        }
+        // Current columns from list options
+        const currentColumns = (listInstance.options()['columns'] || []);
+        const columnByName = new Map(currentColumns.map((c) => [c.name, c]));
+        // Build new ordered columns array based on toolbar order/visibility
+        const updatedColumns = toolbarState.columns
+            .map((q) => {
+            const base = columnByName.get(q.name);
+            if (!base) {
+                return null;
+            }
+            // Preserve all existing column config but update visibility
+            return { ...base, visible: q.visible };
+        })
+            .filter((c) => c != null);
+        // Apply updated columns to the list widget and refresh
+        listInstance.setOptions({ columns: updatedColumns });
     }
     async ngOnInit() {
         super.ngOnInit();
@@ -4035,7 +4517,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
             excludeColumns: this.excludeColumns(),
             includeColumns: this.includeColumns(),
         };
-        const listOptions = await this.entityListTableService.convertEntityToListOptions(resolvedEntity, options);
+        const listOptions = await this.entityListTableService.convertEntityToListOptions(resolvedEntity, options, this.allActions());
         const toolbarOptions = await this.entityListToolbarService.convertEntityToolbarOptions(resolvedEntity, options);
         this.listNode.set({
             type: AXPWidgetsCatalog.list,
@@ -4057,7 +4539,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
             },
         });
     }
-    ngAfterViewInit() {
+    async ngAfterViewInit() {
         this.workflow.events$
             .pipe(ofType(AXPRefreshEvent))
             .pipe(takeUntil(this.destroyed))
@@ -4066,6 +4548,15 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
                 this.listWidget()?.instance.call('refresh');
             }
         });
+        const listWidget = (await this.layoutService.waitForWidget(`${this.entitySource()}-tab-list_table`, 500));
+        if (listWidget?.api && typeof listWidget.api === 'function') {
+            const onSelectionChange = listWidget.api()['onSelectionChange'];
+            if (onSelectionChange) {
+                onSelectionChange.pipe(takeUntil(this.destroyed)).subscribe((e) => {
+                    this.selectedItems.set(e);
+                });
+            }
+        }
     }
     ngOnDestroy() {
         this.listWidget.set(undefined);
@@ -4073,7 +4564,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.destroyed.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityListWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "\"ax-h-full\"" } }, providers: [AXPEntityListTableService, AXPEntityListToolbarService], viewQueries: [{ propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "allWidgets", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityListWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "\"ax-h-full\"" } }, providers: [AXPEntityListTableService, AXPEntityListToolbarService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "allWidgets", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (showEntityActions()) {
       <div class="ax-flex ax-gap-2 ax-justify-end ax-mb-4">
         @for (action of primaryActions(); track $index) {
@@ -4804,6 +5295,7 @@ class AXPLookupWidgetSelectorViewModel {
         this.options = options;
         this.workflow = this.injector.get(AXPWorkflowService);
         this.filterOperatorMiddleware = this.injector.get(AXPFilterOperatorMiddlewareService);
+        this.widgetResolver = this.injector.get(AXPWidgetRegistryService);
         this.dataSource = new AXDataSource({
             byKey: (key) => {
                 const func = this.entityDef.queries.byKey.execute;
@@ -4833,15 +5325,33 @@ class AXPLookupWidgetSelectorViewModel {
             return this.inlineFiltersPlaceholders().length > 0;
         }, ...(ngDevMode ? [{ debugName: "hasInlineFilters" }] : []));
         this.columns = () => {
-            const listColumns = this.entityDef.columns ?? [];
-            const columns = listColumns?.map((c) => c.name) ?? [];
-            const props = this.entityDef.properties.filter((p) => p.schema.hidden != true);
-            const displayColumns = props.filter((p) => (this.options.columns?.length ?? 0) > 0
-                ? this.options.columns.some((c) => c == p.name)
-                : columns.some((c) => c == p.name));
-            //
-            return displayColumns.map((p) => {
-                return new AXPEntityListViewColumnViewModel(p, listColumns?.find((c) => c.name == p.name));
+            const { columns = [], properties } = this.entityDef;
+            const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
+            const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
+            return columns
+                .filter(({ name, showAs }) => visiblePropNames.has(name) || showAs)
+                .filter(({ name }) => ((this.options.columns?.length ?? 0) == 0) || this.options.columns?.includes(name))
+                .map((column) => {
+                if (column.showAs) {
+                    const widgetConfig = this.widgetResolver.resolve(column.showAs.type);
+                    const property = {
+                        ...widgetConfig,
+                        name: column.name,
+                        title: column.title ?? '',
+                        schema: {
+                            dataType: 'string',
+                            interface: {
+                                type: column.showAs.type,
+                                options: column.showAs.options,
+                            },
+                        },
+                    };
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
+                else {
+                    const property = visibleProperties.find(({ name }) => name === column.name);
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
             });
         };
         this.inlineFilters = {
@@ -4950,13 +5460,24 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.entity = computed(() => this.options()['entity'], ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.columns = computed(() => this.options()['columns'] ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.textField = computed(() => this.options()['textField'] ?? '', ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.customFilter = computed(() => this.options()['filter'], ...(ngDevMode ? [{ debugName: "customFilter" }] : []));
         this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.look = computed(() => this.options()['look'] ?? 'lookup', ...(ngDevMode ? [{ debugName: "look" }] : []));
         this.allowClear = computed(() => (this.options()['allowClear'] ?? false), ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
-        this.textField = computed(() => {
-            return (this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title');
-        }, ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.defaultTextField = computed(() => {
+            const textField = this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
+            return textField;
+        }, ...(ngDevMode ? [{ debugName: "defaultTextField" }] : []));
+        this.displayField = computed(() => {
+            if (this.textField()) {
+                return this.textField();
+            }
+            return this.defaultTextField();
+        }, ...(ngDevMode ? [{ debugName: "displayField" }] : []));
+        this.selectedItemsText = computed(() => {
+            return this.selectedItems().map((item) => get(item, this.displayField())).join(', ');
+        }, ...(ngDevMode ? [{ debugName: "selectedItemsText" }] : []));
         this.valueField = computed(() => this.entityDef()?.properties.find((c) => c.name == 'id')?.name ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
         this.searchTerm = signal(null, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
@@ -5096,6 +5617,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.selectedItems.set(items);
         //
         const keys = items.map((item) => get(item, this.valueField()));
+        const text = items.map((item) => get(item, this.displayField()));
         //
         // extract data from valueField and set context by expose path
         if (this.expose()) {
@@ -5147,11 +5669,12 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "axp-lookup-widget-edit", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTagBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+  @if(vm()) {
     @if (look() == 'select') {
       <ax-select-box
         [dataSource]="vm()?.dataSource!"
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         [disabled]="disabled()"
         [multiple]="multiple()"
@@ -5167,7 +5690,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     } @else {
       <ax-tag-box
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         (onValueChanged)="handleValueChange($event)"
         [placeholder]="placeholder() | translate | async"
@@ -5204,6 +5727,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-suffix>
       </ax-tag-box>
     }
+  }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 //
                 AXButtonModule }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5213,11 +5737,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             args: [{
                     selector: 'axp-lookup-widget-edit',
                     template: `
+  @if(vm()) {
     @if (look() == 'select') {
       <ax-select-box
         [dataSource]="vm()?.dataSource!"
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         [disabled]="disabled()"
         [multiple]="multiple()"
@@ -5233,7 +5758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     } @else {
       <ax-tag-box
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         (onValueChanged)="handleValueChange($event)"
         [placeholder]="placeholder() | translate | async"
@@ -5270,6 +5795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         </ax-suffix>
       </ax-tag-box>
     }
+  }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
@@ -6155,7 +6681,7 @@ class AXPShowDetailViewAction extends AXPWorkflowAction {
         const [module, entity] = context.getVariable('entity').split('.');
         const { id } = context.getVariable('data');
         const newPayload = {
-            commands: `/${this.sessionService.application?.name}/m/${module}/e/${entity}/${id}/view`,
+            commands: `/${this.sessionService.application?.name}/m/${module}/e/${entity}/${id}/new-view`,
         };
         context.setVariable('payload', newPayload);
         this.navigation.execute(context);
@@ -6616,7 +7142,7 @@ function entityDetailsSimpleCondition(fk) {
         value: '{{context.eval("id")}}',
     };
 }
-function entityDetailsReferenceCondition() {
+function entityDetailsReferenceCondition(type) {
     return [
         {
             name: 'reference.id',
@@ -6626,7 +7152,7 @@ function entityDetailsReferenceCondition() {
         {
             name: 'reference.type',
             operator: { type: 'equal' },
-            value: '{{context.eval("entityName")}}',
+            value: type,
         },
     ];
 }
@@ -6636,6 +7162,7 @@ function entityDetailsEditAction() {
         command: 'quick-modify-entity',
         priority: 'secondary',
         type: 'update',
+        default: true,
         scope: AXPEntityCommandScope.Individual,
     };
 }
@@ -6652,7 +7179,7 @@ function entityOverrideDetailsViewAction() {
 function entityDetailsCrudActions(parentId) {
     return [entityDetailsCreateActions(parentId), entityDetailsEditAction(), entityOverrideDetailsViewAction()];
 }
-function entityDetailsReferenceCreateActions() {
+function entityDetailsReferenceCreateActions(type) {
     return [
         {
             title: '@general:actions.create.title',
@@ -6665,7 +7192,7 @@ function entityDetailsReferenceCreateActions() {
                         data: {
                             reference: {
                                 id: '{{context.eval("id")}}',
-                                type: '{{context.eval("entityName")}}',
+                                type: type,
                             },
                         },
                     },