-1

I'm new in SAPUI5 and I want to add another element in to the button object. But it doesn't support. How can I add an element inside button ? Here is my code;

<Button>
                            <FlexBox
                                width="100%"
                                direction="Row"
                                alignItems="Center"
                                justifyContent="Start">
                                <items>
                                    <f:Avatar
                                            src="./resources/images/dashboard/Todo128.png"
                                            displaySize="M">
                                    </f:Avatar>
                                    <VBox class="gridItemContent">
                                        <Text
                                            class="gridItemContentTitle"
                                            text="Todo"/>
                                            <Button
                                                text="Todo Oluştur"
                                                icon="sap-icon://add-coursebook"
                                                type="Transparent">
                                            </Button>
                                    </VBox>
                                </items>
                            </FlexBox>
                    </Button>

It gives an error. I don't know where I'm doing a mistake. I want to add that FlexBox object in to the Button's content. Is it possible to do that ? Thanks for your suggestions

MLElyakan
  • 249
  • 4
  • 25
  • you cannot do that because button does not have any aggregation to append child controls – santhosh Jun 09 '17 at 10:35
  • Which components should I use to do that ? I need to press event for that components by the way. Is there a general clickable container element be able to add component inside of it. Thanks a lot. – MLElyakan Jun 09 '17 at 11:11

2 Answers2

0

UI5 controls have so called aggregations (collections of child controls; you can check out Aggregation in SAP UI5 for more details). Generally, one of the aggregations of a control is the "default" one (e.g. items of a sap.m.Table). The default ones are marked in the SDK with a (default) mention.

In XML views you have to either specify the name of the aggregation in which you are placing controls or you can omit this and they will be placed in the default aggregation (e.g. look at this sap.m.Table sample: the items and columns aggregation of the table is explicitly specified; whilst the Button is placed in the default aggregation of the Toolbar).

With this info in mind, let's interpret what you are doing in the XML file. You are actually trying to place a FlexBox inside the default aggregation of a sap.m.Button. This class does not have any aggregations of its own (only some inherited aggregations like customData). Hence it does not have any default aggregation. That is why you get an error. Basically, the button control may not have any direct children.

If you want to build a "button" with custom content, then you can either create a custom button control or you can use something like a sap.m.CustomTile.

Serban Petrescu
  • 5,127
  • 2
  • 17
  • 34
  • Can I do the button looking like in this link ( https://i.hizliresim.com/5QoXBl.png ) ? Actually I want a component clickable and can be added another wrapper container inside of it. Which component should I use instead of button ? Thanks for your help. – MLElyakan Jun 09 '17 at 11:24
  • That screenshot looks to me like it could be a good candidate for the [sap.m.CustomListItem](https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.CustomListItem/preview) with the type="Active" (such that it is clickable). – Serban Petrescu Jun 09 '17 at 11:31
  • Grid's defaultSpan property is not working ( defaultSpan="L4 M6 S12" ) CustomListItem's width value is being always full width – MLElyakan Jun 09 '17 at 12:00
  • Maybe it would be a good idea to post this as a separate question. As it is not really related (layout behavior vs button content). – Serban Petrescu Jun 09 '17 at 17:20
0

Add class to flex box as "flex-container".

onAfterRendering: function(){

        $(".flex-container").click(function(){
            alert("hi");
        });

    }
santhosh
  • 463
  • 4
  • 15