Skip to content

Instantly share code, notes, and snippets.

@ClementRoyer

ClementRoyer/sapui5-snippets.code-snippets

Created May 9, 2024 18:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ClementRoyer/697d19bad9bfa220cf722764cbea644f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ClementRoyer/697d19bad9bfa220cf722764cbea644f to your computer and use it in GitHub Desktop.
Download ZIP
Snippets for SAPUI5 (Fiori)
Raw
sapui5-snippets.code-snippets
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
"UI5: Function": {
"scope": "javascript,typescript",
"prefix": ["ui5-function","funtion"],
"body": [
"/**",
" * ${1:description}",
" *",
" * @${2|private,protected,public|}",
" * @param {${3:paramType}} ${4:paramName} ${5:paramDescription}",
" * @returns {${6:returnType}} ${7:returnDescription}",
" **/",
"${8:functionName}: function(${3:paramName}) {",
" $9",
" return $10;",
"},\n\n",
],
"description": "UI5 Function"
},
"UI5: Event Handler": {
"scope": "javascript,typescript",
"prefix": ["ui5-function-event","function-event"],
"body": [
"/**",
" * Event: ${1:description}",
" *",
" * @listens ${2|press,change,select|}",
" * @param {sap.ui.base.Event} oEvent - Event object",
" **/",
"${3:functionName}: function(oEvent) {",
" const ${4:bindingVariable} = oEvent.getSource().getBindingContext()",
" const ${5:objectVariable} = ${4:bindingVariable}.getObject()",
"},\n\n",
],
"description": "UI5 Event Handlet"
},
"UI5 Success Error Handling": {
"scope": "javascript,typescript",
"prefix": "ui5-success-error-handling",
"body": [
"success: (${1:oResponse}) => {",
" console.log(${1:oResponse});",
" ${3:debugger};",
"},",
"error: (${2:oError}) => {",
" console.log(${2:oError});",
" ${4:debugger};",
"}",
],
},
"UI5 Controller Extension": {
"scope": "javascript,typescript",
"prefix": ["ui5-controller-extension","controller-extension"],
"body": [
"sap.ui.define([",
" \"sap/ui/core/mvc/ControllerExtension\",",
" \"sap/ui/model/FilterOperator\",",
" \"sap/ui/model/json/JSONModel\",",
" \"sap/ui/core/Fragment\",",
" \"sap/ui/model/Context\",",
" \"sap/ui/model/Filter\",",
" \"sap/m/MessageToast\",",
" \"sap/m/MessageBox\"",
"], function (",
" ControllerExtension,",
" FilterOperator,",
" JSONModel,",
" Fragment,",
" Context,",
" Filter,",
" MessageToast,",
" MessageBox",
") {",
" \"use strict\";",
"",
" return ControllerExtension.extend(\"${1:namespace}.${TM_FILENAME_BASE:controllerName}\", {",
" override: {",
"",
" onInit: function () {",
" this.ownerController = this.base.getView().getController();",
"",
" },",
"",
" },",
"",
"",
" /* * * * * *\\",
" * PUBLIC *",
" \\* * * * * */",
"",
" /* * * * * * *\\",
" * Formatter *",
" \\* * * * * * */",
"",
" /* * * * *\\",
" * Event *",
" \\* * * * */",
"",
" /* * * * * *\\",
" * Private *",
" \\* * * * * */",
"",
" /* * * * *\\",
" * Utils *",
" \\* * * * */",
"",
" /**",
" * Change busy state of current view",
" *",
" * @private",
" * @param {Boolean} isBusy - Busy flag",
" **/",
" setPopupBusy: function(isBusy) {",
" this._popup.setBusy(isBusy);",
" },",
"",
"",
" /**",
" * Select by ID",
" *",
" * @private",
" * @param {string} objectID - The object you are looking for",
" * @return {Object} - your object",
" **/",
" byId: function(objectID) {",
" return this.ownerController.byId(objectID);",
" },",
"",
"",
" /**",
" * Create a new model",
" *",
" * @private",
" * @param {Object} content - Your object",
" * @param {string} name - Your new model name",
" * @return {sap.ui.model.Model} - The new model",
" **/",
" _createModel: function(content, name) {",
" const view = this.getView();",
"",
" view.setModel(new JSONModel(content), name);",
" return view.getModel(name);",
" },",
"",
"",
" /**",
" * Create/update a model",
" *",
" * @private",
" * @param {Object} oContent - the content of the new model",
" * @param {string} sModel - name of the model",
" * @return {sap.ui.model.Model} - the model",
" **/",
" setModel: function (oContent, sModel) {",
" return this.getView().setModel(oContent, sModel);",
" },",
"",
"",
" /**",
" * Get a model",
" *",
" * @private",
" * @param {sap.ui.model.Model} sModel - name of the model",
" * @return {sap.ui.model.Model} - the model",
" **/",
" getModel: function (sModel) {",
" return this.getView().getModel(sModel);",
" },",
"",
"",
" /** Get view from owner controller",
" *",
" * @private",
" * @return {sap.ui.core.mvc.View} View",
" **/",
" getView() {",
" return this.ownerController.getView();",
" },",
"",
"",
" /**",
" * i18n base method encapsulation",
" *",
" * @private",
" * @param {string} sKey",
" * @param [string] Args",
" **/",
" i18n: function (sKey, args = []) {",
" let _i18n = this.getModel(\"i18n\").getResourceBundle();",
" return _i18n ? _i18n.getText(sKey, args) : sKey;",
" },",
"",
"",
" /**",
" * Show a toast messsage with text",
" *",
" * @private",
" * @param {string} message",
" **/",
" _showToast: function (message) {",
" MessageToast.show(message);",
" }",
"",
" });",
"});",
],
"description": "UI5 Controller Extension"
},
"UI5: Popup Controller Extension": {
"scope": "javascript,typescript",
"prefix": ["ui5-controller-popup-extension", "ui5-popup-controller-extension","controller-popup-extension", "popup-controller-extension"],
"body": [
"sap.ui.define([",
" \"sap/ui/core/mvc/ControllerExtension\",",
" \"sap/ui/model/FilterOperator\",",
" \"sap/ui/model/json/JSONModel\",",
" \"sap/ui/core/Fragment\",",
" \"sap/ui/model/Context\",",
" \"sap/ui/model/Filter\",",
" \"sap/m/MessageToast\",",
" \"sap/m/MessageBox\"",
"], function (",
" ControllerExtension,",
" FilterOperator,",
" JSONModel,",
" Fragment,",
" Context,",
" Filter,",
" MessageToast,",
" MessageBox",
") {",
" \"use strict\";",
"",
" return ControllerExtension.extend(\"${1:namespace}.${TM_FILENAME_BASE:controllerName}\", {",
" override: {",
"",
" onInit: function () {",
" this.ownerController = this.base.getView().getController();",
"",
" },",
"",
" },",
"",
"",
" /* * * * * *\\",
" * PUBLIC *",
" \\* * * * * */",
"",
" /**",
" * Open Popup",
" *",
" * @public",
" * @param {string} ${3:objectPath}",
" **/",
" openTicket: function(${3:objectPath}) {",
" this._open(${3:objectPath});",
" },",
"",
"",
" /* * * * * * *\\",
" * Formatter *",
" \\* * * * * * */",
"",
"",
" /* * * * *\\",
" * Event *",
" \\* * * * */",
"",
"",
" /* * * * * *\\",
" * Private *",
" \\* * * * * */",
"",
" /**",
" * Open Object popup",
" *",
" * @private",
" * @param {string} ${3:objectPath} - Path to entity",
" **/",
" _open: function(${3:objectPath}) {",
" if (!this._popup) {",
" Fragment.load({",
" id: this.getView().getId(),",
" name: \"${1:namespace}.${4:fragmentPath}\",",
" controller: this",
" }).then((oPopup) => {",
" this._popup = oPopup;",
" this._popup.bindElement(ticketPath);",
" //this._popup.setBindingContext(${3:objectPath});",
" this.getView().addDependent(this._popup);",
"",
" this._popup.open();",
" });",
" } else {",
" this._popup.unbindElement();",
" this._popup.bindElement(ticketPath);",
" //this._popup.setBindingContext(${3:objectPath});",
" this._popup.open();",
" }",
"",
" },",
"",
"",
" /* * * * *\\",
" * Utils *",
" \\* * * * */",
"",
" /**",
" * Change busy state of current view",
" *",
" * @private",
" * @param {Boolean} isBusy - Busy flag",
" **/",
" setPopupBusy: function(isBusy) {",
" this._popup.setBusy(isBusy);",
" },",
"",
"",
" /**",
" * Select by ID",
" *",
" * @private",
" * @param {string} objectID - The object you are looking for",
" * @return {Object} - your object",
" **/",
" byId: function(objectID) {",
" return this.ownerController.byId(objectID);",
" },",
"",
"",
" /**",
" * Create a new model",
" *",
" * @private",
" * @param {Object} content - Your object",
" * @param {string} name - Your new model name",
" * @return {sap.ui.model.Model} - The new model",
" **/",
" _createModel: function(content, name) {",
" const view = this.getView();",
"",
" view.setModel(new JSONModel(content), name);",
" return view.getModel(name);",
" },",
"",
"",
" /**",
" * Create/update a model",
" *",
" * @private",
" * @param {Object} oContent - the content of the new model",
" * @param {string} sModel - name of the model",
" * @return {sap.ui.model.Model} - the model",
" **/",
" setModel: function (oContent, sModel) {",
" return this.getView().setModel(oContent, sModel);",
" },",
"",
"",
" /**",
" * Get a model",
" *",
" * @private",
" * @param {sap.ui.model.Model} sModel - name of the model",
" * @return {sap.ui.model.Model} - the model",
" **/",
" getModel: function (sModel) {",
" return this.getView().getModel(sModel);",
" },",
"",
"",
" /** Get view from owner controller",
" *",
" * @private",
" * @return {sap.ui.core.mvc.View} View",
" **/",
" getView() {",
" return this.ownerController.getView();",
" },",
"",
"",
" /**",
" * i18n base method encapsulation",
" *",
" * @private",
" * @param {string} sKey",
" * @param [string] Args",
" **/",
" i18n: function (sKey, args = []) {",
" let _i18n = this.getModel(\"i18n\").getResourceBundle();",
" return _i18n ? _i18n.getText(sKey, args) : sKey;",
" },",
"",
"",
" /**",
" * Show a toast messsage with text",
" *",
" * @private",
" * @param {string} message",
" **/",
" _showToast: function (message) {",
" MessageToast.show(message);",
" }",
"",
" });",
"});"
],
"description": "UI5 Popup Controller Extension"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment