Is it possible to display results inline, ideally with a separating character?

[AniOhev]

I have created Wikipedia-like info boxes for my Obsidian, which I embed on a variety of pages with similarities.

I have done this with a markdown table and in each cell have manually added the links I want, for example:

[[Place page 1]] • [[Place page 2]] • [[Place page 3]] • [[Place page 4]]

I'd prefer to generate these inline lists dynamically using Dataview (not TABLE or vertical LIST), but a horizontal list, using a Dataview query. Ideally, I'd like each entry to be followed by a separate character like " ● " to help make each link separately distinguishable to the reader.

I can work out the query, but can't work out how to get this format. Is that possible?

Thanks for any help you can give.

[davidlee]

how's this work for you?

for (let group of pages.groupBy(p => p.file.path.split('/').at(-2))) {
	if (options.header) {
    dv.header(3, group.key);
  }
  dv.el('span', group.rows.map(p => p.file.link).join(' • '))
}

[davidlee]

same idea, but more simply:

dv.el('span', dv.pages('"_in"').file.link.join(' | '))

[AniOhev]

Thank you. I REALLY appreciate the time that you have taken to try and help me. Thank you. I am not a coder, so I suspect I might need a bit more hand-holding to make it work.

I tried your suggested code but Method 1 give an error and method 2 gives no results. It could of course be my error in trying to embed your code as I am not a coder ...

Method 1

let pages = dv.pages("#hertfordshire");
for (let group of pages.groupBy(p => p.file.path.split('/').at(-2))) {
	if (options.header) {
    dv.header(3, group.key); 
  }
  dv.el('span', group.rows.map(p => p.file.link).join(' • '))
}

Method 2

let pages = dv.pages("#hertfordshire");
dv.el('span', dv.pages('"_in"').file.link.join(' | '))

In both cases I wrapped the code between ...

[triple backticks]dataviewjs
code
[triple backticks]

I would be very grateful if you or anyone else could help me crack this.

If possible, I'd really like the query to be inline JS format, as I plan to use this in a markdown table, where the above multiline block query presumably won't suit the single-line markdown table rendering.

Many many thanks

[davidlee]

cool, ignore method 1.

For your method 2 code, the issue is that with let pages = you're defining the pages you want to use .. then in the next line, you're not using them :) replace dv.pages('"_in"') there with pages.

[AniOhev]

Thank you. This works ...

May I ask two more questions?

1. Could it sort the output alphabetically ascending on file name?
2. How could I compress it into a single line so I can use it inline like the below simpler example ...

Sorry for asking these simple questions, its just a bit beyond my very rudimentary coding skills. Really appreciate all your kind help.

[AniOhev]

With the help of Google Bard, I have got the code working how I want it. The trouble is, it is in block format, not inline Dataview JS - I asked AI to help me change it, but it couldn't. Could anyone help me with this please?

[davidlee]

hmm, you might want to extract it out to a view so you can call it with await dv.view(...).

[AniOhev]

I am not a coder so I don't know how to do that. I tried looking on Google for guidance on dv.view with no luck. I also tried asking Chat GPT. They suggested ...

---

To extract the code into a Dataview view and call it using await dv.view(…), you can create a custom view in a separate .dataview file. Follow these steps:

1. Create a new .dataview file in your Obsidian vault (e.g., my_custom_view.dataview).

2. In the newly created .dataview file, define your custom view using the table function and give it a name (e.g., "MyCustomView"):

dataviewjsCopy code

table MyCustomView {
  let pages = dv.pages("#foo and #bar").sort(b => b.file.name);
  dv.el('span', pages.file.link.join(' • '));
}

3. Save the .dataview file.

4. Now, in your markdown note where you want to display the generated content, you can call the custom view using await dv.view():

dataviewjsCopy code

= await dv.view("MyCustomView")

Make sure you place this code within a code block that supports JavaScript execution in Obsidian (e.g., a code block with the language set to dataviewjs or within a DataviewJS query block). The await keyword is used to execute the view and fetch the generated content, which will be displayed as inline code in the markdown note.

Remember to turn on Automatic Refresh in the Dataview plugin.

---

I did this. I closed and restarted Obsidian to refresh, and I get the message ...

my_custom_view is not created yet. Click to create.

What might I be doing wrong?

[Kareem01001011]

Not sure if you still need this, as I'm a bit over one year late... But, in case you still have this problem and still want a one-liner to use it inline, here's my solution:

Basically, just skip the defining the variable and place its value directly where it's used, like this:

dv.el('span', dv.pages("#foo and #bar").sort(b => b.file.name);.file.link.join(' • '));

You can dedicate a hotkey using Hotkeys for templates that types this for you instead of typing it every time you need it.