Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ui5 con final presentaion

270 views

Published on

The presentation on "Plug in your feature into Web IDE"

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Ui5 con final presentaion

  1. 1. Vered Constantin, SAP Wouter Lemaire, Flexso June 30, 2017 Plug in your feature into SAP Web IDE
  2. 2. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 2Internal Agenda  SAP Web IDE Overview and the Plugin Framework  From Development to publication of SAP Web IDE extensions  Real use case by Flexso – Generation of Custom UI5Controls
  3. 3. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 3Internal Powerful, extensible, web-based integrated development tool that simplifies end-to-end application development Key capabilities  Wizards and templates  Robust source code editors  WYSIWYG - layout editor  Instant preview in browser  Collaboration and version control via Git  Hybrid mobile development  Multi Target Application and Cloud Foundry integration  A lot more full stack capabilities in the future  SDK and extensible architecture SAP Web IDE Product description
  4. 4. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 4Internal SAP Web IDE plugin framework The SAP Web IDE plugin framework enables anyone to extend the SAP Web IDE with new features and provide these to others Plugin framework Plugins New feature SAP Web IDE New plugins
  5. 5. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 5Internal SAP Web IDE plugin framework out-of-the-box optional features Plugin framework Plugins SAP Web IDE IoT Application Enablement BUILD OData Model Editor Enterprise Portal Hybrid Application Toolkit SAP Cloud Platform Portal And more… And more… And more… And more… And more…
  6. 6. SAP Web IDE Plugins
  7. 7. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 7Internal Feature SAP Web IDE plugins  Are combined into “features”  Features can be delivered to others  Encapsulate a certain functionality  Consume services from the framework or other plugins  Expose service interfaces to other plugins  The plugin.json metadata file describes the plugin structure and dependencies Service interface Plugin plugin. json
  8. 8. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 8Internal Inside the plugin  Application templates  Command - user actions  SAPUI5 views and models  Service – service implementation and interfaces  Lib - External libraries (e.g. open sources)  i18n – externalized UI text  Images  CSS - Styling and themes  Control - SAPUI5 custom controls Application template Provided service Required service SAPUI5 views model view control More…
  9. 9. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 9Internal What can you do with SAP Web IDE plugins? Add features Integrate external tools Create templates
  10. 10. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 10Internal Bottom pane Toolbar Command Userpreference Menu command What can you extend with plugins? Most common scenarios include • Panes: bottom, right • Menus and actions • Settings: project and user Right-side pane
  11. 11. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 11Internal Right-sidepane Bottom pane Toolbar Command Userpreference Menu command What you can extend with plugins? Most common scenarios include • Panes: bottom, right • Menus and actions • Settings: project and user • New/custom project templates … and more! My Application Template
  12. 12. Development to Publication For SAP Web IDE extension
  13. 13. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 13Internal Extension Development & Consumption Extension Development Story Extension Consumption Story Develop Publish Maintain Discover Consume Upgrade Partners, ISVs, Technology partners, Freelancers, community developers Customers, Partners
  14. 14. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 14Internal Using the new SDK, you can now extend SAP Web IDE by adding your own templates and plugins. • Tutorials and how-to • Guidelines and best practices • API reference for developing features • Framework for feature lifecycle • Wizard for creating new features and templates • Test feature projects using SAP Web IDE • Deploy and deliver feature SAP Web IDE SDK and API Reference
  15. 15. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 15Internal Discover SAP Web IDE Extensions
  16. 16. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 16Internal SAP Web IDE Feature Consumption SAP Web IDE Account Provider Account Consumer Account
  17. 17. Demo Creating a new Feature and Run it in WebIDE
  18. 18. © 2017 SAP SE or an SAP affiliate company. All rights reserved. 18Internal Main Steps of Demo Add new command to SAP Web IDE that prints notification Step 1 • Create a feature from template Step 2 • Run the Feature
  19. 19. Facts & figures Who is Flexso • 200 consultants • 32 million euro • 20% growth per year • 5% attrition • 120 active customers • Top in Belgium • 25 countries • 4500 Cronos consultants
  20. 20. Intro
  21. 21. Intro Inspiration • Non-Fiori look-and-feel webapp • Discussion JS frameworks
  22. 22. Intro Source – First UI5con
  23. 23. SAPUI5 Fiori • Out-of-the-box controls • Controls are designed for Fiori • Explored app
  24. 24. SAPUI5 Non-Fiori • Create non-Fiori websites • Create your own controls • Freedom is endless with UI5
  25. 25. SAPUI5 Sports one
  26. 26. Custom Controls
  27. 27. Custom Controls • Create brand new controls • Also Extending! • Steps › Create properties for dynamic values › write HTML with a JS function › Handle control events
  28. 28. Custom controls HTML Template
  29. 29. Custom Controls Extend from Control object
  30. 30. Custom Controls Always same structure
  31. 31. Custom Controls Properties can be found in HTML
  32. 32. Custom Controls Setters for smoother rendering
  33. 33. Custom controls Renderer function • writeControlData › Generate id and data-sap-ui • Write DOM elements • Write classes • Write styles • …
  34. 34. Custom controls Custom Control example
  35. 35. Custom Controls Conclusion • You’ll always start from an HTML template • Same steps for each new control • Time consuming
  36. 36. SAP Web IDE Feature
  37. 37. SAP Web IDE Plugin Solution • HTML to UI5 Control convertor › "UI5 control generator“ • Only four small steps › Create file › Paste HTML › Click on convert › Adjust control name + namespace
  38. 38. SAP Web IDE Plugin Demo <div class="sw-intro"> <p class="intro-text"> SAP Inside Track Walldorf </p> <h2 class="main-logo"> <img src="images/logo.png"> </h2> <div class="main-content"> <div class="title-content"> <p class="content-header">UI5 Custom Controls</p> <br> <p class="content-body"> Everything you need to know about UI5 Custom Controls! </p> </div> </div> </div>
  39. 39. SAP Web IDE Plugin How it works • SDK SAPWebIDE  Documentation  Tutorials  Adding a pane … • Plugin.json › Configuration • Service › Call your SAPUI5 View • SAPUI5 View › Implement your own functionalities
  40. 40. SAP Web IDE Plugin How it works • Plugin.json › Define required services › Define your service › Connect a specific perspective area to the service • Define a view  Mapped to the service • Map the view to a perspective and area › Connect a command to the service • Define a command • Map the command to the perspective
  41. 41. SAP Web IDE Plugin How it works • Service › Extend sap.watt.common.platform.service.ui.AbstractPart › Implement the getContent function • Load your own SAPUI5 view here
  42. 42. SAP Web IDE Plugin How it works • Write result to the open file › Get open document • Contect.service.content.getCurrentDocument() › Write to the document • Docement.setContent(“dummy text”)
  43. 43. SAP Web IDE Plugin How to get it • Productive available • Add to your WebIDE › Create destination › Enable feature • On github: Custom Control Generator • SAP App Center
  44. 44. Summary & Conclusion • Extend webide is easy and fast › Wizard that generates sample • SDK provides guidance and APIs for creating features • Features will improve your daily job • Supportive community • Check the new SAP Web IDE Feature – Export to Plunker
  45. 45. Thank You. You are welcome to give feedback for this session in the UI5con Event App • More about feature development in SAP Web IDE: › sapwebide@sap.com • More about UI5 custom control feature: › Wouter Lemaire, wouter.lemaire@flexso.com

×