Generate HTML form from simple XSD file - javascript?

Question

I have a simple XSD file as follows:

<?xml version="1.0" standalone="yes"?>
<xs:schema id="Employee" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="Employee" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="Employees">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="Name" type="xs:string" minOccurs="0" />
              <xs:element name="Birth Date" type="xs:dateTime" minOccurs="0" />
              <xs:element name="Nationality" type="xs:string" minOccurs="0" />
              <xs:element name="Profession" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

and I want to generate an HTML form according to this XSD info.

Any suggestions? I'm thinking about something like reading the XSD file with Javascript and generate the form from there. Is it possibe?

Answer 1

Disclaimer: I am the author of Jsonix , an open-source library which my be suitable for the reading the XSD file with Javascript of this task.

Jsonix can parse XML according to a certain XML Schema. As XML Schema has an XML Schema , its is possible to parse XSDs with Jsonix. You will then need to build the HTML form based on the parsed JSON (this is where Jsonix offers no further help).

Here's an example .

Consider this schema :

<?xml version="1.0" encoding="UTF-8"?>
<xsd:schema xmlns:gml="http://www.opengis.net/gml" xmlns:nasa="http://nasa.gov" xmlns:ne="http://naturalearthdata.com" xmlns:nurc="http://www.nurc.nato.int" xmlns:og="http://opengeo.org" xmlns:osm="http://openstreemap.org" xmlns:topp="http://www.openplans.org/topp" xmlns:usgs="http://www.usgs.gov/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" targetNamespace="http://www.openplans.org/topp">
  <xsd:import namespace="http://www.opengis.net/gml" schemaLocation="http://demo.opengeo.org:80/geoserver/schemas/gml/3.1.1/base/gml.xsd"/>
  <xsd:complexType name="tasmania_state_boundariesType">
    <xsd:complexContent>
      <xsd:extension base="gml:AbstractFeatureType">
        <xsd:sequence>
          <xsd:element maxOccurs="1" minOccurs="0" name="the_geom" nillable="true" type="gml:MultiSurfacePropertyType"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="STATE" nillable="true" type="xsd:string"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="COUNTRY" nillable="true" type="xsd:string"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="CURR_TYPE" nillable="true" type="xsd:string"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="CURR_CODE" nillable="true" type="xsd:string"/>
        </xsd:sequence>
      </xsd:extension>
    </xsd:complexContent>
  </xsd:complexType>
  <xsd:element name="tasmania_state_boundaries" substitutionGroup="gml:_Feature" type="topp:tasmania_state_boundariesType"/>
</xsd:schema>

You can parse this XSD file with Jsonix and iterate over the elements. Here's a code snippet from the test :

var context =  new Jsonix.Context([XSD_1_0]);
    var unmarshaller = context.createUnmarshaller();
    unmarshaller.unmarshalFile("tests/XSD/1.0/Schema-01.xml", function(result) {

        var schema = result.value;
        var tns = schema.targetNamespace;
        var complexTypes = schema.complexType;

        var featureTypes = {};
        for (var index = 0; index < complexTypes.length; index++)
        {
            var featureType = {};
            var complexType = complexTypes[index];
            var name = complexType.name;
            var qname = new Jsonix.XML.QName(tns, name);
            featureType.typeName = qname;

            featureTypes[qname.key] = featureType;


            var elements = [];

            if (complexType.complexContent && complexType.complexContent.extension && complexType.complexContent.extension.sequence && complexType.complexContent.extension.sequence.element)
            {
                elements = elements.concat(complexType.complexContent.extension.sequence.element);
            }

            if (complexType.sequence && complexType.sequence.element)
            {
                elements = elements.concat(complexType.sequence.element);
            }
            featureType.properties = {};

            for (var jndex = 0; jndex < elements.length; jndex++)
            {
                var element = elements[jndex];
                var property = {
                    name: new Jsonix.XML.QName(tns, element.name),
                    type: element.type,
                    collection: (element.maxOccurs === 'unbounded')
                };
                featureType.properties[element.name] = property;
            }
        }

        var featureElements = {};

        for (var kndex = 0; kndex < schema.element.length; kndex++)
        {
            var topLevelElement = schema.element[kndex];
            featureElements[topLevelElement.name] = featureTypes[topLevelElement.type.key];
        }

        console.log(featureElements);
        test.done();
    });

This particular test runs with Node.js but Jsonix itself also runs in browser.

Notes:

• JAXFront is one of the existing UI-from-XSD solutions.
• Consider JSON Schema instead of XML Schema, this will cut out XSD parsing
• XML Schema can be very complex, you can reasonably support only parts of it
• If XSD is known in advance, you may consider compile-time tools to process schema. Processing XSD in browser might be quite heavy and it only makes sense if your XSD is not known in advanced ie deliveren in the runtime (for instance from some web service)
• OpenLayers WPS client is another example of a tool which builds Web UI dynamically from a schematic definition (not XML Schema but XML-based). It actually uses Jsonix underneath

Answer 2

I know this is an old question, but I ran into this issue myself and couldn't find a satisfying open-source solution. I ended up writing my own implementation, XSD2HTML2XML . It automatically generates HTML5 forms from XSD's. It supports most of the XSD standard, including elements, attributes, minOccurs and maxOccurs.

If you prefer an out-of-the-box solution rather than writing your own, please see my implementation, XML Schema Form Generator .