@sap/ux-ui5-tooling 1.20.4 → 1.21.0

package/dist/preview-middleware/dist/client/adp/quick-actions/table-quick-action-base.ts

@@ -0,0 +1,433 @@
+import type UI5Element from 'sap/ui/core/Element';
+import { NESTED_QUICK_ACTION_KIND } from '@sap-ux-private/control-property-editor-common';
+import type IconTabBar from 'sap/m/IconTabBar';
+import type IconTabFilter from 'sap/m/IconTabFilter';
+import type Table from 'sap/m/Table';
+import type MdcTable from 'sap/ui/mdc/Table';
+import type SmartTable from 'sap/ui/comp/smarttable/SmartTable';
+import type { QuickActionContext } from '../../cpe/quick-actions/quick-action-definition';
+import OverlayUtil from 'sap/ui/dt/OverlayUtil';
+import type { NestedQuickActionChild, NestedQuickAction } from '@sap-ux-private/control-property-editor-common';
+import { getParentContainer, getRelevantControlFromActivePage } from '../../cpe/quick-actions/utils';
+import { getControlById, isA, isManagedObject } from '../../utils/core';
+import { getUi5Version, isLowerThanMinimalUi5Version } from '../../utils/version';
+import type ObjectPageSection from 'sap/uxap/ObjectPageSection';
+import type ObjectPageSubSection from 'sap/uxap/ObjectPageSubSection';
+import type ObjectPageLayout from 'sap/uxap/ObjectPageLayout';
+import type ManagedObject from 'sap/ui/base/ManagedObject';
+import type { EnablementValidator } from './enablement-validator';
+import { QuickActionDefinitionBase } from './quick-action-base';
+import {
+    ANALYTICAL_TABLE_TYPE,
+    GRID_TABLE_TYPE,
+    M_TABLE_TYPE,
+    MDC_TABLE_TYPE,
+    SMART_TABLE_TYPE,
+    TREE_TABLE_TYPE
+} from './control-types';
+import { isVariantManagementEnabledOPPage } from './fe-v2/utils';
+import { isMacroTable } from '../../utils/fe-v4';
+
+const SMART_TABLE_ACTION_ID = 'CTX_COMP_VARIANT_CONTENT';
+const M_TABLE_ACTION_ID = 'CTX_ADD_ELEMENTS_AS_CHILD';
+const SETTINGS_ID = 'CTX_SETTINGS';
+const REARRANGE_TOOLBAR_SETTINGS_ID = 'CTX_SETTINGS0';
+const ICON_TAB_BAR_TYPE = 'sap.m.IconTabBar';
+
+async function getActionId(table: UI5Element): Promise<string[]> {
+    const { major, minor } = await getUi5Version();
+
+    if (isA(SMART_TABLE_TYPE, table)) {
+        if (major === 1 && minor === 96) {
+            return [SETTINGS_ID];
+        } else {
+            return [SMART_TABLE_ACTION_ID];
+        }
+    }
+
+    return [M_TABLE_ACTION_ID, SETTINGS_ID];
+}
+
+async function getRearrangeToolbarContentActionId(): Promise<string> {
+    const { major, minor } = await getUi5Version();
+    if (major === 1 && minor <= 127) {
+        return SETTINGS_ID;
+    }
+    return REARRANGE_TOOLBAR_SETTINGS_ID;
+}
+
+export type TableQuickActionsOptions = {
+    includeServiceAction?: boolean;
+    areTableRowsRequired?: boolean;
+    validatePageVariantManagement?: boolean;
+    validateTableColumns?: boolean;
+};
+
+/**
+ * Base class for table quick actions.
+ */
+export abstract class TableQuickActionDefinitionBase extends QuickActionDefinitionBase<
+    typeof NESTED_QUICK_ACTION_KIND
+> {
+    public isApplicable = false;
+
+    public children: NestedQuickActionChild[] = [];
+    public tableMap: Record<
+        string,
+        {
+            table: UI5Element;
+            tableUpdateEventAttachedOnce: boolean;
+            iconTabBarFilterKey?: string;
+            changeColumnActionId?: string;
+            changeToolbarContentAction?: { id: string; enabled: boolean };
+            sectionInfo?: {
+                section: ObjectPageSection;
+                subSection: ObjectPageSubSection;
+                layout?: ObjectPageLayout;
+            };
+        }
+    > = {};
+    public iconTabBar: IconTabBar | undefined;
+
+    protected get textKey(): string {
+        return this.defaultTextKey;
+    }
+
+    protected control: UI5Element | undefined;
+
+    constructor(
+        public readonly type: string,
+        protected readonly controlTypes: string[],
+        protected readonly defaultTextKey: string,
+        protected readonly context: QuickActionContext,
+        protected options: TableQuickActionsOptions = {},
+        protected readonly enablementValidators: EnablementValidator[] = []
+    ) {
+        super(type, NESTED_QUICK_ACTION_KIND, defaultTextKey, context, enablementValidators);
+    }
+
+    /**
+     * Adds action id to the table map entry, if the service actions are needed.
+     *
+     * @param table - table element
+     * @param tableMapKey - map key
+     */
+    protected async addSettingsActionId(table: UI5Element, tableMapKey: string): Promise<void> {
+        if (this.options.includeServiceAction) {
+            const actions = await this.context.actionService.get(table.getId());
+            const actionsIds = await getActionId(table);
+            const changeColumnActionId = actionsIds.find(
+                (actionId) => actions.findIndex((action) => action.id === actionId) > -1
+            );
+            this.tableMap[tableMapKey].changeColumnActionId = changeColumnActionId;
+            const changeToolbarContentActionId = await getRearrangeToolbarContentActionId();
+            const changeToolbarContentAction = actions.find((action) => action.id === changeToolbarContentActionId);
+            this.tableMap[tableMapKey].changeToolbarContentAction = changeToolbarContentAction
+                ? {
+                      id: changeToolbarContentAction.id,
+                      enabled: changeToolbarContentAction.enabled
+                  }
+                : undefined;
+        }
+    }
+
+    /**
+     * Builds a map of custom tab keys to their associated table building blocks.
+     *
+     * @param iconTabBarFilterMap - A map of icon tab bar filter keys to their labels.
+     * @returns A map where each key is a combination of contextPath and metaPath, and the value is the corresponding custom tab key.
+     */
+    private getCustomViewTableBuildingBlocksMap(iconTabBarFilterMap: { [key: string]: string }): {
+        [key: string]: string;
+    } {
+        const customTabTableBuildingBlockMap: { [key: string]: string } = {};
+
+        const customTabs = Object.keys(iconTabBarFilterMap).filter((key) => /^fe::CustomTab::\d+$/.test(key));
+        for (const key of customTabs) {
+            const items = (this.iconTabBar?.getItems() ?? []) as unknown as ManagedObject[];
+            const filterItem = items.find(
+                (item) => isA<IconTabFilter>('sap.m.IconTabFilter', item) && item.getKey() === key
+            );
+            if (filterItem && isA<IconTabFilter>('sap.m.IconTabFilter', filterItem)) {
+                filterItem.getContent().forEach((content) => {
+                    if (isMacroTable(content)) {
+                        const { metaPath, contextPath } = content;
+                        const path = metaPath.startsWith(contextPath) ? metaPath : `${contextPath}${metaPath}`;
+                        customTabTableBuildingBlockMap[path] = key;
+                    }
+                });
+            }
+        }
+        return customTabTableBuildingBlockMap;
+    }
+
+    /**
+     * Initializes action object instance
+     */
+    async initialize(): Promise<void> {
+        // No action found in control design time for version < 1.96
+        const version = await getUi5Version();
+        if (isLowerThanMinimalUi5Version(version, { major: 1, minor: 96 })) {
+            this.isApplicable = false;
+            return;
+        }
+        const iconTabBarFilterMap = this.buildIconTabBarFilterMap();
+        const customViewTableBuildingBlockMap = this.getCustomViewTableBuildingBlocksMap(iconTabBarFilterMap);
+        for (const table of getRelevantControlFromActivePage(
+            this.context.controlIndex,
+            this.context.view,
+            this.controlTypes
+        )) {
+            const tabKey = Object.keys(iconTabBarFilterMap).find((key) => table.getId().endsWith(key));
+            const section = getParentContainer<ObjectPageSection>(table, 'sap.uxap.ObjectPageSection');
+            if (section) {
+                await this.collectChildrenInSection(section, table);
+            } else if (this.iconTabBar && tabKey) {
+                const label = `'${iconTabBarFilterMap[tabKey]}' table`;
+                const tableMapKey = this.children.length.toString();
+                const child = this.createChild(label, table, tableMapKey, customViewTableBuildingBlockMap);
+                this.children.push(child);
+                this.tableMap[tableMapKey] = {
+                    table,
+                    iconTabBarFilterKey: tabKey,
+                    tableUpdateEventAttachedOnce: false
+                };
+                await this.addSettingsActionId(table, tableMapKey);
+            } else {
+                await this.processTable(table);
+            }
+        }
+        if (this.children.length > 0) {
+            this.isApplicable = true;
+        }
+    }
+
+    /**
+     * Retrieves the internal table control from a UI5Element.
+     *
+     * @param table - The UI5Element instance to analyze.
+     * @returns The internal table otherwise undefined.
+     */
+    protected getInternalTable(table: UI5Element): UI5Element | undefined {
+        try {
+            let tableInternal: ManagedObject | undefined;
+
+            if (isA<SmartTable>(SMART_TABLE_TYPE, table)) {
+                const itemsAggregation = table.getAggregation('items') as ManagedObject[];
+                tableInternal = itemsAggregation.find((item) =>
+                    [M_TABLE_TYPE, TREE_TABLE_TYPE, ANALYTICAL_TABLE_TYPE, GRID_TABLE_TYPE].some((tType) =>
+                        isA(tType, item)
+                    )
+                );
+            }
+            return tableInternal as UI5Element | undefined;
+        } catch {
+            return undefined;
+        }
+    }
+
+    /**
+     * Determines table label for the given table element
+     *
+     * @param table - table element
+     * @returns table label if found or 'Unnamed table'
+     */
+    private getTableLabel(table: UI5Element): string {
+        if (isA<SmartTable>(SMART_TABLE_TYPE, table) || isA<MdcTable>(MDC_TABLE_TYPE, table)) {
+            const header = table.getHeader();
+            if (header) {
+                return `'${header}' table`;
+            }
+        } else if (isA<Table>(M_TABLE_TYPE, table)) {
+            const title = table?.getHeaderToolbar()?.getTitleControl()?.getText();
+            if (title) {
+                return `'${title}' table`;
+            }
+        }
+
+        return 'Unnamed table';
+    }
+
+    /**
+     * Builds a map kay/tab_name for ICON_TAB_BAR control of the active page, if such exists
+     *
+     * @returns built map
+     */
+    protected buildIconTabBarFilterMap(): { [key: string]: string } {
+        const iconTabBarFilterMap: { [key: string]: string } = {};
+
+        // Assumption only a tab bar control per page.
+        const tabBar = getRelevantControlFromActivePage(this.context.controlIndex, this.context.view, [
+            ICON_TAB_BAR_TYPE
+        ])[0];
+        if (tabBar) {
+            const control = getControlById(tabBar.getId());
+            if (isA<IconTabBar>(ICON_TAB_BAR_TYPE, control)) {
+                this.iconTabBar = control;
+                for (const item of control.getItems()) {
+                    if (isManagedObject(item) && isA<IconTabFilter>('sap.m.IconTabFilter', item)) {
+                        iconTabBarFilterMap[item.getKey()] = item.getText();
+                    }
+                }
+            }
+        }
+
+        return iconTabBarFilterMap;
+    }
+
+    /**
+     * Collects subsection data in the table map for the given section and table
+     *
+     * @param section - object page section
+     * @param table - table element
+     */
+    private async collectChildrenInSection(section: ObjectPageSection, table: UI5Element): Promise<void> {
+        const layout = getParentContainer<ObjectPageLayout>(table, 'sap.uxap.ObjectPageLayout');
+        const subSections = section.getSubSections();
+        const subSection = getParentContainer<ObjectPageSubSection>(table, 'sap.uxap.ObjectPageSubSection');
+        if (subSection) {
+            if (subSections?.length === 1) {
+                await this.processTable(table, { section, subSection: subSections[0], layout });
+            } else if (subSections.length > 1) {
+                const existingChildIdx = this.children.findIndex(
+                    (val) => val.label === `'${section.getTitle()}' section`
+                );
+                let tableMapIndex;
+                const label = this.getTableLabel(table);
+                if (existingChildIdx < 0) {
+                    tableMapIndex = `${this.children.length}/0`;
+                    const child = this.createChild(label, table, tableMapIndex);
+                    this.children.push({
+                        path: this.children.length.toString(),
+                        label: `'${section?.getTitle()}' section`,
+                        enabled: true,
+                        children: [child]
+                    });
+                } else {
+                    tableMapIndex = `${existingChildIdx}/${this.children[existingChildIdx].children.length}`;
+                    const child = this.createChild(label, table, tableMapIndex);
+                    this.children[existingChildIdx].children.push(child);
+                }
+
+                this.tableMap[tableMapIndex] = {
+                    table,
+                    sectionInfo: { section, subSection, layout },
+                    tableUpdateEventAttachedOnce: false
+                };
+                await this.addSettingsActionId(table, tableMapIndex);
+            }
+        }
+    }
+
+    /**
+     * Processes table element and pushes table data to the children array
+     *
+     * @param table - table element
+     * @param sectionInfo - section info object
+     * @param sectionInfo.section
+     * @param sectionInfo.subSection
+     * @param sectionInfo.layout
+     */
+    private async processTable(
+        table: UI5Element,
+        sectionInfo?: { section: ObjectPageSection; subSection: ObjectPageSubSection; layout?: ObjectPageLayout }
+    ): Promise<void> {
+        const tableMapKey = this.children.length.toString();
+        if (
+            [
+                SMART_TABLE_TYPE,
+                M_TABLE_TYPE,
+                MDC_TABLE_TYPE,
+                TREE_TABLE_TYPE,
+                GRID_TABLE_TYPE,
+                ANALYTICAL_TABLE_TYPE
+            ].some((type) => isA(type, table))
+        ) {
+            const label = this.getTableLabel(table);
+            const child = this.createChild(label, table, tableMapKey);
+            this.children.push(child);
+        }
+
+        this.tableMap[tableMapKey] = {
+            table,
+            sectionInfo: sectionInfo,
+            tableUpdateEventAttachedOnce: false
+        };
+        await this.addSettingsActionId(table, tableMapKey);
+    }
+
+    /**
+     * Selects closest overlay for the given table element
+     *
+     * @param table - table element
+     */
+    protected selectOverlay(table: UI5Element): void {
+        const controlOverlay = OverlayUtil.getClosestOverlayFor(table);
+        if (controlOverlay) {
+            controlOverlay.setSelected(true);
+        }
+    }
+
+    /**
+     * Prepares nested quick action object
+     *
+     * @returns action instance
+     */
+    getActionObject(): NestedQuickAction {
+        return {
+            kind: NESTED_QUICK_ACTION_KIND,
+            id: this.id,
+            enabled: !this.isDisabled,
+            tooltip: this.tooltip,
+            title: this.context.resourceBundle.getText(this.textKey),
+            children: this.children
+        };
+    }
+
+    createChild(
+        label: string,
+        table: UI5Element,
+        path: string,
+        customViewTableBuildingBlockMap?: {
+            [key: string]: string;
+        }
+    ): NestedQuickActionChild {
+        const child: NestedQuickActionChild = {
+            path,
+            label,
+            enabled: true,
+            children: []
+        };
+        const parent = table.getParent();
+        const macroTable = isMacroTable(parent) ? parent : undefined;
+        if (this.options.validateTableColumns && macroTable) {
+            const { metaPath, contextPath } = macroTable;
+            const finalPath = metaPath.startsWith(contextPath) ? metaPath : `${contextPath}${metaPath}`;
+            if (customViewTableBuildingBlockMap?.[finalPath]) {
+                child.enabled = false;
+                child.tooltip = this.context.resourceBundle.getText('CUSTOM_COLUMNS_NOT_SUPPORTED');
+                return child;
+            }
+        }
+        if (this.options.validatePageVariantManagement) {
+            const variantEnabledV2 = isVariantManagementEnabledOPPage(this.context, table);
+            if (variantEnabledV2 === false) {
+                child.enabled = false;
+                child.tooltip = this.context.resourceBundle.getText(
+                    'TABLE_ACTION_DISABLED_VARIANT_MANAGEMENT_NOT_AVAILABLE'
+                );
+                return child;
+            }
+        }
+        if (!this.options.areTableRowsRequired) {
+            return child;
+        }
+        const innerTable = this.getInternalTable(table);
+        const tableRows = innerTable?.getAggregation('items') ?? [];
+        if (isA(M_TABLE_TYPE, innerTable) && Array.isArray(tableRows) && tableRows.length === 0) {
+            child.enabled = false;
+            child.tooltip = this.context.resourceBundle.getText('TABLE_ACTION_DISABLED_ROWS_NOT_AVAILABLE');
+        }
+        return child;
+    }
+}

