How to change position of Status, to the right side under the Price, and change size of picture.

[mahmood_hammood]

<ObjectHeader title="{Name}" id="oh1" responsive="true" icon="{ProductPicUrl}" iconTooltip="true" iconDensityAware="false" intro="{Description}"
					number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }"
					numberUnit="{CurrencyCode}" numberState="Success" backgroundDesign="Translucent" class="sapUiResponsivePadding--header">
				
					<statuses>
					  
						<ObjectStatus  state="{= ${Status} === 'In Stock' ? 'Success' : undefined}" text="Status: {Status}" class="sapUiResponsivePadding--header"/>
					</statuses>

[mahmood_hammood]

Hallo everyone,

I hope you have answer for this please.

[Sandra_Rossi]

Why did you use the tag "ABAP Development"?

[Sandra_Rossi]

I asked the moderator to remove the tag ABAP Development.

[leonikussmaul]

Hi Mahmood,

Instead of using the icon property, I would use an Avatar control where you can specify a predefined class for the size (or define a custom one). This also gives you the flexibility to change the shape, add a background color/ intials for items that might not have an image associated.. etc.

<Avatar src="{ProductPicUrl}" displaySize="S" displayShape="Square" class="sapUiTinyMarginEnd"/>

For your second requirement, there are multiple ways to change the layout of the Object Header. You could for example use the VerticalLayout control and wrap both a ObjectNumber and a ObjectStatus inside of it.

	<uxap:headerContent>
			<FlexBox wrap="Wrap">
				
				<layout:VerticalLayout class="sapUiSmallMarginBeginEnd">
					<ObjectNumber
			class="sapMObjectNumberLarge"
			number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }"
			unit="{CurrencyCode}"
			state="Success" />
					<ObjectStatus state="{= ${Status} === 'In Stock' ? 'Success' : undefined}" text="Status: {Status}" class="sapUiResponsivePadding--header"/>
				</layout:VerticalLayout>

			</FlexBox>
		</uxap:headerContent>

[mahmood_hammood]

Hallo Leoni,

I have added the Avatar direct after <ObjectHeader title="{Name}"...> and before <statuses>

but I got nothing, I could not go to view page.

[leonikussmaul]

Any error in the console or why could you 'not go to view page'? Difficult to tell without more context / code.

[mahmood_hammood]

Hallo Leoni,

when I put Avatar in <App id="app">

<Page title=" PRODUCT DETAIL" id="page" navButtonPress="onNavButton"

showNavButton="true">

<content>

<Avatar...>

...

I get it but not in the wrong position.

when I put it in <ObjectHeader....>

<Avatar...>

I can not go more to view page and this is the error: Invalid configuration option 'hc_reset' in url! - sap.ui.ModuleSystem.

Maybe you have Teams and time ? this will be perfect and nice from you.

[leonikussmaul]

Hi Mahmood

sap.m.Avatar is not an aggregation of ObjectHeader, so you cannot wrap it inside it as you did with statuses. This is why I have suggested wrapping it inside a VerticalLayout. Kindly try with the code I have shared above.

There are various examples in the SDK that you can refer to and check out the code, such as this one.