Show font awesome icon on highest value in table results

Wappler General Need Help
1

How can I show a font awesome icon based on a condition? For instance I want to show a check mark beside the largest value in a column of percentages. I will like to display a check mark beside the highest number in the SHARE column.
image

2

Hi @fafa,

That’s a great question and one that I just realized I could use in one of my projects as well.

I think it might have to do with something in mysql to return the highest share result and then do a Dynamic Attribute > Display > Show on the column containing the font awesome check box.

However, I am not positive as to how to set it up on the mysql side.

I look forward to seeing what others think and suggest.

Hint: you might change the topic of the post to something more descriptive like “Show font awesome icon on highest value in table results” or something like that to get more attention. :slight_smile:

1 Like
3

Thanks for the topic title suggestion. I have updated it. About the
My Table is displaying results of a MySQL query binded to the page. The query returns results in descending order of the percentages. I figured it is just as you indicated
Dynamic Attributes > Display > show > etc.
But the question now is how to set the condition to the show Check Mark depends on.

@brad @George @Teodor any help?

4

That’s an interesting question. I have to think about that one but I am sure it can be done. So the check mark is always your first record?

5

Yes. The check mark is always the first record in this scenario.

But there is also another scenario where the highest number is not always the first row. Like when the table is sorted on some other parameter. Same Alphabetical order of names or party names.

6

That’s quite easy to check actually. So if we follow the logic - what need here?

  1. Get the biggest value from the query
  2. Compare if the value in the cell is the biggest value

both are possible in Wappler.

So in your cell it will look like:

<td>
    {{share}} 
    <span dmx-show="share == serverconnect1.data.query1.max(`share`)">
        <i class="..."></i>
    </span>
</td>

just replace with your column name and server action / query names.

2 Likes
7

This is very interesting. Can ‘max’ be used to compare dates as well?

8

Min / Max formatters are available for numbers only. So you will need to convert your dates to timestamp first, compare them and then convert back to date :slight_smile:
Example:

serverconnect1.data.query1.max(`date_column.toTimestamp()`).toDate().formatDate('dd-MM-yyyy')
1 Like
9

@Teodor if I had powers, I would confer on you a god status.
It worked. I knew it had to do with Max function but could not figure out how to go about it.
For wondering how to go about it, Here is a screenshot of both code and formatting panel.
Thanks a mill everyone.

image|594x500

2 Likes