Ternary operation formatting a badge

Wappler General Need Help
1

I have this repeat table created from a serverconnect database query. The $500 max reached is based this ternary operation:

(violation_fine_start.daysUntil(var1.datetime)>25) ? '<span class="bg-danger text-light">$500 max reached.</span>': 'yes'"

I would the badge (circled in yellow) to have a red background it ANY of the rows will be displaying the $500 max reached message.

I attempted to use the code above as part of a Show attribute but cutting and pasting inside the badge span dmx-show="violation_fine_start.daysUntil(var1.datetime)>25"> with no luck. When trying to build the expression through the "Show" datapicker I can't get to the formatting functions to add the .daysUntil to the expression.

violation_badge
violation_badge832×321 31.8 KB

2

Hi Jim, you need to use the Dynamic Attribute --> Class Toggle not the show attribute.

3

That makes sense.

While the count comes to the badge, I'm not sure what is the right syntax to read the rows and toggle the css.

Pull from the repeat table didn't change:
<span class="badge bg-secondary ms-3 rounded-pill" dmx-class:bg-danger="repeat2[0].violation_fine_start.daysUntil(var1.datetime)&gt;=25">{{sc_viol_statutes.data.query.count()}}</span></a>

Nor did pulling from the server connect
<span class="badge bg-secondary ms-3 rounded-pill" dmx-class:bg-danger="sc_viol_statutes.data.query.violation_fine_start.daysUntil(var1.datetime)&gt;25">{{sc_viol_statutes.data.query.count()}}</span></a>

4

Please define the exact rules you need to match to change the class as from your code experiments it's not very clear.

5 
<span class="badge bg-secondary ms-3 rounded-pill" dmx-class:bg-danger="(violation_fine_start.daysUntil(var1.datetime)>=25)" dmx-show="(violation_fine_start.daysUntil(var1.datetime)>25)">Count:  {{sc_viol_statutes.data.query.count()}}</span></a>
6

@scalaris - thanks but code didn't work - the dmx-show blocked everthing from showing.

Let me attempt a more detailed case Teodor.

Rule to be implemented:
When violation_fine_start.daysUntil(var1.datetime) is greater than or equal to 25 the badge class should be bg_danger otherwise bg_secondary

violation_fine_start.daysUntil(var1.datetime) seems to not be available outside the 'repeat2' table, thus my two code examples above - one from the source and one from the container - neither working

  • Primary serverconnect for the datasource is: sc_viol_statutes.data.query
  • this feeds a repeat container repeat2
  • after 11 days the fine begins - violation_fine_start.daysUntil(var1.datetime) is used to calculate these days
  • in the Navlist item of the Nav List is badge span which displays the count of the all violation records {{sc_viol_statutes.data.query.count()}}
7

Try something like this:

  <!-- Initialize the variable -->
  <dmx-value id="hasMaxReached" dmx-bind:value="true"></dmx-value>

  <!-- Repeat table -->
  <dmx-repeat id="repeat1" dmx-bind:repeat="serverconnect1.data.query">
    <!-- Check if any row has the "$500 max reached" message -->
    <dmx-set id="setMaxReached" dmx-bind:value="(violation_fine_start.daysUntil(var1.datetime) > 25) ? hasMaxReached.setValue(true) : null"></dmx-set>

    <!-- Your table rows go here -->
    <tr>
      <td>{{violation_fine_start}}</td>
      <td>{{statute_violated}}</td>
      <td>{{description}}</td>
      <td>{{fines}}</td>
      <td dmx-show="violation_fine_start.daysUntil(var1.datetime) > 25">
        <span class="bg-danger text-light">$500 max reached.</span>
      </td>
    </tr>
  </dmx-repeat>

  <!-- Badge with conditional class -->
  <span class="badge" dmx-class:bg-danger="hasMaxReached.value">Your Badge</span>
8

I had thought about a variable but not confident in it's use. It's not reading the
dmx-set. The default value of hasMaxReached set to true displayed red first so I change it to false.

Here's the code from the repeat to the first few lines. I've added a test

to display hasMaxReached.value and violation_fine_start.daysUntil(var1.datetime)

<div class="d-flex flex-column justify-content-start mt-3 record_divider" is="dmx-repeat" id="repeat2" dmx-bind:repeat="sc_viol_statutes.data.query" key="$index">
                                <dmx-set id="setMaxReached" dmx-bind:value="(violation_fine_start.daysUntil(var1.datetime) &gt; 25)?hasMaxReached.setValue(true):null"></dmx-set>

                                <div class="col ms-3 record_divider">
                                    <p>{{hasMaxReached.value}} {{violation_fine_start.daysUntil(var1.datetime)}}</p>

Here's the result:
image

9

Thank you - @scalaris @ben @Teodor @brad

Here's the winning code. Brad had the right direction - Scarlaris - had the syntax, I was looking at the wrong data source. Needed the server connect not the table repeat.

Ben - I hadn't looked as "has" anything before - again a solution and lesson learned

dmx-class:bg-danger="sc_viol_statutes.data.query[0].violation_fine_start.daysUntil(var1.datetime)&gt;=25"

1 Like