Skip to Content

Thanks

Inspired by You Don’t Know JS (book series)

What are we doing here today?

We want to know how to develop an openui5 application using sap.ui.core.mvc.JSView, sap.ui.core.mvc.JSONViewsap.ui.core.mvc.HTMLView and sap.ui.core.mvc.XMLView. Also we want to know how to connect sap.ui.core.mvc.Controller with sap.ui.core.mvc.View, base class for all types of views. As core source code for the project and quick start you may use project from my third article.

Introduction

A goal of my blog is do not teach you how to use openui5 library from SAP in right way. The openui5 was designed to solve one issue with several possible ways. So you are able to choose.

The goal is sharing my personal experience of using the library and some other web development stuff, which helps you to speed up your development using openui5.

All code samples are developed on MacOS environment. On other environments (Linux or Windows) process should be nearly the same.

Pre-requirements

Minimal:

Additional:

Let’s go

First of all I recommend you to create project as described in my third article (preferable). Or just clone project from repository (for lazy developers)

git clone https://github.com/sergiykh/you-do-not-know-openui5.git
cd you-do-not-know-openui5
git checkout tags/app-as-component

First of all, project structure will be changed a little bit

├── .babelrc
├── .eslintrc (new)
├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── gulpfile.js
├── package.json
├── proxies.js
├── src
    ├── app
        ├── controllers
        |   ├── CreateCustomer.controller.js => (New)
        |   ├── CustomerDetail.controller.js => (New)
        |   ├── Customer.controller.js => (New)
        |   ├── Login.controller.js => (New)
        ├── views
        |   ├── CreateCustomer.view.html => (New)
        |   ├── CustomerDetail.view.xml => (New)
        |   ├── Customer.view.json => (New)
        |   ├── Login.view.js => (New)
        ├── pages
        |   ├── CreateCustomer.page.js => (New)
        |   ├── CustomerDetail.page.js => (Changed)
        |   ├── Customer.page.js => (Changed)
        |   ├── Login.page.js => (Changed)
        ├── Component.js => (Chaged)
        ├── manifest.json
    ├── app.config.js
    ├── app.startup.js
    └── index.html

In src/controllers/Login.controller.js

export default sap.ui.controller("app.controllers.Login", {

  navToCustomers() {

    app.to("customers");
  }
})

In src/controllers/Customers.controller.js

export default sap.ui.controller("app.controllers.Customers", {

  navToCustomerDetail() {

    app.to("customerDetail");
  }
})

In src/controllers/CustomerDetail.controller.js

import MessageToast from "sap/m/MessageToast";

export default sap.ui.controller("app.controllers.CustomerDetail", {

  printDetails() {

    MessageToast.show("Customer's Detail Printed");
  }
})

In src/controllers/CreateCustomer.controller.js

export default sap.ui.controller("app.controllers.CreateCustomer", {

  navToCustomerDetail() {

    app.to("customerDetail");
  }
})

In src/views/Login.view.js

import Input from "sap/m/Input";
import Label from "sap/m/Label";
import Button from "sap/m/Button";

export default sap.ui.jsview("app.views.Login", {

  getControllerName: function() {
    return "app.controllers.Login";
  },

  createContent: function(oController) {
    return [
      new Label({
        text: "Username"
      }),
      new Input({
        placeholder: "type here"
      }),
      new Label({
        text: "Password"
      }),
      new Input({
        placeholder: "type here"
      }),
      new Button({
        text : "Login",
        press : [oController.navToCustomers, oController]
      })
    ]
  }
})

In src/views/Customers.view.json

{
  "Type":"sap.ui.core.mvc.JSONView",
  "controllerName":"app.controllers.Customers",
  "content": {
    "Type": "sap.m.ScrollContainer",
    "content": [
      {
        "Type": "sap.m.StandardTile",
        "icon": "sap-icon://customer",
        "title": "Customer 1",
        "info": "Active",
        "press": "navToCustomerDetail"
      },
      {
        "Type": "sap.m.StandardTile",
        "icon": "sap-icon://customer",
        "title": "Customer 2",
        "info": "Not Active",
        "press": "navToCustomerDetail"
      }
    ]
  }
}

