Skip to content

Latest commit

 

History

History
181 lines (147 loc) · 11.3 KB

INDEX.md

File metadata and controls

181 lines (147 loc) · 11.3 KB
Raw

Core

Bootstrap

Load the SAPUI5 framework

Application descriptor (Manifest)

  1. Define application id - mandatory / must be unique for same launchpad
  2. Define application title and description
  3. Define root view
  4. Define models
  5. Define routing (in-app navigation) properties
  6. Define resource files

Component

  1. Define application metadata - e.g. app descriptor file
  2. Call overridden init function of base component - obligatory
  3. Set models or other application defaults

Routing (In app navigation)

  1. Set routing configuration, routes and targets in manifest
  2. Add parameter path if data is passed accross views. Format is "/{parameterName}".
  3. Initialize router in component
  4. Get router object
  5. Set parameter and navigate to a router
  6. In next controller, attach PatternMatched event handler to the route
  7. Get value of passed parameter in PatternMatched event handler

Route back

  1. Add navigation button to page
  2. Set handler for navigation button
  3. Load history module into controller
  4. Define navigation button handler

Custom CSS

  1. Create CSS to be used
  2. Introduce CSS file as a resource
  3. Set class attribute of control with custom CSS class

Custom control

  1. Create control with init, renderer and other required functions
  2. Load custom control library into view
  3. Place custom control in view
  4. Set handler for fired custom event
  5. Define event handler function of custom event

Model

JSON (Dynamic instantiation)

  1. Load module into controller
  2. Create new JSON data
  3. Create model object
  4. Set JSON data into model object
  5. Bind model property in view
  6. Set compatibility version to allow complex binding - to mix constant values and multiple binding paths like: 
    description="Hello {/recipient/name}"

Internationalization (i18n)

  1. Define text id and actual text in i18n.properties file - use {i} as placeholders
  2. Define resource model path in app descriptor
  3. Access text in controller
    1. Get resource bundle object
    2. Get text string
      OR
  4. Access text in view
    1. Bind text path

Data Binding

Aggregation binding

  1. Place parent control
  2. Set absolute path of aggregation items
  3. Set sorting and grouping
  4. Place control aggregation
  5. Set relative path of item property

Currency

  1. Set value and currency key paths
  2. Set number type as currency
  3. Set format options

Custom formatter

  1. Define formatter function
  2. Load module into controller
  3. Set formatter module to a controller property
  4. Call formatter function in XML view

Expression binding

Write JavaScript code in XML view with equals sign

Filter (Dynamic)

  1. Set id of aggregation parent
  2. Load modules into controller
  3. Create an array of filter objects
  4. Get binding object of aggregation
  5. Set filter array into binding object

Sort & Group

  1. Add sorter object to aggregation binding
  2. Set relative sorting path
  3. Set group to true - if grouping required

Controls

Action

Button (Static)

  1. Set icon
  2. Set text
  3. Set click handler
  4. Define click handler function

Container

Page

  1. Place page control
  2. Set header content
  3. Set main content - aggregation

Panel

  1. Place panel control
  2. Set header text
  3. Set CSS width
  4. Set expandable/collapsible
  5. Set initial expanded state

Display

FormattedText (static)

  1. Place control
  2. Set html content

Icon (static)

  1. Load core library
  2. Place icon control
  3. Set icon image - Browse icon gallery
  4. Set CSS font-size

ObjectHeader (static)

  1. Place control
  2. Set number and unit
  3. Set title
  4. Set attributes

List

Table

  1. Place table control
  2. Set items aggregation binding
  3. Place header toolbar
  4. Define column properties
  5. Place items aggregation

Popup

Dialog (in reusable fragment)

  1. Create fragment
  2. Place dialog control
  3. Set title
  4. Set content
  5. Define close button
  6. Set close handler
  7. Create a separate controller for dialog - to make it reusable across views
  8. Define close handler function
  9. Load new controller into component
  10. Initialize dialog on application start
  11. Define open handler function
  12. Open dialog in any controller
  13. Destroy dialog on application exit

Message Toast

  1. Load module into controller
  2. Display message

User Input

Input (Static)

  1. Set value binding
  2. Set binding update trigger
  3. Set layout width