Tutorial: Forms

    <script src="pma.ui.js" type="text/javascript"></script>
    <link href="pma.ui.css" type="text/css" rel="stylesheet">

    <style type="text/css">
        .field-error {
            color: #ff0000;
            font-weight: bold;
        }
    </style>

    <h4>Result:</h4>

    <div>
        Pick a form:
        <select id="forms-dropdown"></select>
    </div>
    <div id="form-container">
        The form will appear here.
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            // create a context
            var context = new PMA.UI.Components.Context({ caller: "PMA.UI demo" });

            // add an autologin authentication provider
            new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: "https://host.pathomation.com/pma.core.2/", username: "PMA_UI_demo", password: "PMA_UI_demo" }]);

            // create a form component
            var forms = new PMA.UI.Components.Forms(context);

            // load all the available forms
            forms.getForms("https://host.pathomation.com/pma.core.2/",
                function (forms) {
                    if (!forms || forms.length === 0) {
                        alert("No forms found.");
                        return;
                    }

                    var html = "<option>(Select a form to display)</option>";
                    for (var i = 0; i < forms.length; i++) {
                        html += '<option value="' + forms[i].Key + '">' + forms[i].Value + '</option>';
                    }

                    $("#forms-dropdown").html(html);
                },
                function () {
                    alert("Loading forms failed.");
                });

            $("#forms-dropdown").change(function () {
                var id = $("#forms-dropdown").val();
                if (id === undefined) {
                    return;
                }

                // render the selected form
                forms.displayForm("https://host.pathomation.com/pma.core.2/",
                    id, 
                    "#form-container",
                    {
                        // get and save data for a particular path or image
                        path: "Reference/3DHistech/CMU-1.mrxs",
                        currentUserOnly: true,
                        fieldValidationClass: "field-error"
                    });
            });
        });
    </script>

Result: