@linkup-ai/abap-ai 2.0.0

package/dist/knowledge/fiori/ui5-fragments-dialogs.md

@@ -0,0 +1,330 @@
+# UI5 Fragments & Dialogs — Fragment, Dialog, MessageBox, MessageToast, Popover
+
+## Fragment Definition
+
+```xml
+<!-- fragments/CreateOrder.fragment.xml -->
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:l="sap.ui.layout">
+
+    <Dialog id="createDialog" title="Create Order" draggable="true"
+        contentWidth="500px">
+        <content>
+            <l:form:SimpleForm xmlns:form="sap.ui.layout.form"
+                editable="true" layout="ResponsiveGridLayout">
+                <form:content>
+                    <Label text="Customer"/>
+                    <Input id="customerInput" value="{newOrder>/CustomerID}"
+                        required="true"/>
+                    <Label text="Amount"/>
+                    <Input id="amountInput" value="{newOrder>/Amount}" type="Number"/>
+                    <Label text="Description"/>
+                    <TextArea id="descInput" value="{newOrder>/Description}" rows="3"/>
+                </form:content>
+            </l:form:SimpleForm>
+        </content>
+        <beginButton>
+            <Button text="Create" type="Emphasized" press=".onCreateConfirm"/>
+        </beginButton>
+        <endButton>
+            <Button text="Cancel" press=".onCreateCancel"/>
+        </endButton>
+    </Dialog>
+
+</core:FragmentDefinition>
+```
+
+## Loading Fragment (Async — Required)
+
+```js
+// In controller — load and open dialog
+onOpenCreateDialog: function() {
+    var oView = this.getView();
+
+    if (!this._pCreateDialog) {
+        this._pCreateDialog = this.loadFragment({
+            name: "com.myapp.fragments.CreateOrder"
+        });
+    }
+
+    this._pCreateDialog.then(function(oDialog) {
+        // Set model for new record
+        oView.setModel(new sap.ui.model.json.JSONModel({
+            CustomerID: "",
+            Amount: 0,
+            Description: ""
+        }), "newOrder");
+
+        oDialog.open();
+    });
+},
+
+onCreateConfirm: function() {
+    var oData = this.getView().getModel("newOrder").getData();
+    // ... create record via OData ...
+    this.byId("createDialog").close();
+},
+
+onCreateCancel: function() {
+    this.byId("createDialog").close();
+}
+```
+
+## Fragment Lifecycle
+
+```js
+// loadFragment adds fragment to view (auto-prefixes IDs, inherits models)
+// Preferred over Fragment.load for view-integrated fragments
+
+// Alternative: Fragment.load (standalone, no view integration)
+sap.ui.core.Fragment.load({
+    id: oView.getId(),
+    name: "com.myapp.fragments.MyFragment",
+    controller: this
+}).then(function(oFragment) {
+    oView.addDependent(oFragment);  // MUST add as dependent for model inheritance
+    oFragment.open();
+});
+```
+
+## Dialog — Simple Confirmation
+
+```js
+sap.ui.require(["sap/m/MessageBox"], function(MessageBox) {
+
+    MessageBox.confirm("Delete this order?", {
+        title: "Confirm Delete",
+        onClose: function(oAction) {
+            if (oAction === MessageBox.Action.OK) {
+                // proceed with delete
+            }
+        }
+    });
+
+});
+```
+
+## MessageBox — All Types
+
+```js
+// Error
+MessageBox.error("Something went wrong", {
+    title: "Error",
+    actions: [MessageBox.Action.RETRY, MessageBox.Action.CLOSE],
+    onClose: function(sAction) {
+        if (sAction === MessageBox.Action.RETRY) {
+            // retry logic
+        }
+    }
+});
+
+// Warning
+MessageBox.warning("This action cannot be undone");
+
+// Information
+MessageBox.information("Order has been submitted");
+
+// Success
+MessageBox.success("Order created successfully");
+
+// Custom actions
+MessageBox.show("Save changes before leaving?", {
+    title: "Unsaved Changes",
+    actions: ["Save", "Discard", MessageBox.Action.CANCEL],
+    emphasizedAction: "Save",
+    onClose: function(sAction) {
+        switch (sAction) {
+            case "Save": /* save */ break;
+            case "Discard": /* discard */ break;
+            case MessageBox.Action.CANCEL: /* stay */ break;
+        }
+    }
+});
+```
+
+## MessageToast — Quick Feedback
+
+```js
+sap.ui.require(["sap/m/MessageToast"], function(MessageToast) {
+    MessageToast.show("Order saved successfully");
+    MessageToast.show("Copied to clipboard", { duration: 3000, width: "15em" });
+});
+```
+
+## MessageStrip — Inline Message
+
+```xml
+<MessageStrip text="Draft saved" type="Success" showIcon="true"
+    showCloseButton="true" close=".onStripClose"/>
+
+<MessageStrip text="Missing required fields" type="Error" showIcon="true"
+    visible="{= ${view>/hasErrors}}"/>
+```
+
+## Popover
+
+```xml
+<!-- fragments/InfoPopover.fragment.xml -->
+<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
+    <Popover id="infoPopover" title="Details" placement="Auto">
+        <content>
+            <VBox class="sapUiSmallMargin">
+                <Label text="Created By"/>
+                <Text text="{CreatedBy}"/>
+                <Label text="Created At"/>
+                <Text text="{CreatedAt}"/>
+            </VBox>
+        </content>
+    </Popover>
+</core:FragmentDefinition>
+```
+
+```js
+onShowInfo: function(oEvent) {
+    var oButton = oEvent.getSource();
+    var oView = this.getView();
+
+    if (!this._pInfoPopover) {
+        this._pInfoPopover = this.loadFragment({
+            name: "com.myapp.fragments.InfoPopover"
+        });
+    }
+
+    this._pInfoPopover.then(function(oPopover) {
+        oPopover.openBy(oButton);
+    });
+}
+```
+
+## Select Dialog (Value Help)
+
+```js
+onValueHelp: function() {
+    if (!this._pSelectDialog) {
+        this._pSelectDialog = this.loadFragment({
+            name: "com.myapp.fragments.CustomerSelect"
+        });
+    }
+    this._pSelectDialog.then(function(oDialog) {
+        oDialog.open();
+    });
+}
+```
+
+```xml
+<!-- fragments/CustomerSelect.fragment.xml -->
+<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
+    <SelectDialog id="customerSelectDialog"
+        title="Select Customer"
+        items="{/Customers}"
+        search=".onCustomerSearch"
+        confirm=".onCustomerSelected"
+        cancel=".onCustomerSelectCancel"
+        growing="true"
+        growingThreshold="20">
+        <StandardListItem title="{CustomerName}" description="{CustomerID}"
+            icon="sap-icon://customer"/>
+    </SelectDialog>
+</core:FragmentDefinition>
+```
+
+```js
+onCustomerSearch: function(oEvent) {
+    var sValue = oEvent.getParameter("value");
+    var oFilter = new sap.ui.model.Filter("CustomerName", "Contains", sValue);
+    oEvent.getSource().getBinding("items").filter([oFilter]);
+},
+
+onCustomerSelected: function(oEvent) {
+    var oItem = oEvent.getParameter("selectedItem");
+    if (oItem) {
+        var sCustomerID = oItem.getBindingContext().getProperty("CustomerID");
+        this.byId("customerInput").setValue(sCustomerID);
+    }
+},
+
+onCustomerSelectCancel: function() {
+    // nothing to do — dialog auto-closes
+}
+```
+
+## Table Select Dialog (Multi-Column Value Help)
+
+```xml
+<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
+    <TableSelectDialog id="materialSelectDialog"
+        title="Select Material"
+        items="{/Materials}"
+        confirm=".onMaterialSelected"
+        search=".onMaterialSearch"
+        growing="true"
+        multiSelect="false">
+        <columns>
+            <Column><Text text="Material"/></Column>
+            <Column><Text text="Description"/></Column>
+            <Column hAlign="End"><Text text="Price"/></Column>
+        </columns>
+        <items>
+            <ColumnListItem>
+                <Text text="{MaterialID}"/>
+                <Text text="{Description}"/>
+                <ObjectNumber number="{Price}" unit="{Currency}"/>
+            </ColumnListItem>
+        </items>
+    </TableSelectDialog>
+</core:FragmentDefinition>
+```
+
+## Message Handling — sap.ui.core.message.MessageManager
+
+```js
+// Get message manager
+var oMessageManager = sap.ui.getCore().getMessageManager();
+
+// Register for messages (in onInit)
+oMessageManager.registerObject(this.getView(), true);
+this.getView().setModel(oMessageManager.getMessageModel(), "message");
+
+// Add custom message
+oMessageManager.addMessages(
+    new sap.ui.core.message.Message({
+        message: "Customer not found",
+        type: sap.ui.core.MessageType.Error,
+        target: "/CustomerID",
+        processor: this.getView().getModel()
+    })
+);
+
+// Remove all messages
+oMessageManager.removeAllMessages();
+```
+
+```xml
+<!-- MessagePopover button -->
+<Button icon="sap-icon://message-popup" text="{message>/}"
+    press=".onMessagePopoverPress" type="Emphasized"/>
+```
+
+## Rules
+- Always use `this.loadFragment()` (async) — `sap.ui.xmlfragment()` is deprecated
+- `loadFragment` auto-prefixes IDs with view ID — use `this.byId("fragmentControlId")`
+- `Fragment.load` requires manual `addDependent` for model inheritance
+- Cache fragment promises (`this._pDialog`) — don't reload on every open
+- Dialogs: always provide Cancel/Close action
+- MessageBox for user decisions; MessageToast for quick confirmation
+- SelectDialog for value help; TableSelectDialog for multi-column value help
+- Use MessageManager for validation messages that integrate with Fiori message handling
+
+## Anti-Patterns
+| Anti-Pattern | Correct |
+|---|---|
+| `sap.ui.xmlfragment()` (sync, deprecated) | `this.loadFragment()` or `Fragment.load()` |
+| Reloading fragment on every open | Cache: `if (!this._pDialog) { this._pDialog = ... }` |
+| Fragment without `addDependent` (when using Fragment.load) | `oView.addDependent(oFragment)` for model inheritance |
+| `alert()` or `console.log` for user feedback | MessageBox, MessageToast, MessageStrip |
+| Dialog without Cancel button | Always provide escape path |
+| `new Dialog()` in controller (programmatic) | Define in XML fragment, load async |
+| Missing `growing` on SelectDialog | Use `growing="true"` for large datasets |
+| Hardcoded text in MessageBox | Use i18n: `oBundle.getText("confirmDelete")` |