Input.form Template option modification and examples

Community Help
3

Thank you for all the examples! I got the 2 column template up and running. It took a few tries to get rid of any errors. The rest is just my commentary trying to summarize what I believe is happening for others that come across similar issues.

Note: there are many aspects of javascript, html, and css that I am unsure of.

Here is the full Input.form code as I think looking at the whole thing is so interesting.

viewof modifier = Inputs.form(
  {
    width: Inputs.range([0.2, 1], {
      label: "Width Multiplier",
      value: 1,
      step: 0.1
    }),
    height: Inputs.range([0.6, 4], {
      label: "Height Coefficient",
      value: 1,
      step: 0.1
    }),
    IndicatorEnabled: Inputs.toggle({
      label: "Enable Indicators?",
      value: false
    }),
    weekIndicator: Inputs.date({
      label: "Since Week Of:",
      min: "2021-11-24",
      max: new Date()
    })
  },
  {
    template: ({ IndicatorEnabled, weekIndicator, ...inputs }) =>
      htl.html`<div style="display:flex; gap: 20px; justify-content: space-between; width: 650px">
        <div>${Object.values(inputs)}</div>
        <div>${IndicatorEnabled}${weekIndicator}</div>`
  }
)

Note: Just for reference, here is Input.form’s signature

Inputs.form(inputs, options)

I had some trouble integrating the template correctly into the arguments. I am using the Object syntax for inputs, so I needed 2 objects. This is where most of my errors when integrating the suggested code above came from; not using 2 separate objects.

{
    template: ({ IndicatorEnabled, weekIndicator, ...inputs }) =>
      htl.html`<div style="display:flex; gap: 20px; justify-content: space-between; width: 650px">
        <div>${Object.values(inputs)}</div>
        <div>${IndicatorEnabled}${weekIndicator}</div>`
  }

So for the lambda, since I wanted to specifically modify the last 2 items in my inputs object, you passed the names of only the last 2 items along with the rest of the inputs.

Note: using ...inputs like is shown no longer contains the last 2 items. That is why using <div>${Object.values(inputs)}</div> doesn’t just output all 4 inputs. That is cool!

1 Like