Create a custom form in a div

This example shows how to create a custome form. It defines a JMap App extension that create a custom form in a panel.
Form UI is only available in the NG App, and not in NG Core.
Example

Show example in Codepen.io
The code:
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
    <style>
      #my-custom-app {
        position: relative;
        overflow: hidden;
        width: 850px;
        height: 700px;
        border: 1px solid grey;
      }
    </style>
  </head>
  <body>
    <div id="my-custom-app" class="jmap_wrapper"></div>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        projectId: 1,
        restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
        anonymous: true,
        map: {
          zoom: 9.573700695830425,
          center: {
            x: -73.7219880403544,
            y: 45.53690235213574
          }
        },
        application: {
          containerId: "my-custom-app",
          panel: "test-form-panel",
          extensions: [{
            id: "test-form",
            panelTitle: "Test of form component API",
            initFn: () => {/* nothing to do */},
            onPanelCreation: panelContainerId => {
              document.getElementById(panelContainerId).style.padding = "1rem"
              JMap.Application.Form.render(panelContainerId, {
                id: "search-form",
                schema: {
                  properties: {
                    name: {
                      title: "Office Name",
                      type: "string",
                      isRequired: true,
                      maxLength: 255
                    },
                    type: {
                      title: "Office type",
                      type: "number",
                      // default: 2,
                      enum: [1, 2, 3],
                      enumNames: ["Local", "External", "Mixte"]
                    }
                  }
                },
                uiSchema: [
                  {
                    type: "Tab",
                    controls: [
                      {
                        id: "name",
                        label: "Office name",
                        widget: "input",
                        scope: "#/properties/name"
                      },
                      {
                        id: "type",
                        label: "Office type",
                        widget: "select",
                        scope: "#/properties/type"
                      }
                    ]
                  }
                ],
                defaultValueById: { // defaultValueById is optional
                  name: "default value",
                  type: 2
                },
                validate: (values, formMetaData) => JMap.Form.validateData(formMetaData, JMap.Form.getPreparedData(formMetaData, values)),
                onSubmit: values => {
                  // Here you process/persist the data. This function can:
                  //  - returns nothing: means onSubmit success
                  //  - returns a string: the string is an error that will be displayed
                  //  - returns a promise: the form will display a loading button until the promise resolved
                  JMap.Application.Message.info(`Submitted values: ${JSON.stringify(values)}`)
                }
              })
            },
            onPanelDestroy: panelContainerId => {
              JMap.Application.Form.destroyByContainerId(panelContainerId)
            }
          }]
        }
      };
    </script>
    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-app-js@7_Kathmandu_HF3"></script>  
  </body>
</html>