Last active
April 23, 2024 18:10
-
-
Save milannankov/2bbc7330a0b6b9a40c352307d3ea901e to your computer and use it in GitHub Desktop.
Using Kendo UI in SAP UI5 Applications
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.define([ | |
| "sap/ui/core/mvc/Controller", | |
| "sap/ui/model/json/JSONModel", | |
| ], function (Controller, JSONModel) { | |
| "use strict"; | |
| return Controller.extend("simple-app.controller.View1", { | |
| onAfterRendering: function () { | |
| var colorPickerId = this.byId("colorPicker").sId; | |
| $("#" + colorPickerId).kendoColorPicker({ | |
| value: "#ffffff", | |
| buttons: false | |
| }); | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <mvc:View xmlns:html="http://www.w3.org/1999/xhtml" | |
| xmlns:mvc="sap.ui.core.mvc" | |
| xmlns:controls="simple-app.components" | |
| xmlns:form="sap.ui.layout.form" | |
| xmlns="sap.m" controllerName="simple-app.controller.View1" displayBlock="true"> | |
| <App> | |
| <pages> | |
| <Page title="{i18n>title}"> | |
| <content> | |
| <!-- Placeholder element for color picker --> | |
| <html:div id='colorPicker'></html:div> | |
| </content> | |
| </Page> | |
| </pages> | |
| </App> | |
| </mvc:View> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta charset="UTF-8"> | |
| <title>simple-app</title> | |
| <script id="sap-ui-bootstrap" | |
| src="../../resources/sap-ui-core.js" | |
| data-sap-ui-libs="sap.m" | |
| data-sap-ui-theme="sap_belize" | |
| data-sap-ui-compatVersion="edge" | |
| data-sap-ui-resourceroots='{"simple-app": ""}'> | |
| </script> | |
| <!-- Kendo UI references --> | |
| <link href="http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-fiori.min.css" rel="stylesheet" /> | |
| <link href="http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.fiori.min.css" rel="stylesheet" /> | |
| <script src="http://kendo.cdn.telerik.com/2018.2.620/js/kendo.ui.core.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="css/style.css"> | |
| <script> | |
| sap.ui.getCore().attachInit(function() { | |
| new sap.m.Shell({ | |
| app: new sap.ui.core.ComponentContainer({ | |
| height : "100%", | |
| name : "simple-app" | |
| }) | |
| }).placeAt("content"); | |
| }); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" id="content"> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.define([ | |
| "sap/ui/core/Control" | |
| ], function (Control) { | |
| "use strict"; | |
| var KendoColorPicker = Control.extend("simple-app.controls.kendoColorPicker", { | |
| metadata: { | |
| properties: { | |
| "value": { type: "string", defaultValue: "#ffffff" } | |
| } | |
| }, | |
| init: function () { | |
| this.onColorChangeHandler = this.onColorChange.bind(this); | |
| }, | |
| renderer: function (oRM, oControl) { | |
| oRM.write("<div class=kendoColorPicker"); | |
| oRM.writeControlData(oControl); | |
| oRM.write(">"); | |
| oRM.write("</div>"); | |
| }, | |
| onAfterRendering: function () { | |
| if (this.kendoWidget) { | |
| return; | |
| } | |
| this.kendoWidget = this.createKendoWidget(); | |
| }, | |
| createKendoWidget: function () { | |
| let op = this.getOptions(); | |
| var widget = $("#" + this.getId()).kendoColorPicker(op).data("kendoColorPicker"); | |
| widget.bind("change", this.onColorChangeHandler); | |
| return widget; | |
| }, | |
| onColorChange: function (e) { | |
| this.setValue(e.value); | |
| } | |
| }); | |
| KendoColorPicker.prototype.setValue = function (newValue) { | |
| this.setProperty("value", newValue, true); | |
| if (this.kendoWidget) { | |
| this.kendoWidget.value(newValue); | |
| } | |
| } | |
| return KendoColorPicker; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <mvc:View xmlns:html="http://www.w3.org/1999/xhtml" | |
| xmlns:mvc="sap.ui.core.mvc" | |
| xmlns:controls="simple-app.controls" | |
| xmlns:form="sap.ui.layout.form" | |
| xmlns="sap.m" controllerName="simple-app.controller.View1" displayBlock="true"> | |
| <App> | |
| <pages> | |
| <Page title="{i18n>title}"> | |
| <content> | |
| <controls:kendoColorPicker id='colorPicker' value="{/color}"/> | |
| </content> | |
| </Page> | |
| </pages> | |
| </App> | |
| </mvc:View> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment