We are looking to enhance the Case Header section so that it reflects the design shown in the first screenshot, instead of the current Out-of-the-Box (OOTB) layout shown in the second screenshot, in the Constellation.
Specifically, we would like to understand:
What configuration options or components are available to achieve this enhanced header design?
Are there any recommended best practices or limitations when customizing the Case Header section?
Please advise on the steps or documentation that can help us implement this change.
Current OOTB Layout
Icon: Display the Case Type Icon
Heading Text: Displays the value of Heading Text Defined
Sub Heading Text: Displays the value Heading Text Defined
Actions: Three-dot menu on the right and a back arrow icon.
Desired Layout:
Icon : Need to Display dynamic images
Heading Text: Displays the value of Heading Text Defined
Sub Heading Text: Displays the value Heading Text Defined
Additional Section: To display more attributes, Tag/Badge
Tag/Badge: A small badge (e.g., “Mass”) next to the name for quick categorization.
Actions: Edit icon and three-dot menu on the right side
@Gaurav25 thanks that helps, it is the UI element I thought you were talking about. The Constellation Design System provides various configurations for this outlined here. The underlying view itself is not authorable directly, only via the configurations mentioned in the docs.
However, I think you already know this and a looking for how one might extend this. My understanding, this part of the case header can only be configured if you go the SDK route for extending your Constellation UI. Even if you could do this in platform, it would likely be a customization of the JSON of the View to achieve this, like this example for another use case, which isn’t advisable.
I have seen some projects attempt to find customization routes inside the platform but haven’t had much success, given how integral the Full Page View is to a case and the Design System - this why SDKs exist, to allow you full control and bring your own design system.
@Sreedhar Ganduri @gupts2@SrinivasKakani your thoughts on achieving the above without going the SDK route?
You could also use Highlighted fields option available in Full case page view, if you think of adding additional fields which user should have attention to.
I would not suggest modifying case header, as many factors like accessibility, readability, responsiveness will affect that moment we start flooding more information / customizing it.
And going to SDK route is a very costly option just for fullfilling this usecase.
End of the day these are html elements, which can have specific css selectors, which you can try adding custom css, if this visual change is a must. (again dont suggest this but advice to go through option like highlighted fields)
