Skip to Content
Author's profile photo DJ Adams

UI5 XML Views – Another Example

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

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Syam Babu
      Syam Babu

      Nice Blog DJ.

      Thanks,

      Syam

      Author's profile photo John Patterson
      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

      Author's profile photo DJ Adams
      DJ Adams
      Blog 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     

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Riley Rainey
      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Maximilian Lenkeit
      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hi I created a table by using XML view..

      The table is displaying but without data in it..

      Thanks

      Anusha.G

      Author's profile photo Azhar Zartargar
      Azhar Zartargar

      Nice effort DJ

      Author's profile photo Timothy Muchena
      Timothy Muchena

      My reference blog in my journey to becoming UI5 developer.

      Thank you

      Author's profile photo Pavan Athreyas S J
      Pavan Athreyas S J

      Thanks for information. Was really helpful.

      Regards,

      Pavan