Result of dv.view is invisible in editing mode and mobile view

What I’m trying to do

Render a button which creates a note if it does not exist, then opens it. I am loading this with an linline dataviewjs query that uses dv.view to load the button. The issue is that when I am in editing mode on desktop, it renders as “-” meaning that it only works in reading mode. On mobile, it does not render anything at all regardless of what mode I am in

Things I have tried

I tried searching for “inline dataviewjs dv.view is invisible” as well as reading the dataviewjs codeblock reference, but there is no information about this. If I give up the inline query and just use a dataviewjs codeblock it works fine on Desktop (still invisible on mobile) but I would like for the button to be on the same line as a task

Here’s the text as I have it in my note:

Bible study

  • Read today’s Sămânța bună $= await dv.view("Templates/javascript/create_or_open_daily", { NOTE_TYPE: "Sămânța bună" });

And here’s the rendering bit of the create_or_open_daily.js file

function render({ NOTE_TYPE }) {
    const { notePath, exists } = getNoteStatus(NOTE_TYPE);
    const linkText = `[[${convertPath(getRelativePath(notePath))}|${NOTE_TYPE}]]`;

    if (!exists) {
        const button = dv.el("button", `Open today's ${NOTE_TYPE}`);

        button.onclick = async () => {
            await createNewNote(notePath, NOTE_TYPE);
            await app.workspace.openLinkText(`${dv.current().file.name}.md`, `Daily/${NOTE_TYPE}/`, true);
        }
    } else {
        dv.paragraph(linkText);
    }
}

render(input)

I found that on mobile I do not have access to path and fs, which I use through require on desktop. I will try and find a way to circumvent this.

Hard to help when we don’t know what’s not functioning, but you might find some of your missing functions in app.vault or app.vault.adapter. Both of them offer some utility functions to aid in some file operations, one also provides access to fs possibly still with the mobile restriction.

Thanks, holroy. That worked. You can check out the code on GitHub

I can use them on mobile, now. However, I am still curious if there is any way to make it work with inline js. Like I mentioned above, in editing mode the inline query evaluates to undefined, but in preview mode it works.

Source

Bible study

  • Read today’s Sămânța bună $= await dv.view("Templates/javascript/create_or_open_daily", { NOTE_TYPE: "Sămânța bună" });
await dv.view("Templates/javascript/create_or_open_daily", { NOTE_TYPE: "Sămânța bună" });

In edit mode

image

In preview mode

image

NOTE I added both the inline query and a codeblock just to see that that one works correctly in both modes. I am assuming this is because the inline query wants to show the result of the value, which is (an awaited Promise of) void.

This is more of a curiosity than anything, as dv.paragraph seems to render the text in a new line regardless of whether it’s an inline query or not. Only the button would appear in the same line, correctly.

Not quite sure what’s happening with your inline variant, but you’re not carrying on the async stuff, so maybe it’ll be better if you do this:


async render( ... ) {
  ...
}

await render(input)

And how do your getNoteStatus() look like, is that async too? and also them other functions…

To test out if it’s async-stuff causing your issues, try adding a dv.span("hello") before if (!exists) (and possibly similar stuff within either part of the if-else blocks. This will help you identify which part of your code is executing or not.

Similar debugging techniques can, at least on desktop, be done using console.log() messages, where you can see the result in Developers Tools the Console pane. On mobile you should be able to use the logstravaganza plugin to view a copy of the console log output.

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