Course announcements

  • This course is designed to give participants foundational knowledge and experience with HTML5 and openUI5. The course will begin with an introduction to the basics of web programming techniques using HTML5, CSS3, JavaScript, and jQuery. There will be hands-on exercises performed during the course to gain experience with the HTML5 topics covered in the course.
  • After gaining the pre-requisite knowledge of HTML5, participants will move on to gaining experience and a foundational understanding of SAP’s openUI5 framework. Learners will work directly with the framework and the tools needed to begin developing SAP Fiori-like desktop and mobile applications that adhere to the SAP’s User Experience design strategy. Applications will be developed on both the Eclipse and SAP Web IDE platforms to give learners a variety of options in their own development efforts.
  • This course is a pre-requisite course for the courses on SAP SAPUI5 and the advanced SAP Fiori and SAPUI5 development courses, especially if a developer is new to the field of web development and openUI5.

Goals

  • This course will prepare you to:
    • Create web apps using basic HTML5 and CSS3
    • Develop web apps that are more interactive through JavaScript programming
    • Further improve web app development by using parts of jQuery and jQueryUI
    • Perform design decisions for openUI5 desktop and mobile applications
    • Create the necessary HANA Cloud Platform account to configure HCPms
    • Develop desktop and mobile applications using the openUI5 framework, Eclipse, HANA Cloud Platform and SAP Web IDE

Audience

  • Developer
  • Developer Consultant
  • Solution Architect
  • Business Process Owner / Team Lead / Power User

Prerequisites

Essential

Recommended

  • Understanding of HTML and the Internet

Course based on software release

  • SAP S/4HANA WTS + local version SAP Web IDE

Content

  • Foundations of HTML
    • Describe and write HTML5 and CSS code
    • Explore Development Tools
    • Work with Basic HTML-Elements and Semantic Markups
    • Implement User Friendly Web Forms
    • Work with HTML5-Custom Attributes
  • Foundation of CSS
    • Describe CSS-Essentials
    • Work with Pseudoclasses
  • Foundations of JavaScript
    • Understand Object-Oriented (OOP) Programming with JavaScript
    • Explore JavaScript Language Basics
    • Work with Primitive Data Types, Reference Types, and Operators
    • Implement Statements in JavaScript
    • Understand JavaScript-Scopes and Context Execution
    • Understand error handling in JavaScript
    • Explore DOM manipulation concepts of JavaScript
    • Work with events
    • Use http-Requests and AJAX
    • Work with Promises
  • Foundations of jQuery
    • Understand jQuery-Foundation
    • Work with Selectors
    • Understand jQuery Eventing
    • Use Styling and Animation
    • Manipulate the DOM
    • Use AJAX with jQuery
  • OpenUI5 Overview
    • Explain SAP User Experience Strategy
    • Explore Key Enablement Tools for SAP User Experience
    • Describe SAP Fiori in Relation to User Experience
    • Understand OpenUI5 Architecture
    • Explore the Relationship Between OpenUI5 and SAP Fiori
    • Explore the Differences Between OpenUI5 and SAPUI5
  • OpenUI5 Development Options
    • Install the OpenUI5 Eclipse Plugin
    • Set up a HANA Cloud Platform Account
    • Explore the Basics of SAP WEB IDE
  • OpenUI5 Project Basics
    • Develop using the Model View Controller (MVC) Design Pattern
    • Set up a Project
    • Configure and Use Core Elements of OpenUI5
  • Describe OpenUI5 Controls
  • OpenUI5 Application Debugging
    • Use Browser-based Debugging Tools
    • Explore available OpenUI5 Documentation
    • Explore SAP Web IDE Code Assist
  • Use layouts, UI Areas and create Custom Controls
  • Data Handling
  • Explore the model types JSON, XML and Odata
  • Perform Data Binding
  • Perform Property Binding
  • Perform Advanced Binding Techniques
  • Perform Advanced Binding Techniques: Master-Detail
  • Perform OData Query Options
  • Perform Common Data Operations: Format
  • Perform Common Data Operations: Sort and Filter
  • Perform Common Data Operations: Calculated Fields and Data Validation
  • Additional OpenUI5 Development Features, such as working with Resources, building Apps Using Modularization, performing Application Localization, working with Components, using Third-party Libraries, optimizing OpenUI5 Apps and OpenUI5 branding with themes and styles