Using Expressions

This example adds a label that displays the current date and time.

The label's text is set by an expression (for the complete expression list see Use of Functions. No additional coding is required to add this label, you need only modify the layout XML. Add these lines following the last label definition:

            <!-- Define label showing the current date using an expression -->
            <UIElement type="label">
                <!-- The label text is showing the current date -->
                <P pid="text" value="{$_now()}"></P>
                <P pid="halign" value="center"></P>
                <P pid="margin_top" value="20pt"></P>
                <P pid="style" value="CustomLabel"></P>
            </UIElement>

The result:
Using Expressions

This is the final version of the layout_phone.xml:

<?xml version="1.0" encoding="UTF-8"?>
<MAF xmlns="http://schemas.sap.com/maf/2012/cfg">

    <!-- Define a binding ID - you can name it as you wish - it's recommended to keep it in synch with the collection name -->
    <!-- We are going to use this binding ID to refer to this collection throughout the XML -->
    <Binding bindingId="CustomersCollection" type="collection">
        <!-- the boType must match the collection href in the OData feed:
        
        ?xml version="1.0" encoding="utf-8" standalone="yes"?>
        <service xml:base="http://services.odata.org/Northwind/Northwind.svc/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns="http://www.w3.org/2007/app">
            <workspace>
            
            ...skipped for brevity
         
                <collection href="Customers">
                    <atom:title>Customers</atom:title>
         -->
        <P pid="boType" value="Customers"></P>
    </Binding>

    <!-- Define a "tile" - it translates to UIViewController -->
    <Tile tileId="First Extensible Screen">
        <!-- This is our root view -->
        <P pid="isRoot" value="true"/>
        
        <!-- Reference to the data binding which provides data for this tile -->
        <!-- Note that we are using the bindingId here -->
        <BindingRef ref="CustomersCollection"/>
        <!-- Define the layout container. All UI elements included in a layout container will be auto-arranged -->
        <LinearContainer layout="vertical">
            <!-- Define our label -->
            <UIElement type="label">
                <!-- Assign a static text to be displayed -->
                <P pid="text" value="Hello World! This is Extensibility!"></P>
                <P pid="halign" value="center"></P>
                <P pid="margin_top" value="20pt"></P>
                <P pid="style" value="CustomLabel"></P>
            </UIElement>  
            <!-- Define a label which shows the customer company name -->
            <UIElement type="label">
                <!-- The label text is showing real data coming from the OData feed http://services.odata.org/Northwind/Northwind.svc/Customers: 
                 <link rel="self" title="Customers" href="Customers" />
                 ...details skipped for brevity  
                 <entry>
                 <category term="NorthwindModel.Customer" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
                 <content type="application/xml">
                 <m:properties>
                 <d:CustomerID m:type="Edm.String">ALFKI</d:CustomerID>
                 <d:CompanyName m:type="Edm.String">Alfreds Futterkiste</d:CompanyName>
                 <d:ContactName m:type="Edm.String">Maria Anders</d:ContactName>
                 <d:ContactTitle m:type="Edm.String">Sales Representative</d:ContactTitle>
                 <d:Address m:type="Edm.String">Obere Str. 57</d:Address>
                 <d:City m:type="Edm.String">Berlin</d:City>
                 <d:Region m:type="Edm.String" m:null="true" />
                 <d:PostalCode m:type="Edm.String">12209</d:PostalCode>
                 <d:Country m:type="Edm.String">Germany</d:Country>
                 <d:Phone m:type="Edm.String">030-0074321</d:Phone>
                 <d:Fax m:type="Edm.String">030-0076545</d:Fax>
                 </m:properties>
                 </content>
                 </entry> 

Note that the company name is retrieved from the first entry.

The remaining entries can be visualized as well using a ListContainer (UITableViewController), see Managing Lists.

                -->
                <P pid="text" value="Company: {$CustomersCollection.CompanyName}"></P>
                <P pid="halign" value="center"></P>
                <P pid="margin_top" value="20pt"></P>
                <P pid="style" value="CustomLabel"></P>
            </UIElement>
            
            <!-- Define label showing the current date using an expression -->
            <UIElement type="label">
                <!-- The label text is showing the current date -->
                <P pid="text" value="{$_now()}"></P>
                <P pid="halign" value="center"></P>
                <P pid="margin_top" value="20pt"></P>
                <P pid="style" value="CustomLabel"></P>
            </UIElement>
            
        </LinearContainer>
    </Tile>
</MAF>