CODEWITHSUNDEEP
sapui5
Adam Harkus
Adam Harkus

Reputation: 2210

SAPUI5 - How do I aggregate with formElement?

I previously implemented aggregation with VBox. This get all the 'questions' and creates a Text box for each....

<VBox items="{path: 'view>questions', templateShareable: true}">
    <items>
        <VBox class="sapUiTinyMargin" templateShareable="true">
            <Text text="Question {view>OrderSequence}"/>                                                        
        </VBox>
    </items>
</VBox>

I need to do the same, but for formElements. Can this be done?

<f:formElements>
    <f:FormElement label="{i18n>radioLabel}">
        <f:fields>
            <Input value="{viewmodel>radioLabel}" id="__redioLabel"/>
        </f:fields>
    </f:FormElement>                                    
</f:formElements>

It doesn't seem to work with 'items'

Upvotes: 0

Views: 2751

Answers (3)

Sujoy Mitra
Sujoy Mitra

Reputation: 30

You can use the VBox and then put the f:formElements inside the items. Or else use Standard List.

FormElements or containers don't have aggregation items.

Upvotes: -2

Adam Harkus
Adam Harkus

Reputation: 2210

Solution was...

An aggregation on the form...

<f:Form id="formCustomRadio" editable="true" visible="true" formContainers="{viewmodel>answers}">

Thanks a lot

Upvotes: 0

Serban Petrescu
Serban Petrescu

Reputation: 5206

In UI5 elements have several characteristics:

  • Properties: generally scalar attributes, like "title" or "width".
  • Events: which are fired when something happens, like "press" or "close".
  • Aggregations: collections of child entities, like the "items" of a list.
  • Associations: related controls, like the "label" of a input field.

You can find how these relate to the concept of data binding in the official documentation here.

In your case, the "formElements" is an aggregation of the FormContainer element. Based on the documentation:

Aggregation binding can be used to automatically create child controls according to model data. This can be done either by cloning a template control, or by using a factory function. Aggregations can only be bound to lists defined in the model, that is, to arrays in a JSON model or a collection in the OData model.

This implies that ANY aggregation can be used, no matter how it is named. Now, to go back to you example, the reason why "items" does not work, is because the FormContainer parent element has no aggregation with that name. Instead, you must use the "formElements" aggregation.

<f:FormContainer formElements="{viewmodel>/my/path/to/list}">
    <f:formElements>
        <f:FormElement label="{i18n>radioLabel}">
            <f:fields>
                <Input value="{viewmodel>radioLabel}"/>
            </f:fields>
        </f:FormElement>                                    
    </f:formElements>
</f:FormContainer>

Also, note that usually, you do not need to give an ID to the template or any of its children (the Input in your example has an ID), that is because that element specifically will not be part of the resulting control tree. It is just used to be cloned to create the "real" elements based on the model list.

Lastly, you have a "templateShareable" property on the VBox in your first example. VBox has no such property, so it does nothing (you actually use it correctly inside the binding specification for the "items" of the parent VBox).

Upvotes: 5

Related Questions