EDSC Echoforms Demo

ECHO Forms XML

Enter ECHO Forms XML or select a predefined form below to render a preview of the form and it's model.

<form xmlns="http://echo.nasa.gov/v9/echoforms"
      xmlns:xs="http://www.w3.org/2001/XMLSchema"
      targetNamespace="http://www.example.com/echoforms">
  <model>
    <instance>
      <prov:options xmlns:prov="http://www.example.com/orderoptions">
        <prov:reference>123456</prov:reference>
        <prov:prepopulated>I am default</prov:prepopulated>
        <prov:prepopulatedDefault>I am default</prov:prepopulatedDefault>
        <prov:relevantReference>relevant</prov:relevantReference>
        <prov:readonlyReference>readonly</prov:readonlyReference>
        <prov:requiredReference>required</prov:requiredReference>
        <prov:boolReference>true</prov:boolReference>
        <prov:dateReference>2020-01-01T00:00:00</prov:dateReference>
        <prov:rangeReference>5.0</prov:rangeReference>
        <prov:selectReference>
          <prov:selectValue>123456</prov:selectValue>
          <prov:selectValue>654321</prov:selectValue>
        </prov:selectReference>
        <prov:parentReference>
          <prov:childReference>Child value</prov:childReference>
        </prov:parentReference>
        <prov:numberGroup>
          <prov:doubleReference>123.456</prov:doubleReference>
          <prov:integerReference>42</prov:integerReference>
          <prov:longReference>999999999999</prov:longReference>
          <prov:shortReference>30000</prov:shortReference>
        </prov:numberGroup>
        <prov:SUBSET_DATA_LAYERS type="tree">
          <prov:data_layer>/Parent1/Child1-1/Child1-1-2/Child1-1-2-1</prov:data_layer>
          <prov:data_layer>/Parent4</prov:data_layer>
        </prov:SUBSET_DATA_LAYERS>
      </prov:options>
    </instance>
    <extension name="pre:prepopulate" xmlns:pre="http://echo.nasa.gov/v9/echoforms/prepopulate">
      <pre:expressions>
          <pre:expression ref="prov:prepopulated" source="PREPOP" />
          <pre:expression ref="prov:prepopulatedDefault" source="PREPOP_DEFAULT" />
      </pre:expressions>
    </extension>
  </model>
  <ui>
    <input id="reference" label="Reference value" ref="prov:reference" type="xs:string"/>
    <input id="childReference" label="Child Reference value" ref="prov:parentReference/prov:childReference" type="xs:string"/>
    <input id="prepopulated" label="Prepopulated" ref="prov:prepopulated" type="xs:string"/>
    <input id="prepopulateddefault" label="Prepopulated Default" ref="prov:prepopulatedDefault" type="xs:string"/>
    <group id="group" label="Group" ref="prov:parentReference" attrs="attrs">
      <help>Helpful text</help>
      <input id="grouped-child" label="Child input" ref="prov:childReference" type="xs:string"/>
    </group>
    <input id="input" label="Input" a="a" ref="prov:reference">
      <help>Helpful text</help>
    </input>
    <input id="boolinput" label="Bool input" a="a" ref="prov:boolReference" type="xs:boolean">
      <help>Helpful text</help>
    </input>
    <input id="relevantinput" label="Relevant based on checkbox" relevant="prov:boolReference='true'" a="a" ref="prov:relevantReference">
    </input>
    <input id="readonlyinput" label="Readonly based on checkbox" readonly="prov:boolReference='true'" a="a" ref="prov:readonlyReference">
    </input>
    <input id="requiredinput" label="Required based on checkbox" required="prov:boolReference='true'" a="a" ref="prov:requiredReference">
    </input>
    <input id="dateinput" label="Date input" a="a" ref="prov:dateReference" type="xs:datetime">
      <help>Helpful text</help>
    </input>
    <textarea id="textarea" label="Textarea" a="a" ref="prov:reference">
      <help>Helpful text</help>
    </textarea>
    <secret id="secret" label="Secret" a="a" ref="prov:reference">
      <help>Helpful text</help>
    </secret>
    <output id="output" label="Output" a="a" ref="prov:reference">
      <help>Helpful text</help>
    </output>
    <output id="urloutput" label="URL Output" type="xs:anyURI" a="a" ref="prov:reference">
      <help>Helpful text</help>
    </output>
    <group id="group" label="Numbers Group" ref="prov:numberGroup" attrs="attrs">
      <input id="double" label="Double value" ref="prov:doubleReference" type="xs:double" />
      <input id="integer" label="Integer value" ref="prov:integerReference" type="xs:int" />
      <input id="long" label="Long value" ref="prov:longReference" type="xs:long" />
      <input id="short" label="Short value" ref="prov:shortReference" type="xs:short" />
    </group>
    <range id="range" label="Range" start="1.0" end="10.0" step="0.1" type="xs:double" a="a" ref="prov:rangeReference">
      <help>Helpful text</help>
    </range>
    <select id="select" label="Select" a="a" ref="prov:selectReference" valueElementName="selectValue" required="prov:boolReference='true'">
      <item label="Alphabetic" value="Alphabetic" />
      <item label="123456" value="123456" />
      <item label="654321" value="654321" />
      <help>Helpful text</help>
    </select>
    <select id="multiple-select" label="Multiple select" multiple="true" a="a" ref="prov:selectReference" valueElementName="selectValue">
      <item label="Alphabetic" value="Alphabetic" />
      <item label="123456" value="123456" />
      <item label="654321" value="654321" />
      <help>Helpful text</help>
    </select>
    <tree id="subset_datalayer_tree" label="Choose datasets" ref="prov:SUBSET_DATA_LAYERS" required="false()" type="xsd:string" valueElementName="data_layer" separator="/" simplifyOutput="true" cascade="true">
      <item value="Parent1">
        <item label="Child 1-1" value="Child1-1">
          <help> help text </help>
          <item label="Child 1-1-1" value="Child1-1-1"/>
          <item label="Child 1-1-2" value="Child1-1-2">
            <item label="Child 1-1-2-1" value="Child1-1-2-1"/>
            <item label="Child 1-1-2-2" value="Child1-1-2-2" relevant="contains('654321',//prov:selectReference)"/>
          </item>
        </item>
        <item label="Child 1-2" value="Child1-2" required="true()"/>
      </item>
      <item value="Parent2"/>
      <item value="Parent3">
        <item label="Child 3-1" value="Child3-1" required="prov:boolReference='true'"/>
      </item>
      <item value="Parent4">
        <item value="Child4-1" />
        <item value="Child4-2" />
      </item>
    </tree>
  </ui>
</form>

Prepopulate Form Values

Generated Interface

View and interact with the generated form

Serialized Model

View the data model generated by the form

Form Valid: true

Form values have been updated: true

<prov:options xmlns:prov="http://www.example.com/orderoptions">
  <prov:reference>
    123456
  </prov:reference>
  <prov:prepopulated>
    I am prepopulated
  </prov:prepopulated>
  <prov:prepopulatedDefault>
    I am default
  </prov:prepopulatedDefault>
  <prov:relevantReference>
    relevant
  </prov:relevantReference>
  <prov:readonlyReference>
    readonly
  </prov:readonlyReference>
  <prov:requiredReference>
    required
  </prov:requiredReference>
  <prov:boolReference>
    true
  </prov:boolReference>
  <prov:dateReference>
    2020-01-01T00:00:00
  </prov:dateReference>
  <prov:rangeReference>
    5.0
  </prov:rangeReference>
  <prov:selectReference>
    <prov:selectValue>
      123456
    </prov:selectValue>
    <prov:selectValue>
      654321
    </prov:selectValue>
  </prov:selectReference>
  <prov:parentReference>
    <prov:childReference>
      Child value
    </prov:childReference>
  </prov:parentReference>
  <prov:numberGroup>
    <prov:doubleReference>
      123.456
    </prov:doubleReference>
    <prov:integerReference>
      42
    </prov:integerReference>
    <prov:longReference>
      999999999999
    </prov:longReference>
    <prov:shortReference>
      30000
    </prov:shortReference>
  </prov:numberGroup>
  <prov:SUBSET_DATA_LAYERS type="tree">
    <prov:data_layer>
      /Parent1/Child1-1/Child1-1-2/Child1-1-2-1
    </prov:data_layer>
    <prov:data_layer>
      /Parent1/Child1-2
    </prov:data_layer>
    <prov:data_layer>
      /Parent3
    </prov:data_layer>
    <prov:data_layer>
      /Parent4
    </prov:data_layer>
  </prov:SUBSET_DATA_LAYERS>
</prov:options>