ui5 JavascriptCcode Snippets

javascript.jsonc

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	// 01: UI5 Model snippets
	"UI5-model: Create new JSONModel": {
		"prefix": "ui5-m:create-json-model", 
		"body": "var oModel = new JSONModel({$1})", 
		"description": "Create a new JSON Model in a UI5 model / controller file."
	},


	// 02: UI5 View snippets

	// 03: UI5 Controller snippets 
	// UI5 core functions
	"UI5-controller: Message Toast": {
		"prefix": "ui5-c:toast", 
		"body": "MessageToast.show($1)",
		"description": "Requires sap/m/MessageToast Control"
	},
	
	// Generic UI5 getters
	// Prefix: ui5-c-get
	"UI5-controller: Get view's model's properties": {
		"prefix": "ui5-c-get:view-get-model-props", 
		"body": "this.getView().getModel('$1').getProperty('/$2');", 
		"description": "Get a single model's property. Use whenever you want to access the model's values directly."
	}, 

	"UI5-controller: Get owner component's model": {
		"prefix": "ui5-c-get:owner-get-model", 
		"body": "this.getOwnerComponent().getModel($1).getProperty('/$2');", 
		"description": "Get this owner component's model by model name. Use whenever you want to access the model's values directly."
	},

	"UI5-controller: Get item by ID": {
		"prefix": "ui5-c-get:get-by-id", 
		"body": "this.byId($1);", 
		"description": "Get an item by its id"
	},


	"UI5-Controller: Router navigate to": {
		"prefix": "ui5-c:router-nav-to", 
		"body": [
			"handleNavTo${1:Home}() {", 
				"var oRouter = sap.ui.core.UIComponent.getRouterFor(this);", 
				"oRouter.navTo('${2:home}');", 
			"},"
		],
		"description": "Use the UI5 router to navigate to a set view in the Manifest"	
	},

	// UI5 non-core functions
	// Prefix: ui5-c-f
	"UI5-Controller: JQuery AJAX": {
		"prefix": "ui5-c-f:ajax", 
		"body": [
			"$.ajax({", 
				"url: 'https://jsonplaceholder.typicode.com/todos/1',", 
				"data: $1,",
				"type: ${2:'GET'},",
				"beforeSend: (request) => request.setRequestHeader(),", 
				"success: (result, status, xhr) => console.log(status),", 
				"error: (xhr, status, err) => console.log(err),", 
				"complete: (xhr, status) => console.log(status)", 
			"});"
		], 
		"description": "Send an ajax request with jquery's built in $.ajax function. Setting headers is optional."
	}, 

	"UI5-Controller: Functions: Set model based on multi input items": {
		"prefix": "ui5-c-f:handle-assign-tokens", 
		"body": [
			"onChangeToken: function () {", 
				"var pTokens = this.getView().byId('${1:InputId}').getTokens();", 
				"var pData = pTokens.map(function (pToken) {", 
					"return pToken.getKey();", 
				"}).join(',');",
				"this.getView().getModel('${2:ModelToAssignTo}').setProperty('/${3:ArrayToBeSet}', pData);",
			"},"
		], 
		"description": "Retrieve tokens from a ui5 multiple input and assign them to a model."
	}, 

	"UI5-Controller: Functions: ": {
		"prefix": "ui5-c-f:handle-suggest",
		"body": [
		"handleSuggest: function (oEvent) {",
			"var sTerm = oEvent.getParameter('${1:suggestValue}');",
			"var aFilters = [];",
			"if (sTerm) {",
				"aFilters.push(new Filter('text', sap.ui.model.FilterOperator.Contains, sTerm));",
			"}",
			"oEvent.getSource().getBinding('${2:suggestionItems}').filter(aFilters);",
		"},"
		],
		"description": "Handles a ui5 input's suggestion list and filters our items that do not contain the typed in text. Controller requires 'sap/ui/model/Filter' and view requires <suggestionItems> ... </suggestionItems>."
	}
}