Support hiding inline fields when querying tasks

[wenlzhang]

If the embedded grouping can be supported (see #696), it can also be very useful if one can hide certain inline fields when showing query results for tasks, to make the text description not too long.

For instance, one can use the syntax like hide due, completion in Dataview and .hide(t => due, completion) in DataviewJS for the following task.

- [x] Completed task [completion::2021-08-06] [due::2021-08-07]

Then this task would look like the following in the query result:

- [x] Completed task

[eLindros]

Would love this feature, too. I think about exporting my Outlook calendar via VBA to a single Markdown formatted task list in my vault. Each task would be one event with inline data fields for start and end. I would then query this list with Dataview in my daily note showing only the events of today. Unfortunately, looking at the inline fields is kind of distracting.

[eLindros]

A simple solution could be a naming convention. For instance that all inline field annotations in tasks with field names ending on "_" get stripped. Like so: eLindros/obsidian-dataview@master...eLindros:hidden-task-annotations.

[blacksmithgu]

This may also be solvable via a cleaner task UI which hides inline fields by default and shows them underneath/to the side as floating elements. However, just adding a simple command to hide them may suffice for now.

[wenlzhang]

This may also be solvable via a cleaner task UI which hides inline fields by default and shows them underneath/to the side as floating elements.

This would be great!

However, just adding a simple command to hide them may suffice for now.

Indeed. With Dataview, something like hide t.p, t.due would work; with DataviewJS there can be something similar.

[sheeley]

This could also be achieved with

span.dataview.inline-field { display: none }

[wenlzhang]

This is nice! Is it possible to hide individual inline fields with this?

[sheeley]

Potentially. You can use attributes in selectors, so you could do something like this, for a due field:

span.dataview.inline-field[data-dv-key="due"], span.dataview.inline-field[data-dv-key="due"] + span { display: none }

The challenge here is that the structure looks like this:

span.dataview.inline-field
  .inline-field-key
  .inline-field-value

So if you are styling at the .inline-field (parent) level, it may be more difficult.

[wenlzhang]

For this to work, does it mean that one needs to use CSS snippets? If this is the case, does it mean that the hiding behaviour would affect all DataviewJS/Dataview queries in different notes?

It would be great if one can control such hiding behaviour differently in different queries. For instance, in one query, one may group the tasks based on due dates; in this case, it may be desired to hide due dates in the inline fields. In other cases/queries, however, it may be helpful to show those inline due dates.

[AnweshGangula]

@wenlzhang, if you want you can configure the CSS to be only applied in specific notes using any of the below 2 methods

1. the cssclass metadata property. For example, If you add a cssclass metadata property like cssclass: testClass, then you can use this:

   .testClass span.dataview.inline-field[data-dv-key="due"] {
       background: black;
   }

2. If you want to control it directly from the dataview query, you can add a class to the output like below:

   dv.paragraph(dv.markdownList(data))
       .className += " testClass"

   and then use this class like its used in above method.

[AnweshGangula]

extending on @sheeley's solution, you can use the :has() CSS selector to target specific fields based on their keys.

For Example, below code hides the inline fields with key due:

span.dataview.inline-field:has(span[data-dv-key="due"]) {
    display: none;
}

OR

if you want to hide all fields except one with due, you can use below code:

span.dataview.inline-field:not(:has(span[data-dv-key="due"])) {
    display: none;
}