Monday, 20 June 2016

APEX UT - Display Image in a List

If using universal theme, we can switch from a classic navigation bar to a list and display it where usually a navigation bar is displayes - right top of the page. The problem with the list is that it will escape any html code in the list name. If we want to display an image, we will get the html code. To go arround that problem, we can use the "user defined attributes" for the lists and put the image into the "Badge Value". This list will then display the image almost as expected. We will need to apply additional css to make the background of the "Badge Value" transparent and to adjust the font to the rest of the navigation bar list:

.t-Button--navBar .t-Button-badge {background-color: transparent !important; font-weight: 400 !important; font-size: 1.2rem !important}

This is then how it appears:



Here, we can add the "Badge Value":



Finaly, here we can change our navigation bar from classic to list or oposite: