SAPUI5フリースタイル開発をAIと進める

{
  "sap.app": {
    "id": "workconfirm",
    "type": "application",
    "dataSources": {
      "workConfirmationService": {
        "uri": "/sap/opu/odata/sap/Z_WORK_CONFIRMATION_SRV/",
        "type": "OData",
        "settings": { "odataVersion": "2.0" }
      }
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "workconfirm.view.App",
      "type": "XML",
      "id": "appRoot",
      "async": true
    },
    "dependencies": {
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {}
      }
    },
    "models": {
      "": {
        "dataSource": "workConfirmationService",
        "preload": true,
        "settings": { "useBatch": true }
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "workconfirm.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "async": true
      },
      "routes": [
        {
          "name": "worklist",
          "pattern": "",
          "target": "worklist"
        },
        {
          "name": "entry",
          "pattern": "entry/{notificationId}",
          "target": "entry"
        }
      ],
      "targets": {
        "worklist": { "id": "worklist", "name": "Worklist" },
        "entry": { "id": "entry", "name": "Entry" }
      }
    }
  }
}

sap.ui.define([
  "sap/ui/core/UIComponent"
], function (UIComponent) {
  "use strict";

  return UIComponent.extend("workconfirm.Component", {
    metadata: { manifest: "json" },

    init: function () {
      // UIComponentの標準初期化を先に実行する
      UIComponent.prototype.init.apply(this, arguments);

      // manifest.jsonに定義したルートの監視を開始する
      this.getRouter().initialize();
    }
  });
});

onNotificationPress: function (oEvent) {
  // 選択された行の通知番号をバインディングコンテキストから取得する
  var oContext = oEvent.getSource().getBindingContext();
  var sNotificationId = oContext.getProperty("Qmnum");

  // URLで扱える形式にして、entryルートの必須パラメータへ渡す
  this.getOwnerComponent().getRouter().navTo("entry", {
    notificationId: window.encodeURIComponent(sNotificationId)
  });
}

<mvc:View
  controllerName="workconfirm.controller.Entry"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:f="sap.ui.layout.form"
  xmlns="sap.m">

  <Page id="entryPage"
        title="作業実績の入力"
        showNavButton="true"
        navButtonPress="onNavBack">

    <!-- 画面幅に応じてラベルと入力欄の配置が変わる -->
    <f:SimpleForm id="entryForm"
                  editable="true"
                  layout="ResponsiveGridLayout">
      <Label text="通知番号" labelFor="notificationText" />
      <Text id="notificationText"
            text="{entry>/NotificationId}" />

      <Label text="作業内容" required="true"
             labelFor="workTextInput" />
      <TextArea id="workTextInput"
                value="{entry>/WorkText}" rows="3" />

      <Label text="実施日" required="true"
             labelFor="workDateInput" />
      <DatePicker id="workDateInput"
        value="{path: 'entry>/WorkDate',
          type: 'sap.ui.model.odata.type.DateTime',
          constraints: {displayFormat: 'Date', nullable: false}}"
        change="onWorkDateChange" />

      <Label text="作業時間（時間）" required="true"
             labelFor="durationInput" />
      <StepInput id="durationInput"
                 value="{entry>/Duration}"
                 min="0.5" max="24" step="0.5"
                 displayValuePrecision="1" />
    </f:SimpleForm>

    <footer>
      <OverflowToolbar>
        <ToolbarSpacer />
        <Button id="submitButton"
                type="Emphasized" text="登録"
                press="onSubmit" />
      </OverflowToolbar>
    </footer>
  </Page>
</mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
  "sap/m/MessageBox"
], function (Controller, JSONModel, MessageBox) {
  "use strict";

  return Controller.extend("workconfirm.controller.Entry", {
    onInit: function () {
      // 入力途中の値を保持する画面専用モデルを作成する
      this.getView().setModel(new JSONModel({
        NotificationId: "",
        WorkText: "",
        WorkDate: null,
        Duration: 0.5
      }), "entry");

      // entryルートに一致したときだけ通知番号を受け取る
      this._oEntryRoute = this.getOwnerComponent()
        .getRouter().getRoute("entry");
      this._oEntryRoute.attachPatternMatched(
        this._onEntryMatched, this);
    },

    onExit: function () {
      // Controller破棄時にルートイベントの登録も解除する
      if (this._oEntryRoute) {
        this._oEntryRoute.detachPatternMatched(
          this._onEntryMatched, this);
      }
    },

    _onEntryMatched: function (oEvent) {
      // URL用に符号化した通知番号を元へ戻し、入力値を初期化する
      var sNotificationId = window.decodeURIComponent(
        oEvent.getParameter("arguments").notificationId);

      this.getView().getModel("entry").setData({
        NotificationId: sNotificationId,
        WorkText: "",
        WorkDate: null,
        Duration: 0.5
      });
    },

    onWorkDateChange: function (oEvent) {
      // 書式が不正な日付は入力欄上でもエラーとして示す
      oEvent.getSource().setValueState(
        oEvent.getParameter("valid") ? "None" : "Error");
    },

    onSubmit: function () {
      var oEntry = this.getView()
        .getModel("entry").getData();
      var sWorkText = (oEntry.WorkText || "").trim();
      var fDuration = Number(oEntry.Duration);
      var bInvalidDate = this.byId("workDateInput")
        .getValueState() === "Error";

      // 表示上の必須記号とは別に、送信前の値を検証する
      if (!sWorkText || !oEntry.WorkDate || bInvalidDate ||
          isNaN(fDuration) || fDuration < 0.5 || fDuration > 24) {
        MessageBox.error(
          "作業内容、実施日、作業時間を確認してください。");
        return;
      }

      this._setSubmitBusy(true);

      // 画面用モデルからOData V2の登録データを組み立てる
      this.getView().getModel().create(
        "/WorkConfirmationSet",
        {
          Qmnum: oEntry.NotificationId,
          WorkText: sWorkText,
          WorkDate: oEntry.WorkDate,
          Duration: String(fDuration)
        },
        {
          success: this._onCreateSuccess.bind(this),
          error: this._onCreateError.bind(this)
        }
      );
    },

    _setSubmitBusy: function (bBusy) {
      // 登録処理中はボタンを無効化して二重送信を防ぐ
      this.byId("submitButton")
        .setBusy(bBusy).setEnabled(!bBusy);
    },

    _onCreateSuccess: function () {
      this._setSubmitBusy(false);
      // 完了を知らせたあと、現場の流れに合わせて一覧へ戻る
      MessageBox.success("作業実績を登録しました。", {
        onClose: this.onNavBack.bind(this)
      });
    },

    _onCreateError: function () {
      this._setSubmitBusy(false);
      MessageBox.error("登録に失敗しました。再度お試しください。");
    },

    onNavBack: function () {
      // 戻る操作では一覧のルートへ遷移する
      this.getOwnerComponent().getRouter()
        .navTo("worklist", {}, true);
    }
  });
});