package/dist/preview-middleware/dist/client/adp/sync-views-utils.js

@@ -0,0 +1,123 @@
+"use strict";
+
+sap.ui.define(["sap/base/Log", "sap/ui/core/Element", "open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common", "../utils/error", "../utils/info-center-message", "../utils/version"], function (Log, Element, ___sap_ux_private_control_property_editor_common, ___utils_error, ___utils_info_center_message, ___utils_version) {
+  "use strict";
+
+  function __ui5_require_async(path) {
+    return new Promise(function (resolve, reject) {
+      sap.ui.require([path], function (module) {
+        if (!(module && module.__esModule)) {
+          module = module === null || !(typeof module === "object" && path.endsWith("/library")) ? {
+            default: module
+          } : module;
+          Object.defineProperty(module, "__esModule", {
+            value: true
+          });
+        }
+        resolve(module);
+      }, function (err) {
+        reject(err);
+      });
+    });
+  }
+  const MessageBarType = ___sap_ux_private_control_property_editor_common["MessageBarType"];
+  const getError = ___utils_error["getError"];
+  const sendInfoCenterMessage = ___utils_info_center_message["sendInfoCenterMessage"];
+  const isLowerThanMinimalUi5Version = ___utils_version["isLowerThanMinimalUi5Version"];
+  const syncViews = new Set();
+  let warningShown = false;
+
+  /**
+   * Get Ids for all sync views
+   *
+   * @param ui5VersionInfo UI5 Version Information
+   *
+   * @returns array of Ids for application sync views
+   */
+  async function updateSyncViewsIds(ui5VersionInfo) {
+    try {
+      if (isLowerThanMinimalUi5Version(ui5VersionInfo, {
+        major: 1,
+        minor: 120,
+        patch: 2
+      })) {
+        const elements = Element.registry.filter(() => true);
+        elements.forEach(ui5Element => {
+          if (isSyncView(ui5Element)) {
+            syncViews.add(ui5Element.getId());
+          }
+        });
+      } else {
+        const ElementRegistry = (await __ui5_require_async('sap/ui/core/ElementRegistry')).default;
+        const elements = ElementRegistry.all();
+        Object.entries(elements).forEach(([key, ui5Element]) => {
+          if (isSyncView(ui5Element)) {
+            syncViews.add(key);
+          }
+        });
+      }
+    } catch (error) {
+      Log.error('Could not get application sync views', getError(error));
+    }
+  }
+
+  /**
+   * Show warning message if there are sync views in the application and the warning has not been shown yet.
+   */
+  async function showSyncViewsWarning() {
+    if (warningShown) {
+      return;
+    }
+    if (!syncViews.size) {
+      return;
+    }
+    warningShown = true;
+    await sendInfoCenterMessage({
+      title: {
+        key: 'ADP_SYNC_VIEWS_TITLE'
+      },
+      description: {
+        key: 'ADP_SYNC_VIEWS_MESSAGE'
+      },
+      type: MessageBarType.warning
+    });
+  }
+
+  /**
+   * Check if element is sync view
+   *
+   * @param element Design time Element
+   * @returns boolean if element is sync view or not
+   */
+  function isSyncView(element) {
+    return element?.getMetadata()?.getName()?.includes('XMLView') && element?.oAsyncState === undefined;
+  }
+
+  /**
+   * Retrieves the set of synchronious view IDs.
+   *
+   * @returns Cached set containing the IDs of all synchronious views.
+   */
+  function getSyncViewIds() {
+    return syncViews;
+  }
+
+  /**
+   * Resets the cached synchronious views and warning state.
+   * Needed for testing purposes to ensure a clean state.
+   */
+  function resetSyncViews() {
+    syncViews.clear();
+    warningShown = false;
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.updateSyncViewsIds = updateSyncViewsIds;
+  __exports.showSyncViewsWarning = showSyncViewsWarning;
+  __exports.isSyncView = isSyncView;
+  __exports.getSyncViewIds = getSyncViewIds;
+  __exports.resetSyncViews = resetSyncViews;
+  return __exports;
+});
+//# sourceMappingURL=sync-views-utils.js.map

package/dist/preview-middleware/dist/client/adp/sync-views-utils.ts

@@ -0,0 +1,90 @@
+import Log from 'sap/base/Log';
+import Element from 'sap/ui/core/Element';
+import type DTElement from 'sap/ui/dt/Element';
+
+import { MessageBarType } from '@sap-ux-private/control-property-editor-common';
+import { getError } from '../utils/error';
+import { sendInfoCenterMessage } from '../utils/info-center-message';
+import { isLowerThanMinimalUi5Version, Ui5VersionInfo } from '../utils/version';
+
+const syncViews = new Set<string>();
+let warningShown = false;
+
+/**
+ * Get Ids for all sync views
+ *
+ * @param ui5VersionInfo UI5 Version Information
+ *
+ * @returns array of Ids for application sync views
+ */
+export async function updateSyncViewsIds(ui5VersionInfo: Ui5VersionInfo): Promise<void> {
+    try {
+        if (isLowerThanMinimalUi5Version(ui5VersionInfo, { major: 1, minor: 120, patch: 2 })) {
+            const elements = Element.registry.filter(() => true) as DTElement[];
+            elements.forEach((ui5Element) => {
+                if (isSyncView(ui5Element)) {
+                    syncViews.add(ui5Element.getId());
+                }
+            });
+        } else {
+            const ElementRegistry = (await import('sap/ui/core/ElementRegistry')).default;
+            const elements = ElementRegistry.all() as Record<string, DTElement>;
+            Object.entries(elements).forEach(([key, ui5Element]) => {
+                if (isSyncView(ui5Element)) {
+                    syncViews.add(key);
+                }
+            });
+        }
+    } catch (error) {
+        Log.error('Could not get application sync views', getError(error));
+    }
+}
+
+/**
+ * Show warning message if there are sync views in the application and the warning has not been shown yet.
+ */
+export async function showSyncViewsWarning(): Promise<void> {
+    if (warningShown) {
+        return;
+    }
+
+    if (!syncViews.size) {
+        return;
+    }
+
+    warningShown = true;
+
+    await sendInfoCenterMessage({
+        title: { key: 'ADP_SYNC_VIEWS_TITLE' },
+        description: { key: 'ADP_SYNC_VIEWS_MESSAGE' },
+        type: MessageBarType.warning
+    });
+}
+
+/**
+ * Check if element is sync view
+ *
+ * @param element Design time Element
+ * @returns boolean if element is sync view or not
+ */
+export function isSyncView(element: DTElement): boolean {
+    return element?.getMetadata()?.getName()?.includes('XMLView') && element?.oAsyncState === undefined;
+}
+
+/**
+ * Retrieves the set of synchronious view IDs.
+ *
+ * @returns Cached set containing the IDs of all synchronious views.
+ */
+export function getSyncViewIds(): Set<string> {
+    return syncViews;
+}
+
+/**
+ * Resets the cached synchronious views and warning state.
+ * Needed for testing purposes to ensure a clean state.
+ */
+export function resetSyncViews(): void {
+    syncViews.clear();
+    warningShown = false;
+}

package/dist/preview-middleware/dist/client/adp/ui/AddAction.fragment.xml

@@ -0,0 +1,49 @@
+<Dialog id="addActionFragmentsDialog"
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:f="sap.ui.layout.form"  
+    title="{/title}" 
+    contentWidth="500px" 
+    class="sapUiRTABorder">
+    <content>
+        <f:SimpleForm id="addActionFragmentsDialog_Form"
+            editable="true"
+            layout="ResponsiveGridLayout"
+            labelSpanS="4"
+            singleContainerFullSize="false">
+            <f:content>
+                <Label text="{i18n>ADP_ADD_ACTION_DIALOG_ACTION_ID_LABEL}" required="true" />
+                <Input 
+                    value="{/actionId}" 
+                    liveChange="onActionIdInputChange">
+                </Input>
+                <Label text="{i18n>ADP_ADD_ACTION_DIALOG_BUTTON_TEXT_LABEL}" required="true" />
+                <Input 
+                    value="{/buttonText}" 
+                    liveChange="onButtonTextInputChange">
+                </Input>
+                <Label text="{i18n>ADP_ADD_ACTION_DIALOG_HANDLER_METHOD_LABEL}" />
+                <Input 
+                    value="{/handlerReference}" 
+                    visible="{/hasController}" 
+                    editable="false"><!--Subjected to change, when handler can be provided by user -->
+                </Input>
+            </f:content>
+        </f:SimpleForm>
+    </content>
+    <beginButton>
+        <Button 
+            id="createDialogBtn" 
+            text="Create"
+            press="onCreateBtnPress"
+            enabled="false"
+            type="Emphasized" />
+    </beginButton>
+    <endButton>
+        <Button 
+            id="closeDialogBtn" 
+            text="Cancel"
+            press="handleDialogClose"
+            type="Reject" />
+    </endButton>
+</Dialog>