Ui5Strap
  • About
  • Manual
  • API
  • Code Examples
  • Demos
  • License

Table of Contents

  •   Quickstart
    •   Installation
    •   Hello World
    •   Run

Basics

  •   Project Structure
    •   File Structure
    •   Binaries
    •   Build Tools
    •   Dev Server
    •   Web App Folder
  •   Bootstrapping
    •   Index File
    •   App Icons
    •   Splash Screen
    •   Initialization
  •   Configuration
    •   Overview
    •   App Settings
    •   Developers & Licenses
    •   Environments
    •   Stylesheets
    •   Root Navigation
    •   Pages
    •   Routing
    •   Libraries
    •   Models
    •   Options
    •   Components
    •   Actions
    •   Events
    •   Scripts
  •   Layout
    •   Using Controls
    •   Composing Views
    •   Fragments
  •   Styling
    •   Themes
    •   Custom Style
    •   Style Options
  •   Binding
    •   Element Binding
    •   Property Binding
    •   Aggregation Binding
    •   Formatters
  •   Logic
    •   Controllers
    •   Events
    •   Actions

Appendix

  •   Change Log
    •   0.11.x -> 1.0.0
    •   1.0.0 -> 1.0.1

  Formatters

Simple Formatter

A Simple example to convert data from a model.

  Data
{
    "article" : {
        "caption" : "hello world"
    }
}
  helloworld/controller/SimpleFormatter.controller.js
/**
* Simple Formatter Controller.
*/
sap.ui.define(['pks/ui5strap/viewer/Controller', 'sap/ui/model/json/JSONModel'], function(Controller, JSONModel){
	
    "use strict";
	
    var controllerImpl = {
        /**
        * Called when the view has been initialized.
        */
        onInit : function(){
            //We make the data available as model in the view.
            var oData = {
                "article" : {
                    "caption" : "hello world"
                }
            };
		
            var oModel = new JSONModel(oData);
			
            this.getView().setModel(oModel, "DATA");
        },
		
        /**
        * Formatter function to transform "hello world" to "Hello, world!"
        */
        formatCaption : function(sCaption){
            var aParts = sCaption.split(/\s/);	
            
            return jQuery.sap.charToUpperCase(aParts[0]) + ", " + aParts[1] + "!";		
        }
    };
	
    //Return constructor
    return Controller.extend("mycompany.helloworld.controller.SimpleFormatter", controllerImpl);

});
  helloworld/view/SimpleFormatter.view.xml
<!-- Formatter Example View -->
<sapUiCoreMvc:View controllerName="mycompany.helloworld.controller.SimpleFormatter" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
                      xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
    <!-- START Page Content -->

    <Container type="Website">
        <!-- We bind the caption to the Heading's text property. The controller's function formatCaption is used to convert the value. -->
        <Heading text="{path:'DATA>/article/caption', formatter:'.formatCaption'}" level="1" />
    </Container>
    
    <!-- END Page Content -->
</sapUiCoreMvc:View>

Multiple Parts Formatter

Formatter example with multiple parts.

  Data
{
    "person" : {
        "firstName" : "John",
        "lastName" : "Doe"
    }
}
  helloworld/controller/MultiplePartsFormatter.controller.js
/**
* Multiple Parts Controller.
*/
sap.ui.define(['pks/ui5strap/viewer/Controller', 'sap/ui/model/json/JSONModel'], function(Controller, JSONModel){
	
    "use strict";
	
    var controllerImpl = {
        /**
        * Called when the view has been initialized.
        */
        onInit : function(){
            //We make the data available as model in the view.
            var oData = {
                "person" : {
                    "firstName" : "John",
                    "lastName" : "Doe"
                }
            };
		
            var oModel = new JSONModel(oData);
			
            this.getView().setModel(oModel, "DATA");
        },
		
        /**
        * Formatter function to join the person's first and last name.
        */
        formatName : function(sFirstName, sLastName){
            return sFirstName + " " + sLastName;	
        }
    };
	
    //Return constructor
    return Controller.extend("mycompany.helloworld.controller.MultiplePartsFormatter", controllerImpl);

});
  helloworld/view/MultiplePartsFormatter.view.xml
<!-- Formatter Example View -->
<sapUiCoreMvc:View controllerName="mycompany.helloworld.controller.MultiplePartsFormatter" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
                      xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
    <!-- START Page Content -->

    <Container type="Website">
        <!-- We bind the caption to the Heading's text property. The controller's function formatCaption is used to convert the value. -->
        <Heading text="{parts:[{path:'DATA>/person/firstName'}, {path:'DATA>/person/lastName'}], formatter:'.formatName'}" level="1" />
    </Container>
    
    <!-- END Page Content -->
</sapUiCoreMvc:View>

© 2013 - 2023 PKSoftware.de

  • Contact