View on GitHub

Form 7 Ace Editor Fields

On this page

Stats

#callbacks:

Ace Editor Field

Name (string input)

Your age

An empty input translates into zero

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> </body> </html>

Current value of Ace Editor field:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
  </body>
</html>

scala

val stringField = new F7StringField().label("Name (string input)")
  .setInternalValue("John Doe")
val intField = new F7IntField().label("Your age")
  .help("An empty input translates into zero")
  .setInternalValue(47)
val aceEditorField = new F7AceEditorField().label("HTML").setInternalValue(
  """<!DOCTYPE html>
    |<html lang="en">
    |  <head>
    |    <meta charset="utf-8">
    |    <title>title</title>
    |  </head>
    |  <body>
    |  </body>
    |</html>
    |""".stripMargin
)
val currentAceFieldValueField = new F7HtmlField(_ => <h6>Current value of Ace Editor field:</h6><pre>{aceEditorField.currentValue}</pre>).dependsOn(aceEditorField)

div.apply {
  new DefaultForm7() {
    override lazy val rootField: F7Field = F7VerticalField()(
      stringField,
      intField,
      aceEditorField,
      currentAceFieldValueField,
      new F7SubmitButtonField(implicit fsc => BSBtn().BtnPrimary.lbl("Submit").btn.d_block.w_100)
    )

    override def postSubmitForm()(implicit fsc: FSContext): Js = BSModal5.verySimple("Submitted!", "Ok") {
      modal =>
        implicit fsc =>
          <h6>Your data:</h6> ++
          <ul>
            <li><b>String Field:</b> {stringField.getInternalValue()}</li>
            <li><b>Int Field:</b> {intField.getInternalValue()}</li>
            <li><b>Ace Editor Field:</b> <pre>{aceEditorField.currentValue}</pre></li>
          </ul>
    }

  }.render()
}