Show TOC

WalkthroughLocate this document in the navigation structure

In this tutorial we will introduce you to all major development paradigms of SAPUI5.

Despite the simplicity of the UI, we strive for a proper setup of modules, structuring of application code and adherence to code conventions. As such this tutorial represents a best practice for building apps with SAPUI5.

The UI might be a bit inconsistent in some places – don’t take it as a UI design guideline. We'll show you around using minimal code changes in each step.

Caution

Some steps of this tutorial use features that are only available as of SAPUI5 version 1.30. If you use a lower version of the library you might not be able to see the expected result. Whenever suitable, we point out alternatives for lower releases.

We first introduce you to the basic development paradigms like Model-View-Controller and establish the basic structure of our application. We'll do this along the classic example of “Hello World” and start a new app from scratch. Next, we'll introduce the fundamental data binding concepts of SAPUI5 and extend our app to show a list of invoices. We'll continue to add more functionality by adding navigation, extending controls, and making our app responsive.Finally we'll look at the testing features and the built-in support tools of SAPUI5.

Preview
Tip

You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, copy it to your workspace and make sure that the application runs by calling the webapp/index.html file.

You can view and download the files for all steps in the Explored app in the demo kit under Walkthrough. Depending on your development environment you might have to adjust resource paths and configuration entries.