We are using sap.m.ScrollContainer here instead of sap.m.TileContainer, which is deprecated.

In src/views/CustomerDetail.view.xml

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="app.controllers.CustomerDetail">

  <Label
    text="Username"/>
  <Input
    value="Awesome Username"/>
  <Label
    text="Email"/>
  <Input
    value="Awesome@Email.com"/>
  <Button
    text="Print Details"
    press="printDetails"/>

</mvc:View>

In src/views/CreateCustomer.view.html

<template data-controller-name="app.controllers.CreateCustomer">
  <div data-sap-ui-type="sap.m.Label" data-text="Name"></div>
  <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
  <div data-sap-ui-type="sap.m.Label" data-text="Surname"></div>
  <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
  <div data-sap-ui-type="sap.m.Label" data-text="Password"></div>
  <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
  <div data-sap-ui-type="sap.m.Label" data-text="Repeat Password"></div>
  <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
  <div data-sap-ui-type="sap.m.Button" data-text="Save and Go" data-press="navToCustomerDetail"></div>
</template>

Update src/pages/Login.page.js

// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";

// Create object and export as module to use in future
export default new Page("login", {

  title: "Login",
  showNavButton: false,
  // Now content of Page is JSView
  // We also can use other factory function instead of sap.ui.view()
  // content: sap.ui.jsview("login-view", "app.views.Login")
  content: sap.ui.view({
    id:"login-view",
    type:sap.ui.core.mvc.ViewType.JS,
    viewName:"app.views.Login"
  })
})

Update src/pages/Customers.page.js

// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";

// Create object and export as module to use in future
export default new Page("customers", {

  title: "Customers",
  showNavButton: true,
  navButtonPress : function () {
    app.back();
  },
  // Now content of Page is JSONView
  // We also can use other factory function instead of sap.ui.view()
  // content: sap.ui.jsonview("customers-view", "app.views.Customers")
  content: sap.ui.view({
    id:"customers-view",
    type:sap.ui.core.mvc.ViewType.JSON,
    viewName:"app.views.Customers"
  })
})

Update src/pages/CustomerDetail.page.js

// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";

// Create object and export as module to use in future
export default new Page("customerDetail", {

  title: "Customer Detail",
  showNavButton: true,
  navButtonPress : function () {
    app.back();
  },
  // Now content of Page is XMLView
  // We also can use other factory function instead of sap.ui.view()
  // content: sap.ui.xmlview("customer-detail-view", "app.views.CustomerDetail")
  content: sap.ui.view({
    id:"customer-detail-view",
    type:sap.ui.core.mvc.ViewType.XML,
    viewName:"app.views.CustomerDetail"
  })
})

In src/pages/CreateCustomer.page.js

// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";

// Create object and export as module to use in future
export default new Page("create-customer", {

  title: "Create Customer",
  showNavButton: true,
  navButtonPress : function () {
    app.back();
  },
  // Now content of Page is HTMLView
  // We also can use other factory function instead of sap.ui.view()
  // content: sap.ui.htmlview("create-customer-view", "app.views.CreateCustomer")
  content: sap.ui.view({
    id:"create-customer-view",
    type:sap.ui.core.mvc.ViewType.HTML,
    viewName:"app.views.CreateCustomer"
  })
})

Looks like everything is ready! Now we can issue gulp default task in command line.

gulp

Content of src folder will be validated via Eslint (.js), compiled (.js) via Babel, copied to root path in-memory, watchers will be started, browser-sync server will be started and our app will be opened in Chromium browser.

In command line we see the following

In browser we see the following

So, it is the end for today. Source code for our project can be found here. Feel free to experiment with source code, because it is only one way to become a developer. And Happy Coding!

Next topic of “You Don’t Know Openui5” series will be soon.

Summary

So, we enhance our simple openui5 application:

  • Inside every pages we use view now: JS, JSON, HTML, XML. Openui5 recommends to use XML views. I like this approach but for some case better to use other types also. So, do not be limited.

Something to read

Previous articles

  1. You Don’t Know Openui5: bootstrapping
  2. You Don’t Know Openui5: app and pages
  3. You Don’t Know Openui5: app as component
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply