Conditional Formatting on Dynamic Page (Kinda like Excel)

Ask the community
,
1

Okay so first of all, this is NOT a question. I am sharing a solution here. One that I have used with my limited knowledge of coding, in the hope that it will help someone else some day.
Say you have a text element called text1 on a dynamic page, connected to a dataset called dynamicDataset1 and it gets numerical values from your data collection. Now you want the element to have a green background if the value is >6000, orange BG if it is between 3001-6000 and red BG if it is less than or equal to 3000.

The text element cannot get BG colour on its own. So you have to put (attach) that text element in a box element, say box1. You can resize the box so that it fits the text element perfectly. Now this box element will get your desired BG colour depending upon the value in the text element with the following code:

$w.onReady(function () {
	//To load page before running the code
	$w("#dynamicDataset1").onReady(function () {
		//To load the Dynamic dataset's data before running the following code
		if ($w("#text1").text > 6000) {
			//Remember that .text is comparable with numbers, so no issue there.
			$w('#box1').style.backgroundColor = "green";
			//Have to use Box because Text does not have "style" property.
		} else {
			if ($w("#text1").text > 3000) {
				$w('#box1').style.backgroundColor = "orange";
			} else {
				$w('#box1').style.backgroundColor = "red";
			}
		}
	})
});

Hope this helps.

3 Likes
2

Thanks, valueganesh .

I first tightened up the formatting:

$w.onReady(function () {
  // Load page before running the code
  $w("#dynamicDataset1").onReady(function () {
    // Load the Dynamic dataset's data before running the following code
    if ($w("#text1").text > 6000) {
      // Remember that .text is comparable with numbers, so no issue there
      $w('#box1').style.backgroundColor = "green";
      // Have to use Box because Text does not have a "style" property
    } else {
      if ($w("#text1").text > 3000) {
        $w('#box1').style.backgroundColor = "orange";
      } else {
        $w('#box1').style.backgroundColor = "red";
      }
    }
  })
});

You could, alternatively, employ the employ the ternary (conditional) operator:

$w.onReady(function () {
  // Load page before running the code
  $w("#dynamicDataset1").onReady(function () {
    // Load the Dynamic dataset's data before running the following code
    // Remember that .text is comparable with numbers, so no issue there
    // Have to use Box because Text does not have a "style" property
    $w('#box1').style.backgroundColor = $w("#text1").text > 6000 ? 'green'  :
                                        $w("#text1").text > 3000 ? 'orange' :
                                                                   'red'    ;
    })
  });

In either case, I recommend replacing “text1” with a more mnemonic (i.e., a name that describes what it really stands for).

Thanks again

3

I liked the ternary operator idea. Small and simple! Thanks.

4

Simple only if you put each condition (as well as the “otherwise”) on a separate line

5

Thanks for sharing this. very useful.