Insert link button inside dataview container

What I’m trying to do

Im trying to get buttons into a dataview container.

example:

##### Sueño y sueños
```button
name Log
type link
action obsidian://vault/Notes/Sleep/Log/<% tp.user.sleeplogdate(tp) %>
color blue
```\

Obsidian button problem

Things I have tried

I’ve seen people successfully inserting buttons on a dataview table, so based on that, and checking the available buttons plugin args i tried this:

```dataviewjs
const createButton = app.plugins.plugins["buttons"]
const sleepButton = createButton({app, el: this.container, args: {name: "Log", type: link, action: obsidian://vault/Notes/Sleep/Log/<% tp.user.sleeplogdate(tp) %>, color: blue}}) 

// Creates log container 
  dv.container.className += " journalLog"
  return `
## <span class="center-align">―――――― Log: ―――――― </span>
##### Sueño y sueños
${ sleepButton }
`
```\

but failed as dataview shows this
Obsidian button problem 2
I really don’t know what im missing, and even not adding the templater script it still shows me the same error

This is a simplified version as there are quite a few more buttons and more categories in the daily note, and i want them all inside this dataview container

The reason i want this is because i use my Daily note as MOC. Given its not meant to hold content, but rather display links or analized data i figured its better to just have containers on it, so by updating those they will automatically update all present and past dailies

There are a few issues with your code, so I kind of have to ask, do you know javascript, or are you just copying stuff together from various sources? (Or have you asked ChatGPT to do this for you?)

For example, your parameters to createButton() are just wrong, you’re referring to non-existing variables, like link and you set the action to be an obsidian url with no escaping what so ever.

Further more you’re not creating the dv.container, you’re setting a member variable of it, className. And dataviewjs doesn’t use return statements like that.

This is not be mean/hush/…, but before we can even start trying to help, we need to know what’s the origin to this thingy, and what knowledge you’ve got of javascript. If not, we might be giving ill advice, or end up writing the entire thing for you without you learning anything and risking to change stuff which you shouldn’t be changing.

No worries at all (:, i get your point, i indeed don’t know proper or any js, and just started to mess with this after installing obsidian, the snippet above was based on the linked code above that inserted buttons on a dv table:

```dataviewjs
const {createButton} = app.plugins.plugins["buttons"]
const {update} = app.plugins.plugins['metaedit'].api

const defer = async (file, key) => {
    const value = await app.plugins.plugins['templater-obsidian'].templater.functions_generator.internal_functions.modules_array[4].static_functions.get('prompt')("What Date")
    const date = app.plugins.plugins['nldates-obsidian'].parseDate(value).moment.format("YYYY-MM-DD")
    await update(key, date, file)
}

dv.table(
["Name", "Date", "Bouton"],
dv.pages("#task").map(t => [t.file.link, t['date'],
createButton({app, el: this.container, args: {name: "Change date"}, clickOverride: {click: defer, params: [t.file.path, 'date']}})])
)
```\

So the thought process was:

trying to understand how he got the buttons inside the table, i copied the const {createButton} (thinking it was sort of a call to the plugin buttons), and then copied the createButton({app, el: this.container, args... line (thinking that was the line in which he created the button inside the dv table)

given there’s no buttons plugin docs on how to use it with that syntax above, i googled the line, but only returned variations of that snippet, and the github src code for the buttons plugin, so looking at the files in it i figured the “name, type, action…” lines in the codeblock were the arguments, so i fitted them after the name ‘arg’ in the line, and discarded the clickOverride function from the original

then i moved the whole line out and created a const to call it from the container (without looking too messy, and being easy to differentiate from other buttons) to finally try to create the container based on the snippet you kindly provided earlier for the header, but of course now that you point it out, the conditions changed so clearly it wouldn’t work

i would love to learn the js specific to dataviewjs, or used to make containers, tables and such but idk where to search (without having a course on broader js used for things i wouldn’t ever mess with) so im constantly using ChatGPT to teach me about the concepts that im messing with here, but that isn’t also ideal i reckon, any help is greatly appreciated (:

since my last reply i’ve learned a lot more, but now im more confused:

  • since createButton() is a javascript function, that the buttons plugin uses under the hood, (source code) why people when creating js scripts (using dvjs) uses const {createButton} = app.plugins.plugins["buttons"] instead of just createButton() (examples 1, 2, 3)

  • does that mean i can access the buttons plugin variables/ arguments/ syntax from javascript? if that’s the case why the type: link variable isn’t valid, if by using the buttons plugin interface, the button types are: command, link, template, text, calculate and swap

in my daily note i have this text and button:

##### Sueño y sueños
```button
name Log
type link
action obsidian://vault/Notes/Sleep/Log/<% tp.user.sleeplogdate(tp) %>
color blue
```\

i want to fit them both in a single codeblock

Why?

(inspired by the same reasons you gave when creating the container for the header) i :
1 - embed it from a file, this way by modifying the file, all daily notes, including past ones will be automatically modified too
2 - can style exclusively this codeblock, targetting it with CSS

in my daily note im setting a dv.view function (Codeblock Reference - Dataview)

```dataviewjs
dv.view("_js/journalLog")
```\

inside journalLog.js

const {createButton} = app.plugins.plugins["buttons"]
(createButton({
	app, 
	el: this.container, 
	args: {
		name: "Log", 
		type: "link", 
		action: "obsidian://vault/Notes/Sleep/Log/<% tp.user.sleeplogdate(tp) %>", 
		color: "blue",
	}
})) 

i can’t even replicate what i could do in the buttons plugin syntax, so im not using other const or appending text yet

  • assuming its not buttons plugin syntax, but the js createButton() function:
    i want to make a button that has inside a note link, what is the correct type variable

  • is there documentation with the list of variables i can chug?, searching createButton() tutorials gave me html tutorials

sorry for replying again, but after days and a couple questions you’re the only user that hasn’t ignored my help requests here

This is javascript syntax for extracting/importing the createButton from that interface. If it’s not picked up like this, that function would be unknown to this scope of code.

No, it doesn’t. You can import various stuff, but not a whole lot.

In any case, the link should most likely not be a variable, but rather a text constant when calling the function.

This another part where you’re mixing what is possible within the javascript scope versus how you define parameters when defining a buttons code block (which is interpreted by the buttons plugin). The syntax is not the same in those two scopes.

Inside this function, which noe looks a little better, you’re still referring to code which should have been replaced by Templater, but that’s not going to happen, so you need to figure out a better way to define your action url.


All in all, I think you’re in a little bit over your head, and don’t know enough javascript to figure it out. I also don’t know enough about your setup, and don’t have the time and energy to figure it out, as there currently are too many loose ends.

Sorry, to say so, but some of these mistakes indicates that you really should learn more javascript and coding before proceeding. And I don’t think this is the best beginner project to start learning with.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.