Display data dynamically in an icon

[Former Member]

Hi,

I want to display data in an icon which appear in table cell with data counter. Please share sample code/recommendations to achieve requirement.Do we need custom controls for this or any standard UI available?

If custom control is needed , Please recommend me project structure for best practices to implement in xml view approach.

Regards,

Koti Reddy

[kai2015 · Accepted solution]

What do you mean with display data in an icon?

Show a subtitel below it or what?

[Former Member · Accepted solution]

The icon/image which I shown above holds a value/data in the middle which displays dynamically based on validations.

it is not showing subtitle below or above..data is in the icon which may be custom control .

Regards,

Koti Reddy

[former_member182862 · Accepted solution]

Maybe like this

Example

-D

[Former Member · Accepted solution]

Hi Dennis,

you were close to to requirement but not same as same UI.But I understood that it is only possible with custom control.

It would be great if any expert blogs about best practice to use about project structure when we use xml view for using custom control.

Regards,

Koti Reddy

[Qualiture · Accepted solution]

Hi,

Using custom controls in XML views is actually not much different than using custom controls in JS views.

You create your custom control just as you normally would:

(function () {
    "use strict";


    jQuery.sap.declare("com.biz.app.customcontrols.MyCustomControl");
    jQuery.sap.require("sap.m.<whatevercontrolyouneed>");


    sap.ui.core.Control.extend('com.biz.app.customcontrols.MyCustomControl', {
        metadata : {
            properties : {
                someProperty : { type : "string"}
            }
        },
        init : function() {},
        onAfterRendering : function() {},
        renderer : function() {},
        _someCustomPrivateMethod : function() {},
        someOtherCustomMethod : function() {}
    });
}());

and store it in a folder in your project (if your local root resolves to "com.biz.app", then make a subfolder "customcontrols" where you store the file MyCustomControl.js")

Then, in your XML view, you would reference your control using it's namespace:

<mvc:View
   controllerName="com.biz.app.MyView"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:core="sap.ui.core"
   xmlns="sap.m"
   xmlns:custom="com.biz.app.customcontrols">


   <custom:MyCustomControl someProperty="{/modelProperty}" />


</mvc:View>

Hope this explains it well!

R.

[Former Member · Accepted solution]

Thank you Robin!!

Now I can understand that there is no intervention of controller to render custom control.

Regards,

Koti Reddy