Hi,
I would like to change the display color of an inline list item or its background, based on a condition. Is that possible?
A use case is in a chat screen where the a message list is displayed. Messages from the sender are one color, and messages from the receiver are another color.
Any help would be appreciated.
Thanks
How about having this?
Seeing you’re mentioning inline list, are you on a Classic App?
Hi ThinhDinh,
Yes, I’m on a Classic App.
Thanks Pratik,
On each line item, I have the person’s profile picture and a message. It would be more user-friendly, though, if the background or the text itself were a different color to easily distinguish between the message I have sent and the ones I have received.
I had a prototype that still works. But please beware, this is not officially supported and can break any time.
To use CSS, you would need to add them to rich text components.
General CSS that is static
<pre><span><style>
[data-test="app-summary"] {
margin-top: -90px;
}
[data-test="glide-app-bar"] :nth-child(1) {
backdrop-filter: blur(0px);
background: transparent;
}
[data-test="nav-bar"] >div +* {
color: transparent !important;
}
[data-test="back-button"] :nth-child(2) {
display: none;
}
[data-test="back-button"] {
background: white !important;
border-radius: 50%;
margin: 4px;
width: 44px;
height: 44px;
}
[data-test="nav-button-Edit"] {
background: white !important;
border-radius: 50%;
margin: 4px;
width: 44px;
height: 44px;
}
div[id="app-root"]:first-child svg {
display: none;
}
div[id="tabBar"] svg, [data-test="nav-button-Edit"] svg, [data-test="back-button"] svg, .floating-btn-style svg {
display: block !important;
}
Chat CSS that is dynamic:
In your Messages table, make sure you have a column that stores an ID of the “chat” so you can know which messages belongs to which chat. Add a relation from that column to itself, make it a multiple relation.
Add a rowID column to that table.
Add a lookup column on top of the relation in the first step, return all rowIDs.
Add a “find element index” column, pointing to the array of rowIDs above, and return the index of the current row’s rowID. We do this to get the index of the message that is shown on the screen.
Add an If-Then-Else column. If the sender of the message is the signed-in user (depends on whether you use the user’s email or rowID, configure the correct condition here), return this value:
div[data-index="{X}"] div[role="cell"]
{
float: right;
max-width: 80%;
}
div[data-index="{X}"] div[role="cell"] .bottom-area
{
background-color: deepskyblue;
}
div[data-index="{X}"] div[role="cell"] .card-subtitle
{
color: black;
white-space: break-spaces;
font-weight: 550;
}
Else, return this value.
div[data-index="{X}"] div[role="cell"]
{
float: left;
max-width: 80%;
}
div[data-index="{X}"] div[role="cell"] .card-subtitle
{
color: black;
white-space: break-spaces;
font-weight: 550;
}
Add a template column, point to the if-then-else column above, replace {X} by the index we calculated two steps above.
Go back to the Chats table, assuming you already have a relation to the Messages table, create a joined list column and join all template values above, separated by a new line character. Basically it would look like this (I had more settings so mine would look longer).
div[class*="vlist"] {
height: auto !important;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
div[class*="vlist"]::-webkit-scrollbar {
display: none;
}
div[class*="vlist___StyledDiv2"] >div {
min-height: 500px;
}
div[class*="vlist"] {
-ms-overflow-style: none;
scrollbar-width: none;
}
{X}
</style></span></pre>
Replace {X} by the joined list value. Finally, use that in a rich text component on your screen.
@ThinhDinh is that a floating button component I see? Did they add those again or are they only available in the Classic Apps?
This post is exclusively for Classic Apps.