For more information check the following sections of the tutorials overview page (see Tutorials):
  1. Step 1: Hello World!
    As you know SAPUI5 is all about HTML5. Let’s get started with building a first “Hello World” with only HTML.
  2. Step 2: Bootstrap
    Before we can do something with SAPUI5, we need to load and initialize it. This process of loading and initializing SAPUI5 is called bootstrapping. Once this bootstrapping is finished, we simply display an alert.
  3. Step 3: Controls
    Now it is time to build our first little UI by replacing the “Hello World” text in the HTML body by the SAPUI5 control sap.m.Text. In the beginning, we will use the JavaScript control interface to set up the UI, the control instance is then placed into the HTML body.
  4. Step 4: XML Views
    Putting all our UI into the index.html file will very soon result in a messy setup and there is quite a bit of work ahead of us. So let’s do a first modularization by putting the sap.m.Text control into a dedicated view. SAPUI5 supports multiple view types (XML, HTML, JavaScript). We choose XML as this produces the most readable code and will force us to separate the view declaration from the controller logic. Yet the look of our UI will not change.
  5. Step 5: Controllers
    In this step, we replace the text with a button and show the “Hello World” message when the button is pressed. The handling of the button's press event is implemented in the controller of the view.
  6. Step 6: Modules
    In SAPUI5, resources are often referred to as "modules". In this step, we replace the alert from the last exercise with a proper "Message Toast" from the sap.m library. The required modules are enabled to be loaded asynchronously.
  7. Step 7: JSON Model
    Now that we have set up the view and controller, it’s about time to think about the "M" in MVC. We will add an input field to our app, bind its value to the model, and bind the same value to the description of the input field. The description will be directly updated as the user types.
  8. Step 8: Translatable Texts
    In this step we move the texts of our UI to a separate resource file. This way, they are all in a central place and can be easily translated into other languages. This process of internationalization – in short i18n – is achieved in SAPUI5 by using a special resource model and the standard data binding syntax, but without preceding /.
  9. Step 9: Component Configuration
    After we have introduced all three parts of the Model-View-Controller (MVC) concept, we now come to another important structural aspect of SAPUI5. In this step, we will encapsulate all UI assets in a component that is independent from our index.html file. Components are independent and reusable parts used in SAPUI5 applications. Whenever we access resources, we will now do this relatively to the component (instead of relatively to the index.html). This architectural change allows our app to be used in more flexible environments than our static index.html page, such as in a surrounding container like the SAP Fiori launchpad.
  10. Step 10: Descriptor for Applications
    All application-specific configuration settings will now further be put in a separate descriptor file called manifest.json. This clearly separates the application coding from the configuration settings and makes our app even more flexible. For example, all SAP Fiori applications are realized as components and come with a descriptor file in order to be hosted in the SAP Fiori launchpad.
  11. Step 11: Pages and Panels
    After all the work on the app structure it’s time to improve the look of our app. We will use two controls from the sap.m library to add a bit more "bling" to our UI. You will also learn about control aggregations in this step.
  12. Step 12: Shell Control as Container
    Now we use a shell control as container for our app and use it as our new root element. The shell takes care of visual adaptation of the application to the device’s screen size by introducing a so-called letterbox on desktop screens.
  13. Step 13: Margins and Paddings
    Our app content is still glued to the corners of the letterbox. To fine-tune our layout, we can add margins and paddings to the controls that we added in the previous step. But instead of manually adding CSS to the controls, we will use the standard classes provided by SAPUI5. These classes take care of consistent sizing steps, left-to-right support, and responsiveness.
  14. Step 14: Custom CSS and Theme Colors
    Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like.
  15. Step 15: Nested Views
    Our panel content is getting more and more complex and now it is time to move the panel content to a separate view. With that approach, the application structure is much easier to understand, and the individual parts of the app can be reused.
  16. Step 16: Dialogs and Fragments
    In this step, we will take a closer look at another element which can be used to assemble views: the fragment.
  17. Step 17: Fragment Callbacks
    Now that we have integrated the dialog, it's time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.
  18. Step 18: Icons
    Our dialog is still pretty much empty. Since SAPUI5 is shipped with a large icon font that contains more than 500 icons, we will add an icon to greet our users when the dialog is opened.
  19. Step 19: Reuse Dialogs
    In step 16 we created a dialog as fragment, because we wanted it to be reusable across views or across our whole app. But we placed the logic for retrieving the dialog instance and for opening and closing it respectively in the controller of the HelloPanel view. Sticking to this approach would require copying and pasting the code to the controller of each view that needs our dialog. This would of course cause an undesired code redundancy we definitely want to avoid. In this step, we will implement the solution to this problem: We now expand our reuse concept and invoke the dialog at component level.
  20. Step 20: Aggregation Binding
    Now that we have established a good structure for our app, it's time to add some more functionality. We start exploring more features of data binding by adding some invoice data in JSON format that we display in a list below the panel.
  21. Step 21: Data Types
    The list of invoices is already looking nice, but what is an invoice without a price assigned? Typically prices are stored in a technical format and with a '.' delimiter in the data model. For example, our invoice for pineapples has the calculated price 87.2 without a currency. We are going to use the SAPUI5 data types to format the price properly, with a locale-dependent decimal separator and two digits after the separator.
  22. Step 22: Expression Binding
    Sometimes the predefined types of SAPUI5 are not flexible enough and you want to do a simple calculation or formatting in the view - that is where expressions are really helpful. We use them to format our price according to the current number in the data model.
  23. Step 23: Custom Formatters
    If we want to do a more complex logic for formatting properties of our data model, we can also write a custom formatting function. We will now add a localized status with a custom formatter, because the status in our data model is in a rather technical format.
  24. Step 24: Filtering
    In this step, we add a search field for our product list and define a filter that represents the search term. When searching, the list is automatically updated to show only the items that match the search term.
  25. Step 25: Sorting and Grouping
    To make our list of invoices even more user-friendly, we sort it alphabetically instead of just showing the order from the data model. Additionally, we introduce groups and add the company that ships the products so that the data is easier to consume.
  26. Step 26: Remote OData Service
    So far we have only worked with local JSON data, but now we will access a real OData service. Instead of implementing an own OData service we will simply use the publicly available Northwind OData service to visualize remote data. You will be surprised how little needs to be changed in order to make this work!
  27. Step 27: Mock Server Configuration
    We just ran our app against a real service, but for developing and testing our app we do not want to rely on the availability of the “real” service or put additional load on the system where the data service is located. This system is the so-called back-end system that we will now simulate with a SAPUI5 feature called mock server. It serves local files, but it simulates a back-end system more realistically than just loading the local data. We will also change the model instantiation part so that the model is configured in the descriptor and instantiated automatically by SAPUI5. This way, we do not need to take care of the model instantiation in the code.
  28. Step 28: Unit Test with QUnit
    Now that we have a test folder in the app, we can start to increase our test coverage. Actually, every feature that we added to the app so far, would require a separate test case. We have totally neglected this so far, so let’s add a simple unit test for our custom formatter function from Step 23. We will test if the long text for our status is correct by comparing it with the texts from our resource bundle.
  29. Step 29: Integration Test with OPA
    If we want to test interaction patterns or more visual features of our app, we can also write an integration test. We haven’t thought about testing our interaction with the app yet, so in this step we will check if the dialog actually opens when we click the “Say Hello with Dialog” button. We can easily do this with OPA5, a feature of SAPUI5 that is easy to set up and is based on JavaScript and QUnit. Using integration and unit tests and running them consistently in a continuous integration (CI) environment, we can make sure that we don’t accidentally break our app or introduce logical errors in existing code.
  30. Step 30: Debugging Tools
    Even though we have added a basic test coverage in the previous steps, it seems like we accidentally broke our app, because it does not display prices to our invoices anymore. We need to debug the issue and fix it before someone finds out. Luckily, SAPUI5 provides a couple of debugging tools that we can use within the app to check the application logic and the developer tools of modern browsers are also quite good. We will now check for the root cause.
  31. Step 31: Routing and Navigation
    So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages. In this step, we will use the SAPUI5 navigation features to load and show a separate detail page that we can later use to display details for an invoice. In the previous steps, we defined the page directly in the app view so that it is displayed when the app is loaded. We will now use the SAPUI5 router class to load the pages and update the URL for us automatically. We specify a routing configuration for our app and create a separate view for each page of the app, then we connect the views by triggering navigation events
  32. Step 32: Routing with Parameters
    We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. To make this work, we have to pass over the information which item has been selected to the detail page and show the details for the item there.
  33. Step 33: Routing Back and History
    Now we can navigate to our detail page and display an invoice, but we cannot go back to the overview page yet. We'll add a back button to the detail page and implement a function that shows our overview page again.
  34. Step 34: Custom Controls
    In this step, we are going to extend the functionality of SAPUI5 with a custom control. We want to rate the product shown on the detail page, so we create a composition of multiple standard controls using the SAPUI5 extension mechanism and add some glue code to make them work nicely together. This way, we can reuse the control across the app and keep all related functionality in one module.
  35. Step 35: Responsiveness
    In this step, we improve the responsiveness of our app. SAPUI5 applications can be run on phone, tablet, and desktop devices and we can configure the application to make best use of the screen estate for each scenario. Fortunately, SAPUI5 controls like the sap.m.Table already deliver a lot of features that we can use.
  36. Step 36: Device Adaptation
    We now configure the visibility and properties of controls based on the device that we run the application on. By making use of the sap.ui.Device API and defining a device model we will make the app look great on many devices.
  37. Step 37: Content Density
    In the last step of our Walkthrough tutorial, we adjust the content density based on the user’s device. SAPUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.
  38. Summary
    You should now be familiar with the major development paradigms and concepts of SAPUI5 and have created a very simple first app. You are now ready to build a proper app based on what you've learned.