Skip to Content
0

Making an ObjectStatus item "active" and clickable

May 11 at 05:17 PM

59

avatar image

Hello All,

I'm trying to make an ObjectStatus item clickable. It seems to me that this should be easily done as there is a property to ObjectStatus of 'active' and the documentation says of it..."[this] Indicates if the ObjectStatus text and icon can be clicked/tapped by the user."

However, I've tried many ways to get this to work and it doesn't. I can do the same to ObjectAttribute and it works, but not ObjectStatus. Below is my code.

Note: The 'active' in the attributes is for illustration only. Also, you may ask if I can use something other than ObjectList. If you have a recommendation, please let me know. I'm using the Object List because of the nice 'favorite' ObjectMarker that I can easily employ.

_accountArea: function(sItemPath) {
	var masterList = this.getView().byId("masterList");
	var that = this;
	var itemTemplate = new sap.m.ObjectListItem({
		title: "{fullName}",
		type: "Active",
		press: [this.GoToDetail, this],
		showMarkers: true,
                firstStatus: new sap.m.ObjectStatus({
			text: "{MainAddress/phone}", 
this doesn't work->	active: true,
			icon: "sap-icon://call", 
			press: that.handleTelPress
		}),
		secondStatus: new sap.m.ObjectStatus({
			text: "{MainAddress/email}", 
this doesn't work->	active: "true", 
			icon: "sap-icon://email", 
			press: that.handleEmailPress
		}),
		attributes: [new sap.m.ObjectAttribute({
			text: "{roleDescription}", 
this works ->		active: true, 
			press: that.handleTelPress
		}), new sap.m.ObjectAttribute({
			text: "{MainAddress/street}"
		}), new sap.m.ObjectAttribute({
			text: "{MainAddress/city}, 
			{MainAddress/regionID} 
			{MainAddress/postcode}"
		})
		],
		markers: [new sap.m.ObjectMarker({
			type: {
				path: "favorite",
				formatter: that.formatter.favorite
			}
		})]
	});
}

Here is what it looks like. The Attribute is clickable (Sold-To Party), the Status is not (telephone and email).

Thanks for any insight, I really appreciate it. When you work on this stuff alone, sometimes the obvious is not so obvious.

Greg

capture.png (6.8 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Srikanth KV May 11 at 09:08 PM
0

'active' property is available only from version 1.54

Object status is clickable from 1.54 but blue color link wont be visible.. checkout the below JSBin ..here both email and phone are clickable

JSBin


Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks so much Srikanth, I am indeed on version 1.52.11. When I simply change my Webide project settings to 1.54 or greater it works. I spent about 4 hours trying to figure this out before posting...when all it was is my version. Ugh. Thanks again.

Greg

0
Greg Foss May 12 at 05:32 PM
0

It would be difficult for me to get a ui5 version update, so I had to figure a way around this limitation for now. In case anyone is curious or runs into the same problem, here is how I got around it.

I added this to my master.controller.js.

onAfterRendering: function() {
	var that = this;
	this.getView().byId("masterList").addEventDelegate({
		"onAfterRendering": function(oEvent) {
			var oStatus = document.querySelectorAll('div[id*="__status"]');
			var aStatus = Array.from(oStatus); 
			for (var i = 0; i < aStatus.length; i++) {
				var clickerStatus = document.getElementById(aStatus[i].id); 
				clickerStatus.setAttribute("class", "statusLink");
				if (i % 2 == 0){
					clickerStatus.addEventListener("click", that.handleTelPress);
				} else {
					clickerStatus.addEventListener("click", that.handleEmailPress);
				}
			}
		}
	}, this);
},

And then added a little css to color it according the class="statusLink".

I know this is somewhat of a hack, but sometimes you gotta do what you gotta do.

.statusLink {
	color:#d16b38;
}
Share
10 |10000 characters needed characters left characters exceeded