How to display boolean using Dataview

Share & showcase
,
1

I wanted to use true/false values for sorting purpouses, but also wanted to show them nicely in the table for example if I had seen a movie in the cinema:
image
What I wanted from my solution:

  • True/false, no tasks
  • No dataviewjs only query language
  • Just display, no interaction

Here is how I did it, using HTML and CSS, in dataview query I put row with HTML div with parameter class named after metadata "<div class = '" + watched-in-cinema + "'></div>" as Kino
and then I edit these classes in CSS snipet:

.true {
	width: 24px;
	height: 20px;	
	font-size: 15px;
	color: white;
	background-color: forestgreen;
	text-align: center;
	border: 2px black solid;
	padding: 0px 0px 21px 0px;
	
}
.true:before{
	content: '✔';
}
.false {
	width: 24px;
	height: 20px;	
	font-size: 15px;
	color: white;
	background-color: firebrick;
	text-align: center;
	border: 2px black solid;
	padding: 0px 0px 21px 0px;
}
.false:before{
	content: '✖';
}

I have seen many threads about how to display true/false in tables without any good solution so I hope it helps some people. Don’t be too harsh on my solution, I am just beginning my adventure with HTML, CSS and JS so it is probably somewhat primitive.

5 Likes
2

It is easier with dataview syntax:

table textValue as "Text Value",
choice(booleanValue , "✅", "✘") as "Boolean Value"
from #tag
5 Likes