Layout question in sap.m.List control with CustomListItems

[FranciscoAcuña]

Hi experts, I am currently trying to replicate this list item design in a sap.m.List type control:

Since the arrangement of the properties needs to be exactly as in the picture above, I was suggested to make use of <CustomListItem> to customize my layout according to my needs. But I am having some issues with both the spacing between each property and the alignment of my input field as shown in this next image:

The position of the checkbox is perfect this way but I would like to reduce that big spacing between my lines in the same list item (as shown between "Pedido:" and "Pos:") and also correctly align my input field to the right.

Here's my XML view using <CustomListItem> and <HBox> in an attempt to replicate the design shown in picture #1:

        <CustomListItem>
            <HBox>
                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" alignContent="Start">
                    <Label text="Pedido: " labelFor="docID"/>
                    <Text xmlns="sap.m" text="{DocID}" id="docID"/>
                </HBox>
                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" alignContent="End">
                    <Label text="Ctd. UME: "/>
                    <Text xmlns="sap.m" text="{Entry_qnt} {Entry_Uom}" id="material"/>
                </HBox>     
            </HBox>
            <HBox>
                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" alignContent="Start">
                    <Label text="Pos : "/>
                    <Text xmlns="sap.m" text="{DocPos}" id="docPos"/>
                </HBox>
                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" alignContent="End">
                    <Input xmlns="sap.m" value="Value" width="50%" id="cant" />
                </HBox>  
            </HBox>
        </CustomListItem>

Any help in correcting this layout issues will be greatly appreciated!

[FranciscoAcuña]

Thanks a lot david.bizer and marcobeer, both your inputs have been very helpful! with your help I was able to get this result but I'm still facing this issue regarding the size of my input fields:

I consulted the documentation for sap.m.Input and sap.m.InputListItem but I didn't find any property that suggests it could fix my issue. I've also found this input list sample where they showcase the result I wanna replicate but I haven't found a way to achieve this while having the input fields being part of the same <CustomListItem>:

(https://sapui5.hana.ondemand.com/#/entity/sap.m.InputListItem/sample/sap.m.sample.InputListItem)

Do you have any ideas about how could I make my input fields smaller?

[marcobeer]

Hello Francisco,

If you're going to use the code I suggested, you can simply define the size of your input field with the width parameter.

width="100px"

Best Regards

Marco

[david_bizer]

Hi Francisco,

there are probably smarter ways to achieve this (e.g. Forms could be an option) but it would depend on your use case and what devices you target (responsiveness, mobile only etc.). But changing your existing code you could achieve this by wrapping into a FlexBox a vertical box representing one "column".

			<CustomListItem>
			  <FlexBox>
				<VBox width="50%">
				   <HBox >
					<Label text="Pedido: " labelFor="docID"/>
					<Text xmlns="sap.m" text="{DocID}" id="docID"/>
				    </HBox>
				    <HBox >
					<Label text="Ctd. UME: "/>
					<Text xmlns="sap.m" text="{Entry_qnt} {Entry_Uom}" id="material"/>
			            </HBox>
			         </VBox>
				<VBox width="50%">
				     <HBox>
					<Label text="Pos : "/>
					<Text xmlns="sap.m" text="{DocPos}" id="docPos"/>
				     </HBox>
				     <HBox >
					<Input xmlns="sap.m" value="Value" width="50%" id="cant"/>
					</HBox>
				</VBox>
			</FlexBox>
		          </CustomListItem>

However, there will be spaces in different device format (Desktop vs mobile) and you would need to adapt the properties (e.g. width).

[marcobeer]

Hello Francisco,

This should do the trick:

<CustomListItem>
    <HBox class="sapUiSmallMarginEnd">
        <VBox class="sapUiSmallMarginBegin" alignItems="Start" width="100%">
            <HBox>
                <Label text="Pedido: " labelFor="docID"/>
                <Text xmlns="sap.m" text="{DocID}" id="docID"/>
            </HBox>
        </VBox>
        <VBox class="sapUiSmallMarginBegin" alignItems="End" width="100%">
            <HBox>
                <Label text="Ctd. UME: "/>
                <Text xmlns="sap.m" text="{Entry_qnt} {Entry_Uom}" id="material"/>
            </HBox>
        </VBox>     
    </HBox>
    <HBox class="sapUiSmallMarginEnd">
        <VBox class="sapUiSmallMarginBegin" alignItems="Start" width="100%">
            <HBox>
                <Label text="Pos : "/>
                <Text xmlns="sap.m" text="{DocPos}" id="docPos"/>
            </HBox>
        </VBox>
        <VBox class="sapUiSmallMarginBegin" alignItems="End" width="100%">
            <HBox>
                <Input xmlns="sap.m" value="Value" width="100px" id="cant" />
            </HBox>
        </VBox> 
    </HBox>
</CustomListItem>

I removed "sapUiSmallMarginTopBottom" to remove the big spacing between the lines and also replaced "alignContent" with "alignItems", while adding the VBoxes around. I've also set the Input to 100px instead of 50%.

Using "justifyContent" would have been an option too, instead of adding VBoxes, but that wouldn't work on the HBox with the Input field, so in order to keep it all the same, I added the VBoxes.

Best Regards
Marco