danielo515 / obsidian-modal-form

Define forms for filling data that you will be able to open from anywhere you can run JS
https://danielorodriguez.com/obsidian-modal-form/
MIT License
187 stars 14 forks source link

How to provide default value for fields #244

Closed dxcore35 closed 2 months ago

dxcore35 commented 4 months ago

I tried to provide default values in this code:

const modalForm = app.plugins.plugins.modalforms.api;
const result = await modalForm.openForm({
    title: "Example form",
    fields: [
        {
            name: "name",
            label: "Name",
            description: "Your name",
            input: { type: "text" },
        },
        {
            name: "age",
            label: "Age",
            description: "Your age",
            input: { type: "number" },
        },
        {
            name: "favorite_meal",
            label: "Favorite meal",
            description: "Your favorite meal",
            input: { type: "text" },
        },
        {
            name: "is_family",
            label: "Is family",
            type: "toggle",
            description: "Are you family?",
            required: true,
            input: { type: "toggle" },
        },
    ],
});

By adding:

<%*

var summary = tp.frontmatter["summary"]
var date_start = tp.frontmatter["date_start"]
var date_finished = tp.frontmatter["date_finished"]

const modalForm = app.plugins.plugins.modalforms.api;
const result = await modalForm.openForm({
    title: "Example form",
    fields: [
        {
            name: "name",
            label: "Name",
            description: "Your name",
            input: { type: "date" },
            value: date_start,    <------  Here
        },
        {
            name: "age",
            label: "Age",
            description: "Your age",
            input: { type: "datetime" },
            value: date_finished,    <------  Here
        },
        {
            name: "summary",
            label: "Summary",
            description: "Summary of the project",
            input: { type: "text" },    <------  Here
            value: summary,
        },
        {
            name: "is_family",
            label: "Is family",
            type: "toggle",
            description: "Are you family?",
            required: true,
            input: { type: "toggle" },
        },
    ],
});

%>

The the form will open with no values.

danielo515 commented 4 months ago

That is because the values need to be provided as a separate argument:

const result = await modalForm.openForm({
    title: "Example form",
    fields: [
        {
            name: "name",
            label: "Name",
            description: "Your name",
            input: { type: "date" },
        },
        {
            name: "age",
            label: "Age",
            description: "Your age",
            input: { type: "datetime" },
        },
        {
            name: "summary",
            label: "Summary",
            description: "Summary of the project",
            input: { type: "text" }, 
        },
        {
            name: "is_family",
            label: "Is family",
            type: "toggle",
            description: "Are you family?",
            required: true,
            input: { type: "toggle" },
        },
    ],
}, { values: { summary, age: date_finished, name: date_start }});
danielo515 commented 4 months ago

Here are the docs:

https://danielorodriguez.com/obsidian-modal-form/#providing-default-values-when-opening-a-form