Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

#SITBERN UI5 controls development

59 Aufrufe

Veröffentlicht am

Introduction to control development

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

#SITBERN UI5 controls development

  1. 1. Public Me-and-my-ui5.control #SITBERN, 3rd Sept 2016 Karol Kalisz Digital Assets & IoT, SAP SE
  2. 2. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 2Customer Disclaimer This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent. and… potential code shown in this presentation should not be taken as the best one and state of the art. Code style is like car models, everyone prefers different one!
  3. 3. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 3Customer What you learn out of this talk?  You are not lost in user interface development  SAP UI5 is opens source and it is good so  All you need about controls  Get started on technical level  Create your own personal copy of an control
  4. 4. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 4Customer my problem statement UI5 explored (HANA) and UI5 explored (NW) What I can get out of the box is… what I require is… an area chart… a bubble chart… for the “scorecard component” (Design Studio 1.6) Bubble Trend Chart Line Trend Chart Bar Comparison Chart Delta Bar Comparison Chart Column Comparison Chart Fraction Pie Chart Dimension Members Display
  5. 5. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 5Customer my options  Option 1. give up – boss, it is not possible  Option 2. start from scratch and code according to the specification  Option 3. open source – take and adjust!  Perhaps some other options…
  6. 6. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 6Customer Explore UI5 open source…  Go to the explore site.. And open F12 debugger tools https://sapui5.hana.ondemand.com/explored.html#/entity/sap.suite.ui.microchart.AreaMicroChart/preview  Check out the specification, e.g. https://sapui5.hana.ondemand.com/resources/sap/suite/ui/microchart/AreaMicroChart.control  Check the example, e.g. https://sapui5.hana.ondemand.com/test-resources/sap/suite/ui/microchart/demokit/sample/AreaMicroChart/AreaMicroChart.view.xml  Understand the specification  Find all required parts
  7. 7. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Customer the specification structure Open this file to show:  component package  component name  component properties  component aggregations  component events
  8. 8. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 8Customer Find the debug sources  each control has own file as debug resource (-dbg ending) in the package folder https://sapui5.hana.ondemand.com/resources/sap/suite/ui/microchart/AreaMicroChart-dbg.js  And also renderer file as debug resource (-dbg ending) in the package folder https://sapui5.hana.ondemand.com/resources/sap/suite/ui/microchart/AreaMicroChartRenderer-dbg.js  All required methods are in one of those files  The pure HTML production is in “renderer”  If you get lost, the files are also offline in the JAR files under “META-INF” folder  Understand the files
  9. 9. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 9Customer Create your own copy  Now, you can create own copy of the file(s)  You need to rename all packages  with global search and replace  And the code is yours!  P.S.  do to forget to check the dependencies!  if you want to be independent, copy also other definitions (constants)  do to forget corresponding CSS files!  If it runs, you are done.
  10. 10. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 10Customer Use your own control  Now, you can register your own control modulePath = <the server path to your code>; jQuery.sap.registerModulePath("com.sap.ip.bi.table", modulePath);  And use it as “standard UI5”  Any missing property can be add and used in renderer  May “CTRL-ALT-SHIFT-S” be with you!
  11. 11. © 2015 SAP SE or an SAP affiliate company. All rights reserved. Questions? Contact information: Karol Kalisz Project Management, SAP BI SAP SE

×