Can we make a cleaner Dataview list?

[mfloreen]

I’ve been keeping plaintext lists for years, and have LOVED migrating everything to Obsidian! I’ve recently tried Dataview, and I’m sure I’m just scratching the surface. I’m particularly excited that it gives me a great way to keep a running list of the people I’ve met in various settings.

Typically, I jot their name down like this:

met:: Bruce Wayne - millionaire playboy from Gotham

…in Drafts, then run an action to append it to my daily note in Obsidian for iOS. For a conference or meeting, I’ll have multiple “met::” entries in the note for that event.

Then, I’m using Dataview to consolidate all of those into a single list I can call up on my phone when I need to remember who I met the last time I was here.

That all works, but the formatting of the list isn’t very easy to scan (screenshots below).

Things I have tried

Checked the forums, read through Dataview’s support pages. Tried all the (non-Javascript) options listed there. Tables don’t scale well on an iPhone, “WITHOUT ID” strips the filename and still has funny indentations on iOS.

What I’m trying to do

I’d like to do three things if possible:

1. Remove the bullet points from the main points (file name)
2. Add a bullet point to the subpoints
3. Allow single subpoints to be parallel with other bullet points

Below are examples of what it currently looks like, and a mockup what I’m trying to achieve.

[CawlinTeffid]

Not a proper DataView answer, but as a quick workaround you might prefer the formatting of an embedded search:

```query
"met::"
```

Or just run the search in the sidebar so you can manipulate the results more. You can make it occupy the whole screen if your theme hasn’t hidden that control.

[moggy1972]

Can you share the dataview code you’re using? It should be possible to add additional markdown to the list, or failing that, use DataviewJS which gives many more options. There might still be some oddities with formatting on iOS but it should look much closer to your mockup.

[efemkay]

not sure why your subpoints doesn’t have bullets (i believe if u disable your theme, it might be there…). anyway, i think this css snippet might help your case (hope you know how to load css snippet (Add custom styles - Obsidian Help)

/* remove bullet for the "main points (file name) and shift
   the list to the left a bit (since there's no more bullet */
ul.dataview.list-view-ul {
	list-style: none;
	padding-left: 0;
}

/* put back the bullet on the "subpoints" since in your case
   they are missing. but note that if a theme remove this, you
   might need to invoke priority by putting !important like this
   list-style: disc !important; */
ul.dataview.dataview-ul.dataview-result-list-ul {
	list-style: disc;
}

[mfloreen]

My code is pretty simple:

dataview 
LIST met WHERE met 
SORT file.ctime DESC

[mfloreen]

Thank you, this is very helpful! I hadn’t thought to disable the theme (Minimal), but that did bring back the bullets. I hadn’t used CSS snippets before, but figured it out. Your suggestion worked wonderfully, except all the text is now justified to the same point. (See screenshot).

I tried some variations on your suggestions, such as…

ul.dataview.dataview-ul.dataview-result-list-ul {
	list-style: disc;
	padding-left: 30 !important;
}

…but my padding instructions don’t seem to do anything.

[moggy1972]

I had a go with dataview JS and think I’ve got something that works. My use case is of a log of music I’ve listened to, using a “listened::” line in my daily notes (which are in a folder called Journal)

let groups = dv.pages('"Vault/Journal"')
	.where(p => p.listened)
	.groupBy(p => p.file.link)
	
for (let group of groups.sort(g => g.key, 'desc')) {
	dv.header(4, group.key)
	dv.list(
		group.rows 
			.listened) 
	}

I’ve chosen to sort them with the most recent date at the top, but you can change that.

Thanks for the original idea, this is really going to change how I use Obsidian.

[efemkay]

i see. i changed the css snippet a bit to be compatible with Minimal theme. should work well with u with Minimal theme applied.

/* no need the previous padding adjustment if using Minimal */
ul.dataview.list-view-ul {
	list-style: none;
}

/* reinstate the bullet to "subpoints" but also adjust the position
   for the bullet to be on the inside (for compatibility with Minimal) */
ul.dataview.dataview-ul.dataview-result-list-ul {
	list-style: disc;
	list-style-position: inside;
}

[mfloreen]

This is phenomenal. Thank you so much for being so willing to help!

I did use the padding adjustment after all, since I ended up with a bigger left margin than I wanted. The only other funny thing is the following lines under a bullet point don’t follow first line indent…

I can live with that, though.

[mfloreen]

I’ll need to experiment a little further with the JS option, but I’m glad it’s been helpful for you too!

[efemkay]

huh. i’ve to admit, i only recently experimenting with list-style-position. i guess that’s the side effect. try this snippet below instead. i quickly checked – it aligns the subsequent lines well.

/* reinstate the bullet to "subpoints" but also adjust the position
   for the bullet to be on the inside (for compatibility with Minimal) */
ul.dataview.dataview-ul.dataview-result-list-ul {
	list-style: disc;
	margin-left: 1.5rem;
}

you may adjust the “1.5rem” to your liking - i suggest “rem” unit as it will scale nicely between desktop and mobile (as opposed to “px”).

[mfloreen]

Thank you! That does exactly what I wanted.

[mfloreen]

I’m assumed this isn’t feasible, but might as well ask while the topic is still active. It isn’t possible to move a single line to its own bullet point, is it?

[efemkay]

yeah. that’s #dataview matter. i don’t know if it’s doable to adjust from css perspective. but if u want to have it all as bullet u can use grouping. but that would make those with bullets indented further (not any better than what u have right now)

```dataview
LIST rows.met
WHERE met
SORT file.ctime DESC
GROUP BY file.link
```

[mnvwvnm]

To get multiple values in a single line you can use join() function:

LIST join(met) 
WHERE met 
SORT file.ctime DESC

You can use join()in this way:
1 - join(field) - by default you get value 1, value 2, value 3 (values separated by commas)
2 - join(field, " \ ") - you can define how to separate values - in this example you get value 1 \ value 2 \ value 3

[mfloreen]

Interesting. I’ve tried playing with both of those settings but they each raise other issues.

The List rows.met command does give everything a bullet, but as @efemkay noted, subpoints in groups of 2+ get two indents and bullets. The sorting also seems to be alphabetical no matter what is specified.

The join() command by itself does put everything in a consistent format, but I’d really prefer the opposite for quick scanning of bulleted subpoints in parallel. I thought it might be possible to combine it with the rows.met command above, but couldn’t get it to work with my very limited coding knowledge.

I’m really grateful for each of you so willingly sharing the fruit of your experience.

[mnvwvnm]

Oh… I think I misread your main issue (this topic is long and I read only the last posts… my bad).
So, your main point now is: “I want all the outputs, single or multiple, as bullet point, i.e., as lists”.
Try this:

LIST list(met) 
WHERE met 

[mfloreen]

Looks like the same output as the LIST rows.met command - some double indented and bulleted.

[mnvwvnm]

Well, I’m using the default behavior to Minimal. So, in my case I don’t have any bullet point and any indent. Because that I don’t preview this last behavior.

Generally I think the idea is the same (as in my last solution), but now it’s necessary to distinguish single values from multiple values:

• if single value, we need to transform it to a list
• if an array, keep it as an array.

Let’s try this:

LIST choice(length((met)[0]) = 1, list(met), met)
WHERE met 

[mfloreen]

Thank you! That’s beautiful.

For anyone just jumping in here, the solution is a combination of: the query from @mnvwvnm and the css snippet from @efemkay.

Final result looks like this:

Thanks for all the help everyone!