when to put text and layout data in new control

[former_member643798]

Hi ,

I've created new control via extend and I want to know where should I put the text:... and layoutData

Here how its done in regular way

var oTitle = new sap.ui.core.Title({                     text: "{i18n>title_test}",                     layoutData: new sap.ui.layout.GridData({                         span: "L12 M12 S12"                     })                 });

I've composite control which I use the title like following and I need to applay both the layout and text

extend....

	metadata: {
		aggregations: {
			title: {
				type: "sap.ui.core.Title",
				multiple: false
			},

[Former Member · Accepted solution]

Hey Joerg Ben

Adding that title as a public aggregation to your control means that any user using your control can go ahead and add any entire sap.ui.core.Title with or without specified layout data. So if your control's name is MyCustomControl and they want to specify a title for it, they will do the following:

var customControl = new MyCustomControl();

customControl.setAggregation('title',

{

     new sap.ui.core.Title({text: "{i18n>title_test}"});

})

If you want the title element to specifically have that layoutData and just want a user to specify the text part it might be better to make that aggregation private and do the following in your init function of your custom control :

this.setAggregation('_title',

{

     new sap.ui.core.Title(

     {

               layoutData: new sap.ui.layout.GridData(

               {

                        span: "L12 M12 S12"

               })

     });

})

In your metadata specify a new property:

metadata:

{

     properties:

     {

          "titleText" : {type : "string", defaultValue: "Title"}

     }

}

Then a user can do the followiing:

var customControl = new MyCustomControl();

customControl.setTitleText("I want this Title");

In your control just remember to set the specified text now in the titleText property to your Title aggregate.

This can be done in the render function of your control:

[former_member643798 · Accepted solution]

HI Riekert ,

This is what I need but somehow when I use

renderer: function(oRm, oControl) {

		oRm.write('><div>');
		oRm.renderControl(oControl.getAggregation("_title"));

I got error Unhandled Error: C.getVisible is not a function

and I dont have it on my code, any idea?

Do you have some JSBIN or plunker for this which I can use as reference ?

this is the code which I use in the control

		aggregations: {
			_title: {
				type: "sap.ui.core.Title",
				multiple: false,
				visibility: "hidden"
			},

And in init I use

	init: function() {
		this.setAggregation("_title", new Title({
			text:"test",
			layoutData: new sap.ui.layout.GridData({
				span: "L12 M12 S12"
			})
		}));

Thanks in advance!

Joerg

[former_member182372 · Accepted solution]

getVisible is a method in a supercalss of all controls

SAPUI5 Explored

seems like you dont extend it (or dont extend it properly) post the code of your custom control

[former_member643798 · Accepted solution]

Hi Maksim

return oControl.extend("myCompositeControl", {

        metadata: {

            aggregations: {

                _title: {

                    type: "sap.ui.core.Title",

                    multiple: false,

                    visibility: "hidden"

                },

This is the init

init: function() {

            this.setAggregation("_title", new Title({

                text:"test",

                layoutData: new sap.ui.layout.GridData({

                    span: "L12 M12 S12"

                })

            }));

This is the renderer

renderer: function(oRm, oControl) {

            oRm.write('<div');

            oRm.writeControlData(oControl);

            oRm.writeClasses();

            oRm.write('><div>');

            oRm.renderControl(oControl.getAggregation("_title"));

The debugger is failed on the line

oRm.renderControl(oControl.getAggregation("_title"));

Any idea?

Thanks!

Joerg

[former_member182372 · Accepted solution]

what is oControl??

[former_member643798 · Accepted solution]

This is part of the signature accoutering to the following

SAPUI5 SDK - Demo Kit

This issue is happen on title and not on label...

[former_member182372 · Accepted solution]

so i assume it is

sap.ui.define([
"sap/ui/core/Control"
], function (Control) {
"use strict";
return Control.extend("myCompositeControl", {

        metadata: {

            aggregations: {

                _title: {

                    type: "sap.ui.core.Title",

                    multiple: false,

                    visibility: "hidden"

                },

and you use it like

var newcntrl = new myCompositeControl();

??

[Former Member · Accepted solution]

Hey

You are getting that error because the Rm.renderControl only renders Controls. Title is an element. Sorry about that. Try the following:

sap.ui.core.Title.extend("myCustomTitleElement",

{

     init:function()

     {

          this.setLayoutData(new sap.ui.layout.GridData(

          {

                    span: "L12 M12 S12"

          }));

     }

});

Then you use it as followed:

var title = new myCustomTitleElement({text: "My custom title"});

That which is returned from new myCustomTitleElement() is still an element not a control. So you should be able to use it exactly the way one would use an the original sap.ui.core.Title.

[former_member643798 · Accepted solution]

Hi Maksim,

I see that conflict and I already handle it like you mention and I still got this error ?

Any other idea?

Thanks a lot,

Joerg

[former_member643798 · Accepted solution]

Thanks Riekert,

But this is part as composite control,which include title and label etc,

How I should use it than?

Regards,

Joerg

[former_member182372 · Accepted solution]

really. compile a plunker or jsbin, would be much easier

[Former Member · Accepted solution]

Would you consider rather using a control such as sap.m.Title? Layout data for this control can also be set.

[former_member643798 · Accepted solution]

Hi Riekert ,

Sorry but I cannot use the sap.m. lib...

Thanks,

Joerg

[Former Member · Accepted solution]

A different alternative then is the following:

render: function (oRm, oControl)

{

     var title = getTitle(); //where you have a title property and it is set and returns a string

     oRm.write("<h1>" +title +"</h1>");

}

It is not a good alternative. But an alternative none the less.

[former_member643798 · Accepted solution]

Hi Riekert ,

This workaround probably will work but I cannot use it, this is very strange that I cannot

do it as I did and I should find some workaround on UI5 to support it,dont you think ?

Thanks in advance!

Joerg

[Former Member · Accepted solution]

Hey Joerg Ben

I had a look in the ui5 git files how they render elements in controls.  sap.ui.unified.Menu is a control that has an Element array of MenuItems as aggregates. the Control Menu renders a menuItem (element)  by first checking if the menuItem has a render function. If menuItem.render returns undefined, the render function is not available. After checking if the function exists the funtion is called and the control's oRm is sent in as a parameter.

In that function oRm.write is called to render html code.

sap.ui.core.Title does not have a render function. Thus you can either extend it and write your own prototype.render function or just render it in the control using oRm.write.

Have a look at a control with layoutData to see what classes and such are added. Then you could manually add it.

I looked at the following files on git:

openui5/Menu.js at master · SAP/openui5 · GitHub

openui5/MenuRenderer.js at master · SAP/openui5 · GitHub

openui5/MenuItem.js at master · SAP/openui5 · GitHub

[former_member643798 · Accepted solution]

HI Riekert,

Can you please provide a hint how I should use the ?

prototype.render for title visible ?

Thanks

Joerg

[former_member182862]

I do not see that you need to reapply the text and layout. Maybe you can shed some lights on what you wish to do.

-D

[former_member643798]

HI Dennis,

Lets say that I've simpleForm with the following control

var oTitle = new sap.ui.core.Title({

                    text: "{i18n>title_test}",

                    layoutData: new sap.ui.layout.GridData({

                        span: "L12 M12 S12"

                    })

                });

Now I want to put this control as part as other controls in new  composite control,

and I want internally (in the extend) put this text and layoutData, how should I do that ?

Thanks in advance!

Joerg

[former_member182862]

HI Joerg

sap.ui.core.Title is not a control. It is an element. That's it does not have a renderer. It does not know how to render itself.

What do you want the composite control to do?

Thanks

-D

[former_member643798]

HI All,

Any Idea how to achieve them?

Thanks!

[former_member182372]

new ExtendedControl( { title : oTitle } )