From 6919ce8e355c68954282925fba2a6a02950284ff Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 17:42:34 +0000 Subject: [PATCH 1/2] mirror: refresh run/input/core from builder-abap2UI5-js@459db8b Pulls the unfrozen core (transpile-tests LOCAL FRIENDS fix + samples refreshed to cloud 332d552). Assemble + app jest are green; published 1:1 to cap2UI5. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01VVvKrYGLLSPsjFV3qdjaBN --- run/input/UPSTREAM_COMMIT | 2 +- .../app/z2ui5/webapp/cc/SmartMultiInputExt.js | 20 +- .../webapp/controller/View1.controller.js | 2 + .../z2ui5/webapp/core/DebugTool.fragment.xml | 4 +- .../core/app/z2ui5/webapp/core/DebugTool.js | 27 ++- .../app/z2ui5/webapp/core/FrontendAction.js | 37 +++ .../core/app/z2ui5/webapp/core/Messages.js | 31 ++- .../core/app/z2ui5/webapp/core/Server.js | 95 ++++++-- .../srv/app/samples/z2ui5_cl_demo_app_003.js | 24 -- .../srv/app/samples/z2ui5_cl_demo_app_006.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_008.js | 26 +++ .../srv/app/samples/z2ui5_cl_demo_app_009.js | 27 ++- .../srv/app/samples/z2ui5_cl_demo_app_012.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_015.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_017.js | 3 + .../srv/app/samples/z2ui5_cl_demo_app_021.js | 30 --- .../srv/app/samples/z2ui5_cl_demo_app_022.js | 87 ++++++- .../srv/app/samples/z2ui5_cl_demo_app_028.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_030.js | 137 ++++++++--- .../srv/app/samples/z2ui5_cl_demo_app_035.js | 188 --------------- .../srv/app/samples/z2ui5_cl_demo_app_038.js | 65 ------ .../srv/app/samples/z2ui5_cl_demo_app_041.js | 33 --- .../srv/app/samples/z2ui5_cl_demo_app_045.js | 73 ++++++ .../srv/app/samples/z2ui5_cl_demo_app_048.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_051.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_052.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_056.js | 114 ---------- .../srv/app/samples/z2ui5_cl_demo_app_059.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_062.js | 26 --- .../srv/app/samples/z2ui5_cl_demo_app_064.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_065.js | 8 +- .../srv/app/samples/z2ui5_cl_demo_app_068.js | 53 ----- .../srv/app/samples/z2ui5_cl_demo_app_069.js | 69 ------ .../srv/app/samples/z2ui5_cl_demo_app_070.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_071.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_073.js | 7 +- .../srv/app/samples/z2ui5_cl_demo_app_074.js | 93 ++++---- .../srv/app/samples/z2ui5_cl_demo_app_075.js | 65 ------ .../srv/app/samples/z2ui5_cl_demo_app_080.js | 52 ----- .../srv/app/samples/z2ui5_cl_demo_app_097.js | 18 +- .../srv/app/samples/z2ui5_cl_demo_app_098.js | 13 +- .../srv/app/samples/z2ui5_cl_demo_app_101.js | 56 +++-- .../srv/app/samples/z2ui5_cl_demo_app_103.js | 90 ++++++-- .../srv/app/samples/z2ui5_cl_demo_app_105.js | 30 +++ .../srv/app/samples/z2ui5_cl_demo_app_106.js | 28 --- .../srv/app/samples/z2ui5_cl_demo_app_110.js | 5 +- .../srv/app/samples/z2ui5_cl_demo_app_112.js | 30 +++ .../srv/app/samples/z2ui5_cl_demo_app_114.js | 53 +++++ .../srv/app/samples/z2ui5_cl_demo_app_120.js | 52 +++++ .../srv/app/samples/z2ui5_cl_demo_app_125.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_133.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_136.js | 94 -------- .../srv/app/samples/z2ui5_cl_demo_app_140.js | 49 ++++ .../srv/app/samples/z2ui5_cl_demo_app_143.js | 72 ++++++ .../srv/app/samples/z2ui5_cl_demo_app_160.js | 144 ++---------- .../srv/app/samples/z2ui5_cl_demo_app_161.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_167.js | 3 +- .../srv/app/samples/z2ui5_cl_demo_app_170.js | 94 ++++++++ .../srv/app/samples/z2ui5_cl_demo_app_173.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_175.js | 26 --- .../srv/app/samples/z2ui5_cl_demo_app_176.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_181.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_187.js | 35 --- .../srv/app/samples/z2ui5_cl_demo_app_189.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_202.js | 4 +- .../srv/app/samples/z2ui5_cl_demo_app_205.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_206.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_207.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_208.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_209.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_210.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_213.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_214.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_215.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_216.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_217.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_218.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_219.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_220.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_221.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_222.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_223.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_224.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_225.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_226.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_227.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_228.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_229.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_230.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_231.js | 80 ------- .../srv/app/samples/z2ui5_cl_demo_app_232.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_233.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_234.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_235.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_236.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_237.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_239.js | 1 + .../srv/app/samples/z2ui5_cl_demo_app_241.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_243.js | 44 ++++ .../srv/app/samples/z2ui5_cl_demo_app_250.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_258.js | 126 ++++++++++ .../srv/app/samples/z2ui5_cl_demo_app_259.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_261.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_264.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_265.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_266.js | 4 +- .../srv/app/samples/z2ui5_cl_demo_app_272.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_276.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_279.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_282.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_283.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_287.js | 14 +- .../srv/app/samples/z2ui5_cl_demo_app_289.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_290.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_292.js | 18 +- .../srv/app/samples/z2ui5_cl_demo_app_294.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_295.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_296.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_300.js | 4 +- .../srv/app/samples/z2ui5_cl_demo_app_302.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_303.js | 3 + .../srv/app/samples/z2ui5_cl_demo_app_307.js | 4 +- .../srv/app/samples/z2ui5_cl_demo_app_316.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_325.js | 4 +- .../srv/app/samples/z2ui5_cl_demo_app_330.js | 3 + .../srv/app/samples/z2ui5_cl_demo_app_352.js | 6 +- .../srv/app/samples/z2ui5_cl_demo_app_361.js | 25 ++ .../srv/app/samples/z2ui5_cl_demo_app_362.js | 10 +- .../srv/app/samples/z2ui5_cl_demo_app_363.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_364.js | 63 ----- .../srv/app/samples/z2ui5_cl_demo_app_368.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_370.js | 58 ----- .../srv/app/samples/z2ui5_cl_demo_app_371.js | 15 +- .../srv/app/samples/z2ui5_cl_demo_app_372.js | 55 +++-- .../srv/app/samples/z2ui5_cl_demo_app_373.js | 63 ----- .../srv/app/samples/z2ui5_cl_demo_app_374.js | 4 +- .../srv/app/samples/z2ui5_cl_demo_app_375.js | 80 +++++-- .../srv/app/samples/z2ui5_cl_demo_app_378.js | 49 ++-- .../srv/app/samples/z2ui5_cl_demo_app_379.js | 27 ++- .../srv/app/samples/z2ui5_cl_demo_app_380.js | 48 ---- .../srv/app/samples/z2ui5_cl_demo_app_381.js | 94 ++++++++ .../srv/app/samples/z2ui5_cl_demo_app_382.js | 68 ++++++ .../srv/app/samples/z2ui5_cl_demo_app_383.js | 57 +++++ .../srv/app/samples/z2ui5_cl_demo_app_445.js | 69 ++++++ .../srv/app/samples/z2ui5_cl_demo_app_446.js | 49 ++++ .../srv/app/samples/z2ui5_cl_demo_app_447.js | 49 ++++ .../app/samples/z2ui5_cl_sample_app_001.js | 62 ++++- .../app/samples/z2ui5_cl_sample_context.js | 3 + .../core/srv/z2ui5/02/z2ui5_if_action.js | 5 - .../core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js | 215 ++++++++++++++++++ 150 files changed, 2216 insertions(+), 1721 deletions(-) delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js delete mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js create mode 100644 run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js delete mode 100644 run/input/core/srv/z2ui5/02/z2ui5_if_action.js create mode 100644 run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js diff --git a/run/input/UPSTREAM_COMMIT b/run/input/UPSTREAM_COMMIT index 3200be2..02c9a50 100644 --- a/run/input/UPSTREAM_COMMIT +++ b/run/input/UPSTREAM_COMMIT @@ -1 +1 @@ -df978ccebf3bef0d72ac2a03c08f7d2f9a230f87 +459db8b3b5c14752a8586fa28dbb5906ed3ba941 diff --git a/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js b/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js index a70b070..e710ffe 100644 --- a/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js +++ b/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js @@ -39,17 +39,15 @@ sap.ui.define( init() { this._setControlBound = this.setControl.bind(this); this._oInput = null; - this._oPendingInnerControlsCreated = null; + this._aPendingInnerControlsCreated = []; this._bInnerControlsCreated = false; Lib.registerCallback("onAfterRendering", this._setControlBound); }, exit() { Lib.unregisterCallback("onAfterRendering", this._setControlBound); - // Resolve any still-pending promise so awaiters don't hang. - if (this._oPendingInnerControlsCreated) { - this._oPendingInnerControlsCreated(null); - } - this._oPendingInnerControlsCreated = null; + // Resolve any still-pending promises so awaiters don't hang. + this._aPendingInnerControlsCreated.forEach((resolve) => resolve(null)); + this._aPendingInnerControlsCreated = []; }, onTokenUpdate(oEvent) { @@ -125,17 +123,17 @@ sap.ui.define( if (this._bInnerControlsCreated) { resolve(this._oInput); } else { - this._oPendingInnerControlsCreated = resolve; + this._aPendingInnerControlsCreated.push(resolve); } }); }, onInnerControlsCreated(oEvent) { this._oInput = oEvent.getSource(); - if (this._oPendingInnerControlsCreated) { - this._oPendingInnerControlsCreated(this._oInput); - } - this._oPendingInnerControlsCreated = null; this._bInnerControlsCreated = true; + this._aPendingInnerControlsCreated.forEach((resolve) => + resolve(this._oInput), + ); + this._aPendingInnerControlsCreated = []; }, }); }, diff --git a/run/input/core/app/z2ui5/webapp/controller/View1.controller.js b/run/input/core/app/z2ui5/webapp/controller/View1.controller.js index 1ffb309..bdab7c5 100644 --- a/run/input/core/app/z2ui5/webapp/controller/View1.controller.js +++ b/run/input/core/app/z2ui5/webapp/controller/View1.controller.js @@ -128,6 +128,8 @@ sap.ui.define( if (S_POPUP?.CHECK_DESTROY) this.destroyPopup(); if (S_POPOVER?.CHECK_DESTROY) this.destroyPopover(); + if (S_VIEW_NEST?.CHECK_DESTROY) this.destroyNestView(); + if (S_VIEW_NEST2?.CHECK_DESTROY) this.destroyNestView2(); if (S_POPUP?.XML) { this.destroyPopup(); diff --git a/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml b/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml index 0d05414..20edbe4 100644 --- a/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml +++ b/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml @@ -13,8 +13,8 @@ > { + if (typeof value === "object" && value !== null) { + if (seen.has(value)) return "[Circular]"; + seen.add(value); + } + return value; + }, + 3, + ); } catch { - // e.g. circular references in ComponentData - the debug tool must - // never crash the host app, so degrade to the plain string form. + // The debug tool must never crash the host app, so degrade to the + // plain string form if serialization still fails. return String(safe); } } @@ -106,7 +120,12 @@ sap.ui.define( // (the latter optionally with the rendered DOM for the templating // toggle). The "SOURCE" entry is handled separately in onItemSelect. const jsonSources = { - CONFIG: () => AppState.getGlobal("oConfig"), + // The whole public z2ui5 global facade (oConfig, url, checkLocal, + // Util, app-registered members, ...). Read directly here on purpose: + // this is the debug inspector, whose job is to surface the live global + // as-is - functions drop out under JSON.stringify, which is fine. + // ui5lint-disable-next-line no-project-globals -- see reason above + SYSTEM: () => window.z2ui5, MODEL: () => getModelJson(ViewSlots.getView("MAIN")), PLAIN: () => AppState.state.responseData, REQUEST: () => AppState.state.oBody, diff --git a/run/input/core/app/z2ui5/webapp/core/FrontendAction.js b/run/input/core/app/z2ui5/webapp/core/FrontendAction.js index 6ba1910..81a394d 100644 --- a/run/input/core/app/z2ui5/webapp/core/FrontendAction.js +++ b/run/input/core/app/z2ui5/webapp/core/FrontendAction.js @@ -1,6 +1,7 @@ sap.ui.define( [ "sap/m/MessageBox", + "sap/m/MessageToast", "sap/ui/model/odata/v2/ODataModel", "sap/m/library", "sap/ui/util/Storage", @@ -10,6 +11,7 @@ sap.ui.define( ], ( MessageBox, + MessageToast, ODataModel, mobileLibrary, Storage, @@ -538,7 +540,42 @@ sap.ui.define( // Frontend event dispatch: maps the eF event name to its handler. // NavContainer events are dispatched separately via // navContainerLookups above. + // Normalise the options argument for DISPLAY_MESSAGE_*: an object when the + // event is fired from a view binding, a JSON string when it arrives as a + // custom-JS snippet, or nothing at all. + function asOptions(v) { + if (v == null) return {}; + if (typeof v === "string") { + try { + return JSON.parse(v); + } catch (e) { + Lib.logError("DISPLAY_MESSAGE: invalid options JSON", e); + return {}; + } + } + return v; + } + + // DISPLAY_MESSAGE_TOAST: args[1] message, args[2] options - forwarded 1:1 + // to sap.m.MessageToast.show(sMessage, mParameters). + function evDisplayMessageToast(oController, args) { + MessageToast.show(args[1], asOptions(args[2])); + } + + // DISPLAY_MESSAGE_BOX: args[1] MessageBox method (show / alert / confirm / + // error / information / success / warning), args[2] message, args[3] + // options - forwarded 1:1 to sap.m.MessageBox[method](vMessage, mOptions). + function evDisplayMessageBox(oController, args) { + const fn = + typeof MessageBox[args[1]] === "function" + ? MessageBox[args[1]] + : MessageBox.show; + fn(args[2], asOptions(args[3])); + } + const handlers = { + DISPLAY_MESSAGE_TOAST: evDisplayMessageToast, + DISPLAY_MESSAGE_BOX: evDisplayMessageBox, SET_SIZE_LIMIT: evSetSizeLimit, HISTORY_BACK: evHistoryBack, CLIPBOARD_COPY: evClipboardCopy, diff --git a/run/input/core/app/z2ui5/webapp/core/Messages.js b/run/input/core/app/z2ui5/webapp/core/Messages.js index 3f14327..41d57ce 100644 --- a/run/input/core/app/z2ui5/webapp/core/Messages.js +++ b/run/input/core/app/z2ui5/webapp/core/Messages.js @@ -3,8 +3,13 @@ // calling controller is only needed for the optional ONCLOSE follow-up // events, which trigger a backend roundtrip through its eB(). sap.ui.define( - ["sap/m/MessageBox", "sap/m/MessageToast", "z2ui5/core/Lib"], - (MessageBox, MessageToast, Lib) => { + [ + "sap/m/MessageBox", + "sap/m/MessageToast", + "sap/ui/core/Popup", + "z2ui5/core/Lib", + ], + (MessageBox, MessageToast, Popup, Lib) => { "use strict"; // Parse a value as integer milliseconds, falling back to `fallback` @@ -15,10 +20,32 @@ sap.ui.define( return val && Number.isFinite(parsed) ? parsed : fallback; } + // Resolve a dock position ("center bottom", "begin top", ...) to the + // sap.ui.core.Popup.Dock value of the running UI5 version. Older UI5 + // keeps the jQuery-style "center bottom" spelling, newer UI5 switched + // the enum to "CenterBottom" (and rejects the old form in MessageToast's + // dock validation with a console error). Looking the position up by its + // PascalCase key returns whichever spelling this version expects, so the + // value validates on both. Unknown values are passed through unchanged. + function toDockValue(pos) { + if (!pos) return pos; + const key = pos + .trim() + .split(/\s+/) + .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()) + .join(""); + return Popup.Dock[key] || pos; + } + function showToast(msg, oController) { MessageToast.show(msg.TEXT, { duration: parseMs(msg.DURATION, 3000), width: msg.WIDTH || "15em", + my: toDockValue(msg.MY || "center bottom"), + at: toDockValue(msg.AT || "center bottom"), + offset: msg.OFFSET || "0 0", + collision: msg.COLLISION || "fit fit", + ...(msg.OF && { of: msg.OF }), onClose: msg.ONCLOSE ? () => oController.eB([msg.ONCLOSE]) : null, autoClose: Boolean(msg.AUTOCLOSE), animationTimingFunction: msg.ANIMATIONTIMINGFUNCTION || "ease", diff --git a/run/input/core/app/z2ui5/webapp/core/Server.js b/run/input/core/app/z2ui5/webapp/core/Server.js index fd28d2a..3eaaa2f 100644 --- a/run/input/core/app/z2ui5/webapp/core/Server.js +++ b/run/input/core/app/z2ui5/webapp/core/Server.js @@ -25,6 +25,75 @@ sap.ui.define( const _MSG_TYPES = Object.freeze(["S_MSG_TOAST", "S_MSG_BOX"]); + // Quote characters recognised by the eF( ) argument parser below. The + // single quote is built from its char code on purpose: keeping a literal + // single-quote character out of this file avoids confusing the ABAP + // source generator, which ships this module as an ABAP string literal. + const CH_SQUOTE = String.fromCharCode(39); + const CH_DQUOTE = String.fromCharCode(34); + + // Convert a single JS-literal argument (as produced by the backend + // get_t_arg) into a value WITHOUT eval: single- or double-quoted strings, + // JSON objects / arrays, numbers, booleans and null. + function parseEfValue(token) { + if (token === "") return undefined; + const first = token[0]; + if (first === CH_SQUOTE) { + return token.slice(1, -1).replace(/\\([\x27\\])/g, "$1"); + } + if (first === CH_DQUOTE || first === "{" || first === "[") { + try { + return JSON.parse(token); + } catch { + return token; + } + } + if (token === "true") return true; + if (token === "false") return false; + if (token === "null") return null; + if (token === "undefined") return undefined; + const num = Number(token); + return Number.isNaN(num) ? token : num; + } + + // Split the argument list of an eF( ) call into its top-level arguments, + // respecting nested (), {}, [] and quoted strings, and convert each one + // to a value. Done manually (no eval / Function) so it works under a + // strict Content-Security-Policy without unsafe-eval, while keeping + // object, array and quoted-string arguments intact. + function parseEfArgs(str) { + const args = []; + let depth = 0; + let quote = null; + let token = ""; + for (let i = 0; i < str.length; i++) { + const ch = str[i]; + if (quote) { + token += ch; + if (ch === "\\" && i + 1 < str.length) token += str[++i]; + else if (ch === quote) quote = null; + continue; + } + if (ch === CH_SQUOTE || ch === CH_DQUOTE) { + quote = ch; + token += ch; + } else if (ch === "{" || ch === "[" || ch === "(") { + depth++; + token += ch; + } else if (ch === "}" || ch === "]" || ch === ")") { + depth--; + token += ch; + } else if (ch === "," && depth === 0) { + args.push(parseEfValue(token.trim())); + token = ""; + } else { + token += ch; + } + } + if (token.trim() !== "") args.push(parseEfValue(token.trim())); + return args; + } + // Last-resort client-side timeout for backend roundtrips. Infrastructure // timeouts (ICM, web dispatcher, proxies) usually fire much earlier and // surface as a regular error response; this backstop only ensures that a @@ -505,23 +574,23 @@ sap.ui.define( }, // Executes a single custom-JS snippet from the backend. - // Format A: "alert(123)" -> runs the expression - // Format B: "eF('A','B','C')" -> calls oController.eF('A','B','C') - // - // OBSOLETE: this mechanism (including the quote-based argument parsing - // and the Function() evaluation) only exists for backward compatibility - // with older apps and will be removed in a future release. Do not - // extend or change it. + // Format A: a raw expression such as alert(123) - needs a CSP that + // allows unsafe-eval, otherwise it is a no-op. + // Format B: a structured eF( ) frontend-event call - dispatched via + // oController.eF( ). Its argument list is parsed manually + // (no eval / Function) so it runs under a strict CSP while + // keeping object / array / string arguments intact. _runCustomJs(item, oController) { try { - const parts = item.split("'"); - // Arguments live at the odd indices between single quotes. - const args = parts.filter((_, index) => index % 2 === 1); - if (args.length > 0) { - oController.eF(...args); + const snippet = item.trim(); + const match = /^\.?eF\s*\(([\s\S]*)\)\s*;?$/.exec(snippet); + if (match) { + oController.eF(...parseEfArgs(match[1])); } else { + // A raw JavaScript expression - only runs when the CSP allows + // unsafe-eval. // eslint-disable-next-line no-new-func - Function("return " + parts[0])(); + Function("return " + item)(); } } catch (e) { Lib.logError("customJs: execution failed", e); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js deleted file mode 100644 index d247f83..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js +++ /dev/null @@ -1,24 +0,0 @@ -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_003 extends z2ui5_if_app { - t_tab = []; - - async main(client) { - let view; - let page; - if (client.check_on_init()) { - this.t_tab = [{ title: `row_01`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_02`, info: `incompleted`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_03`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_04`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_05`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_06`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }]; - view = z2ui5_cl_xml_view.factory(); - page = view.shell() - .page({ title: `abap2UI5 - List`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - page.list({ headertext: `List Output`, items: client._bind_edit(this.t_tab), mode: `SingleSelectMaster`, selectionchange: client._event(`SELCHANGE`) }) - .standard_list_item({ title: `{TITLE}`, description: `{DESCR}`, icon: `{ICON}`, info: `{INFO}`, press: client._event(`TEST`), selected: `{SELECTED}` }); - client.view_display(view.stringify()); - } else if (client.check_on_event(`SELCHANGE`)) { - client.message_box_display(`go to details for item ${this.t_tab.find((row) => row.selected === true).title}`); - } - } -} - -module.exports = z2ui5_cl_demo_app_003; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js index 2afc65c..87c2fc7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js @@ -49,7 +49,7 @@ class z2ui5_cl_demo_app_006 extends z2ui5_if_app { tab.header_toolbar() .toolbar() .title(`title of the table`) - .button({ text: `letf side button`, icon: `sap-icon://account`, press: this.client._event(`BUTTON_SORT`) }) + .button({ text: `left side button`, icon: `sap-icon://account`, press: this.client._event(`BUTTON_SORT`) }) .segmented_button(this.key) .items() .segmented_button_item({ key: `BLUE`, icon: `sap-icon://accept`, text: `blue` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js index 2c1d170..8fbfb17 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js @@ -1,4 +1,5 @@ const cl_abap_char_utilities = require("abap2UI5/cl_abap_char_utilities"); +const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); @@ -18,6 +19,9 @@ class z2ui5_cl_demo_app_008 extends z2ui5_if_app { } on_event() { + let ls_msg_sy; + let ls_msg_bapiret; + let lv_val; switch (this.client.get().EVENT) { case `BUTTON_MESSAGE_BOX_CONFIRM`: this.client.message_box_display(`Approve purchase order 12345?`, `confirm`); @@ -55,6 +59,21 @@ class z2ui5_cl_demo_app_008 extends z2ui5_if_app { this.check_strip_active = true; this.strip_type = `Success`; break; + case `BUTTON_MESSAGE_BOX_SY`: + ls_msg_sy = z2ui5_cl_sample_context.msg_get_by_msg({ id: `NET`, no: `001` }); + this.client.message_box_display(ls_msg_sy); + break; + case `BUTTON_MESSAGE_BOX_BAPIRET`: + ls_msg_bapiret = { id: `NET`, number: `001` }; + this.client.message_box_display(ls_msg_bapiret); + break; + case `BUTTON_MESSAGE_BOX_CX_ROOT`: + try { + lv_val = z2ui5_cl_util.abap_div(1, 0); + } catch (lx) { + this.client.message_box_display(lx); + } + break; } this.view_display(); } @@ -92,6 +111,13 @@ class z2ui5_cl_demo_app_008 extends z2ui5_if_app { .content(`form`) .button({ text: `Message Toast`, press: this.client._event(`BUTTON_MESSAGE_TOAST`) }) .button({ text: `Message Toast Customized`, press: this.client._event(`BUTTON_MESSAGE_TOAST2`) }); + page.grid(`L6 M12 S12`) + .content(`layout`) + .simple_form(`Message Box from ABAP Object`) + .content(`form`) + .button({ text: `SY Message`, press: this.client._event(`BUTTON_MESSAGE_BOX_SY`) }) + .button({ text: `BAPIRET2`, press: this.client._event(`BUTTON_MESSAGE_BOX_BAPIRET`) }) + .button({ text: `CX_ROOT`, press: this.client._event(`BUTTON_MESSAGE_BOX_CX_ROOT`) }); this.client.view_display(view.stringify()); } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js index ceb86e5..38097db 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js @@ -29,11 +29,11 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app { on_event() { switch (this.client.get().EVENT) { - case `POPUP_TABLE_value`: + case `POPUP_TABLE_VALUE`: this.t_suggestion_sel = z2ui5_cl_util.abap_copy(this.t_suggestion); this.popup_value_suggestion(); break; - case `POPUP_TABLE_value_CUSTOM`: + case `POPUP_TABLE_VALUE_CUSTOM`: this.t_employees_sel = {}; this.popup_value_employee(); break; @@ -44,21 +44,25 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app { } this.popup_value_employee(); break; - case `POPUP_TABLE_value_CUSTOM_CONTINUE`: + case `POPUP_TABLE_VALUE_CUSTOM_CONTINUE`: for (let _i = this.t_employees_sel.length - 1; _i >= 0; _i--) { const row = this.t_employees_sel[_i]; if (!(row.selkz === true || row.selkz === `X`)) this.t_employees_sel.splice(_i, 1); } if (this.t_employees_sel.length === 1) { this.s_screen.name = z2ui5_cl_util.abap_copy(this.t_employees_sel[(1) - 1].name); this.s_screen.lastname = z2ui5_cl_util.abap_copy(this.t_employees_sel[(1) - 1].lastname); this.client.message_toast_display(`value selected`); this.client.popup_destroy(); + } else { + this.client.message_toast_display(`please select exactly one employee`); } break; - case `POPUP_TABLE_value_CONTINUE`: + case `POPUP_TABLE_VALUE_CONTINUE`: for (let _i = this.t_suggestion_sel.length - 1; _i >= 0; _i--) { const row = this.t_suggestion_sel[_i]; if (!(row.selkz === true || row.selkz === `X`)) this.t_suggestion_sel.splice(_i, 1); } if (this.t_suggestion_sel.length === 1) { this.s_screen.color_02 = z2ui5_cl_util.abap_copy(this.t_suggestion_sel[(1) - 1].value); this.client.message_toast_display(`value selected`); this.client.popup_destroy(); + } else { + this.client.message_toast_display(`please select exactly one color`); } break; case `BUTTON_SEND`: @@ -76,6 +80,7 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app { const view = z2ui5_cl_xml_view.factory(); const page = view.shell() .page({ title: `abap2UI5 - Value Help Examples`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.message_strip({ text: `Four value-help patterns: inline suggestions, numeric-only input, a value-help popup with a selectable table, ` + `and a custom popup with a city search. Fill the fields, then Clear resets the view and Send simulates a submit.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` }); const form = page.grid(`L7 M7 S7`).content(`layout`).simple_form(`Input with Value Help`).content(`form`); form.label(`Input with suggestion items`) .input({ value: this.client._bind_edit(this.s_screen.color_01, { name: `s_screen-color_01` }), placeholder: `fill in your favorite colour`, suggestionitems: this.client._bind(this.t_suggestion), showsuggestion: true }) @@ -86,15 +91,15 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app { form.label(`Input only numbers allowed`) .input({ value: this.client._bind_edit(this.s_screen.quantity, { name: `s_screen-quantity` }), type: `Number`, placeholder: `quantity` }); form.label(`Input with value`) - .input({ value: this.client._bind_edit(this.s_screen.color_02, { name: `s_screen-color_02` }), placeholder: `fill in your favorite colour`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_value`) }); + .input({ value: this.client._bind_edit(this.s_screen.color_02, { name: `s_screen-color_02` }), placeholder: `fill in your favorite colour`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_VALUE`) }); form.label(`Custom value Popup`) - .input({ value: this.client._bind_edit(this.s_screen.name, { name: `s_screen-name` }), placeholder: `name`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_value_CUSTOM`) }) - .input({ value: this.client._bind_edit(this.s_screen.lastname, { name: `s_screen-lastname` }), placeholder: `lastname`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_value_CUSTOM`) }); + .input({ value: this.client._bind_edit(this.s_screen.name, { name: `s_screen-name` }), placeholder: `name`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_VALUE_CUSTOM`) }) + .input({ value: this.client._bind_edit(this.s_screen.lastname, { name: `s_screen-lastname` }), placeholder: `lastname`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_VALUE_CUSTOM`) }); page.footer() .overflow_toolbar() .toolbar_spacer() - .button({ text: `Clear`, press: this.client._event(`BUTTON_CLEAR`), type: `Reject`, enabled: false, icon: `sap-icon://delete` }) - .button({ text: `Send to Server`, press: this.client._event(`BUTTON_SEND`), enabled: false, type: `Success` }); + .button({ text: `Clear`, press: this.client._event(`BUTTON_CLEAR`), type: `Reject`, icon: `sap-icon://delete` }) + .button({ text: `Send to Server`, press: this.client._event(`BUTTON_SEND`), type: `Success`, icon: `sap-icon://paper-plane` }); this.client.view_display(view.stringify()); } @@ -105,7 +110,7 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app { tab.columns().column(`20rem`).text(`Color`).get_parent().column().text(`Description`).get_parent(); tab.items().column_list_item({ selected: `{SELKZ}` }).cells().text(`{VALUE}`).text(`{DESCR}`); dialog.buttons() - .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_value_CONTINUE`), type: `Emphasized` }); + .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_VALUE_CONTINUE`), type: `Emphasized` }); this.client.popup_display(popup.stringify()); } @@ -144,7 +149,7 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app { .text(`{NAME}`) .text(`{LASTNAME}`); dialog.buttons() - .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_value_CUSTOM_CONTINUE`), type: `Emphasized` }); + .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_VALUE_CUSTOM_CONTINUE`), type: `Emphasized` }); this.client.popup_display(popup.stringify()); } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js index 409a56e..2f1c187 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js @@ -46,7 +46,7 @@ class z2ui5_cl_demo_app_012 extends z2ui5_if_app { case `BUTTON_POPUP_05`: this.check_popup = true; this.client.view_destroy(); - this.client.nav_app_call(z2ui5_cl_demo_app_020.factory({ i_text: `(new app )this is a popup to decide, the text is sent from the previous app and the answer will be sent back`, i_cancel_text: `Cancel `, i_cancel_event: `POPUP_DECIDE_CANCEL`, i_confirm_text: `Continue`, i_confirm_event: `POPUP_DECIDE_CONTINUE` })); + this.client.nav_app_call(z2ui5_cl_demo_app_020.factory({ i_text: `(new app )this is a popup to decide, the text is sent from the previous app and the answer will be sent back`, i_cancel_text: `Cancel`, i_cancel_event: `POPUP_DECIDE_CANCEL`, i_confirm_text: `Continue`, i_confirm_event: `POPUP_DECIDE_CONTINUE` })); break; case `BUTTON_POPUP_06`: this.check_popup = true; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js index 3df6e95..0dc3fac 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js @@ -12,11 +12,7 @@ class z2ui5_cl_demo_app_015 extends z2ui5_if_app { view.shell() .page({ title: `abap2UI5 - Formatted Text`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }) .header_content() - .toolbar_spacer() - .link() - .get_parent() - .vbox(`sapUiSmallMargin`) - .link({ text: `Control Documentation - SAP UI5 Formatted Text`, href: `https://sapui5.hana.ondemand.com/#/entity/sap.m.FormattedText/sample/sap.m.sample.FormattedText` }) + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FormattedText/sample/sap.m.sample.FormattedText` }) .get_parent() .vbox(`sapUiSmallMargin`) .formatted_text(this.html_text); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js index 66f40d9..6791534 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js @@ -9,6 +9,9 @@ class z2ui5_cl_demo_app_017 extends z2ui5_if_app { const view = z2ui5_cl_xml_view.factory(); const page = view.shell() .page({ title: `abap2UI5 - Object Page with Avatar`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + .header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageOnJSON` }) + .get_parent() .object_page_layout({ showtitleinheadercontent: true, showeditheaderbutton: true, editheaderbuttonpress: this.client._event(`EDIT_HEADER_PRESS`), uppercaseanchorbar: false }); const header_title = page.header_title().object_page_dyn_header_title(); header_title.expanded_heading().hbox().title({ text: `Oblomov Dev`, wrapping: true }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js deleted file mode 100644 index 527afa2..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js +++ /dev/null @@ -1,30 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_021 extends z2ui5_if_app { - textarea = ``; - client = null; - - async main(client) { - let view; - let page; - let layout; - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.textarea = `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn` + `a aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd` + ` gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam n ` + ` onumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit am ` + ` et, consetetur sadipscing elitr, sed diam nonumy eirm sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no ` + `numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`; - view = z2ui5_cl_xml_view.factory(); - page = view.shell() - .page({ title: `abap2UI5 - Text Area Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); - layout.label(`text area`) - .text_area({ valueliveupdate: true, value: client._bind_edit(this.textarea), growing: true, growingmaxlines: `7`, width: `100%` }) - .button({ text: `OK`, press: client._event(`POST`) }); - client.view_display(view.stringify()); - } else if (client.check_on_event(`POST`)) { - client.message_box_display(`success - values sent to the server`); - } - } -} - -module.exports = z2ui5_cl_demo_app_021; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js index 18352ce..ed92963 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js @@ -1,22 +1,89 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_022 extends z2ui5_if_app { - progress_value = ``; + percent_animation = ``; + display_animation = ``; + percent_no_animation = ``; + display_no_animation = ``; + client = null; async main(client) { - let view; + this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { - this.progress_value = `3`; - view = z2ui5_cl_xml_view.factory(); - view.shell() - .page({ title: `abap2UI5 - Progress Indicator Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }) - .vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) - .label(`ProgressIndicator`) - .progress_indicator({ percentvalue: client._bind(this.progress_value), displayvalue: `0,44GB of 32GB used`, showvalue: true, state: `Success` }); - client.view_display(view.stringify()); + this.on_init(); + } else if (client.check_on_event()) { + this.on_event(); } } + + on_init() { + this.percent_animation = `0`; + this.display_animation = `0%`; + this.percent_no_animation = `0`; + this.display_no_animation = `0%`; + this.view_display(); + } + + on_event() { + switch (this.client.get().EVENT) { + case `ANIMATION_0`: + this.percent_animation = `0`; + this.display_animation = `0%`; + break; + case `ANIMATION_100`: + this.percent_animation = `100`; + this.display_animation = `100%`; + break; + case `NO_ANIMATION_0`: + this.percent_no_animation = `0`; + this.display_no_animation = `0%`; + break; + case `NO_ANIMATION_100`: + this.percent_no_animation = `100`; + this.display_no_animation = `100%`; + break; + } + this.client.view_model_update(); + } + + view_display() { + const page = z2ui5_cl_xml_view.factory() + .shell() + .page({ title: `abap2UI5 - Progress Indicator Example`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ProgressIndicator/sample/sap.m.sample.ProgressIndicator` }); + const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); + layout.text({ text: `Regular Mode`, class: `sapUiSmallMarginBottom` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `30`, displayvalue: `30%`, showvalue: true, state: `None` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `50`, showvalue: false, state: `Error` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `99`, displayvalue: `0.99GB of 1GB`, showvalue: true, state: `Success` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `25`, displayvalue: `25%`, showvalue: true, state: `Warning` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `40`, displayvalue: `40%`, showvalue: true, state: `Information` }) + .text({ text: `Information Popover Scenario`, class: `sapUiSmallMarginBottom` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `40`, displayvalue: `Reduce container width until this text is truncated, then press the ProgressIndicator`, showvalue: true, state: `Success` }) + .text({ text: `Invalid percent values`, class: `sapUiSmallMarginBottom` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `-20`, displayvalue: `-20`, showvalue: true, state: `None` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `120`, displayvalue: `120`, showvalue: true, state: `None` }) + .text({ text: `Display Only Mode`, class: `sapUiSmallMarginBottom` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `30`, displayvalue: `30%`, showvalue: true, state: `None`, displayonly: true }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `50`, showvalue: false, state: `Error`, displayonly: true }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `99`, displayvalue: `0.99GB of 1GB`, showvalue: true, state: `Success`, displayonly: true }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `25`, displayvalue: `25%`, showvalue: true, state: `Warning`, displayonly: true }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `40`, displayvalue: `40%`, showvalue: true, state: `Information`, displayonly: true }) + .text({ text: `Set the ProgressIndicator to 100% with animation`, class: `sapUiSmallMarginBottom` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: this.client._bind(this.percent_animation), displayvalue: this.client._bind(this.display_animation), state: `Success`, displayonly: true }) + .flex_box() + .button({ text: `Set to 0%`, class: `sapUiSmallMarginEnd`, press: this.client._event(`ANIMATION_0`) }) + .button({ text: `Set to 100%`, press: this.client._event(`ANIMATION_100`) }); + layout.text({ text: `Set the ProgressIndicator to 100% without animation`, class: `sapUiSmallMarginBottom` }) + .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: this.client._bind(this.percent_no_animation), displayvalue: this.client._bind(this.display_no_animation), state: `Success`, displayonly: true }) + .flex_box() + .button({ text: `Set to 0%`, class: `sapUiSmallMarginEnd`, press: this.client._event(`NO_ANIMATION_0`) }) + .button({ text: `Set to 100%`, press: this.client._event(`NO_ANIMATION_100`) }); + this.client.view_display(page.stringify()); + } } module.exports = z2ui5_cl_demo_app_022; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js index 89750b3..b163214 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js @@ -36,7 +36,7 @@ class z2ui5_cl_demo_app_028 extends z2ui5_if_app { } start_timer() { - this.client.action.gen({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [this.client._event(`TIMER_FINISHED`), `2000`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [`TIMER_FINISHED`, `2000`] }); } view_display() { diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js index 34fb187..8f990e5 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js @@ -3,63 +3,140 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_030 extends z2ui5_if_app { - t_tab = []; + t_products = []; + show_footer = false; + area_shrink_ratio = ``; client = null; async main(client) { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { - this.t_tab = [{ title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `incompleted`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }]; - } else if (client.check_on_event(`BUTTON_MSG_BOX`)) { - client.message_box_display(`this is a message box with a custom text`, `success`); + this.on_init(); + } else if (client.check_on_event()) { + this.on_event(); } + } + + on_init() { + this.show_footer = true; + this.area_shrink_ratio = `1:1.6:1.6`; + this.t_products = [{ name: `Notebook Basic 15`, product_id: `HT-1000`, supplier_name: `Very Best Screens`, width: `30`, depth: `18`, height: `3`, dim_unit: `cm`, price: `956.00`, currency_code: `EUR` }, { name: `Notebook Basic 17`, product_id: `HT-1001`, supplier_name: `Very Best Screens`, width: `29`, depth: `17`, height: `3.1`, dim_unit: `cm`, price: `1,249.00`, currency_code: `EUR` }, { name: `Notebook Basic 18`, product_id: `HT-1002`, supplier_name: `Very Best Screens`, width: `28`, depth: `19`, height: `2.5`, dim_unit: `cm`, price: `1,570.00`, currency_code: `EUR` }, { name: `Notebook Basic 19`, product_id: `HT-1003`, supplier_name: `Smartcards`, width: `32`, depth: `21`, height: `4`, dim_unit: `cm`, price: `1,650.00`, currency_code: `EUR` }, { name: `ITelO Vault`, product_id: `HT-1007`, supplier_name: `Technocom`, width: `32`, depth: `22`, height: `3`, dim_unit: `cm`, price: `299.00`, currency_code: `EUR` }, { name: `Notebook Professional 15`, product_id: `HT-1010`, supplier_name: `Very Best Screens`, width: `33`, depth: `20`, height: `3`, dim_unit: `cm`, price: `1,999.00`, currency_code: `EUR` }, { name: `Notebook Professional 17`, product_id: `HT-1011`, supplier_name: `Very Best Screens`, width: `33`, depth: `23`, height: `2`, dim_unit: `cm`, price: `2,299.00`, currency_code: `EUR` }, { name: `ITelO Vault Net`, product_id: `HT-1020`, supplier_name: `Technocom`, width: `10`, depth: `1.8`, height: `17`, dim_unit: `cm`, price: `459.00`, currency_code: `EUR` }, { name: `ITelO Vault SAT`, product_id: `HT-1021`, supplier_name: `Technocom`, width: `11`, depth: `1.7`, height: `18`, dim_unit: `cm`, price: `149.00`, currency_code: `EUR` }, { name: `Comfort Easy`, product_id: `HT-1022`, supplier_name: `Technocom`, width: `84`, depth: `1.5`, height: `14`, dim_unit: `cm`, price: `1,679.00`, currency_code: `EUR` }, { name: `Comfort Senior`, product_id: `HT-1023`, supplier_name: `Technocom`, width: `80`, depth: `1.6`, height: `13`, dim_unit: `cm`, price: `512.00`, currency_code: `EUR` }, { name: `Ergo Screen E-I`, product_id: `HT-1030`, supplier_name: `Very Best Screens`, width: `37`, depth: `12`, height: `36`, dim_unit: `cm`, price: `230.00`, currency_code: `EUR` }, { name: `Ergo Screen E-II`, product_id: `HT-1031`, supplier_name: `Very Best Screens`, width: `40.8`, depth: `19`, height: `43`, dim_unit: `cm`, price: `285.00`, currency_code: `EUR` }, { name: `Ergo Screen E-III`, product_id: `HT-1032`, supplier_name: `Very Best Screens`, width: `40.8`, depth: `19`, height: `43`, dim_unit: `cm`, price: `345.00`, currency_code: `EUR` }, { name: `Flat Basic`, product_id: `HT-1035`, supplier_name: `Very Best Screens`, width: `39`, depth: `20`, height: `41`, dim_unit: `cm`, price: `399.00`, currency_code: `EUR` }, { name: `Flat Future`, product_id: `HT-1036`, supplier_name: `Very Best Screens`, width: `45`, depth: `26`, height: `46`, dim_unit: `cm`, price: `430.00`, currency_code: `EUR` }]; + this.t_products.sort((a, b) => ((a.name > b.name ? 1 : a.name < b.name ? -1 : 0))); this.view_display(); } + on_event() { + switch (this.client.get().EVENT) { + case `TOGGLE_AREA_PRIORITY`: + this.area_shrink_ratio = (this.area_shrink_ratio === `1:1.6:1.6` ? `1.6:1:1.6` : `1:1.6:1.6`); + this.client.view_model_update(); + break; + case `TOGGLE_FOOTER`: + this.show_footer = (!(this.show_footer === true || this.show_footer === `X`)); + this.client.view_model_update(); + break; + case `OPEN_POPOVER`: + this.popover_display({ id: this.client.get_event_arg() }); + break; + } + } + view_display() { const view = z2ui5_cl_xml_view.factory(); const page = view.shell() - .page({ title: `abap2UI5 - Dynamic Page`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) - .dynamic_page({ showfooter: true }); - const header_title = page.title({ ns: `f` }).get().dynamic_page_title(); + .page({ title: `abap2UI5 - Sample: Dynamic Page Freestyle`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageFreeStyle` }); + const dynamic_page = page.dynamic_page({ showfooter: this.client._bind(this.show_footer) }); + const header_title = dynamic_page.title({ ns: `f` }).get().dynamic_page_title(); + header_title._generic_property({ n: `areaShrinkRatio`, v: this.client._bind(this.area_shrink_ratio) }); header_title.heading(`f`).title(`Header Title`); - header_title.expanded_content(`f`).label(`this is a subheading`); - header_title.snapped_content(`f`).label(`this is a subheading`); - header_title.actions(`f`) + header_title._generic({ name: `breadcrumbs`, ns: `f` }) + .breadcrumbs() + .link({ text: `Home` }) + .link({ text: `Page 1` }) + .link({ text: `Page 2` }) + .link({ text: `Page 3` }) + .link({ text: `Page 4` }) + .link({ text: `Page 5` }); + header_title.expanded_content(`f`).label(`This is a subheading`); + header_title.snapped_content(`f`).label(`This is a subheading`); + header_title._generic({ name: `snappedTitleOnMobile`, ns: `f` }).title(`This is a subheading`); + header_title.content(`f`) .overflow_toolbar() - .overflow_toolbar_button({ icon: `sap-icon://edit`, text: `edit header`, type: `Emphasized`, tooltip: `edit` }) - .overflow_toolbar_button({ icon: `sap-icon://pull-down`, text: `show section`, type: `Emphasized`, tooltip: `pull-down` }) - .overflow_toolbar_button({ icon: `sap-icon://show`, text: `show state`, tooltip: `show` }); + .generic_tag({ text: `SR`, status: `Error`, design: `StatusIconHidden`, press: this.client._event(`OPEN_POPOVER`, [`\${$source>/id}`]) }) + .object_number({ number: `2`, unit: `M`, emphasized: false, state: `Error` }); + header_title.actions(`f`) + .button({ text: `Edit`, type: `Emphasized`, press: this.client._event(`TOGGLE_AREA_PRIORITY`) }) + .button({ text: `Delete`, type: `Transparent` }) + .button({ text: `Copy`, type: `Transparent` }) + .button({ text: `Toggle Footer`, type: `Transparent`, press: this.client._event(`TOGGLE_FOOTER`) }) + .button({ icon: `sap-icon://action`, type: `Transparent` }) + .button({ text: `Button with layoutData`, type: `Transparent`, press: this.client._event(`OPEN_POPOVER`, [`\${$source>/id}`]) }) + .get() + .layout_data() + .overflow_toolbar_layout_data({ priority: `AlwaysOverflow`, closeoverflowoninteraction: false }); header_title.navigation_actions() .button({ icon: `sap-icon://full-screen`, type: `Transparent` }) - .button({ icon: `sap-icon://exit-full-screen`, type: `Transparent` }) .button({ icon: `sap-icon://decline`, type: `Transparent` }); - page.header() + dynamic_page.header() .dynamic_page_header(true) - .horizontal_layout() - .vertical_layout() + .horizontal_layout({ allowwrapping: true }) + .vertical_layout({ class: `sapUiMediumMarginEnd` }) .object_attribute({ title: `Location`, text: `Warehouse A` }) .object_attribute({ title: `Halway`, text: `23L` }) .object_attribute({ title: `Rack`, text: `34` }) .get_parent() .vertical_layout() - .object_attribute({ title: `Location`, text: `Warehouse A` }) - .object_attribute({ title: `Halway`, text: `23L` }) - .object_attribute({ title: `Rack`, text: `34` }) + .object_attribute({ title: `Availability` }) + .object_status({ text: `In Stock`, state: `Success` }); + dynamic_page.content(`f`) + .table({ id: `idProductsTable`, items: this.client._bind(this.t_products), sticky: `HeaderToolbar,ColumnHeaders`, inset: false, class: `sapFDynamicPageAlignContent`, width: `auto` }) + .header_toolbar() + .toolbar() + .title({ text: `Products`, level: `H2` }) .get_parent() - .vertical_layout() - .object_attribute({ title: `Location`, text: `Warehouse A` }) - .object_attribute({ title: `Halway`, text: `23L` }) - .object_attribute({ title: `Rack`, text: `34` }); - const cont = page.content(`f`); - cont.list({ headertext: `List Output`, items: this.client._bind(this.t_tab) }) - .standard_list_item({ title: `{TITLE}`, description: `{DESCR}`, icon: `{ICON}`, info: `{INFO}` }); - page.footer(`f`) + .get_parent() + .columns() + .column(`12em`) + .text(`Product`) + .get_parent() + .column({ minscreenwidth: `Tablet`, demandpopin: true }) + .text(`Supplier`) + .get_parent() + .column({ minscreenwidth: `Tablet`, demandpopin: true, halign: `End` }) + .text(`Dimensions`) + .get_parent() + .column({ halign: `End` }) + .text(`Price`) + .get_parent() + .get_parent() + .column_list_item() + .object_identifier({ title: `{NAME}`, text: `{PRODUCT_ID}` }) + .get_parent() + .text(`{SUPPLIER_NAME}`) + .text(`{WIDTH} x {DEPTH} x {HEIGHT} {DIM_UNIT}`) + .object_number({ number: `{PRICE}`, unit: `{CURRENCY_CODE}` }); + dynamic_page.footer(`f`) .overflow_toolbar() - .overflow_toolbar_button({ icon: `sap-icon://edit`, text: `edit header`, type: `Emphasized`, tooltip: `edit` }) - .overflow_toolbar_button({ icon: `sap-icon://pull-down`, text: `show section`, type: `Emphasized`, tooltip: `pull-down` }); + .toolbar_spacer() + .button({ type: `Accept`, text: `Accept` }) + .button({ type: `Reject`, text: `Reject` }); this.client.view_display(view.stringify()); } + + popover_display({ id } = {}) { + const popup = z2ui5_cl_xml_view.factory_popup(); + popup.popover({ placement: `Bottom`, showheader: false, contentwidth: `300px` }) + .card({ width: `100%` }) + .header(`f`) + ._generic({ name: `NumericHeader`, ns: `card`, t_prop: [{ n: `title`, v: `Sales Revenue` }, { n: `subtitle`, v: `Sales revenue in the current quarter` }, { n: `unitOfMeasurement`, v: `EUR` }, { n: `number`, v: `2.16` }, { n: `scale`, v: `M` }, { n: `trend`, v: `Down` }, { n: `state`, v: `Error` }] }) + ._generic({ name: `sideIndicators`, ns: `card` }) + ._generic({ name: `NumericSideIndicator`, ns: `card`, t_prop: [{ n: `number`, v: `4.74` }, { n: `unit`, v: `M` }, { n: `title`, v: `Target` }] }) + .get_parent() + ._generic({ name: `NumericSideIndicator`, ns: `card`, t_prop: [{ n: `number`, v: `-54.49` }, { n: `unit`, v: `%` }, { n: `title`, v: `Deviation` }] }); + this.client.popover_display(popup.stringify(), id); + } } module.exports = z2ui5_cl_demo_app_030; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js deleted file mode 100644 index 024e9d0..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js +++ /dev/null @@ -1,188 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_035 extends z2ui5_if_app { - mv_type = ``; - mv_path = ``; - mv_editor = ``; - mv_check_editable = false; - lt_types = []; - client = null; - - view_display() { - const view = z2ui5_cl_xml_view.factory(); - const page = view.shell() - .page({ title: `abap2UI5 - File Editor`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - const temp = page.simple_form({ title: `File`, editable: true }) - .content(`form`) - .label(`path`) - .input(this.client._bind_edit(this.mv_path)) - .label(`Option`); - this.lt_types = {}; - const temp3 = temp.input({ value: this.client._bind_edit(this.mv_type), suggestionitems: this.client._bind(this.lt_types) }) - .get(); - temp3.suggestion_items().list_item({ text: `{N}`, additionaltext: `{V}` }); - temp.label(``) - .button({ text: `Download`, press: this.client._event(`DB_LOAD`), icon: `sap-icon://download-from-cloud` }); - page.code_editor({ type: this.client._bind_edit(this.mv_type), editable: this.client._bind(this.mv_check_editable), value: this.client._bind_edit(this.mv_editor) }); - page.footer() - .overflow_toolbar() - .button({ text: `Clear`, press: this.client._event(`CLEAR`), icon: `sap-icon://delete` }) - .toolbar_spacer() - .button({ text: `Edit`, press: this.client._event(`EDIT`), icon: `sap-icon://edit` }) - .button({ text: `Upload`, press: this.client._event(`DB_SAVE`), type: `Emphasized`, icon: `sap-icon://upload-to-cloud`, enabled: (this.mv_editor) }); - this.client.view_display(page.stringify()); - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.mv_path = `../../demo/text`; - this.mv_type = `plain_text`; - this.view_display(); - } - switch (client.get().EVENT) { - case `DB_LOAD`: - this.mv_editor = (String(this.mv_path).toLowerCase().includes(String(`abap`).toLowerCase()) ? this.read_abap() : String(this.mv_path).toLowerCase().includes(String(`json`).toLowerCase()) ? this.read_json() : String(this.mv_path).toLowerCase().includes(String(`yaml`).toLowerCase()) ? this.read_yaml() : String(this.mv_path).toLowerCase().includes(String(`text`).toLowerCase()) ? this.read_text() : String(this.mv_path).toLowerCase().includes(String(`js`).toLowerCase()) ? this.read_js() : null); - client.message_toast_display(`Download successful`); - client.view_model_update(); - break; - case `DB_SAVE`: - client.message_box_display(`Upload successful. File saved!`, `success`); - break; - case `EDIT`: - this.mv_check_editable = (!(this.mv_check_editable === true || this.mv_check_editable === `X`)); - client.view_model_update(); - break; - case `CLEAR`: - this.mv_editor = ``; - break; - } - } - - read_abap() { - let r_result = ``; - let sy_subrc = 0; - r_result = `METHOD SELECT_FILES.` + ` -` + ` -` + ` DATA: LV_RET_CODE TYPE I,` + ` -` + ` LV_USR_AXN TYPE I.` + ` -` + ` -` + ` CL_GUI_FRONTEND_SERVICES=>FILE_OPEN_DIALOG(` + ` -` + ` EXPORTING` + ` -` + ` WINDOW_TITLE = 'Select file'` + ` -` + ` MULTISELECTION = 'X'` + ` -` + ` CHANGING` + ` -` + ` FILE_TABLE = ME->PT_FILETAB` + ` -` + ` RC = LV_RET_CODE` + ` -` + ` USER_ACTION = LV_USR_AXN` + ` -` + ` EXCEPTIONS` + ` -` + ` FILE_OPEN_DIALOG_FAILED = 1` + ` -` + ` CNTL_ERROR = 2` + ` -` + ` ERROR_NO_GUI = 3` + ` -` + ` NOT_SUPPORTED_BY_GUI = 4` + ` -` + ` OTHERS = 5` + ` -` + ` ).` + ` -` + ` IF SY-SUBRC <> 0 OR` + ` -` + ` LV_USR_AXN = CL_GUI_FRONTEND_SERVICES=>ACTION_CANCEL.` + ` -` + ` RAISE EX_FILE_SEL_ERR.` + ` -` + ` ENDIF.` + ` -` + ` -` + ` ENDMETHOD. `; - return r_result; - } - - read_json() { - let r_result = ``; - r_result = `{` + ` -` + ` "quiz": {` + ` -` + ` "sport": {` + ` -` + ` "q1": {` + ` -` + ` "test" : false,` + ` -` + ` "question": "Which one is correct team name in NBA?",` + ` -` + ` "options": [` + ` -` + ` "New York Bulls",` + ` -` + ` "Los Angeles Kings",` + ` -` + ` "Golden State Warriros",` + ` -` + ` "Huston Rocket"` + ` -` + ` ],` + ` -` + ` "answer": "Huston Rocket"` + ` -` + ` }` + ` -` + ` },` + ` -` + ` "maths": {` + ` -` + ` "q1": {` + ` -` + ` "question": "5 + 7 = ?",` + ` -` + ` "options": [` + ` -` + ` "10",` + ` -` + ` "11",` + ` -` + ` "12",` + ` -` + ` "13"` + ` -` + ` ],` + ` -` + ` "answer": "12"` + ` -` + ` },` + ` -` + ` "q2": {` + ` -` + ` "question": true,` + ` -` + ` "options": [` + ` -` + ` "1",` + ` -` + ` "2",` + ` -` + ` "3",` + ` -` + ` "4"` + ` -` + ` ],` + ` -` + ` "answer": 487829` + ` -` + ` }` + ` -` + ` }` + ` -` + ` }` + ` -` + `}`; - return r_result; - } - - read_js() { - let r_result = ``; - r_result = `function showAlert() {` + ` -` + ` alert("Alert from JS file");` + ` -` + `}` + ` -` + ` -` + `function updateHeading() {` + ` -` + ` document.getElementById('heading').innerHTML = 'Heading changed with JS';` + ` -` + `}`; - return r_result; - } - - read_yaml() { - let r_result = ``; - r_result = `# Employee records` + ` -` + `- martin:` + ` -` + ` name: Martin Developer` + ` -` + ` job: Developer` + ` -` + ` skills:` + ` -` + ` - python` + ` -` + ` - perl` + ` -` + ` - pascal` + ` -` + `- tabitha:` + ` -` + ` name: Tabitha Bitumen` + ` -` + ` job: Developer` + ` -` + ` skills:` + ` -` + ` - lisp` + ` -` + ` - fortran` + ` -` + ` - erlang`; - return r_result; - } - - read_text() { - let r_result = ``; - r_result = `TXT test file` + ` -` + `Purpose: Provide example of this file type` + ` -` + `Document file type: TXT` + ` -` + `Version: 1.0` + ` -` + `Remark:` + ` -` + ` -` + `Example content:` + ` -` + `The names "John Doe" for males, "Jane Doe" or "Jane Roe" for females, or "Jonnie Doe" and "Janie Doe" for children, or just ` + ` "Doe" non-gender-specifically are used as placeholder names for a party whose true identity is unknown or must ` + `be withheld in a legal action, case, or discussion. The names are also used to refer to a corpse or hospital patient whose ` + `identity is unknown. This practice is widely used in the United States and Canada, but is rarely used in other ` + `English-speaking countries including the United Kingdom itself, from where the use of "John Doe" in a legal context ` + `originates. The names Joe Bloggs or John Smith are used in the UK instead, as well as in Australia and New Zealand.` + ` -` + ` -` + `John Doe is sometimes used to refer to a typical male in other contexts as well, in a similar manner to John Q. Public,` + ` known in Great Britain as Joe Public, John Smith or Joe Bloggs. For example, the first name listed on a form is often ` + `John Doe, along with a fictional address or other fictional information to provide an example of how to fill in the form` + `. The name is also used frequently in popular culture, for example in the Frank Capra film Meet John Doe. John Doe was ` + `also the name of a 2002 American television series.`; - return r_result; - } -} - -module.exports = z2ui5_cl_demo_app_035; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js deleted file mode 100644 index f3d70cb..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js +++ /dev/null @@ -1,65 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_038 extends z2ui5_if_app { - t_msg = []; - client = null; - - popover_display({ id } = {}) { - const popup = z2ui5_cl_xml_view.factory_popup(); - popup.message_popover({ items: this.client._bind(this.t_msg), groupitems: true, placement: `Top`, initiallyexpanded: true, beforeclose: this.client._event(`POPOVER_CLOSE`) }) - .message_item({ type: `{TYPE}`, title: `{TITLE}`, subtitle: `{SUBTITLE}`, description: `{DESCRIPTION}`, groupname: `{GROUP}` }); - this.client.popover_display(popup.stringify(), id); - } - - popup_display() { - let popup = z2ui5_cl_xml_view.factory_popup(); - popup = popup.dialog({ title: `Messages`, contentheight: `50%`, contentwidth: `50%`, verticalscrolling: false, afterclose: this.client._event_client(this.client.cs_event.popup_close) }); - popup.message_view({ items: this.client._bind(this.t_msg), groupitems: true }) - .message_item({ type: `{TYPE}`, title: `{TITLE}`, subtitle: `{SUBTITLE}`, description: `{DESCRIPTION}`, groupname: `{GROUP}` }); - popup.buttons() - .button({ id: `test2`, text: `test`, press: this.client._event(`TEST`) }) - .button({ text: `Continue`, press: this.client._event_client(this.client.cs_event.popup_close), type: `Emphasized` }); - this.client.popup_display(popup.stringify()); - } - - view_display() { - const view = z2ui5_cl_xml_view.factory(); - const page = view.shell() - .page({ title: `abap2UI5 - Message View`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.button({ text: `Messages in Popup`, press: this.client._event(`POPUP`) }); - page.message_view({ items: this.client._bind(this.t_msg), groupitems: true }) - .message_item({ type: `{TYPE}`, title: `{TITLE}`, subtitle: `{SUBTITLE}`, description: `{DESCRIPTION}`, groupname: `{GROUP}` }); - page.footer() - .overflow_toolbar() - .button({ id: `test`, text: `Messages (6)`, press: this.client._event(`POPOVER`), type: `Emphasized` }) - .toolbar_spacer() - .button({ text: `Send to Server`, press: this.client._event(`BUTTON_SEND`), type: `Success` }); - this.client.view_display(view.stringify()); - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.t_msg = [{ description: `descr`, subtitle: `subtitle`, title: `title`, type: `Error`, group: `group 01` }, { description: `descr`, subtitle: `subtitle`, title: `title`, type: `Information`, group: `group 01` }, { description: `descr`, subtitle: `subtitle`, title: `title`, type: `Information`, group: `group 02` }, { description: `descr`, subtitle: `subtitle`, title: `title`, type: `Success`, group: `group 03` }]; - this.view_display(); - } - switch (client.get().EVENT) { - case `POPOVER_CLOSE`: - client.popover_destroy(); - break; - case `POPUP`: - this.popup_display(); - break; - case `TEST`: - this.popover_display({ id: `test2` }); - break; - case `POPOVER`: - this.popover_display({ id: `test` }); - break; - } - } -} - -module.exports = z2ui5_cl_demo_app_038; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js deleted file mode 100644 index abf7706..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js +++ /dev/null @@ -1,33 +0,0 @@ -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_041 extends z2ui5_if_app { - screen = { step_val_01: `4`, step_val_02: `10` }; - - view_display({ client } = {}) { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Step Input Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); - layout.label(`StepInput`) - .step_input({ value: client._bind_edit(this.screen.step_val_01, { name: `screen-step_val_01` }), step: `2`, min: `0`, max: `20` }) - .step_input({ value: client._bind_edit(this.screen.step_val_02, { name: `screen-step_val_02` }), step: `10`, min: `0`, max: `100` }) - .button({ text: `OK`, press: client._event(`POST`) }); - client.view_display(page.stringify()); - } - - on_event({ client } = {}) { - if (client.check_on_event(`POST`)) { - client.message_box_display(`success - values sent to the server`); - } - } - - async main(client) { - if (client.check_on_init()) { - this.view_display({ client: client }); - } - this.on_event({ client: client }); - } -} - -module.exports = z2ui5_cl_demo_app_041; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js new file mode 100644 index 0000000..e14c7ee --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js @@ -0,0 +1,73 @@ +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_045 extends z2ui5_if_app { + t_tab = []; + mv_info_filter = ``; + + refresh_data() { + let ls_row; + for (let sy_index = 1; sy_index <= 1000; sy_index++) { + ls_row = { count: sy_index, value: `red`, info: (sy_index < 50 ? `completed` : `uncompleted`), descr: `this is a description`, checkbox: true }; + this.t_tab.push(ls_row); + } + } + + async main(client) { + if (client.check_on_init()) { + this.refresh_data(); + } + switch (client.get().EVENT) { + case `FILTER_INFO`: + this.refresh_data(); + if (this.mv_info_filter !== ``) { + for (let _i = this.t_tab.length - 1; _i >= 0; _i--) { const row = this.t_tab[_i]; if (row.info !== this.mv_info_filter) this.t_tab.splice(_i, 1); } + } + break; + case `BUTTON_POST`: + client.message_box_display(`button post was pressed`); + break; + } + const page = z2ui5_cl_xml_view.factory() + .shell() + .page({ title: `abap2UI5 - Scroll Container with Table and Toolbar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }) + .header_content() + .link() + .get_parent(); + page.simple_form({ title: `Form Title`, editable: true }) + .content(`form`) + .title(`Filter`) + .label(`info`) + .input(client._bind_edit(this.mv_info_filter)) + .button({ text: `filter`, press: client._event(`FILTER_INFO`) }); + const tab = page.scroll_container({ height: `70%`, vertical: true }) + .table({ growing: true, growingthreshold: `20`, growingscrolltoload: true, items: client._bind(this.t_tab), sticky: `ColumnHeaders,HeaderToolbar` }); + tab.header_toolbar().overflow_toolbar().toolbar_spacer(); + tab.columns() + .column() + .text(`Color`) + .get_parent() + .column() + .text(`Info`) + .get_parent() + .column() + .text(`Description`) + .get_parent() + .column() + .text(`Checkbox`) + .get_parent() + .column() + .text(`Counter`); + tab.items() + .column_list_item() + .cells() + .text(`{VALUE}`) + .text(`{INFO}`) + .text(`{DESCR}`) + .checkbox({ selected: `{CHECKBOX}`, enabled: false }) + .text(`{COUNT}`); + client.view_display(page.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_045; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js index 71dcb7f..5f8f0b1 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js @@ -13,7 +13,7 @@ class z2ui5_cl_demo_app_048 extends z2ui5_if_app { } switch (client.get().EVENT) { case `EDIT`: - lv_row_title = client.get_event_arg(1); + lv_row_title = client.get_event_arg(); client.message_box_display(`EDIT - ${lv_row_title}`); break; case `SELCHANGE`: diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js index 1d0a9b1..eb028f7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js @@ -8,6 +8,8 @@ class z2ui5_cl_demo_app_051 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Label Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Label/sample/sap.m.sample.Label` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.label({ text: `Input mandatory`, labelfor: `input1` }); layout.input({ id: `input1`, required: true }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js index 26587a0..4d34f69 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js @@ -10,8 +10,8 @@ class z2ui5_cl_demo_app_052 extends z2ui5_if_app { popover_display({ id } = {}) { const lo_popover = z2ui5_cl_xml_view.factory_popup(); - lo_popover.popover({ placement: `Right`, title: `abap2UI5 - Popover - ${this.mv_product}`, contentwidth: `50%` }) - .simple_form({ editable: true }) + lo_popover.popover({ placement: `Right`, title: `abap2UI5 - Popover - ${this.mv_product}`, contentwidth: `20rem` }) + .simple_form({ editable: false, layout: `ColumnLayout` }) .content(`form`) .label(`Product`) .text(this.mv_product) @@ -65,7 +65,7 @@ class z2ui5_cl_demo_app_052 extends z2ui5_if_app { case `POPOVER_DETAIL`: this.mv_check_popover = true; this.mv_product = client.get_event_arg(2); - this.popover_display({ id: client.get_event_arg(1) }); + this.popover_display({ id: client.get_event_arg() }); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js deleted file mode 100644 index fcaf5a7..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js +++ /dev/null @@ -1,114 +0,0 @@ -const z2ui5_cl_pop_get_range = require("abap2UI5/z2ui5_cl_pop_get_range"); -const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_056 extends z2ui5_if_app { - mt_table = []; - mt_token = []; - mt_tokens_added = []; - mt_tokens_removed = []; - client = null; - mt_range = null; - - on_event() { - let sy_tabix = 0; - switch (this.client.get().EVENT) { - case `BUTTON_START`: - this.set_data(); - this.client.view_model_update(); - break; - case `UPDATE_TOKENS`: - sy_tabix = 0; - for (const ls_token of this.mt_tokens_removed) { - sy_tabix++; - for (let _i = this.mt_token.length - 1; _i >= 0; _i--) { const row = this.mt_token[_i]; if (row.key === ls_token.key) this.mt_token.splice(_i, 1); } - } - sy_tabix = 0; - for (const ls_token of this.mt_tokens_added) { - sy_tabix++; - this.mt_token.push({ key: ls_token.key, text: ls_token.text, visible: true, editable: true }); - } - this.mt_tokens_removed = {}; - this.mt_tokens_added = {}; - this.mt_range = z2ui5_cl_sample_context.filter_get_range_t_by_token_t(this.mt_token); - this.set_data(); - this.client.view_model_update(); - break; - case `FILTER_VALUE_HELP`: - this.client.nav_app_call(z2ui5_cl_pop_get_range.factory(this.mt_range)); - break; - } - } - - set_data() { - this.mt_table = [{ product: `table`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `chair`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `sofa`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `computer`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `oven`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `table2`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }]; - for (let _i = this.mt_table.length - 1; _i >= 0; _i--) { const row = this.mt_table[_i]; if (!((($v, $r) => !$r || !$r.length || $r.some(($x) => ($x.option === `BT` ? $v >= $x.low && $v <= $x.high : $x.option === `NE` ? $v !== $x.low : $x.option === `CP` ? String($v).includes(String($x.low).replace(/\*/g, "")) : $v === $x.low)))(row.product, this.mt_range))) this.mt_table.splice(_i, 1); } - } - - view_display() { - let view = z2ui5_cl_xml_view.factory(); - view = view.shell() - .page({ id: `page_main`, title: `abap2UI5 - Select-Options`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) - .get_parent(); - const vbox = view.vbox(); - vbox._z2ui5() - .multiinput_ext({ addedtokens: this.client._bind_edit(this.mt_tokens_added), removedtokens: this.client._bind_edit(this.mt_tokens_removed), change: this.client._event(`UPDATE_TOKENS`), multiinputid: `MultiInput` }); - const tab = vbox.table(this.client._bind(this.mt_table)) - .header_toolbar() - .overflow_toolbar() - .text(`Product:`) - .multi_input({ width: `30%`, id: `MultiInput`, tokens: this.client._bind(this.mt_token), showclearicon: true, valuehelprequest: this.client._event(`FILTER_VALUE_HELP`) }) - .item({ key: `{KEY}`, text: `{TEXT}` }) - .tokens() - .token({ key: `{KEY}`, text: `{TEXT}`, visible: `{VISIBLE}`, selected: `{SELKZ}`, editable: `{EDITABLE}` }) - .get_parent() - .get_parent() - .toolbar_spacer() - .button({ text: `Go`, press: this.client._event(`BUTTON_START`), type: `Emphasized` }) - .get_parent() - .get_parent(); - const lo_columns = tab.columns(); - lo_columns.column().text(`Product`); - lo_columns.column().text(`Date`); - lo_columns.column().text(`Name`); - lo_columns.column().text(`Location`); - lo_columns.column().text(`Quantity`); - const lo_cells = tab.items().column_list_item(); - lo_cells.text(`{PRODUCT}`); - lo_cells.text(`{CREATE_DATE}`); - lo_cells.text(`{CREATE_BY}`); - lo_cells.text(`{STORAGE_LOCATION}`); - lo_cells.text(`{QUANTITY}`); - this.client.view_display(view.stringify()); - } - - async main(client) { - let lo_value_help; - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.view_display(); - return; - } - if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) { - try { - lo_value_help = (client.get_app(client.get().S_DRAFT.ID_PREV_APP)); - if (!((lo_value_help.result().check_confirmed) === true || (lo_value_help.result().check_confirmed) === `X`)) { - return; - } - this.mt_range = lo_value_help.result().t_range; - this.mt_token = z2ui5_cl_sample_context.filter_get_token_t_by_range_t(this.mt_range); - this.set_data(); - client.view_model_update(); - } catch (error) { - } - return; - } - if ((client.get().EVENT)) { - this.on_event(); - } - } -} - -module.exports = z2ui5_cl_demo_app_056; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js index 857f86d..3f33b51 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js @@ -21,7 +21,7 @@ class z2ui5_cl_demo_app_059 extends z2ui5_if_app { this.client = z2ui5_cl_util.abap_copy(this.client); if (this.client.check_on_event(`BUTTON_SEARCH`)) { this.set_data(); - z2ui5_cl_sample_context.itab_filter_by_val({ val: this.client.get_event_arg(1), tab: this.mt_table }); + z2ui5_cl_sample_context.itab_filter_by_val({ val: this.client.get_event_arg(), tab: this.mt_table }); this.client.view_model_update(); } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js deleted file mode 100644 index 5f1fe61..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js +++ /dev/null @@ -1,26 +0,0 @@ -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_062 extends z2ui5_if_app { - view_display({ client } = {}) { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Generic Tag Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); - layout.generic_tag({ arialabelledby: `genericTagLabel`, text: `Project Cost`, design: `StatusIconHidden`, status: `Error`, class: `sapUiSmallMarginBottom` }) - .object_number({ state: `Error`, emphasized: `false`, number: `3.5M`, unit: `EUR` }); - layout.generic_tag({ arialabelledby: `genericTagLabel`, text: `Project Cost`, design: `StatusIconHidden`, status: `Success`, class: `sapUiSmallMarginBottom` }) - .object_number({ state: `Success`, emphasized: `false`, number: `3.5M`, unit: `EUR` }); - layout.generic_tag({ arialabelledby: `genericTagLabel`, text: `Input`, design: `StatusIconHidden`, class: `sapUiSmallMarginBottom` }) - .object_number({ emphasized: `true`, number: `3.5M`, unit: `EUR` }); - client.view_display(page.stringify()); - } - - async main(client) { - if (client.check_on_init()) { - this.view_display({ client: client }); - } - } -} - -module.exports = z2ui5_cl_demo_app_062; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js index b98a8cd..4c68f1d 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js @@ -47,7 +47,7 @@ class z2ui5_cl_demo_app_064 extends z2ui5_if_app { this.client.message_toast_display(`loaded`); // TODO(abap2js): WAIT UP TO 2 SECONDS. if ((this.mv_check_active === true || this.mv_check_active === `X`)) { - this.client.action.gen({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [this.client._event(`LOAD`), `0`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [`LOAD`, `0`] }); } this.client.view_model_update(); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js index ac4fc7c..b3ecac7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js @@ -4,6 +4,7 @@ const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_065 extends z2ui5_if_app { mv_input_main = ``; mv_input_nest = ``; + mv_count = 0; async main(client) { const lo_view = z2ui5_cl_xml_view.factory(); @@ -16,11 +17,11 @@ class z2ui5_cl_demo_app_065 extends z2ui5_if_app { .button({ text: `Rerender all`, press: client._event(`ALL`) }) .button({ text: `Rerender Main without nest`, press: client._event(`MAIN`) }) .button({ text: `Rerender only nested view`, press: client._event(`NEST`) }) + .button({ text: `Update only nested MODEL (nest_view_model_update)`, press: client._event(`NEST_MODEL`) }) .input(client._bind_edit(this.mv_input_main)); const lo_view_nested = z2ui5_cl_xml_view.factory() .page(`Nested View`) .button({ text: `event`, press: client._event(`TEST`) }) - .button({ text: `frontend event`, press: client._event_client(client.cs_event.open_new_tab, [`https://github.com/abap2UI5/abap2UI5/`]) }) .input(client._bind_edit(this.mv_input_nest)); if (client.check_on_init()) { client.view_display(lo_view.stringify()); @@ -39,6 +40,11 @@ class z2ui5_cl_demo_app_065 extends z2ui5_if_app { case `NEST`: client.nest_view_display(lo_view_nested.stringify(), `test`, `addContent`); break; + case `NEST_MODEL`: + this.mv_count = this.mv_count + 1; + this.mv_input_nest = `nest model updated #${this.mv_count}`; + client.nest_view_model_update(); + break; } } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js deleted file mode 100644 index b0d72e5..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js +++ /dev/null @@ -1,53 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_068 extends z2ui5_if_app { - prodh_nodes = null; - client = null; - - popup_display_tree_select() { - const dialog = z2ui5_cl_xml_view.factory_popup() - .dialog({ title: `Choose Product here...`, contentheight: `50%`, contentwidth: `50%` }); - dialog.tree({ mode: `SingleSelectMaster`, items: this.client._bind_edit(this.prodh_nodes) }) - .items() - .standard_tree_item({ selected: `{IS_SELECTED}`, title: `{TEXT}` }); - dialog.buttons() - .button({ text: `Continue`, icon: `sap-icon://accept`, type: `Accept`, press: this.client._event(`CONTINUE`) }) - .button({ text: `Cancel`, icon: `sap-icon://decline`, type: `Reject`, press: this.client._event(`CANCEL`) }); - this.client.popup_display(dialog.stringify()); - } - - view_display({ client } = {}) { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Popup Tree select Entry`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - client.view_display(page.button({ text: `Open Popup here...`, press: client._event(`POPUP_TREE`) }).stringify()); - } - - on_init() { - this.prodh_nodes = [{ text: `Machines`, prodh: `00100`, nodes: [{ text: `Pumps`, prodh: `0010000100`, nodes: [{ text: `Pump 001`, prodh: `001000010000000100` }, { text: `Pump 002`, prodh: `001000010000000105` }] }] }, { text: `Paints`, prodh: `00110`, nodes: [{ text: `Gloss paints`, prodh: `0011000105`, nodes: [{ text: `Paint 001`, prodh: `001100010500000100` }, { text: `Paint 002`, prodh: `001100010500000105` }] }] }]; - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.on_init(); - this.view_display({ client: client }); - } - switch (client.get().EVENT) { - case `POPUP_TREE`: - this.popup_display_tree_select(); - break; - case `CONTINUE`: - client.popup_destroy(); - client.message_box_display(`Selected entry is set in the backend`); - break; - case `CANCEL`: - client.popup_destroy(); - break; - } - } -} - -module.exports = z2ui5_cl_demo_app_068; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js deleted file mode 100644 index 0dc0c71..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js +++ /dev/null @@ -1,69 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_069 extends z2ui5_if_app { - mt_tree = []; - mv_check_enabled_01 = true; - mv_check_enabled_02 = false; - client = null; - - view_display_app_01() { - const lo_view_nested = z2ui5_cl_xml_view.factory(); - const page = lo_view_nested.page(`APP_01`); - page.button({ text: `Update this view`, press: this.client._event(`UPDATE_DETAIL`) }); - this.client.nest_view_display(lo_view_nested.stringify(), `test`, `addMidColumnPage`, `removeAllMidColumnPages`); - } - - view_display_app_02() { - const lo_view_nested = z2ui5_cl_xml_view.factory(); - const page = lo_view_nested.page(`APP_02`); - page.button({ text: `Update this view`, press: this.client._event(`UPDATE_DETAIL`) }).input(); - page.button({ text: `button 01`, press: this.client._event(`NEST_TEST`), enabled: this.client._bind(this.mv_check_enabled_01) }); - page.button({ text: `button 01`, press: this.client._event(`NEST_TEST`), enabled: this.client._bind(this.mv_check_enabled_01) }); - page.button({ text: `button 02`, press: this.client._event(`NEST_TEST`), enabled: this.client._bind(this.mv_check_enabled_02) }); - this.client.nest_view_display(lo_view_nested.stringify(), `test`, `addMidColumnPage`, `removeAllMidColumnPages`); - } - - view_display_master() { - const view = z2ui5_cl_xml_view.factory(); - const page = view.shell() - .page({ title: `abap2UI5 - Master-Detail View with Nested Views`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - const lr_master = page.flexible_column_layout({ layout: `TwoColumnsBeginExpanded`, id: `test` }) - .begin_column_pages(); - lr_master.tree(this.client._bind(this.mt_tree)) - .items() - .standard_tree_item({ type: `Active`, title: `{TEXT}`, press: this.client._event(`EVENT_ITEM`, [`\${TEXT}`]) }); - this.client.view_display(page.stringify()); - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.mt_tree = [{ text: `Apps`, nodes: [{ text: `Frontend`, nodes: [{ text: `App_001` }, { text: `App_002` }] }] }, { text: `Configuration`, nodes: [{ text: `User Interface`, nodes: [{ text: `Theme` }, { text: `Library` }] }, { text: `Database`, nodes: [{ text: `HANA` }, { text: `ANY DB` }] }] }]; - this.view_display_master(); - } - switch (client.get().EVENT) { - case `UPDATE_DETAIL`: - this.view_display_app_01(); - break; - case `EVENT_ITEM`: - switch (client.get_event_arg(1)) { - case `App_001`: - this.view_display_app_01(); - break; - case `App_002`: - this.view_display_app_02(); - break; - } - break; - case `NEST_TEST`: - this.mv_check_enabled_01 = (!(this.mv_check_enabled_01 === true || this.mv_check_enabled_01 === `X`)); - this.mv_check_enabled_02 = (!(this.mv_check_enabled_01 === true || this.mv_check_enabled_01 === `X`)); - client.nest_view_model_update(); - break; - } - } -} - -module.exports = z2ui5_cl_demo_app_069; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js index 20bffa1..44f30f9 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js @@ -97,7 +97,7 @@ class z2ui5_cl_demo_app_070 extends z2ui5_if_app { } on_init() { - this.mt_mapping = [{ n: `EQ`, v: `={LOW}` }, { n: `LT`, v: `<{LOW}` }, { n: `LE`, v: `<={LOW}` }, { n: `GT`, v: `>{LOW}` }, { n: `GE`, v: `>={LOW}` }, { n: `CP`, v: `*{LOW}*` }, { n: `BT`, v: `{LOW}...{HIGH}` }, { n: `NE`, v: `!(={LOW})` }, { n: `NE`, v: `!()` }, { n: ``, v: `` }]; + this.mt_mapping = [{ n: `EQ`, v: `={LOW}` }, { n: `LT`, v: `<{LOW}` }, { n: `LE`, v: `<={LOW}` }, { n: `GT`, v: `>{LOW}` }, { n: `GE`, v: `>={LOW}` }, { n: `CP`, v: `*{LOW}*` }, { n: `BT`, v: `{LOW}...{HIGH}` }, { n: `NE`, v: `!(={LOW})` }, { n: `!`, v: `!()` }, { n: ``, v: `` }]; const view = z2ui5_cl_xml_view.factory(); const page1 = view.shell() .page({ id: `page_main`, title: `abap2UI5 - sap.ui.table.Table Features`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack(), class: `sapUiContentPadding` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js index a93d54d..301cf29 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js @@ -9,7 +9,7 @@ class z2ui5_cl_demo_app_071 extends z2ui5_if_app { async main(client) { switch (client.get().EVENT) { case `UPDATE`: - client.action.gen({ val: `SET_SIZE_LIMIT`, t_arg: [(this.mv_set_size_limit), client.cs_view.main] }); + client.follow_up_action({ val: `SET_SIZE_LIMIT`, t_arg: [(this.mv_set_size_limit), client.cs_view.main] }); client.message_toast_display(`SizeLimitUpdated`); return; break; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js index 79d1e72..140d38c 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js @@ -1,3 +1,4 @@ +const z2ui5_cl_a2ui5_context = require("abap2UI5/z2ui5_cl_a2ui5_context"); const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); @@ -12,13 +13,17 @@ class z2ui5_cl_demo_app_073 extends z2ui5_if_app { } async main(client) { + let ls_config; + let result; this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { this.view_display(); } switch (client.get().EVENT) { case `BUTTON_OPEN_NEW_TAB`: - client.action.gen({ val: z2ui5_if_client.cs_event.open_new_tab, t_arg: [`https://www.google.com/search?q=abap2ui5&oq=abap2ui5,123`] }); + ls_config = client.get().S_CONFIG; + result = z2ui5_cl_a2ui5_context.app_get_url({ classname: `z2ui5_cl_demo_app_073`, origin: ls_config.ORIGIN, pathname: ls_config.PATHNAME, search: ls_config.SEARCH, hash: ls_config.HASH }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.open_new_tab, t_arg: [result] }); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js index 9428c4f..f7b29cc 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js @@ -4,16 +4,23 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_074 extends z2ui5_if_app { - mv_path = ``; - mv_value = ``; - mr_table = null; - mv_check_edit = false; - mv_check_download = false; + filepath = ``; + file = ``; + table = null; client = null; + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init() || client.check_on_navigated()) { + this.view_display(); + } else { + this.on_event(); + } + } + on_event() { - let lv_data2; - let lv_ready; + let raw; + let content; try { switch (this.client.get().EVENT) { case `START`: @@ -21,74 +28,58 @@ class z2ui5_cl_demo_app_074 extends z2ui5_if_app { this.view_display(); break; case `UPLOAD`: - let [lv_dummy, lv_data] = this.mv_value.split(`;`); - [lv_dummy, lv_data] = lv_data.split(`,`); - lv_data2 = z2ui5_cl_sample_context.conv_decode_x_base64(lv_data); - lv_ready = z2ui5_cl_sample_context.conv_get_string_by_xstring(lv_data2); - this.mr_table = z2ui5_cl_sample_context.itab_get_itab_by_csv(lv_ready); - this.client.message_box_display(`CSV loaded to table`); + let [header, base64] = this.file.split(`;`); + [header, base64] = base64.split(`,`); + raw = z2ui5_cl_sample_context.conv_decode_x_base64(base64); + content = z2ui5_cl_sample_context.conv_get_string_by_xstring(raw); + this.client.message_box_display(content); + this.file = {}; + this.filepath = {}; this.view_display(); - this.mv_value = {}; - this.mv_path = {}; break; } - } catch (x) { - this.client.message_box_display(x.get_text(), `error`); + } catch (error) { + this.client.message_box_display(error.get_text(), `error`); } } view_display() { let sy_tabix = 0; let sy_subrc = 0; - let fs_tab = null; - let _fs$fs_tab = null; + let fs_table = null; + let _fs$fs_table = null; let tab; - let lr_fields; - let lo_cols; - let lo_cells; + let fields; + let columns; + let cells; const view = z2ui5_cl_xml_view.factory(); const page = view.shell() - .page({ title: `abap2UI5 - CSV to ABAP internal Table`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - if (this.mr_table) { - // TODO(abap2js): ASSIGN mr_table->* TO . - tab = page.table(((this.mv_check_edit === true || this.mv_check_edit === `X`) ? this.client._bind_edit(fs_tab) : this.client._bind_edit(fs_tab))) + .page({ title: `abap2UI5 - Upload a File`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + if (this.table) { + // TODO(abap2js): ASSIGN table->* TO . + tab = page.table(this.client._bind_edit(fs_table)) .header_toolbar() .overflow_toolbar() .title(`CSV Content`) .toolbar_spacer() .get_parent() .get_parent(); - lr_fields = z2ui5_cl_sample_context.rtti_get_t_attri_by_any(fs_tab); - lo_cols = tab.columns(); - sy_tabix = 0; - for (const lr_col of lr_fields) { - sy_tabix++; - lo_cols.column().text(lr_col.name); - } - lo_cells = tab.items().column_list_item().cells(); + fields = z2ui5_cl_sample_context.rtti_get_t_attri_by_any(fs_table); + columns = tab.columns(); + cells = tab.items().column_list_item().cells(); sy_tabix = 0; - for (const lr_col of lr_fields) { + for (const field of fields) { sy_tabix++; - lo_cells.text(`{${lr_col.name}}`); + columns.column().text(field.name); + cells.text(`{${field.name}}`); } } - const footer = page.footer().overflow_toolbar(); - footer._z2ui5() - .file_uploader({ value: this.client._bind_edit(this.mv_value), path: this.client._bind_edit(this.mv_path), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) }); + page.footer() + .overflow_toolbar() + ._z2ui5() + .file_uploader({ value: this.client._bind_edit(this.file), path: this.client._bind_edit(this.filepath), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) }); this.client.view_display(view.stringify()); } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.view_display(); - return; - } - if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) { - this.view_display(); - } - this.on_event(); - } } module.exports = z2ui5_cl_demo_app_074; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js deleted file mode 100644 index f833413..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js +++ /dev/null @@ -1,65 +0,0 @@ -const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_075 extends z2ui5_if_app { - mv_path = ``; - mv_value = ``; - mr_table = null; - mv_check_edit = false; - mv_check_download = false; - mv_file = ``; - client = null; - - on_event() { - let lv_data2; - try { - switch (this.client.get().EVENT) { - case `START`: - case `CHANGE`: - this.view_display(); - break; - case `UPLOAD`: - let [lv_dummy, lv_data] = this.mv_value.split(`;`); - [lv_dummy, lv_data] = lv_data.split(`,`); - lv_data2 = z2ui5_cl_sample_context.conv_decode_x_base64(lv_data); - this.mv_file = z2ui5_cl_sample_context.conv_get_string_by_xstring(lv_data2); - this.client.message_box_display(`CSV loaded to table`); - this.view_display(); - this.mv_value = {}; - this.mv_path = {}; - break; - } - } catch (x) { - this.client.message_box_display(x.get_text(), `error`); - } - } - - view_display() { - const view = z2ui5_cl_xml_view.factory(); - const page = view.shell() - .page({ title: `abap2UI5 - Upload Files`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - if (this.mv_file) { - page.code_editor({ value: this.client._bind(this.mv_file), editable: false }); - } - const footer = page.footer().overflow_toolbar(); - footer._z2ui5() - .file_uploader({ value: this.client._bind_edit(this.mv_value), path: this.client._bind_edit(this.mv_path), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) }); - this.client.view_display(view.stringify()); - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.view_display(); - return; - } - if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) { - this.view_display(); - } - this.on_event(); - } -} - -module.exports = z2ui5_cl_demo_app_075; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js deleted file mode 100644 index 86eb064..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js +++ /dev/null @@ -1,52 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_080 extends z2ui5_if_app { - mt_people = []; - lv_s_date = ``; - client = null; - - view_display() { - this.lv_s_date = `2023-04-22T08:15:00`; - const view = z2ui5_cl_xml_view.factory(); - view._generic_property({ n: `core:require`, v: `{Helper:'z2ui5/Util'}` }); - const page = view.shell() - .page({ id: `page_main`, title: `abap2UI5 - Planning Calendar`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack(), class: `sapUiContentPadding` }); - const lo_vbox = page.vbox(`sapUiSmallMargin`); - const lo_planningcalendar = lo_vbox.planning_calendar({ startdate: `{= Helper.DateCreateObject($` + this.client._bind(this.lv_s_date) + `) }`, rows: `{path: '` + this.client._bind(this.mt_people, { path: true }) + `'}`, appointmentselect: this.client._event(`AppSelected`, [`\${$parameters>/appointment/mProperties/title}`]), showweeknumbers: true }); - const lo_rows = lo_planningcalendar.rows(); - const lo_planningcalendarrow = lo_rows.planning_calendar_row({ appointments: `{path:'APPOINTMENTS', templateShareable: false}`, icon: `{PIC}`, title: `{NAME}`, text: `{ROLE}`, intervalheaders: `{path:'HEADERS', templateShareable: false}` }); - lo_planningcalendarrow.appointments() - .calendar_appointment({ startdate: `{= Helper.DateCreateObject(\${START} ) }`, enddate: `{= Helper.DateCreateObject(\${END} ) }`, icon: `{PIC}`, title: `{TITLE}`, text: `{INFO}`, type: `{TYPE}`, tentative: `{TENTATIVE}` }); - lo_planningcalendarrow.interval_headers() - .calendar_appointment({ startdate: `{= Helper.DateCreateObject(\${START} ) }`, enddate: `{= Helper.DateCreateObject(\${END} ) }`, icon: `{PIC}`, title: `{TITLE}`, text: `{INFO}`, type: `{TYPE}` }); - this.client.view_display(view.stringify()); - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.set_data(); - } - if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`) || client.get().EVENT === `DISPLAY_VIEW`) { - this.view_display(); - return; - } - this.on_event(); - } - - on_event() { - let ls_client; - if (this.client.check_on_event(`AppSelected`)) { - ls_client = this.client.get(); - this.client.message_toast_display(`Event AppSelected with appointment ${ls_client.T_EVENT_ARG[(1) - 1]}`); - } - } - - set_data() { - this.mt_people = [{ name: `Olaf`, role: `Team Member`, pic: `sap-icon://employee`, appointments: [{ start: `2023-04-22T08:15:00`, end: `2023-04-23T08:15:00`, info: `Mittag1`, type: `Type01`, title: `App1`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-25T10:30:00`, end: `2023-04-26T11:30:00`, info: `Mittag2`, type: `Type02`, title: `App2`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-10T10:30:00`, end: `2023-04-11T11:30:00`, info: `Mittag3`, type: `Type03`, title: `App3`, tentative: false, pic: `sap-icon://sap-ui5` }], headers: [{ start: `2020-04-22T08:15:00`, end: `2020-04-23T08:15:00`, type: `Type11`, title: `Reminder1`, tentative: true }, { start: `2020-04-25T10:30:00`, end: `2020-04-26T11:30:00`, type: `Type12`, title: `Reminder2`, tentative: false }] }, { name: `Stefanie`, role: `Team Member`, pic: `sap-icon://employee`, appointments: [{ start: `2023-04-22T08:15:00`, end: `2023-04-23T08:15:00`, info: `Mittag11`, type: `Type11`, title: `App11`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-25T10:30:00`, end: `2023-04-26T11:30:00`, info: `Mittag21`, type: `Type12`, title: `App12`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-10T10:30:00`, end: `2023-04-11T11:30:00`, info: `Mittag31`, type: `Type13`, title: `App13`, tentative: false, pic: `sap-icon://sap-ui5` }], headers: [{ start: `2023-04-22T08:15:00`, end: `2023-04-23T08:15:00`, type: `Type11`, title: `Reminder11`, tentative: true }, { start: `2023-04-25T10:30:00`, end: `2023-04-26T11:30:00`, type: `Type12`, title: `Reminder21`, tentative: false }] }]; - } -} - -module.exports = z2ui5_cl_demo_app_080; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js index c5d24e3..158bad7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js @@ -1,3 +1,4 @@ +const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); @@ -28,7 +29,7 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app { lo_columns.get_parent() .ui_row_action_template() .ui_row_action() - .ui_row_action_item({ icon: `sap-icon://delete`, press: this.client._event(`ROW_DELETE`, [`\${TITLE}`]) }); + .ui_row_action_item({ icon: `sap-icon://delete`, press: this.client._event(`ROW_DELETE`, [`\${UUID}`]) }); this.client.nest_view_display(lo_view_nested.stringify(), `test`, `addMidColumnPage`, `removeAllMidColumnPages`); } @@ -45,8 +46,6 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app { async main(client) { let sy_subrc = 0; - let lt_arg; - let ls_arg; let lt_sel; let ls_sel; this.client = z2ui5_cl_util.abap_copy(client); @@ -58,17 +57,7 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app { } switch (client.get().EVENT) { case `ROW_DELETE`: - lt_arg = client.get().T_EVENT_ARG; - ls_arg = {}; - { - const _t = lt_arg; - const _i = (1) - 1; - sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4; - if (sy_subrc === 0) ls_arg = _t[_i]; - } - if (ls_arg) { - for (let _i = this.t_tab2.length - 1; _i >= 0; _i--) { const row = this.t_tab2[_i]; if (row.title === ls_arg) this.t_tab2.splice(_i, 1); } - } + for (let _i = this.t_tab2.length - 1; _i >= 0; _i--) { const row = this.t_tab2[_i]; if (row.uuid === client.get_event_arg()) this.t_tab2.splice(_i, 1); } client.nest_view_model_update(); break; case `SELCHANGE`: @@ -81,6 +70,7 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app { sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4; if (sy_subrc === 0) ls_sel = _t[_i]; } + ls_sel.uuid = z2ui5_cl_sample_context.uuid_get_c32(); this.t_tab2.push(ls_sel); this.mv_layout = `TwoColumnsMidExpanded`; client.nest_view_model_update(); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js index 67317fa..b182c66 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js @@ -37,7 +37,7 @@ class z2ui5_cl_demo_app_098 extends z2ui5_if_app { const lo_view_nested = z2ui5_cl_xml_view.factory(); let page = lo_view_nested.page(`Nested View`); page = page.text(this.client._bind(this.mv_title)) - .button({ text: `frontend event`, press: this.client._event_client(this.client.cs_event.open_new_tab, [`https://github.com/abap2UI5/abap2UI5/`]) }); + .button({ text: `frontend event`, press: this.client._event(`NN_VIEW`) }); this.client.nest2_view_display(lo_view_nested.stringify(), `test`, `addEndColumnPage`, `removeAllEndColumnPages`); } @@ -64,10 +64,13 @@ class z2ui5_cl_demo_app_098 extends z2ui5_if_app { this.view_display_detail(); } switch (client.get().EVENT) { + case `NN_VIEW`: + client.message_box_display(`Event in nested nested view raised`); + break; case `ROW_NAVIGATE`: - if (client.get_event_arg(1)) { + if (client.get_event_arg()) { this.mv_layout = `ThreeColumnsEndExpanded`; - this.mv_title = client.get_event_arg(1); + this.mv_title = client.get_event_arg(); } client.nest_view_model_update(); client.view_model_update(); @@ -83,7 +86,9 @@ class z2ui5_cl_demo_app_098 extends z2ui5_if_app { sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4; if (sy_subrc === 0) ls_sel = _t[_i]; } - this.t_tab2.push(ls_sel); + if (!this.t_tab2.some((row) => row.title === ls_sel.title)) { + this.t_tab2.push(ls_sel); + } this.mv_layout = `TwoColumnsMidExpanded`; client.nest_view_model_update(); client.view_model_update(); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js index 1c210b4..ccf2910 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js @@ -3,51 +3,57 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_101 extends z2ui5_if_app { - mt_feed = []; - ms_feed = {}; - mv_value = ``; + t_feed = []; + value = ``; client = null; async main(client) { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { - this.set_data(); + this.on_init(); + } else if (client.check_on_navigated()) { this.view_display(); - } else { + } else if (client.check_on_event()) { this.on_event(); } } + on_init() { + this.set_data(); + this.view_display(); + } + on_event() { if (this.client.check_on_event(`POST`)) { - if (!this.mv_value) { + if (!this.value) { return; } - this.ms_feed = {}; - this.ms_feed.author = z2ui5_cl_util.abap_copy(sy_uname); - this.ms_feed.type = `Respond`; - this.ms_feed.text = z2ui5_cl_util.abap_copy(this.mv_value); - this.mv_value = ``; - this.mt_feed.splice((1) - 1, 0, this.ms_feed); + this.t_feed.splice((1) - 1, 0, { author: `Alexandrina Victoria`, authorpic: `http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg`, type: `Reply`, date: `${sy_datum} ${sy_uzeit}`, text: this.value }); + this.value = {}; this.client.view_model_update(); + } else if (this.client.check_on_event(`SENDER_PRESS`)) { + this.client.message_toast_display(`Clicked on Link: ${this.client.get_event_arg()}`); + } else if (this.client.check_on_event(`ICON_PRESS`)) { + this.client.message_toast_display(`Clicked on Image: ${this.client.get_event_arg()}`); } } - set_data() { - this.mt_feed = [{ author: `choper725`, authorpic: `employee`, type: `Request`, date: `August 26 2023`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna` + `aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` }, { author: `choper725`, authorpic: `sap-icon://employee`, type: `Reply`, date: `August 26 2023`, text: `this is feed input` }]; + view_display() { + let base_url = ``; + const view = z2ui5_cl_xml_view.factory(); + const page = view.shell() + .page({ title: `abap2UI5 - Sample: Feed`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FeedListItem/sample/sap.m.sample.Feed` }); + page.feed_input({ post: this.client._event(`POST`), icon: base_url + `test-resources/sap/m/images/dronning_victoria.jpg`, value: this.client._bind_edit(this.value), class: `sapUiSmallMarginTopBottom` }); + page.list({ showseparators: `Inner`, items: this.client._bind(this.t_feed) }) + .feed_list_item({ sender: `{AUTHOR}`, icon: `{AUTHORPIC}`, senderpress: this.client._event(`SENDER_PRESS`, [`\${$source>/sender}`]), iconpress: this.client._event(`ICON_PRESS`, [`\${$source>/sender}`]), info: `{TYPE}`, timestamp: `{DATE}`, text: `{TEXT}`, convertlinkstoanchortags: `All` }); + this.client.view_display(view.stringify()); } - view_display() { - const lo_view = z2ui5_cl_xml_view.factory(); - const page = lo_view.shell() - .page({ title: `Feed Input`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - const fi = page.vbox() - .feed_input({ post: this.client._event(`POST`), growing: true, rows: `4`, icondensityaware: false, value: this.client._bind_edit(this.mv_value), class: `sapUiSmallMarginTopBottom` }) - .get_parent() - .get_parent() - .list({ items: this.client._bind_edit(this.mt_feed), showseparators: `Inner` }) - .feed_list_item({ sender: `{AUTHOR}`, senderpress: this.client._event(`SENDER_PRESS`), iconpress: this.client._event(`ICON_PRESS`), icondensityaware: false, showicon: false, info: `Reply`, text: `{TEXT}`, convertlinkstoanchortags: `All` }); - this.client.view_display(lo_view.stringify()); + set_data() { + let base_url = ``; + this.t_feed = [{ author: `Alexandrina Victoria`, authorpic: base_url + `test-resources/sap/m/images/dronning_victoria.jpg`, type: `Request`, date: `March 03 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` }, { author: `George Washington`, authorpic: base_url + `test-resources/sap/m/images/george_washington.jpg`, type: `Reply`, date: `March 04 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore` }, { author: `Alexandrina Victoria`, authorpic: base_url + `test-resources/sap/m/images/dronning_victoria.jpg`, type: `Request`, date: `March 05 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat` }, { author: `George Washington`, authorpic: base_url + `test-resources/sap/m/images/george_washington.jpg`, type: `Rejection`, date: `March 07 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.` }]; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js index 1d585f7..595d292 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js @@ -1,49 +1,99 @@ +const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_103 extends z2ui5_if_app { + t_products = []; + t_products_sorted = []; client = null; async main(client) { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { - this.view_display(); - return; + this.on_init(); + } else if (client.check_on_event()) { + this.on_event(); } } + on_init() { + this.t_products = [{ name: `Notebook Basic 15`, product_id: `HT-1000`, quantity: `10` }, { name: `Notebook Basic 17`, product_id: `HT-1001`, quantity: `20` }, { name: `Notebook Basic 18`, product_id: `HT-1002`, quantity: `10` }, { name: `Notebook Basic 19`, product_id: `HT-1003`, quantity: `15` }, { name: `ITelO Vault`, product_id: `HT-1007`, quantity: `15` }, { name: `Notebook Professional 15`, product_id: `HT-1010`, quantity: `16` }, { name: `Notebook Professional 17`, product_id: `HT-1011`, quantity: `17` }, { name: `ITelO Vault Net`, product_id: `HT-1020`, quantity: `14` }, { name: `ITelO Vault SAT`, product_id: `HT-1021`, quantity: `50` }, { name: `Comfort Easy`, product_id: `HT-1022`, quantity: `30` }, { name: `Comfort Senior`, product_id: `HT-1023`, quantity: `24` }, { name: `Ergo Screen E-I`, product_id: `HT-1030`, quantity: `14` }, { name: `Ergo Screen E-II`, product_id: `HT-1031`, quantity: `24` }, { name: `Ergo Screen E-III`, product_id: `HT-1032`, quantity: `50` }, { name: `Flat Basic`, product_id: `HT-1035`, quantity: `23` }, { name: `Flat Future`, product_id: `HT-1036`, quantity: `22` }]; + this.t_products_sorted = z2ui5_cl_util.abap_copy(this.t_products); + this.t_products_sorted.sort((a, b) => ((a.name > b.name ? 1 : a.name < b.name ? -1 : 0))); + this.view_display(); + } + + on_event() { + switch (this.client.get().EVENT) { + case `ROOT_RESIZE`: + this.resize_message({ val: `Root container is resized.` }); + break; + case `INNER_RESIZE`: + this.resize_message({ val: `Inner container is resized.` }); + break; + } + } + + resize_message({ val } = {}) { + const old_sizes = this.client.get_event_arg(); + const new_sizes = this.client.get_event_arg(2); + let message = z2ui5_cl_util.abap_copy(val); + if (old_sizes) { + message = `${message}${z2ui5_cl_sample_context.cv_char_util_newline}Old panes sizes = [${old_sizes}]`; + } + message = `${message}${z2ui5_cl_sample_context.cv_char_util_newline}New panes sizes = [${new_sizes}]`; + this.client.message_toast_display(message); + } + view_display() { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Side Panel Example`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.header_content().link(); - page.responsive_splitter({ defaultpane: `default` }) - .pane_container() - .split_pane({ requiredparentwidth: `400`, id: `default` }) + const view = z2ui5_cl_xml_view.factory(); + const page = view.shell() + .page({ title: `abap2UI5 - Sample: ResponsiveSplitter`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.ui.layout.ResponsiveSplitter/sample/sap.ui.layout.sample.ResponsiveSplitter` }); + const root_container = page.responsive_splitter({ defaultpane: `default` }) + .pane_container({ resize: this.client._event(`ROOT_RESIZE`, [`\${$parameters>/oldSizes}`, `\${$parameters>/newSizes}`]) }); + root_container.split_pane({ requiredparentwidth: `400`, id: `default` }) .layout_data(`layout`) .splitter_layout_data({ size: `auto` }) .get_parent() .get_parent() - .panel({ headertext: `first pane` }) - .get_parent() - .get_parent() - .pane_container({ orientation: `Vertical` }) - .split_pane({ requiredparentwidth: `600` }) + .panel({ headertext: `Minimum parent width 400`, height: `100%` }) + .text(`LayoutData.size=auto`) + .list({ headertext: `Products`, items: this.client._bind(this.t_products) }) + .standard_list_item({ title: `{NAME}`, counter: `{QUANTITY}` }); + const inner_container = root_container.pane_container({ orientation: `Vertical`, resize: this.client._event(`INNER_RESIZE`, [`\${$parameters>/oldSizes}`, `\${$parameters>/newSizes}`]) }); + inner_container.split_pane({ requiredparentwidth: `600` }) .layout_data(`layout`) .splitter_layout_data({ size: `auto` }) .get_parent() .get_parent() - .panel({ headertext: `second pane` }) - .get_parent() - .get_parent() - .split_pane({ requiredparentwidth: `800` }) + .panel({ headertext: `Minimum parent width 600` }) + .vbox() + .text(`LayoutData.size=auto`) + .select({ forceselection: false, selectedkey: `1239102`, items: this.client._bind(this.t_products_sorted) }) + .item({ key: `{PRODUCT_ID}`, text: `{NAME}` }); + const pane_page = inner_container.split_pane({ requiredparentwidth: `800` }) .layout_data(`layout`) .splitter_layout_data({ size: `auto` }) .get_parent() .get_parent() - .panel({ headertext: `second pane` }); - this.client.view_display(page.stringify()); + .page(`Minimum parent width 800`); + pane_page.text(`LayoutData.size=auto`); + pane_page.footer() + .overflow_toolbar() + .label(`Buttons:`) + .toolbar_spacer() + .button({ text: `New`, type: `Transparent` }) + .button({ text: `Open`, type: `Transparent` }) + .button({ text: `Save`, type: `Transparent` }) + .button({ text: `Save as`, type: `Transparent` }) + .button({ text: `Cut`, type: `Transparent` }) + .button({ text: `Copy`, type: `Transparent` }) + .button({ text: `Paste`, type: `Transparent` }) + .button({ text: `Undo`, type: `Transparent` }); + this.client.view_display(view.stringify()); } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js new file mode 100644 index 0000000..dbc8a84 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js @@ -0,0 +1,30 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_105 extends z2ui5_if_app { + mo_view_parent = null; + mv_class_1 = ``; + mr_data = null; + client = null; + + view_display({ xml } = {}) { + this.mo_view_parent.input({ value: this.client._bind_edit(this.mv_class_1), placeholder: `Input From Class 1` }); + } + + on_event() { + if (this.client.check_on_event(`MESSAGE_SUB`)) { + this.client.message_box_display(`event sub app`); + } + } + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.view_display(); + } else { + this.on_event(); + } + } +} + +module.exports = z2ui5_cl_demo_app_105; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js deleted file mode 100644 index 287b5bb..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js +++ /dev/null @@ -1,28 +0,0 @@ -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_106 extends z2ui5_if_app { - mv_value = ``; - - async main(client) { - let view; - let lo_p; - if (client.check_on_init()) { - view = z2ui5_cl_xml_view.factory(); - lo_p = view.shell() - .page({ title: `abap2UI5 - Rich Text Editor`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - lo_p.rich_text_editor({ width: `100%`, height: `400px`, value: client._bind_edit(this.mv_value), customtoolbar: true, showgroupfont: true, showgrouplink: true, showgroupinsert: true, wrapping: false }); - lo_p.footer() - .overflow_toolbar() - .button({ text: `Send To Server`, type: `Emphasized`, icon: `sap-icon://paper-plane`, press: client._event(`SERVER`) }); - client.view_display(view.stringify()); - } - switch (client.get().EVENT) { - case `SERVER`: - client.message_box_display(this.mv_value); - break; - } - } -} - -module.exports = z2ui5_cl_demo_app_106; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js index 1dfbbe3..9e805d4 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js @@ -10,7 +10,10 @@ class z2ui5_cl_demo_app_110 extends z2ui5_if_app { view_display() { const view = z2ui5_cl_xml_view.factory(); view.shell() - .page({ title: `abap2UI5 - Sample: MaskInput`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + .page({ title: `abap2UI5 - Sample: MaskInput`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + .header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MaskInput/sample/sap.m.sample.MaskInput` }) + .get_parent() .simple_form({ title: `Generic Mask Input`, layout: `ColumnLayout`, editable: true }) .label(`Unique ID`) .mask_input({ mask: `~~~~~~~~~~`, placeholdersymbol: `_`, placeholder: `All characters allowed` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js new file mode 100644 index 0000000..5d0554f --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js @@ -0,0 +1,30 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_112 extends z2ui5_if_app { + mo_view_parent = null; + mv_class_2 = ``; + mr_data = null; + client = null; + + view_display({ xml } = {}) { + this.mo_view_parent.input({ value: this.client._bind_edit(this.mv_class_2), placeholder: `Input From Class 2` }); + } + + on_event() { + if (this.client.check_on_event(`MESSAGE_SUB`)) { + this.client.message_box_display(`event sub app`); + } + } + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.view_display(); + } else { + this.on_event(); + } + } +} + +module.exports = z2ui5_cl_demo_app_112; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js new file mode 100644 index 0000000..177583d --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js @@ -0,0 +1,53 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_114 extends z2ui5_if_app { + mt_feed = []; + ms_feed = {}; + mv_value = ``; + client = null; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.set_data(); + this.view_display(); + } else { + this.on_event(); + } + } + + on_event() { + if (this.client.check_on_event(`POST`)) { + if (this.mv_value) { + this.ms_feed = {}; + this.ms_feed.author = z2ui5_cl_util.abap_copy(sy_uname); + this.ms_feed.type = `Respond`; + this.ms_feed.text = z2ui5_cl_util.abap_copy(this.mv_value); + this.mv_value = ``; + this.mt_feed.splice((1) - 1, 0, this.ms_feed); + this.client.view_model_update(); + } + } + } + + set_data() { + this.mt_feed = [{ author: `choper725`, authorpic: `employee`, type: `Request`, date: `August 26 2023`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna` + `aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` }, { author: `choper725`, authorpic: `sap-icon://employee`, type: `Reply`, date: `August 26 2023`, text: `this is feed input` }]; + } + + view_display() { + const lo_view = z2ui5_cl_xml_view.factory(); + const page = lo_view.shell() + .page({ title: `Feed Input`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.flex_box({ justifycontent: `Start`, class: `sapUiSmallMarginEnd`, alignitems: `Center` }) + .icon({ src: `sap-icon://person-placeholder`, class: `sapUiSmallMarginEnd` }) + .text_area({ value: this.client._bind_edit(this.mv_value), rows: `4`, cols: `120`, class: `sapUiSmallMarginEnd`, placeholder: `Post something here...`, editable: true, enabled: true }) + .button({ icon: `sap-icon://paper-plane`, press: this.client._event(`POST`), iconfirst: true }); + page.list({ items: this.client._bind_edit(this.mt_feed), showseparators: `Inner` }) + .feed_list_item({ sender: `{AUTHOR}`, senderpress: this.client._event(`SENDER_PRESS`), iconpress: this.client._event(`ICON_PRESS`), icondensityaware: false, showicon: false, info: `Reply`, text: `{TEXT}`, convertlinkstoanchortags: `All` }); + this.client.view_display(lo_view.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_114; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js new file mode 100644 index 0000000..3c4cd03 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js @@ -0,0 +1,52 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_120 extends z2ui5_if_app { + longitude = ``; + latitude = ``; + altitude = ``; + speed = ``; + altitudeaccuracy = ``; + accuracy = ``; + mt_spot = []; + client = null; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.view_display(); + return; + } + switch (client.get().EVENT) { + case `GEOLOCATION_ERROR`: + client.message_box_display(`Location unavailable (${client.get_event_arg(1)}): ${client.get_event_arg(2)}`, `error`); + break; + } + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + view.shell() + .page({ title: `abap2UI5 - Device Capabilities`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + ._z2ui5() + .geolocation({ finished: this.client._event(`GEOLOCATION_LOADED`), error: this.client._event(`GEOLOCATION_ERROR`, [`\${$parameters>/code}`, `\${$parameters>/message}`]), longitude: this.client._bind_edit(this.longitude), latitude: this.client._bind_edit(this.latitude), altitude: this.client._bind_edit(this.altitude), altitudeaccuracy: this.client._bind_edit(this.altitudeaccuracy), accuracy: this.client._bind_edit(this.accuracy), speed: this.client._bind_edit(this.speed) }) + .simple_form({ title: `Geolocation`, editable: false }) + .content(`form`) + .label(`Longitude`) + .input({ value: this.client._bind_edit(this.longitude), editable: false }) + .label(`Latitude`) + .input({ value: this.client._bind_edit(this.latitude), editable: false }) + .label(`Altitude`) + .input({ value: this.client._bind_edit(this.altitude), editable: false }) + .label(`Accuracy`) + .input({ value: this.client._bind_edit(this.accuracy), editable: false }) + .label(`AltitudeAccuracy`) + .input({ value: this.client._bind_edit(this.altitudeaccuracy), editable: false }) + .label(`Speed`) + .input({ value: this.client._bind_edit(this.speed), editable: false }); + this.client.view_display(view.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_120; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js index 6ae0651..287dbff 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js @@ -18,7 +18,7 @@ class z2ui5_cl_demo_app_125 extends z2ui5_if_app { .button({ text: `Set Title`, press: client._event(`SET_TITLE`) }); client.view_display(view.stringify()); } else if (client.check_on_event(`SET_TITLE`)) { - client.action.gen({ val: z2ui5_if_client.cs_event.set_title, t_arg: [this.title] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.set_title, t_arg: [this.title] }); } } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js index 5195b34..d0f995c 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js @@ -43,7 +43,7 @@ class z2ui5_cl_demo_app_133 extends z2ui5_if_app { switch (client.get().EVENT) { case `BUTTON01`: case `BUTTON02`: - client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [client.get().EVENT, this.selstart, this.selend] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [client.get().EVENT, this.selstart, this.selend] }); client.message_toast_display(`focus changed`); break; } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js deleted file mode 100644 index b72a856..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js +++ /dev/null @@ -1,94 +0,0 @@ -const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_136 extends z2ui5_if_app { - mv_path = ``; - mv_value = ``; - mr_table = null; - mv_check_edit = false; - mv_check_download = false; - client = null; - - on_event() { - let lv_data2; - let lv_ready; - try { - switch (this.client.get().EVENT) { - case `START`: - case `CHANGE`: - this.view_display(); - break; - case `UPLOAD`: - let [lv_dummy, lv_data] = this.mv_value.split(`;`); - [lv_dummy, lv_data] = lv_data.split(`,`); - lv_data2 = z2ui5_cl_sample_context.conv_decode_x_base64(lv_data); - lv_ready = z2ui5_cl_sample_context.conv_get_string_by_xstring(lv_data2); - this.mr_table = z2ui5_cl_sample_context.itab_get_itab_by_csv(lv_ready); - this.client.message_box_display(`CSV loaded to table`); - this.view_display(); - this.mv_value = {}; - this.mv_path = {}; - break; - } - } catch (x) { - this.client.message_box_display(x.get_text(), `error`); - } - } - - view_display() { - let sy_tabix = 0; - let sy_subrc = 0; - let fs_tab = null; - let _fs$fs_tab = null; - let tab; - let lr_fields; - let lo_cols; - let lo_cells; - const view = z2ui5_cl_xml_view.factory(); - const page = view.shell() - .page({ title: `abap2UI5 - CSV to ABAP internal Table`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - if (this.mr_table) { - // TODO(abap2js): ASSIGN mr_table->* TO . - tab = page.table(((this.mv_check_edit === true || this.mv_check_edit === `X`) ? this.client._bind_edit(fs_tab) : this.client._bind_edit(fs_tab))) - .header_toolbar() - .overflow_toolbar() - .title(`CSV Content`) - .toolbar_spacer() - .get_parent() - .get_parent(); - lr_fields = z2ui5_cl_sample_context.rtti_get_t_attri_by_any(fs_tab); - lo_cols = tab.columns(); - sy_tabix = 0; - for (const lr_col of lr_fields) { - sy_tabix++; - lo_cols.column().text(lr_col.name); - } - lo_cells = tab.items().column_list_item().cells(); - sy_tabix = 0; - for (const lr_col of lr_fields) { - sy_tabix++; - lo_cells.text(`{` + lr_col.name + `}`); - } - } - const footer = page.footer().overflow_toolbar(); - footer._z2ui5() - .file_uploader({ value: this.client._bind_edit(this.mv_value), path: this.client._bind_edit(this.mv_path), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) }); - this.client.view_display(view.stringify()); - } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.view_display(); - return; - } - if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) { - this.view_display(); - } - this.on_event(); - } -} - -module.exports = z2ui5_cl_demo_app_136; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js new file mode 100644 index 0000000..4088a9b --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js @@ -0,0 +1,49 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_140 extends z2ui5_if_app { + gt_multi = []; + gt_sel_multi = []; + gt_sel_multi2 = []; + client = null; + + on_event() { + try { + if (this.client.check_on_event(`FILTERBAR`)) { + this.client.view_model_update(); + } + } catch (x) { + this.client.message_box_display(x.get_text(), `error`); + } + } + + on_init() { + this.gt_multi = [{ key: `A01`, text: `T1` }, { key: `A02`, text: `T2` }, { key: `A03`, text: `T3` }, { key: `A04`, text: `T4` }, { key: `A05`, text: `T5` }]; + this.gt_sel_multi2 = [`A01`]; + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + view.shell() + .page({ title: `abap2UI5 - Multi Combo Box`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + .simple_form({ title: `Form Title`, editable: true }) + .content(`form`) + .multi_combobox({ name: `MultiComboBox`, selectedkeys: this.client._bind_edit(this.gt_sel_multi2), items: this.client._bind_edit(this.gt_multi) }) + .item({ key: `{KEY}`, text: `{TEXT}` }) + .get_parent() + .button({ text: `post`, press: this.client._event(`BUTTON_POST`) }); + this.client.view_display(view.stringify()); + } + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.on_init(); + } + this.view_display(); + this.on_event(); + } +} + +module.exports = z2ui5_cl_demo_app_140; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js new file mode 100644 index 0000000..e8f671b --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js @@ -0,0 +1,72 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_143 extends z2ui5_if_app { + gt_data = []; + client = null; + + on_event() { + try { + if (this.client.check_on_event(`ROW_ACTION_ITEM_ADD`)) { + this.client.message_toast_display(`Something`); + this.client.view_model_update(); + } + } catch (x) { + this.client.message_box_display(x.get_text(), `error`); + } + } + + on_init() { + this.gt_data = [{ field1: `21`, field2: `T1`, field3: `TEXT1` }, { field1: `22`, field2: `T1`, field3: `TEXT1` }, { field1: `23`, field2: `T2`, field3: `TEXT1` }, { field1: `24`, field2: `T2`, field3: `TEXT2` }, { field1: `25`, field2: `T3`, field3: `TEXT2` }]; + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + const page1 = view.page({ id: `page_main`, title: `Table Filters Reset after view Update`, class: `sapUiContentPadding`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + const page = page1.dynamic_page({ headerexpanded: true, headerpinned: true }); + page1._z2ui5().uitableext(`Table1`); + const header_title = page.title({ ns: `f` }).get().dynamic_page_title(); + header_title.heading(`f`).hbox().title(`Table`); + header_title.expanded_content(`f`); + header_title.snapped_content(`f`); + const cont = page.content(`f`); + const table = cont.vbox() + .ui_table({ rows: this.client._bind(this.gt_data), id: `Table1`, editable: false, alternaterowcolors: true, enablecellfilter: true, rowactioncount: `1`, fixedcolumncount: `1`, visiblerowcount: `7`, selectionmode: `None` }); + table.ui_columns() + .ui_column({ sortproperty: `FIELD1`, filterproperty: `FIELD1`, autoresizable: `true` }) + .text(`Field1`) + .ui_template() + .text(`{FIELD1}`) + .get_parent() + .get_parent() + .ui_column({ sortproperty: `FIELD2`, filterproperty: `FIELD2`, autoresizable: `true` }) + .text(`Field2`) + .ui_template() + .text(`{FIELD2}`) + .get_parent() + .get_parent() + .ui_column({ sortproperty: `FIELD3`, filterproperty: `FIELD3`, autoresizable: `true` }) + .text(`Field3`) + .ui_template() + .text(`{FIELD3}`) + .get_parent() + .get_parent() + .get_parent() + .ui_row_action_template() + .ui_row_action() + .ui_row_action_item({ icon: `sap-icon://add`, text: `Add`, press: this.client._event(`ROW_ACTION_ITEM_ADD`, [`\${MATNR}`]) }); + this.client.view_display(view.stringify()); + } + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.on_init(); + } + this.view_display(); + this.on_event(); + } +} + +module.exports = z2ui5_cl_demo_app_143; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js index 552769a..a82426e 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js @@ -1,3 +1,4 @@ +const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); @@ -6,44 +7,37 @@ class z2ui5_cl_demo_app_160 extends z2ui5_if_app { mt_output = []; client = null; - load_output_table() { - let ls_output = {}; + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.model_init(); + this.view_display(); + } else { + this.on_event(); + } + } + + model_init() { this.mt_output = {}; for (let sy_index = 1; sy_index <= 10; sy_index++) { - ls_output.index = z2ui5_cl_util.abap_copy(sy_index); - ls_output.set_sk = `Test`; - ls_output.matnr = `1234567`; - ls_output.description = `Test`; - ls_output.pl_01 = 0; - ls_output.pl_02 = 0; - this.mt_output.push(ls_output); + this.mt_output.push({ index: sy_index, set_sk: `Test`, matnr: `1234567`, description: `Test`, pl_01: 0, pl_02: 0 }); } } on_event() { - let lv_id_event; - let lv_tab_index; - let ls_row_submit; - let lv_id_parent; - let lt_event_arguments = []; if (this.client.check_on_event(`PL_TOTAL_CHANGE`)) { - lt_event_arguments = z2ui5_cl_util.struct_lower_keys(this.client.get().T_EVENT_ARG); - lv_id_event = z2ui5_cl_util.abap_copy(lt_event_arguments[(1) - 1]); - lv_tab_index = z2ui5_cl_util.abap_copy(lt_event_arguments[(2) - 1]); - ls_row_submit = z2ui5_cl_util.abap_copy(this.mt_output[(lv_tab_index) - 1]); - lv_id_parent = z2ui5_cl_util.abap_copy(lt_event_arguments[(3) - 1]); - this.client.message_box_display(lv_tab_index + lv_id_event + lv_id_parent); + this.client.message_box_display(`Id of Input via source object: ` + this.client.get_event_arg() + z2ui5_cl_sample_context.cv_char_util_newline + `Id of Input via event.oSource.sId: ` + this.client.get_event_arg(2) + z2ui5_cl_sample_context.cv_char_util_newline + `Value of same row, index: ` + this.client.get_event_arg(3) + z2ui5_cl_sample_context.cv_char_util_newline + `Id of parent (row) via event.oSource.oParent.sId: ` + this.client.get_event_arg(4) + z2ui5_cl_sample_context.cv_char_util_newline + `Attribute of parameters.value: ` + this.client.get_event_arg(5)); } - this.client.view_model_update(); } - render_main_screen() { + view_display() { const view = z2ui5_cl_xml_view.factory(); const page = view.shell() .page({ title: `abap2UI5 - Event on cell level`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) .header_content() .link() .get_parent(); + page.text(`Make an input and press ENTER`); const table = page.flex_box({ height: `85vh` }) .ui_table({ alternaterowcolors: `true`, selectionmode: `None`, visiblerowcountmode: `Auto`, fixedrowcount: `1`, rows: this.client._bind_edit(this.mt_output) }); const columns = table.ui_columns(); @@ -55,118 +49,16 @@ class z2ui5_cl_demo_app_160 extends z2ui5_if_app { .text(`Column 2`) .ui_template() .text(`{MATNR}`); - columns.ui_column({ width: `20rem`, sortproperty: `DESCRIPTION`, filterproperty: `DESCRIPTION` }) - .text(`Column 3`) - .ui_template() - .text(`{DESCRIPTION}`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_TOTAL`, filterproperty: `IS_TOTAL` }) - .text(`Column 4`) - .ui_template() - .text(`{IS_TOTAL}`); columns.ui_column({ width: `5rem`, sortproperty: `PL_TOTAL`, filterproperty: `PL_TOTAL` }) .text(`Column 5`) .ui_template() - .input({ value: `{PL_TOTAL}`, submit: this.client._event(`PL_TOTAL_CHANGE`, [`\${$source>/id}`, `\${INDEX}`, `$event.oSource.oParent.sId`]), editable: true, type: `Number` }); + .input({ value: `{PL_TOTAL}`, submit: this.client._event(`PL_TOTAL_CHANGE`, [`\${$source>/id}`, `$event.oSource.sId`, `\${INDEX}`, `$event.oSource.oParent.sId`, `\${$parameters>/value}`]), editable: true, type: `Number` }); columns.ui_column({ width: `4rem`, sortproperty: `per_cent_total`, filterproperty: `per_cent_total` }) .text(`Column 6`) .ui_template() - .text(`{per_cent_total} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_01_PREV`, filterproperty: `IS_01_PREV` }) - .text(`Column 7`) - .ui_template() - .text(`{IS_01_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_01`, filterproperty: `PL_01` }) - .text(`Column 8`) - .ui_template() - .input({ value: `{PL_01}`, editable: true, type: `Number` }); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_01`, filterproperty: `per_cent_01` }) - .text(`Column 9`) - .ui_template() - .text(`{per_cent_01} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_02_PREV`, filterproperty: `IS_02_PREV` }) - .text(`Column 10`) - .ui_template() - .text(`{IS_02_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_02`, filterproperty: `PL_02` }) - .text(`Column 11`) - .ui_template() - .input({ value: `{PL_02}`, editable: true, type: `Number` }); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_02`, filterproperty: `per_cent_02` }) - .text(`Column 12`) - .ui_template() - .text(`{per_cent_02} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_03_PREV`, filterproperty: `IS_03_PREV` }) - .text(`Column 13`) - .ui_template() - .text(`{IS_03_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_03`, filterproperty: `PL_03` }) - .text(`Column 14`) - .ui_template() - .input({ value: `{PL_03}`, editable: true, type: `Number` }); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_03`, filterproperty: `per_cent_03` }) - .text(`Column 15`) - .ui_template() - .text(`{per_cent_03} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_Q01_PREV`, filterproperty: `IS_Q01_PREV` }) - .text(`Column 16`) - .ui_template() - .text(`{IS_Q01_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_Q01`, filterproperty: `PL_Q01` }) - .text(`Column 17`) - .ui_template() - .text(`{PL_Q01}`); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q01`, filterproperty: `per_cent_q01` }) - .text(`Column 18`) - .ui_template() - .text(`{per_cent_q01} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_Q02_PREV`, filterproperty: `IS_Q02_PREV` }) - .text(`Column 19`) - .ui_template() - .text(`{IS_Q02_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_Q02`, filterproperty: `PL_Q02` }) - .text(`Column 20`) - .ui_template() - .input({ value: `{PL_Q02}`, editable: true, type: `Number` }); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q02`, filterproperty: `per_cent_q02` }) - .text(`Column 21`) - .ui_template() - .text(`{per_cent_q02} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_Q03_PREV`, filterproperty: `IS_Q03_PREV` }) - .text(`Column 22`) - .ui_template() - .text(`{IS_Q03_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_Q03`, filterproperty: `PL_Q03` }) - .text(`Column 23`) - .ui_template() - .input({ value: `{PL_Q03}`, editable: true, type: `Number` }); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q03`, filterproperty: `per_cent_q03` }) - .text(`Column 24`) - .ui_template() - .text(`{per_cent_q03} %`); - columns.ui_column({ width: `5rem`, sortproperty: `IS_Q04_PREV`, filterproperty: `IS_Q04_PREV` }) - .text(`Column 25`) - .ui_template() - .text(`{IS_Q04_PREV}`); - columns.ui_column({ width: `5rem`, sortproperty: `PL_Q04`, filterproperty: `PL_Q04` }) - .text(`Column 26`) - .ui_template() - .input({ value: `{PL_Q04}`, editable: true, type: `Number` }); - columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q04`, filterproperty: `per_cent_q04` }) - .text(`Column 27`) - .ui_template() - .text(`{per_cent_q04} %`); + .text(`{PL_TOTAL} %`); this.client.view_display(view.stringify()); } - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.load_output_table(); - this.render_main_screen(); - } else { - this.on_event(); - } - } } module.exports = z2ui5_cl_demo_app_160; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js index 987ceb6..4cb052b 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js @@ -51,7 +51,7 @@ class z2ui5_cl_demo_app_161 extends z2ui5_if_app { async main(client) { this.client = z2ui5_cl_util.abap_copy(client); - if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) { + if (client.check_on_navigated()) { this.view_display(); return; } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js index 90057f1..e0b7404 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js @@ -26,14 +26,13 @@ class z2ui5_cl_demo_app_167 extends z2ui5_if_app { this.mv_value = `my value`; this.set_view(); } - const lt_arg = client.get().T_EVENT_ARG; switch (client.get().EVENT) { case `EVENT_FIX_VAL`: case `EVENT_MODEL_VALUE`: case `SOURCE_PROPERTY_TEXT`: case `EVENT_PROPERTY_VALUE`: case `PARENT_PROPERTY_ID`: - client.message_box_display(`backend event: ${lt_arg[(1) - 1]}`); + client.message_box_display(`backend event: ${client.get_event_arg()}`); break; } client.view_model_update(); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js new file mode 100644 index 0000000..20c8cc5 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js @@ -0,0 +1,94 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_170 extends z2ui5_if_app { + mv_selected_key = ``; + client = null; + + simple_popup1() { + const popup = z2ui5_cl_xml_view.factory_popup(); + const dialog = popup.dialog({ stretch: true, afterclose: this.client._event(`BTN_OK_1ND`) }).content(); + const content = dialog.icon_tab_bar({ selectedkey: this.client._bind_edit(this.mv_selected_key), select: this.client._event_client(`POPUP_NAV_CONTAINER_TO`, [`NavCon`, `\${$parameters>/selectedKey}`]), headermode: `Inline`, expanded: true, expandable: false }) + .items() + .icon_tab_filter({ key: `page1`, text: `Home` }) + .get_parent() + .icon_tab_filter({ key: `page2`, text: `Applications` }) + .get_parent() + .icon_tab_filter({ key: `page3`, text: `Users and Groups` }) + .items() + .icon_tab_filter({ key: `page11`, text: `User 1` }) + .get_parent() + .icon_tab_filter({ key: `page32`, text: `User 2` }) + .get_parent() + .icon_tab_filter({ key: `page33`, text: `User 3` }) + .get_parent() + .get_parent() + .get_parent() + .get_parent() + .content() + .vbox({ height: `100%` }) + .nav_container({ id: `NavCon`, initialpage: `page1`, defaulttransitionname: `flip`, height: `400px` }) + .pages() + .page({ title: `first page`, id: `page1` }) + .get_parent() + .page({ title: `second page`, id: `page2` }) + .get_parent() + .page({ title: `third page`, id: `page3` }); + dialog.get_parent() + .footer() + .overflow_toolbar() + .toolbar_spacer() + .button({ text: `OK`, press: this.client._event(`BTN_OK_1ND`), type: `Emphasized` }); + this.client.popup_display(popup.stringify()); + } + + simple_popup2() { + const popup = z2ui5_cl_xml_view.factory_popup(); + const dialog = popup.dialog({ afterclose: this.client._event(`BTN_OK_2ND`) }).content(); + const content = dialog.label(`this is a second popup`); + dialog.get_parent() + .footer() + .overflow_toolbar() + .toolbar_spacer() + .button({ text: `GOTO 1ST POPUP`, press: this.client._event(`BTN_OK_2ND`), type: `Emphasized` }); + this.client.popup_display(popup.stringify()); + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + view.shell() + .page({ title: `abap2UI5 - Popup To Popup`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + .button({ text: `Open Popup...`, press: this.client._event(`POPUP`) }); + this.client.view_display(view.stringify()); + } + + on_event() { + switch (this.client.get().EVENT) { + case `GOTO_2ND`: + this.simple_popup2(); + break; + case `BTN_OK_2ND`: + this.client.popup_destroy(); + this.simple_popup1(); + break; + case `BTN_OK_1ND`: + this.client.popup_destroy(); + break; + case `POPUP`: + this.simple_popup1(); + break; + } + } + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) { + this.view_display(); + return; + } + this.on_event(); + } +} + +module.exports = z2ui5_cl_demo_app_170; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js index 9f15400..9de0d96 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js @@ -12,9 +12,9 @@ class z2ui5_cl_demo_app_173 extends z2ui5_if_app { let view = z2ui5_cl_xml_view.factory(); view = view.shell() .page({ id: `page_main`, class: `sapUiContentPadding`, title: `abap2UI5 - Sample Templating I`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - view.table(this.client._bind(this.mt_data)) + view.table(this.client._bind_edit(this.mt_data)) .columns() - .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `L0` }) + .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `L0` }) .column({ mergeduplicates: `{L0>MERGE}`, visible: `{L0>VISIBLE}` }) .text(`{L0>FNAME}`) .get_parent() @@ -23,7 +23,7 @@ class z2ui5_cl_demo_app_173 extends z2ui5_if_app { .items() .column_list_item() .cells() - .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `L1` }) + .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `L1` }) .object_identifier({ text: `{= '{' + \${L1>FNAME} + '}' }` }); view.label(`IF Template (with re-rendering)`); view.switch({ state: this.client._bind_edit(this.mv_flag), change: this.client._event(`CHANGE_FLAG`) }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js deleted file mode 100644 index b2f8a39..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js +++ /dev/null @@ -1,26 +0,0 @@ -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_175 extends z2ui5_if_app { - async main(client) { - this.view_display({ client: client }); - } - - view_display({ client } = {}) { - let lr_view = z2ui5_cl_xml_view.factory(); - lr_view = lr_view.shell() - .page({ id: `page_main`, title: `abap2UI5 - Demo Wizard Control`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - const lr_wizard = lr_view.wizard(); - const lr_wiz_step1 = lr_wizard.wizard_step({ title: `Step1`, validated: true }); - lr_wiz_step1.message_strip(`STEP1`); - const lr_wiz_step2 = lr_wizard.wizard_step({ title: `Step2`, validated: true }); - lr_wiz_step2.message_strip(`STEP2`); - const lr_wiz_step3 = lr_wizard.wizard_step({ title: `Step3`, validated: true }); - lr_wiz_step3.message_strip(`STEP3`); - const lr_wiz_step4 = lr_wizard.wizard_step({ title: `Step4`, validated: true }); - lr_wiz_step4.message_strip(`STEP4`); - client.view_display(lr_view.stringify()); - } -} - -module.exports = z2ui5_cl_demo_app_175; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js index ed4278c..3591241 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js @@ -19,9 +19,9 @@ class z2ui5_cl_demo_app_176 extends z2ui5_if_app { const lo_view_nested = z2ui5_cl_xml_view.factory(); lo_view_nested.shell() .page(`Nested View`) - .table(i_client._bind(this.mt_data)) + .table(i_client._bind_edit(this.mt_data)) .columns() - .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `LO` }) + .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `LO` }) .column({ mergeduplicates: `{LO>MERGE}`, visible: `{LO>VISIBLE}` }) .get_parent() .get_parent() @@ -29,7 +29,7 @@ class z2ui5_cl_demo_app_176 extends z2ui5_if_app { .items() .column_list_item() .cells() - .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `LO2` }) + .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `LO2` }) .object_identifier({ text: `{= '{' + \${LO2>FNAME} + '}' }` }); i_client.nest_view_display({ val: lo_view_nested.stringify(), id: `test`, method_insert: `addContent` }); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js index 7883c99..eaceb55 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js @@ -18,6 +18,8 @@ class z2ui5_cl_demo_app_181 extends z2ui5_if_app { const view = z2ui5_cl_xml_view.factory(); const page = view.shell() .page({ title: `Cards Demo`, class: `sapUiContentPadding`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.Card/sample/sap.f.sample.Card` }); this.mt_cities = [{ text: `Berlin`, key: `BR` }, { text: `London`, key: `LN` }, { text: `Madrid`, key: `MD` }, { text: `Prague`, key: `PR` }, { text: `Paris`, key: `PS` }, { text: `Sofia`, key: `SF` }, { text: `Vienna`, key: `VN` }]; this.mt_products = [{ title: `Notebook HT`, subtitle: `ID23452256-D44`, revenue: `27.25K EUR`, status: `success`, status_schema: `Success` }, { title: `Notebook XT`, subtitle: `ID27852256-D47`, revenue: `7.35K EUR`, status: `exceeded`, status_schema: `Error` }, { title: `Notebook ST`, subtitle: `ID123555587-I05`, revenue: `22.89K EUR`, status: `warning`, status_schema: `Warning` }]; const card_1 = page.card({ width: `300px`, class: `sapUiMediumMargin` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js deleted file mode 100644 index e0e8988..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js +++ /dev/null @@ -1,35 +0,0 @@ -const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context"); -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_187 extends z2ui5_if_app { - async main(client) { - let ls_msg2; - let lv_val; - let ls_msg = null; - if (client.check_on_init()) { - client.view_display(z2ui5_cl_xml_view.factory().shell().page({ title: `abap2UI5 - Popup To Confirm`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }).button({ text: `SY`, press: client._event(`SY`) }).button({ text: `BAPIRET`, press: client._event(`BAPIRET`) }).button({ text: `CX_ROOT`, press: client._event(`CX_ROOT`) }).stringify()); - return; - } - switch (client.get().EVENT) { - case `SY`: - ls_msg2 = z2ui5_cl_sample_context.msg_get_by_msg({ id: `NET`, no: `001` }); - client.message_box_display(ls_msg2); - break; - case `BAPIRET`: - ls_msg = { id: `NET`, number: `001` }; - client.message_box_display(ls_msg); - break; - case `CX_ROOT`: - try { - lv_val = z2ui5_cl_util.abap_div(1, 0); - } catch (lx) { - client.message_box_display(lx); - } - break; - } - } -} - -module.exports = z2ui5_cl_demo_app_187; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js index 9f2aab6..086aa46 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js @@ -12,10 +12,10 @@ class z2ui5_cl_demo_app_189 extends z2ui5_if_app { dispatch() { switch (this.client.get().EVENT) { case `one_enter`: - this.client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdTwo`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdTwo`] }); break; case `two_enter`: - this.client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdThree`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdThree`] }); break; } this.client.view_model_update(); @@ -40,7 +40,7 @@ class z2ui5_cl_demo_app_189 extends z2ui5_if_app { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { this.render(); - client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdOne`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdOne`] }); } this.dispatch(); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js index 20e7364..1bce757 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js @@ -32,10 +32,10 @@ class z2ui5_cl_demo_app_202 extends z2ui5_if_app { } switch (client.get().EVENT) { case `STEP22`: - client.action.gen({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP22`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP22`] }); break; case `STEP23`: - client.action.gen({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP23`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP23`] }); break; } client.view_model_update(); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js index 640869a..9f488d9 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_205 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Flex Box - Basic Alignment`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxBasicAlignment` }); const layout = page.vbox() .panel({ headertext: `Upper left` }) .flex_box({ height: `100px`, alignitems: `Start`, justifycontent: `Start` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js index a93f00a..12ecefa 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_206 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Text - Max Lines`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Text/sample/sap.m.sample.TextMaxLines` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.text(`Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`) .get_parent() diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js index 6e2b4f2..be8cb97 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_207 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Radio Button`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton` }); const layout = page.vbox(`sapUiSmallMargin`) .label({ text: `Default RadioButton use`, labelfor: `GroupA` }) .radio_button_group({ id: `GroupA` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js index 3e1db43..c9afcf7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_208 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Radio Button Group`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup` }); const layout = page.vbox(`sapUiSmallMargin`) .label({ labelfor: `rbg1`, text: `An example with 'matrix' layout` }) .radio_button_group({ id: `rbg1`, columns: `3`, width: `100%`, class: `sapUiMediumMarginBottom` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js index 10b0767..b815550 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_209 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: InfoLabel`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.tnt.InfoLabel/sample/sap.tnt.sample.InfoLabel` }); const layout = page.scroll_container({ vertical: true, height: `100%` }) .flex_box({ direction: `Column`, alignitems: `Start`, class: `sapUiMediumMargin` }) .flex_box({ direction: `Row`, alignitems: `Start`, class: `sapUiTinyMarginBottom` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js index 7e02081..ed2e7a6 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_210 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Input - Types`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Input/sample/sap.m.sample.InputTypes` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.label({ text: `Text`, labelfor: `inputText` }); layout.input({ id: `inputText`, placeholder: `Enter text`, class: `sapUiSmallMarginBottom` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js index b09c0c8..ba6892f 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_213 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Input - Password`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Input/sample/sap.m.sample.InputPassword` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.label({ text: `Password`, labelfor: `passwordInput` }); layout.input({ id: `passwordInput`, type: `Password`, placeholder: `Enter password` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js index 7395ff2..36b359a 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_214 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Standalone Icon Tab Header`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabHeader/sample/sap.m.sample.IconTabHeader` }); const layout = page.icon_tab_header({ mode: `Inline` }) .items() .icon_tab_filter({ key: `info`, text: `Info` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js index ecaae7b..a47d543 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_215 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Busy Indicator`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.BusyIndicator/sample/sap.m.sample.BusyIndicator` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.busy_indicator({ text: `... something is happening`, class: `sapUiTinyMarginBottom` }); layout.hbox({ justifycontent: `Start`, alignitems: `Center` }).busy_indicator({ size: `3em` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js index 2e318bc..3a1e74c 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_216 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Action List Item`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ActionListItem/sample/sap.m.sample.ActionListItem` }); const layout = page.list({ headertext: `Actions` }) .action_list_item({ text: `Reject` }) .get_parent() diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js index 7e7cca8..8bbd5ab 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_217 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Placing a Title in OverflowToolbar/Toolbar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.OverflowToolbar/sample/sap.m.sample.TitleToolBar` }); const layout = page.overflow_toolbar({ design: `Transparent`, height: `3rem` }).title(`Title Only`); page.overflow_toolbar({ design: `Transparent`, height: `3rem` }) .title(`Title and Actions`) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js index 950bbbe..a96b688 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_218 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Flex Box - Opposing Alignment`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxOpposingAlignment` }); const layout = page.panel({ headertext: `Horizontally opposing flex items` }) .flex_box({ alignitems: `Start`, justifycontent: `SpaceBetween` }) .button({ text: `1`, type: `Accept` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js index b1b7292..7d23481 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_219 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Input List Item`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.InputListItem/sample/sap.m.sample.InputListItem` }); const layout = page.list({ headertext: `Input` }) .input_list_item(`WLAN`) .switch({ state: `true` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js index 14a2288..ecbe240 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_220 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Rating Indicator`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RatingIndicator/sample/sap.m.sample.RatingIndicator` }); const layout = page.vertical_layout({ class: `sapUiContentPadding` }); layout.label({ text: `Rating Indicator default size`, labelfor: `RI_default` }); layout.rating_indicator({ id: `RI_default`, maxvalue: `5`, class: `sapUiSmallMarginBottom`, value: `4`, tooltip: `Rating Tooltip` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js index 63304ab..1f3fcae 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_221 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Icons Only`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarMulti` }); const layout = page.icon_tab_bar({ id: `idIconTabBarMulti`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` }) .items() .icon_tab_filter({ icon: `sap-icon://hint`, key: `info` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js index e357888..7752084 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_222 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Text and Count`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarFiori2` }); const layout = page.icon_tab_bar({ id: `idIconTabBarFiori2`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` }) .items() .icon_tab_filter({ text: `Info`, key: `info`, count: `3` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js index 5a4bb70..6cbf5df 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_223 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Inline Mode`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarInlineMode` }); const layout = page.icon_tab_bar({ id: `idIconTabBarInlineMode`, headermode: `Inline`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` }) .items() .icon_tab_filter({ text: `Info`, key: `info`, count: `3` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js index ae46148..f3c786e 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_224 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `Sample: Icon Tab Bar - Text Only`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarNoIcons` }); const layout = page.icon_tab_bar({ id: `idIconTabBarNoIcons`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` }) .items() .icon_tab_filter({ text: `Info`, key: `info` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js index 7119af1..f29fbb8 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_225 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Separator`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabSeparator` }); const layout = page.label({ wrapping: `true`, text: `No icon(='') used as separator, the separator will be a vertical line.`, class: `sapUiSmallMargin` }); layout.icon_tab_bar({ id: `idIconTabBarSeparatorNoIcon`, expanded: `false`, class: `sapUiResponsiveContentPadding` }) .items() diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js index 3f96543..4c10386 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_226 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Sub tabs`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarSubTabs` }); const layout = page.label({ wrapping: `true`, text: `IconTabBar with filters with own content and sub tabs. The click area is split to allow the user to display the content or alternatively to expand/collapse the sub tabs.`, class: `sapUiSmallMargin` }); layout.icon_tab_bar({ class: `sapUiResponsiveContentPadding` }) .items() diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js index 8b4cd3b..aa1c792 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_227 extends z2ui5_if_app { const page_01 = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Page, Toolbar and Bar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page_01.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Page/sample/sap.m.sample.Page` }); const page_02 = page_01.page({ title: `Title`, class: `sapUiContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--subHeader sapUiResponsivePadding--content sapUiResponsivePadding--footer`, shownavbutton: `true` }) .header_content() .button({ icon: `sap-icon://action`, tooltip: `Share` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js index 077ad56..bce83d7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_228 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Numeric Content Without Margins`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NumericContent/sample/sap.m.sample.NumericContentWithoutMargin` }); const layout = page.label(`Numeric content with margins`); layout.numeric_content({ value: `65.5`, scale: `MM`, class: `sapUiSmallMargin`, withmargin: true }); layout.numeric_content({ value: `65.5`, scale: `MM`, valuecolor: `Good`, indicator: `Up`, class: `sapUiSmallMargin`, withmargin: true }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js index d2b7060..ab14f36 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_229 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: ComboBox - Suggestions wrapping`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ComboBox/sample/sap.m.sample.ComboBoxWrapping` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.label({ text: `Product`, labelfor: `wrappingComboBox` }); layout.combobox({ id: `wrappingComboBox` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js index c24304d..bf2b7e3 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_230 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Segmented Button in Input List Item`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.SegmentedButton/sample/sap.m.sample.SegmentedButtonLI` }); const layout = page.list({ headertext: `Input List Item` }) .input_list_item(`Battery Saving`) .segmented_button(`SBYes`) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js deleted file mode 100644 index 3de321b..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js +++ /dev/null @@ -1,80 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_231 extends z2ui5_if_app { - drs1 = {}; - drs2 = {}; - drs3 = {}; - drs4 = {}; - drs5 = {}; - mindate = `20160101`; - maxdate = `20161231`; - text = ``; - - view_display({ client } = {}) { - const view = z2ui5_cl_xml_view.factory(); - view._generic_property({ n: `core:require`, v: `{Helper:'z2ui5/Util'}` }); - const page = view.shell() - .page({ title: `abap2UI5 - Sample: Date Range Selection`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); - page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.DateRangeSelection/sample/sap.m.sample.DateRangeSelection` }); - const vbox = page.vbox(); - vbox.label({ text: `DateRangeSelection displayFormat 'yyyy/MM/dd', set via binding:`, labelfor: `DRS1` }) - .date_range_selection({ id: `DRS1`, displayformat: `yyyy/MM/dd`, change: client._event(`handleChange`, [`DRS2`]), datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs1.start, { name: `drs1-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs1.end, { name: `drs1-end` }) + `) }` }); - vbox.label({ text: `DateRangeSelection with minDate=2016-01-01 and maxDate=2016-12-31:`, labelfor: `DRS2` }) - .date_range_selection({ id: `DRS2`, mindate: `{= Helper.DateCreateObject($` + client._bind(this.mindate) + `) }`, maxdate: `{= Helper.DateCreateObject($` + client._bind(this.maxdate) + `) }`, change: client._event(`handleChange`, [`DRS2`]), datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs2.start, { name: `drs2-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs2.end, { name: `drs2-end` }) + `) }` }); - vbox.label({ text: `DateRangeSelection with OK button in the footer and with shortcut for today:"`, labelfor: `DRS3` }) - .date_range_selection({ id: `DRS3`, showfooter: true, change: client._event(`handleChange`, [`DRS3`]), datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs3.start, { name: `drs3-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs3.end, { name: `drs3-end` }) + `) }` }); - vbox.label({ text: `DateRangeSelection with displayFormat 'MM/yyyy':`, labelfor: `DRS3` }) - .date_range_selection({ id: `DRS4`, change: client._event(`handleChange`, [`DRS4`]), displayformat: `MM/yyyy`, datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs4.start, { name: `drs4-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs4.end, { name: `drs4-end` }) + `) }` }); - vbox.label({ text: `DateRangeSelection with displayFormat 'MM/yyyy':`, labelfor: `DRS3` }) - .date_range_selection({ id: `DRS5`, change: client._event(`handleChange`, [`DRS5`]), displayformat: `yyyy`, datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs5.start, { name: `drs5-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs5.end, { name: `drs5-end` }) + `) }` }); - vbox.label({ text: `Change event`, labelfor: `TextEvent` }); - vbox.text({ id: `TextEvent`, text: client._bind_edit(this.text) }); - client.view_display(page.stringify()); - } - - initialize() { - this.drs1.start = `20140202`; - this.drs1.end = `20140217`; - this.drs2.start = `20160216`; - this.drs2.end = `20160218`; - this.drs3.start = `20140202`; - this.drs3.end = `20140217`; - this.drs4.start = `20190401`; - this.drs4.end = `20191001`; - this.drs5.start = `20150101`; - this.drs5.end = `20191001`; - } - - on_event({ client } = {}) { - let sy_subrc = 0; - let fs_drs = null; - let _fs$fs_drs = null; - let args; - let source; - let drs; - if (client.check_on_event(`handleChange`)) { - args = client.get().T_EVENT_ARG; - source = z2ui5_cl_util.abap_copy(args[(1) - 1]); - // TODO(abap2js): ASSIGN me->(source) TO FIELD-SYMBOL(). - drs = ({ ...fs_drs }); - this.text = `Id: ${source} -` + `From: ${drs.start} -` + `To: ${drs.end}`; - } - } - - async main(client) { - if (client.check_on_init()) { - this.initialize(); - this.view_display({ client: client }); - } else { - client.view_model_update(); - } - this.on_event({ client: client }); - } -} - -module.exports = z2ui5_cl_demo_app_231; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js index 52bd9cb..e981973 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_232 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `Sample: MultiInput - Suggestions wrapping`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MultiInput/sample/sap.m.sample.MultiInputWrapping` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.label({ text: `Product`, labelfor: `wrappingMultiInput` }); layout.multi_input({ id: `wrappingMultiInput`, placeholder: `Enter product`, showsuggestion: true, width: `50%` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js index 2696534..f9a5ca6 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_233 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `Sample: MultiComboBox - Suggestions wrapping`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MultiComboBox/sample/sap.m.sample.MultiComboBoxWrapping` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }); layout.label({ text: `Product`, labelfor: `wrappingMultiComboBox` }); layout.multi_combobox({ id: `wrappingMultiComboBox`, width: `350px` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js index cbf21de..6f6d40d 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_234 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: TextArea - Value States`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TextArea/sample/sap.m.sample.TextAreaValueStates` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) .content(`layout`) .text_area({ valuestate: `Warning`, placeholder: `ValueState : Warning`, width: `100%` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js index 0ef8fa9..afac623 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_235 extends z2ui5_if_app { const page_01 = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Toolbar vs Bar vs OverflowToolbar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page_01.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Toolbar/sample/sap.m.sample.ToolbarVsBar` }); const page_02 = page_01.page({ title: `Bar can center a Title.`, titlelevel: `H2`, class: `sapUiContentPadding`, shownavbutton: true }) .header_content() .button({ icon: `sap-icon://action` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js index ade635d..dca147a 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js @@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_236 extends z2ui5_if_app { const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: TextArea - Growing`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TextArea/sample/sap.m.sample.TextAreaGrowing` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) .content(`layout`) .message_strip({ showicon: true, text: `This TextArea shows up to 7 lines, then a scrollbar is presented.` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js index 18eb766..596bf3d 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js @@ -12,6 +12,8 @@ class z2ui5_cl_demo_app_237 extends z2ui5_if_app { .header_content() .button({ id: `hint_icon`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`POPOVER`) }) .get_parent(); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Slider/sample/sap.m.sample.Slider` }); const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) .text({ text: `Slider without text field`, class: `sapUiSmallMarginBottom` }) .slider({ value: `30`, width: `90%`, class: `sapUiSmallMarginBottom` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js index 08ae864..9746765 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js @@ -14,6 +14,7 @@ class z2ui5_cl_demo_app_239 extends z2ui5_if_app { page.header_content() .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox` }); const layout = page.vbox() + .checkbox() .checkbox({ text: `Option a`, selected: true }) .checkbox({ text: `Option b` }) .checkbox({ text: `Option c`, selected: true }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js index 6369cb3..c820a45 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js @@ -14,7 +14,7 @@ class z2ui5_cl_demo_app_241 extends z2ui5_if_app { page.header_content() .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TileContent/sample/sap.m.sample.TileContent` }); const layout = page.grid({ containerquery: true, class: `sapUiSmallMarginTop` }) - .tile_content({ footer: `Current Quarter`, unit: `EUR` }) + .tile_content({ footer: `Current Quarter`, unit: `EUR`, class: `sapUiSmallMargin` }) .numeric_content({ scale: `M`, value: `1.96`, valuecolor: `Error`, indicator: `Up` }) .get_parent() .get_parent() diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js new file mode 100644 index 0000000..d7d51a1 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js @@ -0,0 +1,44 @@ +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_243 extends z2ui5_if_app { + view_display({ client } = {}) { + const page = z2ui5_cl_xml_view.factory() + .shell() + .page({ title: `abap2UI5 - Sample: Negative Margins`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }) + .page({ showheader: `false`, class: `sapUiContentPadding` }) + .sub_header() + .toolbar({ design: `Info` }) + .icon({ src: `sap-icon://begin` }) + .text(`This sample demonstrates classes which let you to add negative margin at two opposite sides (begin/end).`) + .get_parent() + .get_parent(); + const layout = page.panel({ class: `sapUiTinyNegativeMarginBeginEnd` }) + .content() + .text({ text: `This panel uses margin class 'sapUiTinyNegativeMarginBeginEnd' to add a -0.5rem space at the panel's left and right sides.`, class: `sapMH4FontSize` }) + .get_parent() + .get_parent() + .panel({ class: `sapUiSmallNegativeMarginBeginEnd` }) + .content() + .text({ text: `This panel uses margin class 'sapUiSmallNegativeMarginBeginEnd' to add a -1rem space at the panel's left and right sides.`, class: `sapMH4FontSize` }) + .get_parent() + .get_parent() + .panel({ class: `sapUiMediumNegativeMarginBeginEnd` }) + .content() + .text({ text: `This panel uses margin class 'sapUiMediumNegativeMarginBeginEnd' to add a -2rem space at the panel's left and right sides.`, class: `sapMH4FontSize` }) + .get_parent() + .get_parent() + .panel({ class: `sapUiLargeNegativeMarginBeginEnd` }) + .content() + .text({ text: `This panel uses margin class 'sapUiLargeNegativeMarginBeginEnd' to add a -3rem space at the panel's left and right sides.`, class: `sapMH4FontSize` }); + client.view_display(page.stringify()); + } + + async main(client) { + if (client.check_on_init()) { + this.view_display({ client: client }); + } + } +} + +module.exports = z2ui5_cl_demo_app_243; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js index f255cd4..4c3524d 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js @@ -28,7 +28,7 @@ class z2ui5_cl_demo_app_250 extends z2ui5_if_app { .button({ text: `Centered content`, type: `Accept` }) .toolbar_spacer() .get_parent() - .message_strip({ text: `Right aligned content.`, class: `sapUiTinyMargin` }) + .message_strip({ text: `Right Aligned Content.`, class: `sapUiTinyMargin` }) .overflow_toolbar({ class: `sapUiMediumMarginTop` }) .toolbar_spacer() .button({ text: `Right aligned content`, type: `Accept` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js new file mode 100644 index 0000000..e6775e6 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js @@ -0,0 +1,126 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_258 extends z2ui5_if_app { + selected_menu_entry = ``; + client = null; + + on_event({ client } = {}) { + switch (client.get().EVENT) { + case `MENU_HOME`: + client.message_toast_display(`Home Button pressed`); + this.selected_menu_entry = `Home`; + break; + case `MENU_HOME_1`: + client.message_toast_display(`Home Sub 1 Button pressed`); + this.selected_menu_entry = `Home1`; + break; + case `MENU_HOME_2`: + client.message_toast_display(`Home Sub 2 Button pressed`); + this.selected_menu_entry = `Home2`; + break; + case `MENU_HOME_3`: + client.message_toast_display(`Home Sub 3 Button pressed`); + this.selected_menu_entry = `Home3`; + break; + case `MENU_CUSTOMER`: + client.message_toast_display(`Customer Button pressed`); + this.selected_menu_entry = `Customers`; + break; + case `MENU_SUPPLIER`: + client.message_toast_display(`Supplier Button pressed`); + this.selected_menu_entry = `Suppliers`; + break; + case `MENU_FIX1`: + client.message_toast_display(`Fixed Button 1 pressed`); + this.selected_menu_entry = `Fix1`; + break; + case `MENU_FIX2`: + client.message_toast_display(`Fixed Button 2 pressed`); + this.selected_menu_entry = `Fix2`; + break; + case `MENU_FIX3`: + client.message_toast_display(`Fixed Button 3 pressed`); + this.selected_menu_entry = `Fix3`; + break; + } + } + + render_main_view({ client } = {}) { + const view = z2ui5_cl_xml_view.factory(); + view._generic({ ns: `html`, name: `style` }) + ._cc_plain_xml(`.sapMPage>section { height: 100% }` + `#mainView--site_content { border-radius: 0.75em }`); + const page = view.page({ title: `abap2UI5 - Sample: Side Navigation`, navbuttonpress: client._event_nav_app_leave(), enablescrolling: false, class: `sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer`, shownavbutton: client.check_app_prev_stack() }); + const content = page.flex_box({ width: `100%`, height: `90%`, alignitems: `Start` }); + const navlist = content.flex_box({ width: `100%`, height: `100%`, direction: `Column` }) + .layout_data() + .flex_item_data({ growfactor: `1`, basesize: `0` }) + .get_parent() + .side_navigation({ id: `sideNavigation`, class: `sapUiTinyMarginTop`, selectedkey: client._bind(this.selected_menu_entry) }) + .navigation_list(); + navlist.navigation_list_item({ text: `Home`, icon: `sap-icon://home`, select: client._event(`MENU_HOME`), key: `Home` }) + .get_child() + .navigation_list_item({ text: `Home Sub 1`, select: client._event(`MENU_HOME_1`), key: `Home1` }) + .navigation_list_item({ text: `Home Sub 2`, select: client._event(`MENU_HOME_2`), key: `Home2` }) + .navigation_list_item({ text: `Home Sub 3`, select: client._event(`MENU_HOME_3`), key: `Home3` }); + navlist.navigation_list_item({ text: `Customers`, icon: `sap-icon://customer`, select: client._event(`MENU_CUSTOMER`), key: `Customers` }); + navlist.navigation_list_item({ text: `Suppliers`, icon: `sap-icon://supplier`, select: client._event(`MENU_SUPPLIER`), key: `Suppliers` }); + navlist.get_parent() + .fixed_item() + .navigation_list() + .navigation_list_item({ text: `Fixed Entry 1`, icon: `sap-icon://heart`, select: client._event(`MENU_FIX1`), key: `Fix1` }) + .navigation_list_item({ text: `Fixed Entry 2`, icon: `sap-icon://flight`, select: client._event(`MENU_FIX2`), key: `Fix2` }) + .navigation_list_item({ text: `Fixed Entry 3`, icon: `sap-icon://email-read`, select: client._event(`MENU_FIX3`), key: `Fix3` }) + .navigation_list_item({ text: `Link`, icon: `sap-icon://chain-link`, href: `https://github.com/abap2UI5/abap2UI5` }); + const site_content = content.flex_box({ id: `site_content`, class: `sapUiTinyMarginTop sapUiTinyMarginBegin`, width: `100%`, height: `100%`, backgrounddesign: `Solid`, alignitems: `Center`, justifycontent: `Center` }) + .layout_data() + .flex_item_data({ growfactor: `4`, backgrounddesign: `Solid` }) + .get_parent(); + this.render_site_content({ client: { client, site_content } }); + client.view_display(page.stringify()); + } + + render_site_content({ client, site_content } = {}) { + switch (this.selected_menu_entry) { + case `Home`: + site_content.text(`Welcome to the Home Page`); + break; + case `Home1`: + site_content.text(`Welcome to the Home Sub Page 1`); + break; + case `Home2`: + site_content.text(`Welcome to the Home Sub Page 2`); + break; + case `Home3`: + site_content.text(`Welcome to the Home Sub Page 3`); + break; + case `Customers`: + site_content.text(`Welcome to the Customers Page`); + break; + case `Suppliers`: + site_content.text(`Welcome to the Suppliers Page`); + break; + case `Fix1`: + site_content.text(`Welcome to the first fixed Page`); + break; + case `Fix2`: + site_content.text(`Welcome to the second fixed Page`); + break; + case `Fix3`: + site_content.text(`Welcome to the third fixed Page`); + break; + } + } + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.selected_menu_entry = `Home`; + } + this.on_event({ client: client }); + this.render_main_view({ client: client }); + } +} + +module.exports = z2ui5_cl_demo_app_258; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js index 1b8f002..138d93b 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js @@ -91,7 +91,7 @@ class z2ui5_cl_demo_app_259 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPress`: - client.message_toast_display(`${client.get_event_arg(1)} Pressed`); + client.message_toast_display(`${client.get_event_arg()} Pressed`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js index 60ccbe4..ba98dff 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js @@ -12,7 +12,7 @@ class z2ui5_cl_demo_app_261 extends z2ui5_if_app { page.header_content() .button({ id: `hint_icon`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`POPOVER`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/#/entity/sap.m.NewsContent/sample/sap.m.sample.NewsContent` }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NewsContent/sample/sap.m.sample.NewsContent` }); page.tile_content({ class: `sapUiSmallMargin` }) .content() .news_content({ contenttext: `SAP Unveils Powerful New Player Comparison Tool Exclusively on NFL.com`, subheader: `August 21, 2013`, press: client._event(`NEWS_CONTENT_PRESS`) }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js index f8b65d0..432710c 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js @@ -46,7 +46,7 @@ class z2ui5_cl_demo_app_264 extends z2ui5_if_app { sy_tabix = 0; for (const fs_fs_a_data of this.lt_a_data) { sy_tabix++; - fs_fs_a_data.label = this.s_text + ` ` + fs_fs_a_data.value_state; + fs_fs_a_data.label = this.s_text + fs_fs_a_data.value_state; } } this.on_event({ client: client }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js index d16a82e..70649ea 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js @@ -12,7 +12,7 @@ class z2ui5_cl_demo_app_265 extends z2ui5_if_app { page.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk#/entity/sap.ui.codeeditor.CodeEditor/sample/sap.ui.codeeditor.sample.CodeEditor` }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.ui.codeeditor.CodeEditor/sample/sap.ui.codeeditor.sample.CodeEditor` }); page.code_editor({ type: `json`, value: `\\{ ` + ` "Chinese" : "你好世界", ` + ` "Dutch" : "Hallo wereld", ` + ` "English" : "Hello world", ` + ` "French" : "Bonjour monde", ` + ` "German" : "Hallo Welt", ` + ` "Greek" : "γειά σου κόσμος", ` + ` "Italian" : "Ciao mondo", ` + ` "Japanese" : "こんにちは世界", ` + ` "Korean" : "여보세요 세계", ` + ` "Portuguese" : "Olá mundo", ` + ` "Russian" : "Здравствуй мир", ` + ` "Spanish" : "Hola mundo" ` + `}`, height: `300px` }); client.view_display(page.stringify()); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js index 5d56b0f..af9eccb 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js @@ -12,7 +12,7 @@ class z2ui5_cl_demo_app_266 extends z2ui5_if_app { page_01.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) }); page_01.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/#/entity/sap.m.ToggleButton/sample/sap.m.sample.ToggleButton` }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ToggleButton/sample/sap.m.sample.ToggleButton` }); const page_02 = page_01.page({ title: `Page`, class: `sapUiContentPadding` }) .custom_header() .bar() @@ -73,7 +73,7 @@ class z2ui5_cl_demo_app_266 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPress`: - if (client.get_event_arg(1) === `X`) { + if (client.get_event_arg() === `X`) { client.message_toast_display(`${client.get_event_arg(2)} Pressed`); } else { client.message_toast_display(`${client.get_event_arg(2)} Unpressed`); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js index c8d0d29..0028bcf 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js @@ -20,7 +20,7 @@ class z2ui5_cl_demo_app_272 extends z2ui5_if_app { page.header_content(`uxap`) .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) }); page.header_content(`uxap`) - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: base_url + `sdk/#/api/sap.uxap.ObjectPageHeader` }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: base_url + `sdk/#/entity/sap.m.ObjectHeader/sample/sap.m.sample.ObjectHeaderCircleImage` }); client.view_display(view.stringify()); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js index 2bf4a14..cd27ec3 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js @@ -6,7 +6,6 @@ class z2ui5_cl_demo_app_276 extends z2ui5_if_app { client = null; view_display({ client } = {}) { - const css = `.tileLayout {` + ` float: left;` + `}`; const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Monitor Tile`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); @@ -14,13 +13,14 @@ class z2ui5_cl_demo_app_276 extends z2ui5_if_app { .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) }); page.header_content() .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.GenericTile/sample/sap.m.sample.GenericTileAsMonitorTile` }); - page.generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) }) + page.hbox({ alignitems: `Start` }) + .generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) }) .tile_content({ unit: `Unit`, footer: `Footer Text` }) .numeric_content({ value: `1762`, icon: `sap-icon://line-charts`, withmargin: false }) .get_parent() .get_parent() .get_parent() - .generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) }) + .generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) }) .tile_content({ unit: `Unit`, footer: `Footer Text` }) .numeric_content({ value: `12`, withmargin: false }); client.view_display(page.stringify()); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js index 01f3009..b17e61d 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js @@ -19,7 +19,7 @@ class z2ui5_cl_demo_app_279 extends z2ui5_if_app { box.button({ text: `Reset`, press: this.client._event(`reset`), class: `sapUiSmallMarginBegin`, visible: this.client._bind(this.dirty) }); page._z2ui5().dirty(this.client._bind(this.dirty)); this.client.view_display(page.stringify()); - this.client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`input`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`input`] }); } on_event() { diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js index 799b858..d1e6185 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js @@ -90,7 +90,7 @@ class z2ui5_cl_demo_app_282 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPress`: - client.message_toast_display(`${client.get_event_arg(1)} Pressed`); + client.message_toast_display(`${client.get_event_arg()} Pressed`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js index ee9b3ed..168a1ab 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js @@ -37,7 +37,7 @@ class z2ui5_cl_demo_app_283 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPost`: - client.message_toast_display(`Posted new feed entry: ${client.get_event_arg(1)}`); + client.message_toast_display(`Posted new feed entry: ${client.get_event_arg()}`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js index 7094a44..80f7238 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js @@ -4,6 +4,7 @@ const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_287 extends z2ui5_if_app { lt_o_model = []; + wrapping = false; client = null; view_display({ client } = {}) { @@ -14,9 +15,16 @@ class z2ui5_cl_demo_app_287 extends z2ui5_if_app { .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) }); page.header_content() .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.StandardListItem/sample/sap.m.sample.StandardListItemWrapping` }); - page.list({ id: `myList`, mode: `MultiSelect`, headertext: `Wrapping texts`, items: client._bind(this.lt_o_model) }) + page.list({ id: `myList`, mode: `MultiSelect`, items: client._bind(this.lt_o_model) }) + .header_toolbar() + .toolbar() + .title(`Wrapping texts`) + .toolbar_spacer() + .toggle_button({ text: `Toggle Wrapping`, pressed: client._bind_edit(this.wrapping) }) + .get_parent() + .get_parent() .items() - .standard_list_item({ title: `{TITLE}`, description: `{DESC}`, icon: `{ICON}`, iconinset: false, highlight: `{HIGHLIGHT}`, info: `{INFO}`, infostate: `{HIGHLIGHT}`, type: `Detail`, wrapping: true, wrapcharlimit: `{WRAPCHARLIMIT}` }); + .standard_list_item({ title: `{TITLE}`, description: `{DESC}`, icon: `{ICON}`, iconinset: false, highlight: `{HIGHLIGHT}`, info: `{INFO}`, infostate: `{HIGHLIGHT}`, type: `Detail`, wrapping: client._bind_edit(this.wrapping), wrapcharlimit: `{WRAPCHARLIMIT}` }); client.view_display(page.stringify()); } @@ -37,7 +45,7 @@ class z2ui5_cl_demo_app_287 extends z2ui5_if_app { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { this.view_display({ client: client }); - this.lt_o_model = [{ title: `wrapCharLimit is set to Default. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, icon: `sap-icon://favorite`, highlight: `Success`, info: `Completed` }, { title: `wrapCharLimit is set to 100. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, icon: `sap-icon://employee`, highlight: `Error`, info: `Incomplete`, wrapcharlimit: 100 }, { title: `Title text`, desc: `Description text`, icon: `sap-icon://accept`, highlight: `Information`, info: `Information`, wrapcharlimit: 10 }]; + this.lt_o_model = [{ title: `Short title`, icon: `sap-icon://favorite`, highlight: `Success`, info: `Available` }, { title: `Short title with long info text`, icon: `sap-icon://employee`, highlight: `Error`, info: `This is a very long information status text that demonstrates truncation and wrapping behavior` }, { title: `wrapCharLimit is set to Default. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, icon: `sap-icon://favorite`, highlight: `Success`, info: `Completed` }, { title: `wrapCharLimit is set to 100. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, icon: `sap-icon://employee`, highlight: `Error`, info: `Incomplete`, wrapcharlimit: 100 }, { title: `Title text`, desc: `Description text`, icon: `sap-icon://accept`, highlight: `Information`, info: `Information`, wrapcharlimit: 10 }]; } this.on_event({ client: client }); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js index cecf87e..c4f6d30 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js @@ -41,7 +41,7 @@ class z2ui5_cl_demo_app_289 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPress`: - client.message_toast_display(`${client.get_event_arg(1)} marker pressed!`); + client.message_toast_display(`${client.get_event_arg()} marker pressed!`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js index c893683..1a4903e 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js @@ -79,7 +79,7 @@ class z2ui5_cl_demo_app_290 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onListItemPress`: - client.message_toast_display(`Pressed: ${client.get_event_arg(1)}`); + client.message_toast_display(`Pressed: ${client.get_event_arg()}`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js index 77defd8..0de58c0 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js @@ -15,25 +15,13 @@ class z2ui5_cl_demo_app_292 extends z2ui5_if_app { .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Breadcrumbs/sample/sap.m.sample.BreadcrumbsWithCurrentPageLink` }); page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) .title(`Breadcrumbs with current page aggregation set`) - .breadcrumbs({ id: `idBreadcrumbs`, separatorstyle: `{/selected}`, currentlocationtext: `Page 7` }) + .breadcrumbs({ id: `idBreadcrumbs`, currentlocationtext: `Page 6` }) .link({ text: `Home`, press: client._event(`onPress`, [`\${$source>/text}`]) }) .link({ text: `Page 1`, press: client._event(`onPress`, [`\${$source>/text}`]) }) .link({ text: `Page 2`, press: client._event(`onPress`, [`\${$source>/text}`]) }) .link({ text: `Page 3`, press: client._event(`onPress`, [`\${$source>/text}`]) }) .link({ text: `Page 4`, press: client._event(`onPress`, [`\${$source>/text}`]) }) - .link({ text: `Page 5`, press: client._event(`onPress`, [`\${$source>/text}`]) }) - .link({ text: `Page 6`, press: client._event(`onPress`, [`\${$source>/text}`]) }) - .get_parent() - .get_parent(); - page.hbox({ alignitems: `Center` }) - .label({ labelfor: `idSeparatorSelect`, text: `Change separator style` }) - .select({ class: `sapUiSmallMarginBegin`, id: `idSeparatorSelect`, selectedkey: `{/selected}`, change: `onChange` }) - .item({ key: `Slash`, text: `Slash` }) - .item({ key: `BackSlash`, text: `BackSlash` }) - .item({ key: `DoubleSlash`, text: `DoubleSlash` }) - .item({ key: `DoubleBackSlash`, text: `DoubleBackSlash` }) - .item({ key: `GreaterThan`, text: `GreaterThan` }) - .item({ key: `DoubleGreaterThan`, text: `DoubleGreaterThan` }); + .link({ text: `Page 5`, press: client._event(`onPress`, [`\${$source>/text}`]) }); client.view_display(page.stringify()); } @@ -43,7 +31,7 @@ class z2ui5_cl_demo_app_292 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPress`: - client.message_toast_display(`${client.get_event_arg(1)} has been clicked`); + client.message_toast_display(`${client.get_event_arg()} has been clicked`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js index 66ba167..2a758ea 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js @@ -17,7 +17,7 @@ class z2ui5_cl_demo_app_294 extends z2ui5_if_app { .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.DatePicker/sample/sap.m.sample.DatePickerValueState` }); page.flex_box({ items: client._bind(this.lt_a_data), direction: `Column` }) .vbox(`sapUiTinyMargin`) - .label({ text: `{LABEL}`, labelfor: `SI` }) + .label({ text: `{LABEL}`, labelfor: `DP` }) .date_picker({ id: `DP`, width: `100%`, valuestate: `{VALUE_STATE}`, valuestatetext: `{VALUE_STATE_TEXT}` }) .get_parent() .get_parent(); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js index 19991d6..d37dabd 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js @@ -17,7 +17,7 @@ class z2ui5_cl_demo_app_295 extends z2ui5_if_app { page.flex_box({ items: client._bind(this.t_data), direction: `Column` }) .vbox(`sapUiTinyMargin`) .label(`{LABEL}`) - .date_range_selection({ width: `100%`, valuestate: `{VALUE_STATE}`, valuestatetext: `{VALUE_STATE_TEXT}` }) + .date_range_selection({ width: `100%`, delimiter: `–`, valuestate: `{VALUE_STATE}`, valuestatetext: `{VALUE_STATE_TEXT}` }) .get_parent() .get_parent(); client.view_display(page.stringify()); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js index 7a93b63..f7aa5e6 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js @@ -16,7 +16,7 @@ class z2ui5_cl_demo_app_296 extends z2ui5_if_app { page_01.page({ showheader: false }) .sub_header() .toolbar() - .search_field({ width: `100%`, search: client._event(`onSearch`) }) + .search_field({ width: `100%`, search: client._event(`onSearch`, [`\${$parameters>/searchButtonPressed}`]) }) .text({ text: `Default Search`, id: `idSearchListToolbar` }) .get_parent() .get_parent() @@ -33,7 +33,9 @@ class z2ui5_cl_demo_app_296 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onSearch`: - client.message_toast_display(`'search' event fired with 'searchButtonPressed' parameter`); + if (client.get_event_arg() === `true`) { + client.message_toast_display(`'search' event fired with 'searchButtonPressed' parameter`); + } break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js index 974d835..1dd9660 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js @@ -14,7 +14,7 @@ class z2ui5_cl_demo_app_300 extends z2ui5_if_app { page_01.header_content() .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ObjectStatus/sample/sap.m.sample.ObjectStatus` }); page_01.vertical_layout({ width: `100%` }) - .block_layout({ background: `transparent` }) + .block_layout() .block_layout_row() .block_layout_cell() .vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) @@ -57,7 +57,7 @@ class z2ui5_cl_demo_app_300 extends z2ui5_if_app { .get_parent() .get_parent(); page_01.vertical_layout({ class: `sapUiContentPadding`, width: `100%` }) - .block_layout({ background: `transparent` }) + .block_layout() .block_layout_row() .block_layout_cell() .label({ text: `ObjectStatus with different indication states.`, design: `Bold`, wrapping: true, class: `sapUiSmallMarginBottom` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js index 37d02c7..278fd74 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js @@ -41,7 +41,7 @@ class z2ui5_cl_demo_app_302 extends z2ui5_if_app { this.popover_display({ id: `button_hint_id` }); break; case `onPress`: - client.message_toast_display(`${client.get_event_arg(1)} marker pressed!`); + client.message_toast_display(`${client.get_event_arg()} marker pressed!`); break; } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js index b3f3a01..9762131 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js @@ -6,6 +6,9 @@ class z2ui5_cl_demo_app_303 extends z2ui5_if_app { const view = z2ui5_cl_xml_view.factory(); const object_page_layout = view.shell() .page({ title: `Object Page Header with Header Container`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }) + .header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageWithHeaderContainer` }) + .get_parent() .object_page_layout({ showtitleinheadercontent: `Title`, uppercaseanchorbar: false }); const header_title = object_page_layout.header_title().object_page_dyn_header_title(); header_title.expanded_heading().title({ text: `Object Page Header with Header Container`, wrapping: true }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js index 1db0ef0..2dbd436 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js @@ -24,6 +24,8 @@ class z2ui5_cl_demo_app_307 extends z2ui5_if_app { const view = z2ui5_cl_xml_view.factory(); const page = view.shell() .page({ title: `Grid List with Drag and Drop`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.GridList/sample/sap.f.sample.GridListDragAndDrop` }); page.panel({ id: `panelForGridList`, backgrounddesign: `Transparent` }) .header_toolbar() .toolbar({ height: `3rem` }) @@ -47,7 +49,7 @@ class z2ui5_cl_demo_app_307 extends z2ui5_if_app { .title({ text: `{TITLE}`, wrapping: true }) .label({ text: `{SUBTITLE}`, wrapping: true }); client.view_display(view.stringify()); - client.action.gen({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`Grid List with Drag and Drop`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`Grid List with Drag and Drop`] }); } on_event({ client } = {}) { diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js index e50d009..4b8ecab 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js @@ -38,7 +38,7 @@ class z2ui5_cl_demo_app_316 extends z2ui5_if_app { url_form.input({ id: `inputUrl`, value: client._bind_edit(this.url.url, { name: `url-url` }), type: `Url`, placeholder: `Enter URL`, class: `sapUiSmallMarginBottom` }); url_form.button({ text: `Redirect`, press: client._event_client(client.cs_event.urlhelper, [`REDIRECT`, `$${client._bind_edit(this.url)}`]) }); client.view_display(page.stringify()); - client.action.gen({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`URL Helper Sample`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`URL Helper Sample`] }); } async main(client) { diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js index 54f699b..602c9cb 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js @@ -42,11 +42,11 @@ class z2ui5_cl_demo_app_325 extends z2ui5_if_app { } switch (client.get().EVENT) { case `COPY_INPUT`: - client.action.gen({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.input] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.input] }); client.message_toast_display(`input field copied: ${this.input}`); break; case `COPY_TEXT_AREA`: - client.action.gen({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.text] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.text] }); client.message_toast_display(`text area copied: ${this.text}`); break; } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js index de31c0d..8476871 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js @@ -9,6 +9,9 @@ class z2ui5_cl_demo_app_330 extends z2ui5_if_app { const view = z2ui5_cl_xml_view.factory(); const object_page_layout = view.shell() .page({ title: `Robot Arm Series 9`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }) + .header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageSectionShowTitle` }) + .get_parent() .object_page_layout({ uppercaseanchorbar: false }); const header_title = object_page_layout.header_title().object_page_dyn_header_title(); header_title.expanded_heading().title(`Robot Arm Series 9`); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js index 881cd15..a331c44 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js @@ -11,8 +11,8 @@ class z2ui5_cl_demo_app_352 extends z2ui5_if_app { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { this.view_display(); - client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`ZINPUT`] }); - client.action.gen({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `numeric`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`ZINPUT`] }); + client.follow_up_action({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `numeric`] }); } this.on_event(); } @@ -31,7 +31,7 @@ class z2ui5_cl_demo_app_352 extends z2ui5_if_app { on_event() { if (this.client.check_on_event(`CALL_KEYBOARD`)) { - this.client.action.gen({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `none`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `none`] }); } } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js new file mode 100644 index 0000000..a7cacab --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js @@ -0,0 +1,25 @@ +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_361 extends z2ui5_if_app { + async main(client) { + let view; + let page; + if (client.check_on_init()) { + view = z2ui5_cl_xml_view.factory(); + page = view.shell() + .page({ title: `abap2UI5 - System Logout`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }); + page.message_strip({ text: `Trigger SYSTEM_LOGOUT on the client. Inside a Fiori Launchpad the shell container handles the sign-out; otherwise the app navigates to the ICF logoff endpoint.`, type: `Information`, showicon: true, class: `sapUiMediumMargin` }) + .button({ text: `Logout now`, icon: `sap-icon://log`, type: `Reject`, class: `sapUiSmallMargin`, press: client._event_client(client.cs_event.system_logout) }); + page.message_strip({ text: `Trigger SYSTEM_LOGOUT on the client and a redirect to google.com`, type: `Information`, showicon: true, class: `sapUiMediumMargin` }) + .button({ text: `Logout now`, icon: `sap-icon://log`, type: `Reject`, class: `sapUiSmallMargin`, press: client._event_client(client.cs_event.system_logout, [`/sap/public/bc/icf/logoff?redirecturl=www.google.com`]) }); + page.message_strip({ text: `Trigger Event LOGOUT which is handled in the APP.`, type: `Information`, showicon: true, class: `sapUiMediumMargin` }) + .button({ text: `Logout now`, icon: `sap-icon://log`, type: `Reject`, class: `sapUiSmallMargin`, press: client._event(`LOGOUT`) }); + client.view_display(view.stringify()); + } else if (client.check_on_event(`LOGOUT`)) { + client.follow_up_action(client.cs_event.system_logout); + } + } +} + +module.exports = z2ui5_cl_demo_app_361; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js index 56a1352..0145441 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js @@ -26,16 +26,16 @@ class z2ui5_cl_demo_app_362 extends z2ui5_if_app { on_event() { switch (this.client.get().EVENT) { case `SCROLL_TOP`: - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `0`, `0`, `smooth`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `0`, `0`, `smooth`] }); break; case `SCROLL_MIDDLE`: - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`, `smooth`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`, `smooth`] }); break; case `SCROLL_BOTTOM`: - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `99999`, `0`, `smooth`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `99999`, `0`, `smooth`] }); break; case `SCROLL_JUMP`: - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`] }); break; case `REFRESH`: this.restore_scroll(); @@ -49,7 +49,7 @@ class z2ui5_cl_demo_app_362 extends z2ui5_if_app { if (!scroll.ID) { return; } - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [scroll.ID, `${scroll.Y}`, `${scroll.X}`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [scroll.ID, `${scroll.Y}`, `${scroll.X}`] }); } view_display() { diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js index 5798414..fd68015 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js @@ -47,7 +47,7 @@ class z2ui5_cl_demo_app_363 extends z2ui5_if_app { return; break; } - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_into_view, t_arg: [target, behavior, block] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_into_view, t_arg: [target, behavior, block] }); } view_display() { diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js deleted file mode 100644 index 7fc4607..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js +++ /dev/null @@ -1,63 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_364 extends z2ui5_if_app { - t_tree = []; - client = null; - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.on_init(); - } else if (client.check_on_event()) { - this.on_event(); - } - } - - on_init() { - this.t_tree = [{ user: `Manager`, enabled: false, nodes: [{ user: `Employee 1`, enabled: true }, { user: `Employee 2`, enabled: true }, { user: `Employee 3`, enabled: true }] }]; - this.view_display(); - } - - on_event() { - let sy_tabix = 0; - let counter; - switch (this.client.get().EVENT) { - case `BUTTON_SAVE`: - counter = 0; - sy_tabix = 0; - for (const s_tree of this.t_tree) { - sy_tabix++; - const _sy_tabix_1 = sy_tabix; - sy_tabix = 0; - for (const s_node of s_tree.nodes) { - sy_tabix++; - if (!((s_node.validated === true || s_node.validated === `X`))) continue; - counter = counter + 1; - } - sy_tabix = _sy_tabix_1; - } - this.client.message_toast_display(`Saved ${counter} checkbox(es)`); - break; - } - } - - view_display() { - const view = z2ui5_cl_xml_view.factory(); - const page = view.shell() - .page({ title: `Account Validation`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.overflow_toolbar() - .content() - .button({ icon: `sap-icon://save`, text: `Save`, press: this.client._event(`BUTTON_SAVE`) }); - const columns = page.tree_table({ id: `treeTable`, rows: `{path:'` + this.client._bind_edit(this.t_tree, { path: true }) + `', parameters: {arrayNames:['NODES'], numberOfExpandedLevels: 1}}`, selectionmode: `None` }) - .tree_columns(); - columns.tree_column(`User`).tree_template().text(`{USER}`); - columns.tree_column(`Validated`) - .tree_template() - .checkbox({ selected: `{VALIDATED}`, enabled: `{ENABLED}`, valuestate: `Success` }); - this.client.view_display(view.stringify()); - } -} - -module.exports = z2ui5_cl_demo_app_364; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js index 92e1752..52c1464 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js @@ -28,7 +28,7 @@ class z2ui5_cl_demo_app_368 extends z2ui5_if_app { page.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar` }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBar` }); const items = page.icon_tab_bar({ class: `sapUiResponsiveContentPadding`, selectedkey: this.client._bind_edit(this.selectedkey), select: this.client._event(`TAB_SELECT`) }) .items(); items.icon_tab_filter({ count: this.client._bind(this.cnt_total), text: `Products`, key: `ALL`, showall: true }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js deleted file mode 100644 index 3d48cec..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js +++ /dev/null @@ -1,58 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_370 extends z2ui5_if_app { - t_products = []; - client = null; - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.t_products = [{ productid: `1`, productname: `table`, suppliername: `Company 1` }, { productid: `2`, productname: `chair`, suppliername: `Company 2` }, { productid: `3`, productname: `sofa`, suppliername: `Company 3` }, { productid: `4`, productname: `computer`, suppliername: `Company 4` }, { productid: `5`, productname: `printer`, suppliername: `Company 5` }, { productid: `6`, productname: `table2`, suppliername: `Company 6` }]; - this.view_display(); - } else { - this.on_event(); - } - } - - view_display() { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Sample: Object Identifier inside a Table`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.header_content() - .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); - page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ObjectIdentifier` }); - page.table(this.client._bind(this.t_products)) - .columns() - .column() - .text(`Product`) - .get_parent() - .column() - .text(`Supplier`) - .get_parent() - .get_parent() - .items() - .column_list_item() - .cells() - .object_identifier({ title: `{PRODUCTNAME}`, text: `{PRODUCTID}` }) - .text(`{SUPPLIERNAME}`); - this.client.view_display(page.stringify()); - } - - on_event() { - if (this.client.check_on_event(`CLICK_HINT_ICON`)) { - this.popover_display({ id: `button_hint_id` }); - } - } - - popover_display({ id } = {}) { - const view = z2ui5_cl_xml_view.factory_popup(); - view.quick_view({ placement: `Bottom`, width: `auto` }) - .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The object identifier is a display control that enables the user to easily identify a specific object. It shows a title and an additional text inside a table.` }); - this.client.popover_display(view.stringify(), id); - } -} - -module.exports = z2ui5_cl_demo_app_370; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js index 32fc7ba..ee94d61 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js @@ -15,19 +15,20 @@ class z2ui5_cl_demo_app_371 extends z2ui5_if_app { } view_display() { - const base_url = `https://sapui5.hana.ondemand.com/test-resources/sap/m/images/demo/nature/`; + const base_url = `https://sapui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/`; const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Carousel`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); page.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Carousel` }); - page.carousel({ loop: true, height: `50%`, pageindicatorplacement: `Bottom` }) - .image({ src: base_url + `desert.jpg`, alt: `Desert`, densityaware: false }) - .image({ src: base_url + `elephant.jpg`, alt: `Elephant`, densityaware: false }) - .image({ src: base_url + `fish.jpg`, alt: `Fish`, densityaware: false }) - .image({ src: base_url + `forest.jpg`, alt: `Forest`, densityaware: false }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Carousel/sample/sap.m.sample.Carousel` }); + page.title({ id: `carouselTitle`, class: `sapUiSmallMarginTop`, text: `Image Gallery Carousel` }); + page.carousel({ class: `sapUiContentPadding`, loop: true }) + .image({ src: base_url + `HT-7777-large.jpg`, alt: `Example picture of speakers` }) + .image({ src: base_url + `HT-6120-large.jpg`, alt: `Example picture of USB flash drive` }) + .image({ src: base_url + `HT-6100-large.jpg`, alt: `Example picture of spotlight` }) + .image({ src: base_url + `screw.jpg`, alt: `Example picture of screw` }); this.client.view_display(page.stringify()); } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js index 3d63d2d..affbadc 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js @@ -9,7 +9,7 @@ class z2ui5_cl_demo_app_372 extends z2ui5_if_app { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { this.view_display(); - } else { + } else if (client.check_on_event()) { this.on_event(); } } @@ -21,29 +21,54 @@ class z2ui5_cl_demo_app_372 extends z2ui5_if_app { page.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MenuButton` }); - const vbox = page.vbox(`sapUiSmallMargin`); - vbox.label(`Regular mode - the button only opens the menu:`); - vbox.menu_button({ text: `File` }) + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MenuButton/sample/sap.m.sample.MenuButton` }); + const toolbar = page.overflow_toolbar(); + toolbar.toolbar_spacer(); + toolbar.label(`In a toolbar`); + toolbar.menu_button({ text: `File` }) .menu() - .menu_item({ text: `New`, icon: `sap-icon://create`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) }) - .menu_item({ text: `Open`, icon: `sap-icon://open-folder`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) }) - .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) }); - vbox.label({ text: `Split mode - the button fires a default action, the arrow opens the menu:`, class: `sapUiSmallMarginTop` }); - vbox.menu_button({ text: `Save`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) + .menu_item({ text: `Edit`, icon: `sap-icon://edit`, press: this.client._event(`ITEM_PRESS`, [`\${$source>/text}`]) }) + .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`ITEM_PRESS`, [`\${$source>/text}`]) }) + .menu_item({ text: `Open`, icon: `sap-icon://open-folder`, press: this.client._event(`ITEM_PRESS`, [`\${$source>/text}`]) }); + toolbar.toolbar_spacer(); + const vbox = page.vbox(`sapUiSmallMargin`); + vbox.label(`Regular mode button`); + this.file_menu_display({ menu_button: vbox.menu_button({ text: `File` }) }); + vbox.label(`Split mode button with associated last action`); + this.file_menu_display({ menu_button: vbox.menu_button({ text: `File Menu`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) }); + vbox.label(`Split mode button with associated last action with initial icon`); + this.file_menu_display({ menu_button: vbox.menu_button({ text: `File Menu`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) }); + vbox.label(`Split mode button with default action only`); + this.file_menu_display({ menu_button: vbox.menu_button({ text: `File Menu`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) }); + vbox.label(`Split mode with type Accept and constant default action`); + vbox.menu_button({ text: `Accept`, buttonmode: `Split`, type: `Accept`, defaultaction: this.client._event(`DEFAULT_ACTION_ACCEPT`) }) .menu() - .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) }) - .menu_item({ text: `Save As`, icon: `sap-icon://duplicate`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) }); + .menu_item({ text: `Send the response now`, icon: `sap-icon://response`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) }) + .menu_item({ text: `Edit the response before sending`, icon: `sap-icon://edit-outside`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) }) + .menu_item({ text: `Do not send a response`, icon: `sap-icon://action`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) }); this.client.view_display(page.stringify()); } + file_menu_display({ menu_button } = {}) { + menu_button.menu() + .menu_item({ text: `Edit`, icon: `sap-icon://edit`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) }) + .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) }) + .menu_item({ text: `Open`, icon: `sap-icon://open-folder`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) }); + } + on_event() { switch (this.client.get().EVENT) { - case `MENU_ITEM`: - this.client.message_toast_display(`${this.client.get_event_arg(1)} selected`); + case `ITEM_PRESS`: + this.client.message_toast_display(`${this.client.get_event_arg()} Pressed`); + break; + case `MENU_ACTION`: + this.client.message_toast_display(`Action triggered on item: ${this.client.get_event_arg()}`); break; case `DEFAULT_ACTION`: - this.client.message_toast_display(`Default action pressed`); + this.client.message_toast_display(`Default action triggered`); + break; + case `DEFAULT_ACTION_ACCEPT`: + this.client.message_toast_display(`Accepted`); break; case `CLICK_HINT_ICON`: this.popover_display({ id: `button_hint_id` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js deleted file mode 100644 index 0ececce..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js +++ /dev/null @@ -1,63 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_373 extends z2ui5_if_app { - client = null; - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.view_display(); - } else { - this.on_event(); - } - } - - view_display() { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Sample: Action Sheet`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.header_content() - .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); - page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ActionSheet` }); - page.vbox(`sapUiSmallMargin`) - .button({ id: `button_action_sheet_id`, text: `Open Action Sheet`, press: this.client._event(`OPEN_SHEET`) }); - this.client.view_display(page.stringify()); - } - - on_event() { - switch (this.client.get().EVENT) { - case `OPEN_SHEET`: - this.action_sheet_display({ id: `button_action_sheet_id` }); - break; - case `SHEET_ACTION`: - this.client.message_toast_display(`${this.client.get_event_arg(1)} pressed`); - break; - case `CLICK_HINT_ICON`: - this.popover_display({ id: `button_hint_id` }); - break; - } - } - - action_sheet_display({ id } = {}) { - const view = z2ui5_cl_xml_view.factory_popup(); - view.action_sheet({ title: `Choose an action`, placement: `Bottom`, showcancelbutton: true }) - .buttons() - .button({ text: `Approve`, icon: `sap-icon://accept`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) }) - .button({ text: `Reject`, icon: `sap-icon://decline`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) }) - .button({ text: `Email`, icon: `sap-icon://email`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) }) - .button({ text: `Forward`, icon: `sap-icon://forward`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) }); - this.client.popover_display(view.stringify(), id); - } - - popover_display({ id } = {}) { - const view = z2ui5_cl_xml_view.factory_popup(); - view.quick_view({ placement: `Bottom`, width: `auto` }) - .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The action sheet displays a list of actions next to the control that opened it. On phones the actions are shown in a dialog at the bottom of the screen.` }); - this.client.popover_display(view.stringify(), id); - } -} - -module.exports = z2ui5_cl_demo_app_373; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js index 78c12af..d88a5b7 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js @@ -26,7 +26,7 @@ class z2ui5_cl_demo_app_374 extends z2ui5_if_app { .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); page.header_content() .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.SplitContainer` }); - const split = page._generic(`SplitContainer`); + const split = page.split_container(); split.master_pages() .page(`Master`) .list(this.client._bind(this.t_items)) @@ -40,7 +40,7 @@ class z2ui5_cl_demo_app_374 extends z2ui5_if_app { on_event() { switch (this.client.get().EVENT) { case `ITEM_PRESS`: - this.detail_text = `${this.client.get_event_arg(1)} selected in the master list.`; + this.detail_text = `${this.client.get_event_arg()} selected in the master list.`; this.client.view_model_update(); break; case `CLICK_HINT_ICON`: diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js index bac52c3..a02a841 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js @@ -3,36 +3,42 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); class z2ui5_cl_demo_app_375 extends z2ui5_if_app { + t_items = []; client = null; async main(client) { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { + this.on_init(); + } else if (client.check_on_navigated()) { this.view_display(); - } else { + } else if (client.check_on_event()) { this.on_event(); } } - view_display() { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Sample: Notification List Item`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.header_content() - .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); - page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NotificationListItem` }); - page.list() - .notification_list_item({ title: `New order #2201 received`, description: `A new order was created and is waiting for approval.`, datetime: `2 hours`, unread: true, priority: `High`, authorinitials: `JS`, authorname: `John Smith`, showclosebutton: true, close: this.client._event(`CLOSE`, [`\${$source>/title}`]) }) - .notification_list_item({ title: `Delivery #98 delayed`, description: `The delivery date moved to next week.`, datetime: `1 day`, unread: true, priority: `Medium`, authorinitials: `AB`, authorname: `Anna Bauer`, showclosebutton: true, close: this.client._event(`CLOSE`, [`\${$source>/title}`]) }) - .notification_list_item({ title: `Weekly report available`, description: `The weekly sales report is ready for download.`, datetime: `3 days`, unread: false, priority: `None`, authorinitials: `SR`, authorname: `Sara Rossi`, showclosebutton: false }); - this.client.view_display(page.stringify()); + on_init() { + this.set_data(); + this.view_display(); } on_event() { + let closed_title; switch (this.client.get().EVENT) { case `CLOSE`: - this.client.message_toast_display(`Notification closed: ${this.client.get_event_arg(1)}`); + closed_title = this.client.get_event_arg(); + for (let _i = this.t_items.length - 1; _i >= 0; _i--) { const row = this.t_items[_i]; if (row.title === closed_title) this.t_items.splice(_i, 1); } + this.client.message_toast_display(`Item Closed: ${closed_title}`); + this.view_display(); + break; + case `ITEM_PRESS`: + this.client.message_toast_display(`Item Pressed: ${this.client.get_event_arg()}`); + break; + case `ACCEPT`: + this.client.message_toast_display(`Accept Button Pressed`); + break; + case `REJECT`: + this.client.message_toast_display(`Reject Button Pressed`); break; case `CLICK_HINT_ICON`: this.popover_display({ id: `button_hint_id` }); @@ -40,6 +46,50 @@ class z2ui5_cl_demo_app_375 extends z2ui5_if_app { } } + view_display() { + let sy_tabix = 0; + let list_item; + const page = z2ui5_cl_xml_view.factory() + .shell() + .page({ title: `abap2UI5 - Sample: Notification List Item`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NotificationListItem/sample/sap.m.sample.NotificationListItem` }); + const list = page.vbox(`sapUiSmallMargin`).list(); + sy_tabix = 0; + for (const s_item of this.t_items) { + sy_tabix++; + list_item = list.notification_list_item({ title: s_item.title, description: s_item.description, datetime: s_item.datetime, unread: s_item.unread, priority: s_item.priority, authorname: s_item.authorname, authorpicture: s_item.authorpicture, showclosebutton: s_item.showclosebutton, truncate: s_item.truncate, hideshowmorebutton: s_item.hideshowmorebutton, showbuttons: s_item.showbuttons, close: this.client._event(`CLOSE`, [`\${$source>/title}`]), press: this.client._event(`ITEM_PRESS`, [`\${$source>/title}`]) }); + switch (s_item.buttons) { + case `ACCEPT_REJECT_LONG`: + list_item.buttons() + .button({ text: `Accept All Requested Information`, press: this.client._event(`ACCEPT`) }) + .button({ text: `Reject All Requested Information`, press: this.client._event(`REJECT`) }); + break; + case `ACCEPT_REJECT_ICON`: + list_item.buttons() + .button({ text: `Accept`, icon: `sap-icon://accept`, press: this.client._event(`ACCEPT`) }) + .button({ text: `Reject`, icon: `sap-icon://sys-cancel`, press: this.client._event(`REJECT`) }); + break; + case `ACCEPT_REJECT`: + list_item.buttons() + .button({ text: `Accept`, press: this.client._event(`ACCEPT`) }) + .button({ text: `Reject`, press: this.client._event(`REJECT`) }); + break; + case `ACCEPT`: + list_item.buttons().button({ text: `Accept`, press: this.client._event(`ACCEPT`) }); + break; + } + } + this.client.view_display(page.stringify()); + } + + set_data() { + let base_url = ``; + this.t_items = [{ title: `New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, description: `And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `1 hour`, unread: true, priority: `None`, authorname: `Jean Doe`, authorpicture: base_url + `test-resources/sap/m/images/Woman_04.png`, buttons: `ACCEPT_REJECT_LONG` }, { title: `New order (#2524), without action buttons`, description: `Short description`, showclosebutton: true, datetime: `3 days`, unread: true, priority: `High`, authorname: `Office Notification`, authorpicture: `sap-icon://group` }, { title: `New order (#2523) With a long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit.`, description: `And short description`, showclosebutton: false, unread: false, datetime: `3 days`, priority: `High`, authorname: `Patricia Clark`, buttons: `ACCEPT_REJECT_ICON` }, { title: `New order (#2522)`, description: `With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `3 days`, unread: true, priority: `Medium`, authorname: `John Smith` }, { title: `New order (#2521)`, description: `With a very long description and no action buttons below - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `3 days`, unread: true, priority: `Low`, authorname: `John Smith`, authorpicture: base_url + `test-resources/sap/m/images/headerImg2.jpg` }, { title: `New order (#2525) With a very long title and truncation disabled by default! Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, description: `And a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `2 day`, unread: false, priority: `Low`, authorname: `Jean Doe`, authorpicture: base_url + `test-resources/sap/m/images/Woman_04.png`, truncate: `false`, buttons: `ACCEPT` }, { title: `New order (#2525) With a very long title and with truncation enabled but 'Show More' hidden! Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, description: `And a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `2 day`, unread: false, priority: `Low`, authorname: `Jean Doe`, authorpicture: base_url + `test-resources/sap/m/images/Woman_04.png`, hideshowmorebutton: `true`, showbuttons: `false`, buttons: `ACCEPT_REJECT` }, { title: `New order (#2523) With a long title without description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet`, showclosebutton: false, unread: false, datetime: `3 days`, priority: `High`, authorname: `Patricia Clark`, authorpicture: base_url + `test-resources/sap/m/images/female_BaySu.jpg`, buttons: `ACCEPT_REJECT_ICON` }, { title: `New order (#2523) With a long title without description`, showclosebutton: true, unread: false, datetime: `3 days`, priority: `High` }]; + } + popover_display({ id } = {}) { const view = z2ui5_cl_xml_view.factory_popup(); view.quick_view({ placement: `Bottom`, width: `auto` }) diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js index 313e0fc..c29a466 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js @@ -9,53 +9,40 @@ class z2ui5_cl_demo_app_378 extends z2ui5_if_app { this.client = z2ui5_cl_util.abap_copy(client); if (client.check_on_init()) { this.view_display(); - } else { - this.on_event(); + } else if (client.check_on_event(`CLICK_HINT_ICON`)) { + this.popover_display({ id: `button_hint_id` }); } } view_display() { + const lorem = `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`; const page = z2ui5_cl_xml_view.factory() .shell() - .page({ title: `abap2UI5 - Sample: Panel`, class: `sapUiContentPadding`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + .page({ title: `abap2UI5 - Sample: Panel`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); page.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Panel` }); - page.panel({ headertext: `Fixed Panel`, class: `sapUiSmallMarginBottom` }) - .text(`A basic panel with a header text and content. It cannot be collapsed.`); - page.panel({ expandable: true, expanded: true, headertext: `Expandable Panel (initially expanded)`, class: `sapUiSmallMarginBottom`, expand: this.client._event(`EXPAND`, [`\${$source>/expanded}`]) }) - .text(`Collapse or expand this panel with the arrow in the header. The expand event is sent to the backend.`); - page.panel({ expandable: true, expanded: false, headertext: `Expandable Panel (initially collapsed)`, class: `sapUiSmallMarginBottom` }) - .text(`This content is hidden until the panel is expanded.`); - const panel = page.panel({ expandable: true, expanded: true }); - panel.header_toolbar() - .toolbar() - .title(`Panel with Header Toolbar`) + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Panel/sample/sap.m.sample.Panel` }); + const panel_picture = page.panel({ width: `auto`, class: `sapUiResponsiveMargin` }); + panel_picture.header_toolbar().overflow_toolbar().title(`Panel with picture`); + panel_picture.horizontal_layout() + .image({ src: `https://sapui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-7777-large.jpg`, width: `10em` }); + panel_picture.text(lorem); + const panel_header = page.panel({ width: `auto`, class: `sapUiResponsiveMargin` }); + panel_header.header_toolbar() + .overflow_toolbar() + .title(`Header`) .toolbar_spacer() - .button({ icon: `sap-icon://settings`, type: `Transparent`, tooltip: `Settings`, press: this.client._event(`SETTINGS`) }); - panel.text(`Instead of a plain header text the panel can host a complete toolbar with actions.`); + .button({ icon: `sap-icon://settings` }) + .button({ icon: `sap-icon://drop-down-list` }); + panel_header.text(lorem); this.client.view_display(page.stringify()); } - on_event() { - switch (this.client.get().EVENT) { - case `EXPAND`: - this.client.message_toast_display(`Panel expanded: ${this.client.get_event_arg(1)}`); - break; - case `SETTINGS`: - this.client.message_toast_display(`Settings pressed`); - break; - case `CLICK_HINT_ICON`: - this.popover_display({ id: `button_hint_id` }); - break; - } - } - popover_display({ id } = {}) { const view = z2ui5_cl_xml_view.factory_popup(); view.quick_view({ placement: `Bottom`, width: `auto` }) - .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The panel groups content under a header. It can be expandable and its header can be a plain text or a full toolbar.` }); + .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `Panels are helpful to group custom content. They can be decorated with a plain header text or a complete header toolbar.` }); this.client.popover_display(view.stringify(), id); } } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js index 1a016c1..9461403 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js @@ -15,28 +15,35 @@ class z2ui5_cl_demo_app_379 extends z2ui5_if_app { } view_display() { - const base_url = `https://sapui5.hana.ondemand.com/test-resources/sap/m/images/`; + const base_url = `https://sapui5.hana.ondemand.com/test-resources/`; const page = z2ui5_cl_xml_view.factory() .shell() .page({ title: `abap2UI5 - Sample: Image`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); page.header_content() .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Image` }); - const vbox = page.vbox(`sapUiSmallMargin`); - vbox.label(`Fixed width (150px), with alternative text:`); - vbox.image({ src: base_url + `SAPLogo.jpg`, alt: `SAP logo`, width: `150px`, densityaware: false }); - vbox.label({ text: `Clickable image with press event:`, class: `sapUiSmallMarginTop` }); - vbox.image({ src: base_url + `SAPLogo.jpg`, alt: `SAP logo (clickable)`, width: `75px`, densityaware: false, press: this.client._event(`IMAGE_PRESS`) }); - vbox.label({ text: `Decorative image (ignored by screen readers):`, class: `sapUiSmallMarginTop` }); - vbox.image({ src: base_url + `SAPUI5.png`, decorative: true, width: `150px`, densityaware: false }); + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Image/sample/sap.m.sample.Image` }); + const hbox = page.vbox(`sapUiSmallMarginTopBottom sapUiLargeMarginBeginEnd`) + .hbox({ justifycontent: `SpaceBetween` }); + hbox.vbox() + .text({ text: `Image:`, class: `sapUiSmallMarginBottom` }) + .image({ src: base_url + `sap/ui/documentation/sdk/images/HT-7777-large.jpg`, width: `10em` }); + hbox.vbox() + .text({ text: `Active state image:`, class: `sapUiSmallMarginBottom` }) + .image({ src: base_url + `sap/ui/documentation/sdk/images/HT-6100-large.jpg`, width: `10em`, decorative: false, press: this.client._event(`IMAGE_PRESS`) }); + hbox.vbox() + .text({ text: `Image using SVG format:`, class: `sapUiSmallMarginBottom` }) + .image({ src: base_url + `sap/m/demokit/sample/Image/images/sap-logo.svg` }); + hbox.vbox() + .text({ text: `Image displaying inline SVG:`, class: `sapUiSmallMarginBottom` }) + .image({ src: base_url + `sap/m/demokit/sample/Image/images/sap-logo.svg` }); this.client.view_display(page.stringify()); } on_event() { switch (this.client.get().EVENT) { case `IMAGE_PRESS`: - this.client.message_toast_display(`Image pressed`); + this.client.message_toast_display(`The image has been pressed`); break; case `CLICK_HINT_ICON`: this.popover_display({ id: `button_hint_id` }); diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js deleted file mode 100644 index 88185aa..0000000 --- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js +++ /dev/null @@ -1,48 +0,0 @@ -const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); -const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); -const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); - -class z2ui5_cl_demo_app_380 extends z2ui5_if_app { - client = null; - - async main(client) { - this.client = z2ui5_cl_util.abap_copy(client); - if (client.check_on_init()) { - this.view_display(); - } else { - this.on_event(); - } - } - - view_display() { - const page = z2ui5_cl_xml_view.factory() - .shell() - .page({ title: `abap2UI5 - Sample: Tab Container`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); - page.header_content() - .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) }); - page.header_content() - .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TabContainer` }); - const tabs = page.tab_container(); - tabs.tab({ text: `Order 2201`, selected: true }) - .vbox(`sapUiSmallMargin`) - .text(`Content of order 2201: 5 items, delivery next week.`); - tabs.tab({ text: `Order 2202` }).vbox(`sapUiSmallMargin`).text(`Content of order 2202: 2 items, delivered.`); - tabs.tab({ text: `Order 2203` }).vbox(`sapUiSmallMargin`).text(`Content of order 2203: 12 items, in approval.`); - this.client.view_display(page.stringify()); - } - - on_event() { - if (this.client.check_on_event(`CLICK_HINT_ICON`)) { - this.popover_display({ id: `button_hint_id` }); - } - } - - popover_display({ id } = {}) { - const view = z2ui5_cl_xml_view.factory_popup(); - view.quick_view({ placement: `Bottom`, width: `auto` }) - .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The tab container manages several open items in parallel, similar to browser tabs - for example multiple open documents or orders.` }); - this.client.popover_display(view.stringify(), id); - } -} - -module.exports = z2ui5_cl_demo_app_380; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js new file mode 100644 index 0000000..4b082b3 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js @@ -0,0 +1,94 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_381 extends z2ui5_if_app { + client = null; + message = ``; + duration = ``; + width = ``; + my = ``; + at = ``; + offset = ``; + animation_timing = ``; + animation_duration = ``; + autoclose = false; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.on_init(); + this.view_display(); + } else if (client.check_on_event(`SHOW`)) { + this.show_toast(); + } + } + + on_init() { + this.message = `This is a message toast.`; + this.duration = `3000`; + this.width = `15em`; + this.my = `center bottom`; + this.at = `center bottom`; + this.offset = `0 0`; + this.animation_timing = `ease`; + this.animation_duration = `1000`; + this.autoclose = true; + } + + show_toast() { + this.client.message_toast_display({ text: this.message, duration: this.duration, width: this.width, my: this.my, at: this.at, offset: this.offset, animationtimingfunction: this.animation_timing, animationduration: this.animation_duration, autoclose: this.autoclose }); + } + + view_display() { + let sy_tabix = 0; + const page = z2ui5_cl_xml_view.factory() + .shell() + .page({ title: `abap2UI5 - Sample: Message Toast`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MessageToast/sample/sap.m.sample.MessageToast` }); + const form = page.panel({ headertext: `Message Toast Configuration` }) + .simple_form({ title: `Settings`, editable: true }) + .content(`form`); + form.label(`Message`) + .input(this.client._bind_edit(this.message)) + .label(`Duration (ms)`) + .input({ value: this.client._bind_edit(this.duration), type: `Number` }) + .label(`Width`) + .input(this.client._bind_edit(this.width)); + const select_my = form.label(`my`).select({ selectedkey: this.client._bind_edit(this.my) }); + const select_at = form.label(`at`).select({ selectedkey: this.client._bind_edit(this.at) }); + sy_tabix = 0; + for (const position of this.get_positions()) { + sy_tabix++; + select_my.item({ key: position, text: position }); + select_at.item({ key: position, text: position }); + } + form.label(`offset`); + form.input(this.client._bind_edit(this.offset)); + const select_animation = form.label(`animationTimingFunction`) + .select({ selectedkey: this.client._bind_edit(this.animation_timing) }); + select_animation.item({ key: `ease`, text: `ease` }) + .item({ key: `linear`, text: `linear` }) + .item({ key: `ease-in`, text: `ease-in` }) + .item({ key: `ease-out`, text: `ease-out` }) + .item({ key: `ease-in-out`, text: `ease-in-out` }); + form.label(`animationDuration (ms)`) + .input({ value: this.client._bind_edit(this.animation_duration), type: `Number` }) + .label(`autoClose`) + .checkbox(this.client._bind_edit(this.autoclose)); + form.button({ text: `Show Message Toast`, type: `Emphasized`, press: this.client._event(`SHOW`) }); + page.footer() + .overflow_toolbar() + .button({ text: `Back`, icon: `sap-icon://nav-back`, press: this.client._event_nav_app_leave() }); + this.client.view_display(page.stringify()); + } + + get_positions() { + let result = []; + result = [`begin top`, `begin center`, `begin bottom`, `left top`, `left center`, `left bottom`, `center top`, `center center`, `center bottom`, `right top`, `right center`, `right bottom`, `end top`, `end center`, `end bottom`]; + return result; + } +} + +module.exports = z2ui5_cl_demo_app_381; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js new file mode 100644 index 0000000..f3f3815 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js @@ -0,0 +1,68 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_382 extends z2ui5_if_app { + client = null; + title = ``; + message = ``; + details = ``; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.on_init(); + this.view_display(); + } else if (client.check_on_event()) { + this.on_event(); + } + } + + on_init() { + this.title = `abap2UI5`; + this.message = `This is a message box.`; + this.details = `These are additional details about the message.`; + } + + on_event() { + switch (this.client.get().EVENT) { + case `CUSTOM`: + this.client.message_box_display(this.message, `information`, this.title, undefined, undefined, [`Approve`, `Reject`], `Approve`, undefined, undefined, undefined, this.details); + break; + default: + this.client.message_box_display(this.message, this.client.get().EVENT, this.title, undefined, undefined, undefined, undefined, undefined, undefined, undefined, this.details); + break; + } + } + + view_display() { + const page = z2ui5_cl_xml_view.factory() + .shell() + .page({ title: `abap2UI5 - Sample: Message Box`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.header_content() + .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MessageBox/sample/sap.m.sample.MessageBox` }); + page.panel({ headertext: `Message Box Configuration` }) + .simple_form({ title: `Settings`, editable: true }) + .content(`form`) + .label(`Title`) + .input(this.client._bind_edit(this.title)) + .label(`Message`) + .input(this.client._bind_edit(this.message)) + .label(`Details`) + .text_area({ value: this.client._bind_edit(this.details), rows: `3` }); + page.footer() + .overflow_toolbar() + .button({ text: `Back`, icon: `sap-icon://nav-back`, press: this.client._event_nav_app_leave() }) + .text(`Open Message Box:`) + .toolbar_spacer() + .button({ text: `Confirm`, press: this.client._event(`confirm`) }) + .button({ text: `Information`, press: this.client._event(`information`) }) + .button({ text: `Success`, type: `Success`, press: this.client._event(`success`) }) + .button({ text: `Warning`, press: this.client._event(`warning`) }) + .button({ text: `Error`, type: `Reject`, press: this.client._event(`error`) }) + .button({ text: `Custom`, type: `Emphasized`, press: this.client._event(`CUSTOM`) }); + this.client.view_display(page.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_382; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js new file mode 100644 index 0000000..946825f --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js @@ -0,0 +1,57 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_383 extends z2ui5_if_app { + image = ``; + client = null; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.image = `https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/docs/images/logo.png`; + this.view_display(); + } else if (client.check_on_event()) { + this.on_event(); + } + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + view.shell() + .page({ title: `abap2UI5 - Frontend Action - Image Editor Popup Close`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }) + .vbox(`sapUiSmallMargin`) + .image({ src: this.client._bind(this.image), width: `20rem` }) + .button({ text: `Edit Image...`, icon: `sap-icon://edit`, press: this.client._event(`EDIT`) }); + this.client.view_display(view.stringify()); + } + + popup_display() { + const popup = z2ui5_cl_xml_view.factory_popup() + .dialog({ title: `Edit Image`, icon: `sap-icon://edit`, contentheight: `80%`, contentwidth: `80%`, verticalscrolling: false, horizontalscrolling: false }); + popup.image_editor_container().image_editor({ id: `imageEditor`, src: this.image }); + popup.buttons() + .button({ text: `Cancel`, type: `Reject`, press: this.client._event(`CANCEL`) }) + .button({ text: `Save`, type: `Emphasized`, press: this.client._event_client(this.client.cs_event.image_editor_popup_close) }); + this.client.popup_display(popup.stringify()); + } + + on_event() { + switch (this.client.get().EVENT) { + case `EDIT`: + this.popup_display(); + break; + case `SAVE`: + this.image = this.client.get_event_arg(1); + this.client.popup_destroy(); + this.client.view_model_update(); + this.client.message_toast_display(`Image saved`); + break; + case `CANCEL`: + this.client.popup_destroy(); + break; + } + } +} + +module.exports = z2ui5_cl_demo_app_383; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js new file mode 100644 index 0000000..5d19207 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js @@ -0,0 +1,69 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_445 extends z2ui5_if_app { + client = null; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.view_display(); + } else { + this.on_event(); + } + } + + on_event() { + if (this.client.check_on_event(`OPEN_POPUP`)) { + this.popup_display(); + } + } + + device_form({ parent } = {}) { + let result = null; + const form = parent.simple_form({ editable: false, layout: `ResponsiveGridLayout` }); + form.label(`System type`) + .object_status({ text: `{= \${device>/system/phone} ? 'Phone' : (\${device>/system/tablet} ? 'Tablet' : (\${device>/system/desktop} ? 'Desktop' : 'Other')) }`, state: `Information` }); + form.label(`Orientation`) + .object_status({ text: `{= \${device>/orientation/landscape} ? 'Landscape' : 'Portrait' }` }); + form.label(`Window size`).object_status({ text: `{device>/resize/width} x {device>/resize/height} px` }); + form.label(`Touch support`) + .object_status({ text: `{= \${device>/support/touch} ? 'Yes' : 'No' }`, state: `{= \${device>/support/touch} ? 'Success' : 'None' }` }); + form.label(`Browser`).text(`{device>/browser/name} {device>/browser/version}`); + form.label(`Operating system`).text(`{device>/os/name} {device>/os/version}`); + result = z2ui5_cl_util.abap_copy(form); + return result; + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + const page = view.shell() + .page({ title: `abap2UI5 - Device Model`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.message_strip({ text: `The 'device>' model is a one-way JSONModel over sap.ui.Device. ` + `Resize the window or rotate your device and the values update live - ` + `no backend round-trip. It is available in this view and in the dialog below.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` }); + this.device_form({ parent: page.panel({ headertext: `Live device properties`, class: `sapUiSmallMargin` }) }); + page.message_strip({ text: `{= \${device>/system/phone} ? 'Compact layout - you are on a phone.' : 'Full layout - tablet or desktop.' }`, type: `{= \${device>/system/phone} ? 'Warning' : 'Success' }`, showicon: true, class: `sapUiSmallMargin` }); + const tabs = page.panel({ headertext: `Responsive IconTabBar (expanded only when it is not a phone)`, class: `sapUiSmallMargin` }) + .icon_tab_bar({ expanded: `{= !\${device>/system/phone} }`, class: `sapUiResponsiveContentPadding` }) + .items(); + tabs.icon_tab_filter({ text: `Sales`, key: `sales`, icon: `sap-icon://money-bills` }) + .text(`On a phone the tab content is collapsed to save space; on tablet/desktop it stays expanded.`); + tabs.icon_tab_filter({ text: `Stock`, key: `stock`, icon: `sap-icon://product` }) + .text(`Everything here is driven purely by the device> model - no event handler.`); + page.button({ text: `Open dialog (device model inside a popup)`, icon: `sap-icon://sys-monitor`, press: this.client._event(`OPEN_POPUP`), class: `sapUiSmallMargin` }); + this.client.view_display(view.stringify()); + } + + popup_display() { + const popup = z2ui5_cl_xml_view.factory_popup(); + const dialog = popup.dialog({ title: `Device model inside a popup`, contentwidth: `{= \${device>/system/phone} ? '95%' : '420px' }` }); + this.device_form({ parent: dialog.content() }); + dialog.footer() + .overflow_toolbar() + .toolbar_spacer() + .button({ text: `Close`, type: `Emphasized`, press: this.client._event_client(this.client.cs_event.popup_close) }); + this.client.popup_display(popup.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_445; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js new file mode 100644 index 0000000..4911668 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js @@ -0,0 +1,49 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_446 extends z2ui5_if_app { + client = null; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + this.view_display(); + } else { + this.on_event(); + } + } + + on_event() { + switch (this.client.get().EVENT) { + case `TOAST`: + this.client.control_call({ object: `MESSAGE_TOAST`, method: `show`, params: [`Hello from control_call!`] }); + break; + case `MSGBOX`: + this.client.control_call({ object: `MESSAGE_BOX`, method: `show`, params: [`A message box, opened via control_call.`] }); + break; + case `THEME_DARK`: + this.client.control_call({ object: `THEMING`, method: `setTheme`, params: [`sap_horizon_dark`] }); + break; + case `THEME_LIGHT`: + this.client.control_call({ object: `THEMING`, method: `setTheme`, params: [`sap_horizon`] }); + break; + } + this.view_display(); + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + const page = view.shell() + .page({ title: `abap2UI5 - Action - control_call`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.message_strip({ text: `Each button lets the backend call a method on a global frontend object ` + `(MessageToast, MessageBox, Theming) - client-side, after the response renders, ` + `without wiring a control event.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` }); + page.vbox(`sapUiSmallMargin`) + .button({ text: `MessageToast.show`, icon: `sap-icon://information`, press: this.client._event(`TOAST`) }) + .button({ text: `MessageBox.show`, icon: `sap-icon://message-popup`, press: this.client._event(`MSGBOX`), class: `sapUiTinyMarginTop` }) + .button({ text: `Theming.setTheme( dark )`, icon: `sap-icon://palette`, press: this.client._event(`THEME_DARK`), class: `sapUiTinyMarginTop` }) + .button({ text: `Theming.setTheme( light )`, icon: `sap-icon://palette`, press: this.client._event(`THEME_LIGHT`), class: `sapUiTinyMarginTop` }); + this.client.view_display(view.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_446; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js new file mode 100644 index 0000000..65c48f0 --- /dev/null +++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js @@ -0,0 +1,49 @@ +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); +const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view"); +const z2ui5_if_app = require("abap2UI5/z2ui5_if_app"); + +class z2ui5_cl_demo_app_447 extends z2ui5_if_app { + mt_row = []; + client = null; + + async main(client) { + this.client = z2ui5_cl_util.abap_copy(client); + if (client.check_on_init()) { + for (let sy_index = 1; sy_index <= 30; sy_index++) { + this.mt_row.push({ index: sy_index, text: `Row number ${sy_index}` }); + } + this.view_display(); + } else { + this.on_event(); + } + } + + on_event() { + switch (this.client.get().EVENT) { + case `FOCUS`: + this.client.control_call_by_id({ id: `nameInput`, method: `focus` }); + break; + case `SCROLL`: + this.client.control_call_by_id({ id: `bigTable`, method: `scrollToIndex`, params: [`25`] }); + break; + } + this.view_display(); + } + + view_display() { + const view = z2ui5_cl_xml_view.factory(); + const page = view.shell() + .page({ title: `abap2UI5 - Action - control_call_by_id`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); + page.message_strip({ text: `The backend calls a whitelisted method on a control resolved by id, after the ` + `response renders: focus() on the input, scrollToIndex() on the table.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` }); + page.vbox(`sapUiSmallMargin`) + .input({ id: `nameInput`, placeholder: `this input can be focused from the backend` }) + .button({ text: `focus( ) the input`, icon: `sap-icon://edit`, press: this.client._event(`FOCUS`), class: `sapUiTinyMarginTop` }) + .button({ text: `scrollToIndex( 25 ) on the table`, icon: `sap-icon://down`, press: this.client._event(`SCROLL`), class: `sapUiTinyMarginTop` }); + const tab = page.table({ id: `bigTable`, items: this.client._bind(this.mt_row) }); + tab.columns().column().text(`Index`).get_parent().column().text(`Text`).get_parent(); + tab.items().column_list_item().cells().text(`{INDEX}`).text(`{TEXT}`); + this.client.view_display(view.stringify()); + } +} + +module.exports = z2ui5_cl_demo_app_447; diff --git a/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js b/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js index bee85f3..d0ddf3d 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js @@ -35,7 +35,7 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app { if (!this.s_scroll.id) { return; } - this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [this.s_scroll.id, `${this.s_scroll.y}`, `${this.s_scroll.x}`] }); + this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [this.s_scroll.id, `${this.s_scroll.y}`, `${this.s_scroll.x}`] }); } view_display() { @@ -44,7 +44,11 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app { let url; let base; let new_block; + let tenths; + let width; let row; + const t_catalog = this.get_catalog(); + const t_blocks = this.block_widths({ t_catalog: t_catalog }); const view = z2ui5_cl_xml_view.factory(); const page = view.shell() .page({ id: `page`, title: `abap2UI5 - Samples`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() }); @@ -59,12 +63,12 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app { url = `${this.client.get() .S_CONFIG.ORIGIN}${this.client.get() .S_CONFIG.PATHNAME}?app_start=z2ui5_cl_demo_app_000`; - page.message_strip({ type: `Warning`, showicon: true, enableformattedtext: true, class: `sapUiSmallMarginBottom`, text: `This overview is still under construction. Click here to open the classic launchpad overview.` }); + page.message_strip({ type: `Warning`, showicon: true, enableformattedtext: true, class: `sapUiSmallMarginBottom`, text: `This overview is still under construction. Click here to open the classic overview.` }); } let prev_group = ``; let prev_base = ``; sy_tabix = 0; - for (const tile of this.get_catalog()) { + for (const tile of t_catalog) { sy_tabix++; base = this.header_base({ header: tile.header }); new_block = false; @@ -75,12 +79,13 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app { new_block = true; } prev_base = z2ui5_cl_util.abap_copy(base); + tenths = Math.trunc(z2ui5_cl_util.abap_div(((t_blocks.find((row) => row.group === tile.group && row.base === base).width + 45)), 10)); + width = `${Math.trunc(z2ui5_cl_util.abap_div(tenths, 10))}.${tenths % 10}em`; row = page.hbox({ alignitems: `Center`, wrap: `Wrap`, class: ((new_block === true || new_block === `X`) ? `sapUiTinyMarginBegin sapUiSmallMarginTop` : `sapUiTinyMarginBegin`) }); if (!tile.sub) { - row.link({ text: tile.header, press: this.client._event(tile.app) }); + row.link({ text: tile.header, width, press: this.client._event(tile.app) }); } else { - row.link({ text: tile.header, class: `sapUiTinyMarginEnd`, press: this.client._event(tile.app) }) - .text(tile.sub); + row.link({ text: tile.header, width, press: this.client._event(tile.app) }).text(tile.sub); } } this.client.view_display(view.stringify()); @@ -100,7 +105,50 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app { get_catalog() { let result = []; - result = [{ group: `framework - basics`, header: `Binding`, sub: `Display dynamic created table RTTI`, app: `z2ui5_cl_demo_app_061` }, { group: `framework - basics`, header: `Binding I`, sub: `Simple - Send values to the backend`, app: `z2ui5_cl_demo_app_001` }, { group: `framework - basics`, header: `Binding II`, sub: `Structure Component Level`, app: `z2ui5_cl_demo_app_166` }, { group: `framework - basics`, header: `Binding III`, sub: `Table Cell Level`, app: `z2ui5_cl_demo_app_144` }, { group: `framework - basics`, header: `Binding IV`, sub: `Expression Binding`, app: `z2ui5_cl_demo_app_027` }, { group: `framework - basics`, header: `Binding V`, sub: `Use of Integer, Decimals, Dates & Time`, app: `z2ui5_cl_demo_app_047` }, { group: `framework - basics`, header: `Binding VII`, sub: `Formatting Currencies`, app: `z2ui5_cl_demo_app_067` }, { group: `framework - basics`, header: `Binding VIII`, sub: `SetSizeLimit`, app: `z2ui5_cl_demo_app_071` }, { group: `framework - basics`, header: `Event I`, sub: `Handle events & change the view`, app: `z2ui5_cl_demo_app_004` }, { group: `framework - basics`, header: `Event III`, sub: `Additional Infos with t_args`, app: `z2ui5_cl_demo_app_167` }, { group: `framework - basics`, header: `Event IV`, sub: `Facet Filter - T_arg with Objects`, app: `z2ui5_cl_demo_app_197` }, { group: `framework - basics`, header: `Message`, sub: `Message Box`, app: `z2ui5_cl_demo_app_008` }, { group: `framework - basics`, header: `Message`, sub: `Message Toast`, app: `z2ui5_cl_demo_app_187` }, { group: `framework - basics`, header: `More`, sub: `Call and leave to apps`, app: `z2ui5_cl_demo_app_024` }, { group: `framework - basics`, header: `More`, sub: `Read Frontend Infos`, app: `z2ui5_cl_demo_app_122` }, { group: `framework - basics`, header: `Nested Views I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_065` }, { group: `framework - basics`, header: `Nested Views II`, sub: `Head & Item Table`, app: `z2ui5_cl_demo_app_097` }, { group: `framework - basics`, header: `Nested Views III`, sub: `Head & Item Table & Detail`, app: `z2ui5_cl_demo_app_098` }, { group: `framework - basics`, header: `Nested Views IV`, sub: `Sub-App`, app: `z2ui5_cl_demo_app_104` }, { group: `framework - basics`, header: `Popover`, sub: `Display with Menu`, app: `z2ui5_cl_demo_app_163` }, { group: `framework - basics`, header: `Popover I`, sub: `Simple Example`, app: `z2ui5_cl_demo_app_026` }, { group: `framework - basics`, header: `Popover II`, sub: `Item Level of Table`, app: `z2ui5_cl_demo_app_052` }, { group: `framework - basics`, header: `Popover III`, sub: `List to select in Popover`, app: `z2ui5_cl_demo_app_081` }, { group: `framework - basics`, header: `Popover IV`, sub: `with Quick View`, app: `z2ui5_cl_demo_app_109` }, { group: `framework - basics`, header: `Popup I`, sub: `Different ways of calling Popups`, app: `z2ui5_cl_demo_app_012` }, { group: `framework - basics`, header: `Popup II`, sub: `Create Popup for Value Help`, app: `z2ui5_cl_demo_app_009` }, { group: `framework - basics`, header: `Popup III`, sub: `Popup in Popup - Backend Stack Handling`, app: `z2ui5_cl_demo_app_161` }, { group: `framework - basics`, header: `Templating I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_173` }, { group: `framework - basics`, header: `Templating II`, sub: `Nested Views`, app: `z2ui5_cl_demo_app_176` }, { group: `framework - action`, header: `Clipboard`, sub: `Copy & Paste Text`, app: `z2ui5_cl_demo_app_325` }, { group: `framework - action`, header: `Focus I`, sub: `Set Focus in Textfield`, app: `z2ui5_cl_demo_app_133` }, { group: `framework - action`, header: `Focus II`, sub: `Jump with the focus`, app: `z2ui5_cl_demo_app_189` }, { group: `framework - action`, header: `Keyboard`, sub: `Hide/show Soft Keyboard`, app: `z2ui5_cl_demo_app_352` }, { group: `framework - action`, header: `Scroll I`, sub: `Scroll to position`, app: `z2ui5_cl_demo_app_362` }, { group: `framework - action`, header: `Scroll II`, sub: `Scroll into view`, app: `z2ui5_cl_demo_app_363` }, { group: `framework - action`, header: `Timer I`, sub: `Wait n MS and call again the server`, app: `z2ui5_cl_demo_app_028` }, { group: `framework - action`, header: `Timer II`, sub: `Set Loading Indicator while Server Request`, app: `z2ui5_cl_demo_app_064` }, { group: `framework - action`, header: `Title`, sub: `Set Title`, app: `z2ui5_cl_demo_app_125` }, { group: `framework - action`, header: `URL I`, sub: `New Tab Open an URL in a new tab`, app: `z2ui5_cl_demo_app_073` }, { group: `framework - action`, header: `URL II`, sub: `Open Telephon, Email usw`, app: `z2ui5_cl_demo_app_316` }, { group: `controls - extended`, header: `CameraSelector`, sub: ``, app: `z2ui5_cl_demo_app_306` }, { group: `controls - extended`, header: `Data loss protection`, sub: ``, app: `z2ui5_cl_demo_app_279` }, { group: `controls - extended`, header: `File Uploader I`, sub: ``, app: `z2ui5_cl_demo_app_074` }, { group: `controls - extended`, header: `File Uploader II`, sub: ``, app: `z2ui5_cl_demo_app_075` }, { group: `controls - extended`, header: `File Uploader III`, sub: ``, app: `z2ui5_cl_demo_app_136` }, { group: `controls - extended`, header: `Multi Input`, sub: ``, app: `z2ui5_cl_demo_app_078` }, { group: `controls - extended`, header: `Nav Container I`, sub: ``, app: `z2ui5_cl_demo_app_088` }, { group: `controls - extended`, header: `Wizard Control I`, sub: ``, app: `z2ui5_cl_demo_app_175` }, { group: `controls - extended`, header: `Wizard Control II`, sub: `Next step & SubSequentStep`, app: `z2ui5_cl_demo_app_202` }, { group: `controls`, header: `Action List Item`, sub: ``, app: `z2ui5_cl_demo_app_216` }, { group: `controls`, header: `Action Sheet`, sub: `Choose an Action`, app: `z2ui5_cl_demo_app_373` }, { group: `controls`, header: `Bar`, sub: `Page, Toolbar & Bar`, app: `z2ui5_cl_demo_app_227` }, { group: `controls`, header: `Bar`, sub: `Toolbar vs Bar vs OverflowToolbar`, app: `z2ui5_cl_demo_app_235` }, { group: `controls`, header: `Breadcrumbs`, sub: `sample with current page link`, app: `z2ui5_cl_demo_app_292` }, { group: `controls`, header: `Busy Indicator`, sub: ``, app: `z2ui5_cl_demo_app_215` }, { group: `controls`, header: `Button`, sub: ``, app: `z2ui5_cl_demo_app_259` }, { group: `controls`, header: `Card`, sub: `with Header & Content`, app: `z2ui5_cl_demo_app_181` }, { group: `controls`, header: `Carousel`, sub: `Browse through Pages`, app: `z2ui5_cl_demo_app_371` }, { group: `controls`, header: `Checkbox`, sub: ``, app: `z2ui5_cl_demo_app_239` }, { group: `controls`, header: `Code Editor`, sub: ``, app: `z2ui5_cl_demo_app_035` }, { group: `controls`, header: `Code Editor`, sub: ``, app: `z2ui5_cl_demo_app_265` }, { group: `controls`, header: `Color Picker`, sub: ``, app: `z2ui5_cl_demo_app_270` }, { group: `controls`, header: `ComboBox`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_229` }, { group: `controls`, header: `Date Picker`, sub: `Value States`, app: `z2ui5_cl_demo_app_294` }, { group: `controls`, header: `Date Range Selection`, sub: ``, app: `z2ui5_cl_demo_app_231` }, { group: `controls`, header: `Date Range Selection`, sub: `Value States`, app: `z2ui5_cl_demo_app_295` }, { group: `controls`, header: `Date Time Picker`, sub: `Value States`, app: `z2ui5_cl_demo_app_377` }, { group: `controls`, header: `Dynamic Page`, sub: `Display items`, app: `z2ui5_cl_demo_app_030` }, { group: `controls`, header: `Feed Input`, sub: ``, app: `z2ui5_cl_demo_app_101` }, { group: `controls`, header: `Feed Input`, sub: `Icon Variants`, app: `z2ui5_cl_demo_app_283` }, { group: `controls`, header: `Flex Box`, sub: `Basic Alignment`, app: `z2ui5_cl_demo_app_205` }, { group: `controls`, header: `Flex Box`, sub: `Direction & Order`, app: `z2ui5_cl_demo_app_245` }, { group: `controls`, header: `Flex Box`, sub: `Opposing Alignment`, app: `z2ui5_cl_demo_app_218` }, { group: `controls`, header: `Flex Box`, sub: `Render Type`, app: `z2ui5_cl_demo_app_252` }, { group: `controls`, header: `Flexible Column Layout`, sub: `Master details with tree`, app: `z2ui5_cl_demo_app_069` }, { group: `controls`, header: `Formatted Text`, sub: `Display HTML`, app: `z2ui5_cl_demo_app_015` }, { group: `controls`, header: `Generic Tag`, sub: `Since 1.70`, app: `z2ui5_cl_demo_app_062` }, { group: `controls`, header: `Generic Tag`, sub: `with Different Configurations`, app: `z2ui5_cl_demo_app_257` }, { group: `controls`, header: `Grid`, sub: `Split View in different Areas`, app: `z2ui5_cl_demo_app_367` }, { group: `controls`, header: `Grid List`, sub: `with Drag&Drop`, app: `z2ui5_cl_demo_app_307` }, { group: `controls`, header: `Header Container`, sub: `Vertical Mode`, app: `z2ui5_cl_demo_app_280` }, { group: `controls`, header: `HTML`, sub: ``, app: `z2ui5_cl_demo_app_242` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Filter Table with Counts`, app: `z2ui5_cl_demo_app_368` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Icons Only`, app: `z2ui5_cl_demo_app_221` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Inline Mode`, app: `z2ui5_cl_demo_app_223` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Separator`, app: `z2ui5_cl_demo_app_225` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Sub tabs`, app: `z2ui5_cl_demo_app_226` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Text and Count`, app: `z2ui5_cl_demo_app_222` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Text Only`, app: `z2ui5_cl_demo_app_224` }, { group: `controls`, header: `Icon Tab Header`, sub: `Standalone Icon Tab Header`, app: `z2ui5_cl_demo_app_214` }, { group: `controls`, header: `Image`, sub: `Sizing & Press Event`, app: `z2ui5_cl_demo_app_379` }, { group: `controls`, header: `InfoLabel`, sub: ``, app: `z2ui5_cl_demo_app_209` }, { group: `controls`, header: `Input`, sub: `Description`, app: `z2ui5_cl_demo_app_251` }, { group: `controls`, header: `Input`, sub: `Password`, app: `z2ui5_cl_demo_app_213` }, { group: `controls`, header: `Input`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_246` }, { group: `controls`, header: `Input`, sub: `Types`, app: `z2ui5_cl_demo_app_210` }, { group: `controls`, header: `Input List Item`, sub: ``, app: `z2ui5_cl_demo_app_219` }, { group: `controls`, header: `InvisibleText`, sub: ``, app: `z2ui5_cl_demo_app_282` }, { group: `controls`, header: `Label`, sub: ``, app: `z2ui5_cl_demo_app_051` }, { group: `controls`, header: `LightBox`, sub: ``, app: `z2ui5_cl_demo_app_273` }, { group: `controls`, header: `Link`, sub: ``, app: `z2ui5_cl_demo_app_293` }, { group: `controls`, header: `List I`, sub: `Basic`, app: `z2ui5_cl_demo_app_003` }, { group: `controls`, header: `List II`, sub: `Events & Visualization`, app: `z2ui5_cl_demo_app_048` }, { group: `controls`, header: `Mask Input`, sub: ``, app: `z2ui5_cl_demo_app_110` }, { group: `controls`, header: `Menu Button`, sub: `Regular & Split Mode`, app: `z2ui5_cl_demo_app_372` }, { group: `controls`, header: `Message Strip`, sub: ``, app: `z2ui5_cl_demo_app_238` }, { group: `controls`, header: `Message Strip`, sub: `with enableFormattedText`, app: `z2ui5_cl_demo_app_291` }, { group: `controls`, header: `Message View`, sub: `Custom Popup, Popover & Output`, app: `z2ui5_cl_demo_app_038` }, { group: `controls`, header: `Multi Combo Box`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_233` }, { group: `controls`, header: `Multi Input`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_232` }, { group: `controls`, header: `Multi Input`, sub: `Value States`, app: `z2ui5_cl_demo_app_267` }, { group: `controls`, header: `Notification List Item`, sub: `Priority & Close Button`, app: `z2ui5_cl_demo_app_375` }, { group: `controls`, header: `Object Attribute`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_302` }, { group: `controls`, header: `Object Header`, sub: `with Circle-shaped Image`, app: `z2ui5_cl_demo_app_272` }, { group: `controls`, header: `Object Identifier`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_370` }, { group: `controls`, header: `Object List Item`, sub: `markers aggregation`, app: `z2ui5_cl_demo_app_290` }, { group: `controls`, header: `Object Marker`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_289` }, { group: `controls`, header: `Object Number`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_369` }, { group: `controls`, header: `Object Page`, sub: `with Avatar (since 1.73)`, app: `z2ui5_cl_demo_app_017` }, { group: `controls`, header: `Object Page`, sub: `with Hidden Section Titles`, app: `z2ui5_cl_demo_app_330` }, { group: `controls`, header: `Object Page Header`, sub: `with Header Container`, app: `z2ui5_cl_demo_app_303` }, { group: `controls`, header: `Object Status`, sub: ``, app: `z2ui5_cl_demo_app_300` }, { group: `controls`, header: `Overflow Toolbar`, sub: ``, app: `z2ui5_cl_demo_app_217` }, { group: `controls`, header: `Overflow Toolbar`, sub: `Alignment`, app: `z2ui5_cl_demo_app_250` }, { group: `controls`, header: `Page`, sub: `Header, Sub-Header & Footer`, app: `z2ui5_cl_demo_app_366` }, { group: `controls`, header: `Panel`, sub: `Expandable & Header Toolbar`, app: `z2ui5_cl_demo_app_378` }, { group: `controls`, header: `Planning Calendar`, sub: ``, app: `z2ui5_cl_demo_app_080` }, { group: `controls`, header: `Progress Indicator`, sub: ``, app: `z2ui5_cl_demo_app_022` }, { group: `controls`, header: `Radio Button`, sub: ``, app: `z2ui5_cl_demo_app_207` }, { group: `controls`, header: `Radio Button Group`, sub: ``, app: `z2ui5_cl_demo_app_208` }, { group: `controls`, header: `Range Slider`, sub: ``, app: `z2ui5_cl_demo_app_005` }, { group: `controls`, header: `Rating Indicator`, sub: ``, app: `z2ui5_cl_demo_app_220` }, { group: `controls`, header: `Rich Text Editor`, sub: ``, app: `z2ui5_cl_demo_app_106` }, { group: `controls`, header: `Search Field`, sub: ``, app: `z2ui5_cl_demo_app_296` }, { group: `controls`, header: `Search Field I`, sub: `Filter with enter`, app: `z2ui5_cl_demo_app_053` }, { group: `controls`, header: `Search Field II`, sub: `Filter with Live Change Event`, app: `z2ui5_cl_demo_app_059` }, { group: `controls`, header: `Segmented Button`, sub: `in Input List Item`, app: `z2ui5_cl_demo_app_230` }, { group: `controls`, header: `Select`, sub: ``, app: `z2ui5_cl_demo_app_288` }, { group: `controls`, header: `Select`, sub: `Validation states`, app: `z2ui5_cl_demo_app_298` }, { group: `controls`, header: `Select`, sub: `with icons`, app: `z2ui5_cl_demo_app_297` }, { group: `controls`, header: `Select`, sub: `Wrapping text`, app: `z2ui5_cl_demo_app_299` }, { group: `controls`, header: `Slide Tile`, sub: ``, app: `z2ui5_cl_demo_app_274` }, { group: `controls`, header: `Slider`, sub: ``, app: `z2ui5_cl_demo_app_237` }, { group: `controls`, header: `Split Container`, sub: `Master & Detail Pages`, app: `z2ui5_cl_demo_app_374` }, { group: `controls`, header: `Splitter Layout`, sub: `2 areas`, app: `z2ui5_cl_demo_app_247` }, { group: `controls`, header: `Splitter Layout`, sub: `2 non-resizable areas`, app: `z2ui5_cl_demo_app_248` }, { group: `controls`, header: `Splitter Layout`, sub: `3 areas`, app: `z2ui5_cl_demo_app_249` }, { group: `controls`, header: `Splitter Layout`, sub: `Nested with 7 Areas`, app: `z2ui5_cl_demo_app_260` }, { group: `controls`, header: `Splitter Layout`, sub: `Side Panel`, app: `z2ui5_cl_demo_app_103` }, { group: `controls`, header: `Standard List Item`, sub: `Wrapping`, app: `z2ui5_cl_demo_app_287` }, { group: `controls`, header: `Step Input`, sub: ``, app: `z2ui5_cl_demo_app_041` }, { group: `controls`, header: `Step Input`, sub: `Value States`, app: `z2ui5_cl_demo_app_264` }, { group: `controls`, header: `Switch`, sub: ``, app: `z2ui5_cl_demo_app_240` }, { group: `controls`, header: `Tab Container`, sub: `Multiple Items`, app: `z2ui5_cl_demo_app_380` }, { group: `controls`, header: `Table`, sub: `Selection Modes: Single Select & Multi Select`, app: `z2ui5_cl_demo_app_019` }, { group: `controls`, header: `Table`, sub: `Set Columns Editable`, app: `z2ui5_cl_demo_app_011` }, { group: `controls`, header: `Text`, sub: `Max Lines`, app: `z2ui5_cl_demo_app_206` }, { group: `controls`, header: `Text Area`, sub: ``, app: `z2ui5_cl_demo_app_021` }, { group: `controls`, header: `Text Area`, sub: `Growing`, app: `z2ui5_cl_demo_app_236` }, { group: `controls`, header: `Text Area`, sub: `Value States`, app: `z2ui5_cl_demo_app_234` }, { group: `controls`, header: `Tile`, sub: `Feed and News Tile`, app: `z2ui5_cl_demo_app_278` }, { group: `controls`, header: `Tile`, sub: `Feed Content`, app: `z2ui5_cl_demo_app_275` }, { group: `controls`, header: `Tile`, sub: `Image Content`, app: `z2ui5_cl_demo_app_271` }, { group: `controls`, header: `Tile`, sub: `Monitor Tile`, app: `z2ui5_cl_demo_app_276` }, { group: `controls`, header: `Tile`, sub: `News Content`, app: `z2ui5_cl_demo_app_261` }, { group: `controls`, header: `Tile`, sub: `Numeric Content of Different Colors`, app: `z2ui5_cl_demo_app_262` }, { group: `controls`, header: `Tile`, sub: `Numeric Content with Icon`, app: `z2ui5_cl_demo_app_263` }, { group: `controls`, header: `Tile`, sub: `Numeric Content Without Margins`, app: `z2ui5_cl_demo_app_228` }, { group: `controls`, header: `Tile`, sub: `Statuses`, app: `z2ui5_cl_demo_app_281` }, { group: `controls`, header: `Tile`, sub: `Tile Content`, app: `z2ui5_cl_demo_app_241` }, { group: `controls`, header: `Time Picker`, sub: `Formats & Steps`, app: `z2ui5_cl_demo_app_376` }, { group: `controls`, header: `Toggle Button`, sub: ``, app: `z2ui5_cl_demo_app_266` }, { group: `controls`, header: `Toolbar`, sub: `Add a container & toolbar`, app: `z2ui5_cl_demo_app_006` }, { group: `controls`, header: `Tree Table I`, sub: `Popup Select Entry`, app: `z2ui5_cl_demo_app_068` }, { group: `controls`, header: `Tree Table II`, sub: `Checkbox Binding per Node`, app: `z2ui5_cl_demo_app_364` }, { group: `controls`, header: `ui.Table I`, sub: `Simple example`, app: `z2ui5_cl_demo_app_070` }, { group: `controls`, header: `ui.Table II`, sub: `Events on Cell Level`, app: `z2ui5_cl_demo_app_160` }]; + result = [{ group: `framework - basics`, header: `Binding I`, sub: `Level Simple`, app: `z2ui5_cl_demo_app_001` }, { group: `framework - basics`, header: `Binding II`, sub: `Level Structure/Component`, app: `z2ui5_cl_demo_app_166` }, { group: `framework - basics`, header: `Binding III`, sub: `Level Table/Cell`, app: `z2ui5_cl_demo_app_144` }, { group: `framework - basics`, header: `Binding IV`, sub: `Expression Binding`, app: `z2ui5_cl_demo_app_027` }, { group: `framework - basics`, header: `Binding V`, sub: `Formatting Integers, Decimals, Dates & Time`, app: `z2ui5_cl_demo_app_047` }, { group: `framework - basics`, header: `Binding VII`, sub: `Formatting Currencies`, app: `z2ui5_cl_demo_app_067` }, { group: `framework - basics`, header: `Event I`, sub: `Handle events & change the view`, app: `z2ui5_cl_demo_app_004` }, { group: `framework - basics`, header: `Event II`, sub: `Additional Infos with t_args`, app: `z2ui5_cl_demo_app_167` }, { group: `framework - basics`, header: `Event III`, sub: `Facet Filter - T_arg with Objects`, app: `z2ui5_cl_demo_app_197` }, { group: `framework - basics`, header: `Message`, sub: `Backend`, app: `z2ui5_cl_demo_app_008` }, { group: `framework - basics`, header: `Message`, sub: `MessageBox`, app: `z2ui5_cl_demo_app_382` }, { group: `framework - basics`, header: `Message`, sub: `MessageToast`, app: `z2ui5_cl_demo_app_381` }, { group: `framework - basics`, header: `More`, sub: `Call and leave to apps`, app: `z2ui5_cl_demo_app_024` }, { group: `framework - basics`, header: `More`, sub: `Generic Data Reference`, app: `z2ui5_cl_demo_app_061` }, { group: `framework - basics`, header: `More`, sub: `Model Size Limit`, app: `z2ui5_cl_demo_app_071` }, { group: `framework - basics`, header: `More`, sub: `Read Frontend Infos`, app: `z2ui5_cl_demo_app_122` }, { group: `framework - basics`, header: `More`, sub: `Require Object in XML View`, app: `z2ui5_cl_demo_app_163` }, { group: `framework - basics`, header: `Nested Views I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_065` }, { group: `framework - basics`, header: `Nested Views II`, sub: `Head & Item Table`, app: `z2ui5_cl_demo_app_097` }, { group: `framework - basics`, header: `Nested Views III`, sub: `Head & Item Table & Detail`, app: `z2ui5_cl_demo_app_098` }, { group: `framework - basics`, header: `Nested Views IV`, sub: `Sub-App`, app: `z2ui5_cl_demo_app_104` }, { group: `framework - basics`, header: `Popover I`, sub: `Simple Example`, app: `z2ui5_cl_demo_app_026` }, { group: `framework - basics`, header: `Popover II`, sub: `Item Level of Table`, app: `z2ui5_cl_demo_app_052` }, { group: `framework - basics`, header: `Popover III`, sub: `List to select in Popover`, app: `z2ui5_cl_demo_app_081` }, { group: `framework - basics`, header: `Popover IV`, sub: `with Quick View`, app: `z2ui5_cl_demo_app_109` }, { group: `framework - basics`, header: `Popup I`, sub: `Different ways of calling Popups`, app: `z2ui5_cl_demo_app_012` }, { group: `framework - basics`, header: `Popup II`, sub: `Create Popup for Value Help`, app: `z2ui5_cl_demo_app_009` }, { group: `framework - basics`, header: `Popup III`, sub: `Popup in Popup - Backend Stack Handling`, app: `z2ui5_cl_demo_app_161` }, { group: `framework - basics`, header: `Templating I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_173` }, { group: `framework - basics`, header: `Templating II`, sub: `Nested Views`, app: `z2ui5_cl_demo_app_176` }, { group: `framework - action`, header: `Action`, sub: `control_call`, app: `z2ui5_cl_demo_app_446` }, { group: `framework - action`, header: `Action`, sub: `control_call_by_id`, app: `z2ui5_cl_demo_app_447` }, { group: `framework - action`, header: `Browser`, sub: `Logout`, app: `z2ui5_cl_demo_app_361` }, { group: `framework - action`, header: `Browser`, sub: `Title`, app: `z2ui5_cl_demo_app_125` }, { group: `framework - action`, header: `Focus I`, sub: `Set Focus in Textfield`, app: `z2ui5_cl_demo_app_133` }, { group: `framework - action`, header: `Focus II`, sub: `Jump with the focus`, app: `z2ui5_cl_demo_app_189` }, { group: `framework - action`, header: `Image Editor`, sub: `Edit in Popup and return PNG`, app: `z2ui5_cl_demo_app_383` }, { group: `framework - action`, header: `Input`, sub: `Clipboard`, app: `z2ui5_cl_demo_app_325` }, { group: `framework - action`, header: `Input`, sub: `Hide/show Soft Keyboard`, app: `z2ui5_cl_demo_app_352` }, { group: `framework - action`, header: `Scroll I`, sub: `Scroll to position`, app: `z2ui5_cl_demo_app_362` }, { group: `framework - action`, header: `Scroll II`, sub: `Scroll into view`, app: `z2ui5_cl_demo_app_363` }, { group: `framework - action`, header: `Timer I`, sub: `Wait n MS and call again the server`, app: `z2ui5_cl_demo_app_028` }, { group: `framework - action`, header: `Timer II`, sub: `Loading Indicator with WAIT UP Backend`, app: `z2ui5_cl_demo_app_064` }, { group: `framework - action`, header: `URL I`, sub: `New Tab Open an URL in a new tab`, app: `z2ui5_cl_demo_app_073` }, { group: `framework - action`, header: `URL II`, sub: `Open Telephon, Email usw`, app: `z2ui5_cl_demo_app_316` }, { group: `framework - extended Controls (CC and Action)`, header: `A Nav Container`, sub: ``, app: `z2ui5_cl_demo_app_088` }, { group: `framework - extended Controls (CC and Action)`, header: `A Nav Container`, sub: `Popup`, app: `z2ui5_cl_demo_app_170` }, { group: `framework - extended Controls (CC and Action)`, header: `A Wizard Control`, sub: ``, app: `z2ui5_cl_demo_app_202` }, { group: `framework - extended Controls (CC and Action)`, header: `C File Uploader`, sub: ``, app: `z2ui5_cl_demo_app_074` }, { group: `framework - extended Controls (CC and Action)`, header: `C Geoloaction`, sub: ``, app: `z2ui5_cl_demo_app_120` }, { group: `framework - extended Controls (CC and Action)`, header: `C Multi Input`, sub: ``, app: `z2ui5_cl_demo_app_078` }, { group: `framework - extended Controls (CC and Action)`, header: `CC CameraSelector`, sub: ``, app: `z2ui5_cl_demo_app_306` }, { group: `framework - extended Controls (CC and Action)`, header: `CC Data loss protection`, sub: ``, app: `z2ui5_cl_demo_app_279` }, { group: `framework - use cases`, header: `sap.m.List`, sub: `Events & Visualization`, app: `z2ui5_cl_demo_app_048` }, { group: `framework - use cases`, header: `sap.m.SearchField`, sub: `Live Search`, app: `z2ui5_cl_demo_app_059` }, { group: `framework - use cases`, header: `sap.m.SearchField`, sub: `Search`, app: `z2ui5_cl_demo_app_053` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Backend Filter`, app: `z2ui5_cl_demo_app_045` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Editable`, app: `z2ui5_cl_demo_app_011` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Selection Modes: Single Select & Multi Select`, app: `z2ui5_cl_demo_app_019` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Table with sap.m.ScrollContainer`, app: `z2ui5_cl_demo_app_006` }, { group: `framework - use cases`, header: `sap.ui.Device`, sub: `Device Model in views and popups`, app: `z2ui5_cl_demo_app_445` }, { group: `framework - use cases`, header: `sap.ui.Table`, sub: `Events on Cell Level`, app: `z2ui5_cl_demo_app_160` }, { group: `framework - use cases`, header: `sap.ui.Table`, sub: `Filtering`, app: `z2ui5_cl_demo_app_143` }, { group: `framework - use cases`, header: `sap.ui.Table`, sub: `Full Example`, app: `z2ui5_cl_demo_app_070` }, { group: `controls - sap.m`, header: `sap.m.ActionListItem`, sub: `Use the Action List Item to trigger an action directly from a list`, app: `z2ui5_cl_demo_app_216` }, { group: `controls - sap.m`, header: `sap.m.Breadcrumbs`, sub: `Breadcrumbs sample with current page set as aggregation, resulting in a link`, app: `z2ui5_cl_demo_app_292` }, { group: `controls - sap.m`, header: `sap.m.BusyIndicator`, sub: `The Busy Indicator signals that some operation is going on and that the user must wait. It does not block the current UI screen so other operations could be triggered in parallel.`, app: `z2ui5_cl_demo_app_215` }, { group: `controls - sap.m`, header: `sap.m.Button`, sub: `Buttons trigger user actions and come in a variety of shapes and colors. Placing a button on a page header or footer changes its appearance.`, app: `z2ui5_cl_demo_app_259` }, { group: `controls - sap.m`, header: `sap.m.Carousel`, sub: `A sample of a Carousel that contains images.`, app: `z2ui5_cl_demo_app_371` }, { group: `controls - sap.m`, header: `sap.m.CheckBox`, sub: `Checkboxes allow users to select a subset of options. If you want to offer an off/on setting you should use the Switch control instead.`, app: `z2ui5_cl_demo_app_239` }, { group: `controls - sap.m`, header: `sap.m.ComboBox`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_229` }, { group: `controls - sap.m`, header: `sap.m.DatePicker`, sub: `This example shows different DatePicker value states.`, app: `z2ui5_cl_demo_app_294` }, { group: `controls - sap.m`, header: `sap.m.DateRangeSelection`, sub: `This example shows different DateRangeSelection value states.`, app: `z2ui5_cl_demo_app_295` }, { group: `controls - sap.m`, header: `sap.m.DateTimePicker`, sub: `Value States`, app: `z2ui5_cl_demo_app_377` }, { group: `controls - sap.m`, header: `sap.m.FeedContent`, sub: `Shows the tile containing the text of the feed, a subheader, and a numeric value.`, app: `z2ui5_cl_demo_app_275` }, { group: `controls - sap.m`, header: `sap.m.FeedInput`, sub: ``, app: `z2ui5_cl_demo_app_114` }, { group: `controls - sap.m`, header: `sap.m.FeedInput`, sub: `This sample shows a standalone feed input with different settings.`, app: `z2ui5_cl_demo_app_283` }, { group: `controls - sap.m`, header: `sap.m.FeedListItem`, sub: `This sample shows you how to build a complete feed user interface by combining a FeedInput with a list of FeedListItems.`, app: `z2ui5_cl_demo_app_101` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `Flex Box items can be placed in different areas using the justifyContent and alignItem properties.`, app: `z2ui5_cl_demo_app_205` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `Flex items can be rendered differently. By default, they are wrapped in a div element. Optionally, the bare controls can be rendered directly. This can affect the resulting layout.`, app: `z2ui5_cl_demo_app_252` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `In this Flex Box the items are aligned at opposing ends of the container with justifyContent set to 'SpaceBetween'.`, app: `z2ui5_cl_demo_app_218` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `You can influence the direction and order of elements in horizontal and vertical Flex Box controls with the direction property.`, app: `z2ui5_cl_demo_app_245` }, { group: `controls - sap.m`, header: `sap.m.FormattedText`, sub: `The control can be used for embedding formatted HTML text into your application.`, app: `z2ui5_cl_demo_app_015` }, { group: `controls - sap.m`, header: `sap.m.GenericTag`, sub: `Previews of the GenericTag control based on combinations of different sets of properties.`, app: `z2ui5_cl_demo_app_257` }, { group: `controls - sap.m`, header: `sap.m.GenericTile`, sub: `Shows Feed Tile and News Tile samples that can contain feed content, news content, and a footer.`, app: `z2ui5_cl_demo_app_278` }, { group: `controls - sap.m`, header: `sap.m.GenericTile`, sub: `Shows Monitor Tile samples that can contain header, subheader, icon, key value, unit, and a footer.`, app: `z2ui5_cl_demo_app_276` }, { group: `controls - sap.m`, header: `sap.m.GenericTile`, sub: `Shows the GenericTile while it is loading, if loading fails, and in disabled status.`, app: `z2ui5_cl_demo_app_281` }, { group: `controls - sap.m`, header: `sap.m.HeaderContainer`, sub: `The Header Container with a vertical layout and with divider lines.`, app: `z2ui5_cl_demo_app_280` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar is used to apply filters on a table and display the count of the items for each view.`, app: `z2ui5_cl_demo_app_368` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display icons only.`, app: `z2ui5_cl_demo_app_221` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display text and corresponding count.`, app: `z2ui5_cl_demo_app_222` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display text only.`, app: `z2ui5_cl_demo_app_224` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display the text and the count in one line.`, app: `z2ui5_cl_demo_app_223` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `This is an example how to use separators in the Icon Tab Bar. You can choose an icon as a separator or use the default vertical line.`, app: `z2ui5_cl_demo_app_225` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `This sample illustrates nested tabs with or without own content in their root-level tab.`, app: `z2ui5_cl_demo_app_226` }, { group: `controls - sap.m`, header: `sap.m.IconTabHeader`, sub: `Icon Tab Header used standalone, outside of Icon Tab Bar.`, app: `z2ui5_cl_demo_app_214` }, { group: `controls - sap.m`, header: `sap.m.Image`, sub: `Images are faster than words and attract people's attention. Images can also have an active state or be used in SVG format.`, app: `z2ui5_cl_demo_app_379` }, { group: `controls - sap.m`, header: `sap.m.ImageContent`, sub: `Shows ImageContent that can include an icon, a profile image, or a logo with a tooltip.`, app: `z2ui5_cl_demo_app_271` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `Input type corresponds to the type attribute of the HTML input tag. On touch devices, it controls the keyboard layout. On desktop, the effect of this setting is browser dependent.`, app: `z2ui5_cl_demo_app_210` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_246` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `This sample illustrates the usage of the description with input fields, e.g. description for units of measurements and currencies.`, app: `z2ui5_cl_demo_app_251` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `To make sure the password is not shown as clear text you set the 'type' of an input control to 'Password'.`, app: `z2ui5_cl_demo_app_213` }, { group: `controls - sap.m`, header: `sap.m.InputListItem`, sub: `Use the Input List Item on phones to build form like user interfaces.`, app: `z2ui5_cl_demo_app_219` }, { group: `controls - sap.m`, header: `sap.m.Label`, sub: `Labels are helpful when you need to describe some other UI control.`, app: `z2ui5_cl_demo_app_051` }, { group: `controls - sap.m`, header: `sap.m.LightBox`, sub: `Displays several image thumbnails. Clicking on each of them will open a LightBox.`, app: `z2ui5_cl_demo_app_273` }, { group: `controls - sap.m`, header: `sap.m.Link`, sub: `Here are some links. Typically links are used in user interfaces to trigger navigation to related content inside or outside of the current application.`, app: `z2ui5_cl_demo_app_293` }, { group: `controls - sap.m`, header: `sap.m.MaskInput`, sub: `The sap.m.MaskInput control allows users to easily enter data in a certain format and in a fixed- width input (for example: date, time, credit card number, and others).`, app: `z2ui5_cl_demo_app_110` }, { group: `controls - sap.m`, header: `sap.m.MenuButton`, sub: `This control is used to open a menu in both desktop and mobile.`, app: `z2ui5_cl_demo_app_372` }, { group: `controls - sap.m`, header: `sap.m.MessageStrip`, sub: `A sample MessageStrip that shows status messages with additional formatting.`, app: `z2ui5_cl_demo_app_291` }, { group: `controls - sap.m`, header: `sap.m.MessageStrip`, sub: `MessageStrip for showing status messages.`, app: `z2ui5_cl_demo_app_238` }, { group: `controls - sap.m`, header: `sap.m.MessageView`, sub: `A sample with Message View and inside a Dialog and grouping of items`, app: `z2ui5_cl_demo_app_038` }, { group: `controls - sap.m`, header: `sap.m.MultiComboBox`, sub: ``, app: `z2ui5_cl_demo_app_140` }, { group: `controls - sap.m`, header: `sap.m.MultiComboBox`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_233` }, { group: `controls - sap.m`, header: `sap.m.MultiInput`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_232` }, { group: `controls - sap.m`, header: `sap.m.MultiInput`, sub: `This sample illustrates the different value states of the sap.m.MultiInput control.`, app: `z2ui5_cl_demo_app_267` }, { group: `controls - sap.m`, header: `sap.m.NewsContent`, sub: `This control is used to display the news content text and subheader in a tile.`, app: `z2ui5_cl_demo_app_261` }, { group: `controls - sap.m`, header: `sap.m.NotificationListItem`, sub: `A list item suitable for showing notifications to the user.`, app: `z2ui5_cl_demo_app_375` }, { group: `controls - sap.m`, header: `sap.m.NumericContent`, sub: `Shows NumericContent including an icon.`, app: `z2ui5_cl_demo_app_263` }, { group: `controls - sap.m`, header: `sap.m.NumericContent`, sub: `Shows NumericContent including numbers, units of measurement, and status arrows indicating a trend. The numbers can be colored according to their meaning.`, app: `z2ui5_cl_demo_app_262` }, { group: `controls - sap.m`, header: `sap.m.NumericContent`, sub: `This is an example of the NumericContent that contains no margins, so the control is aligned to the left and to the top without any margins.`, app: `z2ui5_cl_demo_app_228` }, { group: `controls - sap.m`, header: `sap.m.ObjectAttribute`, sub: `This is an example of Object Attribute used inside Table.`, app: `z2ui5_cl_demo_app_302` }, { group: `controls - sap.m`, header: `sap.m.ObjectHeader`, sub: `An Object Header can set shape of the image by using 'imageShape' property. The shapes could be Square (by default) and Circle. Note: This example shows the image inside ObjectHeader with the responsive property set to true. On phone i` + `n portrait mode, the image is hidden.`, app: `z2ui5_cl_demo_app_272` }, { group: `controls - sap.m`, header: `sap.m.ObjectListItem`, sub: `This sample shows the different states of an Object List Item, which can be set using the markers aggregation.`, app: `z2ui5_cl_demo_app_290` }, { group: `controls - sap.m`, header: `sap.m.ObjectMarker`, sub: `The ObjectMarker is a small building block representing an object by an icon or text and icon. Often it is used in a table.`, app: `z2ui5_cl_demo_app_289` }, { group: `controls - sap.m`, header: `sap.m.ObjectNumber`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_369` }, { group: `controls - sap.m`, header: `sap.m.ObjectStatus`, sub: `The object status is a small building block representing a status with a semantic color.`, app: `z2ui5_cl_demo_app_300` }, { group: `controls - sap.m`, header: `sap.m.OverflowToolbar`, sub: `OverflowToolbar and Toolbar are often used for left/right alignment. This is easily achieved with ToolbarSpacer.`, app: `z2ui5_cl_demo_app_250` }, { group: `controls - sap.m`, header: `sap.m.OverflowToolbar`, sub: `The sap.m.Title control can be used to place a title inside an OverflowToolbar/Toolbar.`, app: `z2ui5_cl_demo_app_217` }, { group: `controls - sap.m`, header: `sap.m.Page`, sub: `Each screen of a mobile application is typically represented by a 'Page' consisting of a header, a scrollable content area and optionally a footer. The standard header offers a navigation button and a title. Alternatively you can provi` + `de a customer header. Gernerally you should use Toolbars in the Page. If you need a centered title you may use a Bar.`, app: `z2ui5_cl_demo_app_227` }, { group: `controls - sap.m`, header: `sap.m.Page`, sub: `Header, Sub-Header & Footer`, app: `z2ui5_cl_demo_app_366` }, { group: `controls - sap.m`, header: `sap.m.Panel`, sub: `Panels are helpful to group custom content. They can be decorated with header and info toolbars.`, app: `z2ui5_cl_demo_app_378` }, { group: `controls - sap.m`, header: `sap.m.ProgressIndicator`, sub: `Shows the progress of a process in a graphical way. To indicate the progress, the inside of the ProgressIndicator is filled with a color.`, app: `z2ui5_cl_demo_app_022` }, { group: `controls - sap.m`, header: `sap.m.RadioButton`, sub: `Typically the Radio Button is used by other controls. E.g. the List uses it for the single selection. But you can also use the Radio Buttons control directly, to allow selection of exactly one of multiple options.`, app: `z2ui5_cl_demo_app_207` }, { group: `controls - sap.m`, header: `sap.m.RadioButtonGroup`, sub: `A wrapper for a group of radio buttons.`, app: `z2ui5_cl_demo_app_208` }, { group: `controls - sap.m`, header: `sap.m.RangeSlider`, sub: ``, app: `z2ui5_cl_demo_app_005` }, { group: `controls - sap.m`, header: `sap.m.RatingIndicator`, sub: `A Rating Indicator can be used to both indicate and/or rate content.`, app: `z2ui5_cl_demo_app_220` }, { group: `controls - sap.m`, header: `sap.m.SearchField`, sub: `Use the Search Field to let the user enter a search string and trigger the search process.`, app: `z2ui5_cl_demo_app_296` }, { group: `controls - sap.m`, header: `sap.m.SegmentedButton`, sub: `Segmented Button used in Input List Item component`, app: `z2ui5_cl_demo_app_230` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Illustrates how the text in items wrap.`, app: `z2ui5_cl_demo_app_299` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Illustrates the usage of a Select in header, footer and content of a page. Note the different display options.`, app: `z2ui5_cl_demo_app_288` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Illustrates the usage of a Select with icons`, app: `z2ui5_cl_demo_app_297` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Visualizes the validation state of the control, for example, Error, Warning and Success.`, app: `z2ui5_cl_demo_app_298` }, { group: `controls - sap.m`, header: `sap.m.Slider`, sub: `With the Slider a user can choose a value from a numerical range.`, app: `z2ui5_cl_demo_app_237` }, { group: `controls - sap.m`, header: `sap.m.SlideTile`, sub: `Shows Generic Tile with the 2x1 frame type displayed as sliding tiles.`, app: `z2ui5_cl_demo_app_274` }, { group: `controls - sap.m`, header: `sap.m.SplitContainer`, sub: `Master & Detail Pages`, app: `z2ui5_cl_demo_app_374` }, { group: `controls - sap.m`, header: `sap.m.StandardListItem`, sub: `This sample demonstrates the wrapping behavior of the title text and the description text. In desktop mode, the character limit is set to 300 characters, whereas in the phone mode, the character limit is set to 100 characters.`, app: `z2ui5_cl_demo_app_287` }, { group: `controls - sap.m`, header: `sap.m.StepInput`, sub: `This example shows different StepInput value states.`, app: `z2ui5_cl_demo_app_264` }, { group: `controls - sap.m`, header: `sap.m.Switch`, sub: `"Some say it is only a switch, I say it is one of the most stylish controls in the universe of mobile UI controls." (unknown developer)`, app: `z2ui5_cl_demo_app_240` }, { group: `controls - sap.m`, header: `sap.m.Text`, sub: `The Text control has a property to limit the number of lines for wrapping texts.`, app: `z2ui5_cl_demo_app_206` }, { group: `controls - sap.m`, header: `sap.m.Text`, sub: `with class -Standard Margins - Negative Margins`, app: `z2ui5_cl_demo_app_243` }, { group: `controls - sap.m`, header: `sap.m.TextArea`, sub: `Since 1.38 the growing property of sap.m.TextArea gives the ability of a control to automatically grow and shrink dynamically with its content.`, app: `z2ui5_cl_demo_app_236` }, { group: `controls - sap.m`, header: `sap.m.TextArea`, sub: `This sample illustrates the different value states of the sap.m.TextArea control.`, app: `z2ui5_cl_demo_app_234` }, { group: `controls - sap.m`, header: `sap.m.TileContent`, sub: `Shows the universal container for different content types and context information in the footer area.`, app: `z2ui5_cl_demo_app_241` }, { group: `controls - sap.m`, header: `sap.m.TimePicker`, sub: `Formats & Steps`, app: `z2ui5_cl_demo_app_376` }, { group: `controls - sap.m`, header: `sap.m.ToggleButton`, sub: `Toggle Buttons can be toggled between pressed and normal state.`, app: `z2ui5_cl_demo_app_266` }, { group: `controls - sap.m`, header: `sap.m.Toolbar`, sub: `Toolbar handles overflow by shrinking items. OverflowToolbar provides an overflow menu. Bar is able to perfectly center a text if nothing overflows.`, app: `z2ui5_cl_demo_app_235` }, { group: `controls - sap.uxap`, header: `sap.uxap.ObjectPageLayout`, sub: `Object Page sample showing a layout with subsection titles on top. This is the default layout. The sample also shows the 'Edit header' button in the Header Content area.`, app: `z2ui5_cl_demo_app_017` }, { group: `controls - sap.uxap`, header: `sap.uxap.ObjectPageLayout`, sub: `ObjectPage sample that demonstrates the combination of header facets and showTitle properties of sections and subsections.`, app: `z2ui5_cl_demo_app_330` }, { group: `controls - sap.uxap`, header: `sap.uxap.ObjectPageLayout`, sub: `ObjectPage sample with Header Container`, app: `z2ui5_cl_demo_app_303` }, { group: `controls - sap.f`, header: `sap.f.Card`, sub: `This sample illustrates how to specify the predefined header and the content of the Card control.`, app: `z2ui5_cl_demo_app_181` }, { group: `controls - sap.f`, header: `sap.f.DynamicPage`, sub: `Dynamic Page freestyle example with a responsive sap.m.Table in the content area, showing that each control can be placed in the title and the header content areas.`, app: `z2ui5_cl_demo_app_030` }, { group: `controls - sap.f`, header: `sap.f.GridList`, sub: `This sample represents GridList with enabled Drag and Drop functionality.`, app: `z2ui5_cl_demo_app_307` }, { group: `controls - sap.ui.core`, header: `sap.ui.core.HTML`, sub: `With the HTML controls you can easily embed any kind of HTML content into your UI5 mobile application.`, app: `z2ui5_cl_demo_app_242` }, { group: `controls - sap.ui.core`, header: `sap.ui.core.InvisibleText`, sub: `Many controls provide the associations ariaLabelledBy and ariaDescribedBy for accessibility purposes. The InvisibleText control can be used by application to provide hidden texts on the UI which can be referenced via these associations` + `.`, app: `z2ui5_cl_demo_app_282` }, { group: `controls - sap.ui.layout`, header: `sap.ui.Grid`, sub: `Split View in different Areas`, app: `z2ui5_cl_demo_app_367` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.ResponsiveSplitter`, sub: `ResponsiveSplitter is used to visually divide the content of its parent. It consists of PaneContainers that further agregate other PaneContainers and SplitPanes. SplitPanes can be moved to the pagination when a minimum width of their p` + `arent is reached.`, app: `z2ui5_cl_demo_app_103` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Nested Splitter example with 7 content areas`, app: `z2ui5_cl_demo_app_260` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Simple splitter example with three content areas`, app: `z2ui5_cl_demo_app_249` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Simple splitter example with two content areas`, app: `z2ui5_cl_demo_app_247` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Simple splitter example with two content areas that cannot be resized`, app: `z2ui5_cl_demo_app_248` }, { group: `controls - sap.tnt`, header: `sap.tnt.InfoLabel`, sub: `InfoLabel with all available color schemes`, app: `z2ui5_cl_demo_app_209` }, { group: `controls - sap.tnt`, header: `sap.tnt.NavigationList`, sub: `simple`, app: `z2ui5_cl_demo_app_258` }, { group: `controls - sap.ui.codeeditor`, header: `sap.ui.codeeditor.CodeEditor`, sub: ``, app: `z2ui5_cl_demo_app_265` }, { group: `controls - sap.ui.unified`, header: `sap.ui.unified.ColorPicker`, sub: ``, app: `z2ui5_cl_demo_app_270` }]; + return result; + } + + block_widths({ t_catalog } = {}) { + let result = []; + let sy_tabix = 0; + let sy_subrc = 0; + let fs_block = null; + let _fs$fs_block = null; + let base; + let width; + sy_tabix = 0; + for (const tile of t_catalog) { + sy_tabix++; + base = this.header_base({ header: tile.header }); + { + const _t = result; + const _i = _t.findIndex((_r) => _r.group === tile.group && _r.base === base); + sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4; + fs_block = sy_subrc === 0 ? _t[_i] : null; + _fs$fs_block = sy_subrc === 0 ? { o: _t, k: _i } : null; + } + if (sy_subrc !== 0) { + fs_block = { group: tile.group, base: base }; + result.push(fs_block); + } + width = this.header_width({ header: tile.header }); + if (width > fs_block.width) { + fs_block.width = z2ui5_cl_util.abap_copy(width); + } + } + return result; + } + + header_width({ header } = {}) { + let result = 0; + let char; + let off = 0; + while (off < header.length) { + char = header.substr(off, 1); + result = result + ([...String(char)].some(($c) => String(`MW`).includes($c)) ? 95 : [...String(char)].some(($c) => String(`mw`).includes($c)) ? 80 : [...String(char)].some(($c) => String(`ijltfrI. -`).includes($c)) ? 35 : [...String(char)].some(($c) => String(`ABCDEFGHJKLNOPQRSTUVXYZ`).includes($c)) ? 75 : 55); + off = off + 1; + } return result; } diff --git a/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js b/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js index 3f70374..1241799 100644 --- a/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js +++ b/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js @@ -253,6 +253,9 @@ class z2ui5_cl_sample_context { let lv_index; let lv_name; let lv_value; + if (!val) { + return; + } const lv_search = ((ignore_case === true || ignore_case === `X`) ? val.toUpperCase() : val); sy_tabix = 0; for (const fs_row of tab) { diff --git a/run/input/core/srv/z2ui5/02/z2ui5_if_action.js b/run/input/core/srv/z2ui5/02/z2ui5_if_action.js deleted file mode 100644 index 67c3874..0000000 --- a/run/input/core/srv/z2ui5/02/z2ui5_if_action.js +++ /dev/null @@ -1,5 +0,0 @@ -// transpiled ABAP interface — constants only, types/methods have no JS form -const z2ui5_if_action = { -}; - -module.exports = z2ui5_if_action; diff --git a/run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js b/run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js new file mode 100644 index 0000000..95f3a49 --- /dev/null +++ b/run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js @@ -0,0 +1,215 @@ +const z2ui5_cl_a2ui5_context = require("abap2UI5/z2ui5_cl_a2ui5_context"); +const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util"); + +class z2ui5_cl_xml_view_cc { + mo_view = null; + + approve_popover({ placement, class: class_, text, btn_txt, btn_type, btn_icon, btn_event } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view.popover({ showheader: false, placement, class: class_ }) + .hbox({ justifycontent: `Center` }) + .vbox({ justifycontent: `Center`, alignitems: `Center` }) + .text(text) + .button({ type: btn_type, text: btn_txt, icon: btn_icon, press: btn_event }); + return result; + } + + bwip_js({ bcid, text, scale, height } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `bwipjs`, ns: `z2ui5`, t_prop: [{ n: `bcid`, v: bcid }, { n: `text`, v: text }, { n: `scale`, v: scale }, { n: `height`, v: height }] }); + return result; + } + + camera_picture({ id, value, thumbnail, height, width, press, autoplay, onphoto, facingmode, deviceid } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `CameraPicture`, ns: `z2ui5`, t_prop: [{ n: `id`, v: id }, { n: `value`, v: value }, { n: `thumbnail`, v: thumbnail }, { n: `press`, v: press }, { n: `height`, v: height }, { n: `width`, v: width }, { n: `OnPhoto`, v: onphoto }, { n: `autoplay`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(autoplay) }, { n: `facingMode`, v: facingmode }, { n: `deviceId`, v: deviceid }] }); + return result; + } + + camera_selector({ selectedkey, showclearicon, selectionchange, selecteditem, items, change, width, showsecondaryvalues, placeholder, selecteditemid, name, value, valuestate, valuestatetext, textalign, visible, showvaluestatemessage, showbutton, required, editable, enabled, filtersecondaryvalues, id, class: class_ } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `CameraSelector`, ns: `z2ui5`, t_prop: [{ n: `showClearIcon`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showclearicon) }, { n: `selectedKey`, v: selectedkey }, { n: `items`, v: items }, { n: `id`, v: id }, { n: `class`, v: class_ }, { n: `selectionChange`, v: selectionchange }, { n: `selectedItem`, v: selecteditem }, { n: `selectedItemId`, v: selecteditemid }, { n: `name`, v: name }, { n: `value`, v: value }, { n: `valueState`, v: valuestate }, { n: `valueStateText`, v: valuestatetext }, { n: `textAlign`, v: textalign }, { n: `showSecondaryValues`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showsecondaryvalues) }, { n: `visible`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(visible) }, { n: `showValueStateMessage`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showvaluestatemessage) }, { n: `showButton`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showbutton) }, { n: `required`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(required) }, { n: `editable`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(editable) }, { n: `enabled`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(enabled) }, { n: `filterSecondaryValues`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(filtersecondaryvalues) }, { n: `width`, v: width }, { n: `placeholder`, v: placeholder }, { n: `change`, v: change }] }); + return result; + } + + chartjs({ canvas_id, view, config, height, width, style } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `chartjs`, ns: `z2ui5`, t_prop: [{ n: `canvas_id`, v: canvas_id }, { n: `view`, v: view }, { n: `config`, v: config }, { n: `height`, v: height }, { n: `width`, v: width }, { n: `style`, v: style }] }); + return result; + } + + constructor({ view } = {}) { + this.mo_view = z2ui5_cl_util.abap_copy(view); + } + + demo_output({ val } = {}) { + let result = null; + let lv_style = ``; + this.mo_view._generic({ ns: `html`, name: `style` }); + const lv_class = `Z2UI5_CL_CC_DEMO_OUT`; + // TODO(abap2js): CALL METHOD (lv_class)=>(`GET_STYLE`) RECEIVING result = lv_style. + result = this.mo_view._cc_plain_xml(lv_style).html(val); + return result; + } + + favicon({ favicon } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Favicon`, ns: `z2ui5`, t_prop: [{ n: `favicon`, v: favicon }] }); + return result; + } + + file_uploader({ value, path, placeholder, upload, icononly, buttononly, buttontext, uploadbuttontext, checkdirectupload, filetype, icon, enabled } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `FileUploader`, ns: `z2ui5`, t_prop: [{ n: `placeholder`, v: placeholder }, { n: `upload`, v: upload }, { n: `path`, v: path }, { n: `value`, v: value }, { n: `iconOnly`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(icononly) }, { n: `buttonOnly`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(buttononly) }, { n: `buttonText`, v: buttontext }, { n: `uploadButtonText`, v: uploadbuttontext }, { n: `fileType`, v: filetype }, { n: `checkDirectUpload`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkdirectupload) }, { n: `icon`, v: icon }, { n: `enabled`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(enabled) }] }); + return result; + } + + focus({ focusid, selectionstart, selectionend, setupdate } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Focus`, ns: `z2ui5`, t_prop: [{ n: `setUpdate`, v: setupdate }, { n: `selectionStart`, v: selectionstart }, { n: `selectionEnd`, v: selectionend }, { n: `focusId`, v: focusid }] }); + return result; + } + + geolocation({ finished, longitude, latitude, altitude, accuracy, altitudeaccuracy, speed, heading, enablehighaccuracy, timeout } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Geolocation`, ns: `z2ui5`, t_prop: [{ n: `finished`, v: finished }, { n: `longitude`, v: longitude }, { n: `latitude`, v: latitude }, { n: `altitude`, v: altitude }, { n: `accuracy`, v: accuracy }, { n: `altitudeAccuracy`, v: altitudeaccuracy }, { n: `speed`, v: speed }, { n: `heading`, v: heading }, { n: `enableHighAccuracy`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(enablehighaccuracy) }, { n: `timeout`, v: timeout }] }); + return result; + } + + storage({ finished, prefix, value } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Storage`, ns: `z2ui5`, t_prop: [{ n: `finished`, v: finished }, { n: `type`, v: type }, { n: `prefix`, v: prefix }, { n: `key`, v: key }, { n: `value`, v: value }] }); + return result; + } + + history({ search } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `History`, ns: `z2ui5`, t_prop: [{ n: `search`, v: search }] }); + return result; + } + + info_frontend({ finished, ui5_version, device_height, device_width, device_phone, device_desktop, device_tablet, device_combi, ui5_gav, ui5_theme, device_os, device_systemtype, device_browser } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Info`, ns: `z2ui5`, t_prop: [{ n: `ui5_version`, v: ui5_version }, { n: `ui5_gav`, v: ui5_gav }, { n: `finished`, v: finished }, { n: `ui5_theme`, v: ui5_theme }, { n: `device_os`, v: device_os }, { n: `device_systemtype`, v: device_systemtype }, { n: `device_browser`, v: device_browser }, { n: `device_phone`, v: device_phone }, { n: `device_desktop`, v: device_desktop }, { n: `device_tablet`, v: device_tablet }, { n: `device_combi`, v: device_combi }, { n: `device_height`, v: device_height }, { n: `device_width`, v: device_width }] }); + return result; + } + + message_manager({ items } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `MessageManager`, ns: `z2ui5`, t_prop: [{ n: `items`, v: items }] }); + return result; + } + + messaging({ items } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Messaging`, ns: `z2ui5`, t_prop: [{ n: `items`, v: items }] }); + return result; + } + + multiinput_ext({ multiinputid, multiinputname, change, addedtokens, removedtokens } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `MultiInputExt`, ns: `z2ui5`, t_prop: [{ n: `MultiInputId`, v: multiinputid }, { n: `MultiInputName`, v: multiinputname }, { n: `change`, v: change }, { n: `addedTokens`, v: addedtokens }, { n: `removedTokens`, v: removedtokens }] }); + return result; + } + + uploadset_ext({ uploadsetid, filedata, filename, mediatype, filesize, removedfilename, change, remove } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `UploadSetExt`, ns: `z2ui5`, t_prop: [{ n: `uploadSetId`, v: uploadsetid }, { n: `fileData`, v: filedata }, { n: `fileName`, v: filename }, { n: `mediaType`, v: mediatype }, { n: `fileSize`, v: filesize }, { n: `removedFileName`, v: removedfilename }, { n: `change`, v: change }, { n: `remove`, v: remove }] }); + return result; + } + + tree({ tree_id } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Tree`, ns: `z2ui5`, t_prop: [{ n: `tree_id`, v: tree_id }] }); + return result; + } + + scrolling({ setupdate, items } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Scrolling`, ns: `z2ui5`, t_prop: [{ n: `setUpdate`, v: setupdate }, { n: `items`, v: items }] }); + return result; + } + + spreadsheet_export({ tableid, clike, text, icon, tooltip, columnconfig } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `ExportSpreadsheet`, ns: `z2ui5`, t_prop: [{ n: `tableId`, v: tableid }, { n: `text`, v: text }, { n: `icon`, v: icon }, { n: `type`, v: type }, { n: `tooltip`, v: tooltip }, { n: `columnconfig`, v: columnconfig }] }); + return result; + } + + timer({ finished, delayms, checkrepeat, checkactive } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Timer`, ns: `z2ui5`, t_prop: [{ n: `delayMS`, v: delayms }, { n: `finished`, v: finished }, { n: `checkActive`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkactive) }, { n: `checkRepeat`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkrepeat) }] }); + return result; + } + + binding_update({ changed, path } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `BindingUpdate`, ns: `z2ui5`, t_prop: [{ n: `path`, v: path }, { n: `changed`, v: changed }] }); + return result; + } + + websocket({ value, received, path, checkrepeat, checkactive } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Websocket`, ns: `z2ui5`, t_prop: [{ n: `value`, v: value }, { n: `path`, v: path }, { n: `received`, v: received }, { n: `checkActive`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkactive) }, { n: `checkRepeat`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkrepeat) }] }); + return result; + } + + lp_title({ title, applicationfullwidth } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `LPTitle`, ns: `z2ui5`, t_prop: [{ n: `title`, v: title }, { n: `ApplicationFullWidth`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(applicationfullwidth) }] }); + return result; + } + + title({ title } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Title`, ns: `z2ui5`, t_prop: [{ n: `title`, v: title }] }); + return result; + } + + dirty({ isdirty } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `Dirty`, ns: `z2ui5`, t_prop: [{ n: `isDirty`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(isdirty) }] }); + return result; + } + + uitableext({ tableid } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `UITableExt`, ns: `z2ui5`, t_prop: [{ n: `tableId`, v: tableid }] }); + return result; + } + + smartmultiinput_ext({ multiinputid, change, rangedata, addedtokens, removedtokens } = {}) { + let result = null; + result = z2ui5_cl_util.abap_copy(this.mo_view); + this.mo_view._generic({ name: `SmartMultiInputExt`, ns: `z2ui5`, t_prop: [{ n: `multiInputId`, v: multiinputid }, { n: `rangeData`, v: rangedata }, { n: `change`, v: change }, { n: `addedTokens`, v: addedtokens }, { n: `removedTokens`, v: removedtokens }] }); + return result; + } +} + +module.exports = z2ui5_cl_xml_view_cc; From 165de4a270311a5228d6564413fb0d47935b2444 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 18:12:42 +0000 Subject: [PATCH 2/2] mirror: refresh run/input/core from builder-abap2UI5-js@504ece7 (#2432 + 258 fix) Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01VVvKrYGLLSPsjFV3qdjaBN --- run/input/UPSTREAM_COMMIT | 2 +- .../core/app/z2ui5/webapp/cc/CameraPicture.js | 64 +- .../app/z2ui5/webapp/cc/CameraSelector.js | 8 +- .../core/app/z2ui5/webapp/cc/Geolocation.js | 24 +- .../webapp/controller/View1.controller.js | 51 +- .../z2ui5/webapp/core/DebugTool.fragment.xml | 4 + .../core/app/z2ui5/webapp/core/DebugTool.js | 14 + .../app/z2ui5/webapp/core/FrontendAction.js | 139 +++- run/input/core/app/z2ui5/webapp/core/Lib.js | 654 +++++++++--------- .../core/app/z2ui5/webapp/core/Messages.js | 9 +- .../core/app/z2ui5/webapp/core/ViewSlots.js | 15 + .../srv/app/samples/z2ui5_cl_demo_app_047.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_101.js | 2 + .../srv/app/samples/z2ui5_cl_demo_app_114.js | 1 + .../srv/app/samples/z2ui5_cl_demo_app_258.js | 2 +- .../srv/app/samples/z2ui5_cl_demo_app_306.js | 1 + .../app/samples/z2ui5_cl_sample_context.js | 2 +- .../srv/z2ui5/00/03/z2ui5_cl_a2ui5_context.js | 2 +- .../core/srv/z2ui5/01/02/z2ui5_cl_core_app.js | 2 +- .../z2ui5/01/02/z2ui5_cl_core_srv_model.js | 14 +- .../core/srv/z2ui5/02/z2ui5_cl_xml_view.js | 10 + .../core/srv/z2ui5/99/01/z2ui5_cl_util_ext.js | 20 +- .../core/srv/z2ui5/99/01/z2ui5_cl_util_xml.js | 4 +- .../core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js | 4 +- 24 files changed, 643 insertions(+), 407 deletions(-) diff --git a/run/input/UPSTREAM_COMMIT b/run/input/UPSTREAM_COMMIT index 02c9a50..0e2ab86 100644 --- a/run/input/UPSTREAM_COMMIT +++ b/run/input/UPSTREAM_COMMIT @@ -1 +1 @@ -459db8b3b5c14752a8586fa28dbb5906ed3ba941 +504ece74ae6cd2b5b033c540bb2e1f1910c829d5 diff --git a/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js b/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js index 5297f64..1b34c3b 100644 --- a/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js +++ b/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js @@ -3,10 +3,11 @@ sap.ui.define( "sap/ui/core/Control", "sap/m/Dialog", "sap/m/Button", + "sap/m/Text", "sap/ui/core/HTML", "z2ui5/core/Lib", ], - (Control, Dialog, Button, HTML, Lib) => { + (Control, Dialog, Button, Text, HTML, Lib) => { "use strict"; // Camera button: opens a dialog with the live camera stream, captures // a photo on demand and hands it to the backend as a base64 JPEG in @@ -47,18 +48,28 @@ sap.ui.define( }, }, + // Returns true when a photo was taken, false when it could not be (so + // the caller can keep the dialog open and let the status line explain). capture() { const video = document.getElementById(`${this.getId()}-video`); const canvas = document.getElementById(`${this.getId()}-canvas`); - if (!video || !canvas) return; + if (!video || !canvas) return false; const videoWidth = video.videoWidth; const videoHeight = video.videoHeight; + // The camera may not have delivered a frame yet (Capture pressed too + // early, or the stream failed): videoWidth/Height are 0, which would + // make the canvas 0-sized and drawImage() throw an InvalidStateError. + if (!videoWidth || !videoHeight) { + this._setStatus("Camera not ready yet - no frame captured."); + Lib.logError("CameraPicture: camera not ready, no frame to capture"); + return false; + } canvas.width = videoWidth; canvas.height = videoHeight; const ctx = canvas.getContext("2d", _CTX_2D_OPTS); - if (!ctx) return; + if (!ctx) return false; ctx.drawImage(video, 0, 0, videoWidth, videoHeight); // Full-resolution JPEG (quality 0.85) for the value, plus a small @@ -67,8 +78,9 @@ sap.ui.define( try { resultb64 = canvas.toDataURL("image/jpeg", 0.85); } catch (e) { + this._setStatus("Could not read the captured image."); Lib.logError("CameraPicture: canvas toDataURL failed", e); - return; + return false; } const thumbH = videoWidth @@ -87,11 +99,12 @@ sap.ui.define( Lib.logError("CameraPicture: thumb toDataURL failed", e); } - if (Lib.isDestroyed(this)) return; + if (Lib.isDestroyed(this)) return false; this.setProperty("value", resultb64); this.setProperty("thumbnail", thumbB64); this.fireOnPhoto({ photo: resultb64 }); this._stopCamera(); + return true; }, _stopCamera() { @@ -107,6 +120,11 @@ sap.ui.define( onPicture() { if (this._oScanDialog?.isOpen()) return; if (!this._oScanDialog) { + // Visible status line inside the dialog so the user is told what is + // happening (starting, ready, or why the camera stays black). + this._oStatus = new Text().addStyleClass( + "sapUiSmallMarginBegin sapUiSmallMarginTop", + ); this._oScanDialog = new Dialog({ title: "Device Photo Function", contentWidth: "640px", @@ -116,15 +134,21 @@ sap.ui.define( stretch: true, afterClose: () => this._stopCamera(), content: [ + this._oStatus, new HTML({ id: `${this.getId()}PictureContainer`, - content: `