Suppress UI element when empty or undefined

[jpenninkhof]

I find myself writing quite some code to suppress UI elements (e.g. property visible on ObjectAttribute) that are undefined or empty. With JS views this is still quite doable, but if you want to do it in an xml view, it is getting pretty painful.

I wondered if there isn't a simple way to approach this. Care sharing your best practices?

Thanks!

Jan

[Former Member · Accepted solution]

Hi Jan,

I've done this using a Formatter, you could check out this document for an example:

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/8022ac87-1f60-3110-5383-fa68a91d7...

Basically you create a JS file with some functions that can be bound to XML attributes in your view.

I ended up with this for example in my view

<Icon src="{ path: 'alerts', formatter: 'util.Formatter.alertIcon' }" />

This means the src attribute is dependent on the value of the "alerts" field in my model.

The JS function is simply:

alertIcon : function(value){

  if(value != ""){

    return "sap-icon://alert";

  }

}

Hope that helps!

Gregor

[jpenninkhof · Accepted solution]

Hi Gregor,

Thanks for that! Yes, formatters are usually also very high on my list when I deal with conditional formatting.

The dilemma is more in these kinds of situations:

<ObjectAttribute title="Mobile phone" text="{customer>/MobilePhone}" />

In the event that the customer doesn't have a mobile phone, the field should not be displayed at all. As a matter of fact, the mobile phone number isn't visible because it's empty, but it's usually the title that doesn't like to play along.

Removing the title using a formatter isn't so easy, because it would require two parameters:

• the data-field value ({customer>/MobilePhone}) to determine if it is empty and
• the label text (Mobile phone) that should only be displayed when the data field isn't empty.

However, formatters only take one parameters as far as I know as I've understood the concept.

I hope this helps to provide a little insight in that recurring struggle/code-hog.

Thanks!

Best,

Jan

[Former Member · Accepted solution]

Hi Jan,

Could adding the formatter call to the "visible" attribute of ObjectAttribute achieve this?

i.e

<ObjectAttribute visible="{ path: 'customer>/MobilePhone', formatter: 'util.Formatter.returnTrueOrFalse' }"  title="Mobile phone" text="{customer>/MobilePhone}" />

[jpenninkhof · Accepted solution]

Yes, that's an excellent suggestion.

I've created this formatter:

visible : function(value) {
  return !(typeof(value) == 'undefined' || value == null);
}

And it is invoked from an XML view:

<ObjectAttribute
  title="Mobile Phone"
  visible="{ path: 'customer>/MobilePhone', formatter: 'util.Formatter.visible' }"
  text="{customer>/MobilePhone}" />

Works like a charm!

Sometimes things can be so simple and easy, just need to get that little bit of inspiration