Skip to Content
0
Former Member
Aug 05, 2016 at 08:02 AM

SAPUI5 SmartForm Checkbox and LabelSpan

1112 Views

Hi community,

currently I am developing a SAPUI5 App containing an ObjectPage with SmartForms. At the moment I am facing a Layout problem and hope someone can help me with this. First of all a screenshot showing my SmartForm:

What I want to achieve is that the SmartForm Groups are aligned side by side.

As you can see I am useing 4 "Groups" inside my Smartform, 2 small ones with the group title above and one CheckBox. 2 bigger ones with 3 and 4 CheckBoxes. Because the describing text is so long I have to use <Layout:GridData="L12 M12 S12"/> otherwise the text would become cut off and only " ... " is shown at the end of the Checkboxlabels instead of the whole text. As far as I know 12 columns is the maximum value for the property span. My feeling is that the label occupies 12 columns and the small CheckBox occupies 12 columns as well, which is absolutly not necessary in my case. As you can see in my screenshot there is plenty of space for both SmartForm groups to be side by side.

So my concrete questions are:

Is there a way to set the span property only for the label and not for the checkbox? Or is there another way to force the alignment of the Groups side by side instead of on top of each other?

My XMLView looks as follows:

       <smartForm:SmartForm id="groupGebaeudeSmartFormId"
                editTogglable="false"
                flexEnabled="true"
                editable="true">

<smartForm:Group id="groupGebaeudeGroup1Id" title="{i18n>groupGrundGebaudeTitle}"> <smartForm:layout> <layout:GridData span="L12 M12 S12"/> </smartForm:layout> <smartForm:GroupElement id="groupGebaeudeGroupElement1Id" label="{i18n>grundGebaeudeGroupElement0}"> <smartField:SmartField value="{ArtGrundGebaeudeUnfall}" id="groupGebaeudeSmartField1Id"/> </smartForm:GroupElement> </smartForm:Group> <smartForm:Group id="groupGebaeudeGroup2Id"> <smartForm:layout> <layout:GridData span="L12 M12 S12"/> </smartForm:layout> <smartForm:GroupElement id="groupGebaeudeGroupElement2Id" label="{i18n>grundGebaeudeGroupElement1}"> <smartField:SmartField value="{Eigentuemer}" id="groupGebaeudeSmartField2Id"/> </smartForm:GroupElement> <smartForm:GroupElement id="groupGebaeudeGroupElement3Id" label="{i18n>grundGebaeudeGroupElement2}"> <smartField:SmartField value="{HausFremd}" id="groupGebaeudeSmartField3Id"/> </smartForm:GroupElement> <smartForm:GroupElement id="groupGebaeudeGroupElement31Id"> <smartField:SmartLabel labelFor="groupGebaeudeSmartField3Id" text="{i18n>grundGebaeudeGroupElement22}" textAlign="Center" width="40%"/> </smartForm:GroupElement> <smartForm:GroupElement id="groupGebaeudeGroupElement4Id" label="{i18n>grundGebaeudeGroupElement3}"> <smartField:SmartField value="{Gebaeudeschaden}" id="groupGebaeudeSmartField4Id"/> </smartForm:GroupElement> </smartForm:Group> <smartForm:Group id="groupGebaeudeGroup3Id" title="{i18n>groupGrundGebaudeTitle2}"> <smartForm:layout> <layout:GridData span="L12 M12 S12"/> </smartForm:layout> <smartForm:GroupElement id="groupGebaeudeGroupElement21Id" label="{i18n>grundGebaeudeGroupElement01}"> <smartField:SmartField value="{ArtTreppenunfall}" id="groupGebaeudeSmartFiel21Id"/> </smartForm:GroupElement> </smartForm:Group> <smartForm:Group id="groupGebaeudeGroup4Id"> <smartForm:layout> <layout:GridData span="L12 M12 S12"/> </smartForm:layout> <smartForm:GroupElement id="groupGebaeudeGroupElement22Id" label="{i18n>grundGebaeudeGroupElement4}"> <smartField:SmartField value="{TreppeSchadhaft}" id="groupGebaeudeSmartFiel22Id"/> </smartForm:GroupElement> <smartForm:GroupElement id="groupGebaeudeGroupElement23Id" label="{i18n>grundGebaeudeGroupElement5}"> <smartField:SmartField value="{TreppeOhneGelaender}" id="groupGebaeudeSmartFiel23Id"/> </smartForm:GroupElement> <smartForm:GroupElement id="groupGebaeudeGroupElement24Id" label="{i18n>grundGebaeudeGroupElement6}"> <smartField:SmartField value="{TreppeRutschig}" id="groupGebaeudeSmartFiel24Id"/> </smartForm:GroupElement> <smartForm:GroupElement id="groupGebaeudeGroupElement25Id" label="{i18n>grundGebaeudeGroupElement7}"> <smartField:SmartField value="{TreppeUnbeleuchtet}" id="groupGebaeudeSmartFiel25Id"/> </smartForm:GroupElement> </smartForm:Group> </smartForm:SmartForm>

Thanks in advance and best regards,

Simon

Attachments