I’ve been diving into UI5 XML views and sharing the love recently – see Mobile Dev Course W3U3 Rewrite – XML Views – An Intro (as part of Mobile Dev Course W3U3 Rewrite – Intro), and the XML view based templates and snippets in my SublimeUI5 Package for the “developer’s choice” Sublime Text editor.

Recently John Patterson supplied a JSBin example of an OData sourced table with a filter on dates, in answer to Using Table filter when a formatter function is used.

This was a very nice example but I thought it would be an interesting exercise to convert it to XML, for a number of reasons:

  • XML views are important (in the context of learning about and extending Fiori apps)
  • it would be a good test of my latest #SublimeUI5 snippet “index – Mobile – Single Page – MVC” (indexmspmvc) (Note 1)
  • all of the XML view work I’ve done so far has involved controls predominantly from the sap.m library (as they’re also what the Fiori apps are built with) so I wantd to try using non-sap.m controls (Note 2)

So I did, and have made it available in the sapui5bin repo on Github here:

sapui5bin/SinglePageExamples/ODataDateTableFilter.html at master · qmacro/sapui5bin · GitHub

Open up this link in a separate window to view it and read the rest of the post.

I’ll cover the “single page MVC” concept in another post; for now, here are a few notes to help you navigate:

  • the XML view is defined in a script tag with the id “view1” and brought to life with sap.ui.xmlview({ viewContent: jQuery(‘#view1’).html() })
  • I’ve specified the XML namespace declarations (xmlns) for the relevant libraries, having the most common controls’ namespace (sap.ui.table) as the default
  • I’ve used the extended binding syntax for the Table’s “rows” aggregation, to include the OData select parameters
  • I’ve declared the date formatting ‘dateShort’ (for the third column) in a namespace (util.formatting) with jQuery.sap.declare
  • We have a local controller (which doesn’t actually have anything to do)

The one thing I’m not entirely convinced about is having to set the filterType property on the BirthDate column “procedurally” (in JavaScript); perhaps I’ll get round to looking into how to do this particular bit a different way at some stage.

Anyway, I thought this might be more useful insight into XML views and single page MVC examples.

Share & enjoy!

dj

Note 1: This “single page MVC” idea is something I’ve wanted to put together and share for a while; it’s easy to write a single page demo UI5 app but not so easy to do that and involve the MVC concept as well – in a single file … until now.

Note 2: The SAP Fiori Wave 1 apps have views that are written declaratively in HTML; the SAP Fiori Wave 2 and 3 apps have views written in XML, using the sap.m controls, with a smattering of sap.ui.layout controls too

To report this post you need to login first.

13 Comments

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

  1. John Patterson

    Hi DJ

    Single page MVC is very cool, will be handy for problem solving.

    I had a look for a possible solution for the filter type property, looks like

    sap.ui.table.Column.prototype._parseFilterValue is expecting a function or an object

    Cheers

    jsp

    (0) 
    1. DJ Adams Post author

      Thanks JSP

      yeah, that property (and the error, when you try to assign it directly), is a bit odd. Hoping to get a bit of time this week to look into it a bit more.

      cheers!

      dj     

      (0) 
      1. Jason Moors

        Hi DJ,

        Thanks for another great example!

        I had a quick look at this and looks like the parsing of the property type of ANY is not parsing to an object.

        The parseScalarType function in sap.ui.core.XMLTemplateProcessor calls function sap.ui.base.DataType.prototype.parseValue to parse the property value which doesn’t support the “any” type, so just returns the string value.

        “filterType” : {type : “any“, group : “Misc”, defaultValue : null},

        So looks like you either need to define a function as John suggested, or keep your existing mechanism.

        /**

        * Parses the given string value and converts it into the specific data type.

        * @param {string} sValue string representation for a value of this type

        * @return the value in the correct internal format

        * @public

        */

        sap.ui.base.DataType.prototype.parseValue = function(sValue) {

        // currently this function considers to handle primitive values

        // – in future may be other values might be also relevant.

        var sType = this.getName();

        if (sType == “string”) {

          return sValue;

        } else if (sType == “boolean”) {

          return sValue == “true”;

        } else if (sType == “int”) {

          return parseInt(sValue, 10);

        } else if (sType == “float”) {

          return parseFloat(sValue);

        } else if (sType == “object”) {

          return sValue ? jQuery.parseJSON(sValue) : null;

        } else {

          // support for other types like e.g.

          // sap.ui.core.CSSSize (just apply)

          return sValue;

        }

        };

        Regards,

        Jason

        (0) 
  2. Riley Rainey

    Hi DJ,

    Thanks for this article.  I was wondering if you might, by chance, be familiar with how to add style to controls in an XML view.  For example, I’d like to add “ButtonStyle.Emph” to a Button on a View.  I’ve tried several permutations of adding the ‘style’ attribute but I can’t seem to find the magic form that works.  The documentation doesn’t seem to cover this.

    Any ideas?

    Riley

    (0) 
    1. Jason Moors

      Hi Riley,

      It’s problem worth raising a new question rather tha asking here. Are you trying to create a sap.m or sap.ui.common button?

      The sap.ui.commons.Button you can use style=”Emph”

      <Button text=”test” style=”Emph” />

      Here is a simple example: http://jsbin.com/lafuzurixu/1/edit

      The sap.m.Button version has a type property to define the button type.

      <Button type=”Emphasized” text=”Emphasized” press=”onPress” />

      Regards,

      Jason

      (0) 
  3. Thiru Siva

    DJ,

      I created the following, but not sure how to Navigate between pages. Can you figure out the issue.

    <sap.ui.core.mvc:View

        controllerName=”thiru.vc.XMLViewController”

        xmlns=”sap.m”

        xmlns:sap.ui.core.mvc=”sap.ui.core.mvc”

        xmlns:sap.ui.commons=”sap.ui.core.commons”>

        <App id=”myApp” initialPage=”question” defaultTransitionName=”slide”>

            <pages>

                <Page id=”question” title=”Question”>

                    <content>

                        <Text text=”{/question}”></Text>

                        <Button text=”More details” press=”openDetail”></Button>

                    </content>

                </Page>

                <Page id=”details” title=”More details” showNavButton=”true” icon=”http://www.sap.com/global/ui/images/global/sap-logo.png” press=”doNavBack”>

                    <content>

                        <Text text=”Hello Mobile World!” maxLines=”0″></Text>

                    </content>

                </Page>

            </pages>

        </App>

    </sap.ui.core.mvc:View>

    Controller is as below

    sap.ui.controller(“thiru.vc.XMLViewController”, {

        onInit: function() {

            this.getView().setModel(new                sap.ui.model.json.JSONModel(“model/Questions.json”));

         openDetail: function(event) {

             var app = this.getView(“myApp”);

             this.to(“details”, “flip”);

    }

    });

    I could debug and get into the function openDetail in the controller, but the this.to function is not available and hence fails with error “Uncaught TypeError: undefined is not a function”.

    Any thoughts

    (0) 
    1. Maximilian Lenkeit

      The getView method doesn’t take a parameter and also, for the to method, you’ll need to pass the full id.

      Try the following instead:

      var app = this.byId(“myApp”);

      this.to(this.createId(“details”), “flip”);

      – Max

      (0) 
      1. Thiru Siva

        instead of “this.to” the code had to be changed to “app.to” and it worked like a charm. 🙂

        Brilliant, thanks. I was trying to understand the fundamentals and this one was proving to be a thorn in the flesh. 😕

        Regards

        Thiru

        (0) 

Leave a Reply