DataviewJS table with Metadata Menu sorted into Groups

Help
1

What I’m trying to do

Hi everyone! Hope you all are well.

I’m trying to create an editable table with metadata menu where the results are gathered together in groups according to the date the files are scheduled on. It would be similar to the dataview example under Grouped Books linked below, just with dates. Also, I do not want it to show files without dates.

https://blacksmithgu.github.io/obsidian-dataview/api/code-examples/

Things I have tried

I’m using metadata menu and have cobbled together this code. It works for the most part (I don’t think it’s showing notes without dates). However, it isn’t mapping correctly. I say this, because if I replace the portion after async with normal dataview code, the table works, you just can’t edit it. As it is now, however, it outputs a mess (each column on top of one another and no file name).


const { fieldModifier: f } = this.app.plugins.plugins["metadata-menu"].api;

for (let group of dv.pages('"Social Media Activities/YouTube Videos"')
.where(p => p['date']?.toFormat("yyyy-MM-dd") && p['date']!= "")
.groupBy(p => p['date'])) {
    dv.header(3, group.key);
    dv.table(["Name", "Date Scheduled", "Shared"], 
    group.rows
            .map(async p => [
                p.file.link,
                await f(dv, p, "date"),
                await f(dv, p, "shared"),
            ])
        )
}

Does anyone have any thoughts on how I could get this to render properly? I’ve been all over these forums looking for a similar editable table broken out into groups like the one I want to make, but haven’t found anything yet.

Thanks a lot.

2

Also, in case it matters: One thing that is missing from this code which usually is present in these is this:

await Promise.all(dv.pages(‘“Social Media Activities/YouTube Videos”’)

Usually the codes look something like this:

const { fieldModifier: f } = this.app.plugins.plugins["metadata-menu"].api;
dv.table(["File Name", "Task Type", "Shared"],
  await Promise.all(
    dv.pages('"Social Media Activities/YouTube Videos"')
      .map(async p => [
        p.file.link,
        await f(dv, p, "task_type"),
        await f(dv, p, "shared")
    ])
))

I’m guessing maybe that needs to go back in, but I’m not quite sure how to shove it in there.
But the mapping bit, I don’t know.

3

Hello!
I also encountered this issue yesterday.
The solution is simple. In a typical example, we put a Dataview request in Promise.all(). And in the example with grouping, we must place the group itself in “Promise”. Promise.all (group.rows e t.c.). So your option should be like this

const { fieldModifier: f } = this.app.plugins.plugins["metadata-menu"].api;

for (let group of dv.pages('"Social Media Activities/YouTube Videos"')
.where(p => p['date']?.toFormat("yyyy-MM-dd") && p['date']!= "")
.groupBy(p => p['date'])) {
    dv.header(3, group.key);
    dv.table(["Name", "Date Scheduled", "Shared"], 
    Promise.all(group.rows
            .map(async p => [
                p.file.link,
                await f(dv, p, "date"),
                await f(dv, p, "shared"),
            ])
        ))
}
4

Gosh, it still doesn’t format correctly for me :frowning: It comes out with all the dates on the top, and then a long column of check boxes , and no file names. Hmm!!

I appreciate your reply.

this-disaster-code
this-disaster-code854×826 5.68 KB

5

Hello!
Here, a version of the note itself with metadata would help in order to understand what data is available and what should be used from this. I myself was just developing a database for YouTube videos. And everything worked out…
I would advise you to ask this question in the dataview channel on Discord. This would help to consider the issue in more detail.

1 Like
6

A version of your note(s) would be most helpful, but be aware that using stuff like dv.<elements> within async/await stuff can often get Dataview mighty confused, as it struggles to keep track of which element is within other elements, and this can typically cause outputs like yours where the checkboxes are disconnected from the other elements.

Not quite sure how to consistently counter it, but I do believe the f(dv, ... ) is often more well behaving when within a table as the outer element. I’ve also seen some javascript constructing elements where they anchor the elements to each other, but not sure how to that in this context.

7

So the top of one of these notes looks something like this:

---
title: This is the note title
date: 2024-04-03
allDay: true
completed: 
exam: 
task_type:
  - Speaking
question_type:
  - Speaking Part 1
source: 
status:
  - Needs Uploading
scheduled: true
shared: false
date created: 2024-01-22T13:09
date modified: 2024-04-11T11:17
tags: 
unit:
  - Relationships
---

# Note Title

Last used::  2024-04-02
Source:: [Relationships](file:///D:%5CYoutubes%5CRelationships)
Image Folder:: [Relationships Images](file:///C:%5CUsers%5Caxlim%5CDocuments%5CTeaching%20English%5CRecordings%5CTelegram%20Responses%5CRelationships%5CRelationships%20Images)
YouTube Video:: 

Note note note

I did figure that there was probably some sort of incompatibility going on between the two “types” of tables (I don’t know how to describe it. I’m not really into coding but I’m really good at breaking stuff, it seems lol. But I love creating and using the editable tables for scheduling and planning things. Obsidian’s calendars don’t quite do what I need them to do so trying to work around it with dataview lol)

Including the other non-yaml fields as well, since ideally I’d also be able to see the “last used” field in the table as well.