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 .
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
Nice Blog DJ.
Thanks,
Syam
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
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
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
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
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
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
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
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
Hi I created a table by using XML view..
The table is displaying but without data in it..
Thanks
Anusha.G
Nice effort DJ
My reference blog in my journey to becoming UI5 developer.
Thank you
Thanks for information. Was really helpful.
Regards,
Pavan