Forms
basicforms
Console
PMA.UI version: 2.43.3
Forms example.
forms.html
1<!doctype >
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=10">
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9 <!-- Include PMA.UI required libraries -->
10 <script src="./pma.ui/jquery-3.1.0.js"></script>
11 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13 <!-- Include optional libraries downloaded or from CDN -->
14 <link rel="stylesheet" href="./pma.ui/bootstrap.min.css">
15 <script src="./pma.ui/bootstrap.bundle.min.js"></script>
16
17 <!-- Include PMA.UI script & css -->
18 <script src="./pma.ui/pma.ui.js"></script>
19 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
20
21 <!-- Include custom script & css -->
22 <script src="./js/forms.js"></script>
23 <link href="./css/forms.css" type="text/css" rel="stylesheet">
24
25 <title>Forms</title>
26</head>
27
28<body>
29 <div class="container">
30 <div class="row">
31 <div class="col">
32 <!-- Form selector -->
33 <div class="form-group my-1">
34 <label for="exampleFormControlSelect1">Pick a form</label>
35 <select class="form-control form-control-sm" id="forms-dropdown" disabled>
36 <option>Select a form to display</option>
37 </select>
38 </div>
39 </div>
40 </div>
41 <div class="row">
42 <div class="col border py-2 px-3">
43 <!-- The element that will host form -->
44 <div id="form-container">
45 The form will appear here.
46 </div>
47 </div>
48 </div>
49 </div>
50</body>
51
52</html>forms.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9.field-error {
10 color: #ff0000;
11 font-weight: bold;
12}
13.form-control {
14 width: auto;
15 display: inline-block;
16}
forms.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var slidePath = "Reference/3DHistech/CMU-1.mrxs";
6var caller = "DemoPortal";
7
8jQuery(function () {
9 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
10
11 // Create a context
12 var context = new PMA.UI.Components.Context({ caller: caller });
13
14 // Add an autologin authentication provider
15 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
16
17 /// Create a form component
18 var forms = new PMA.UI.Components.Forms(context);
19
20 // Load all the available forms
21 forms.getForms(serverUrl,
22 function (forms) {
23 if (!forms || forms.length === 0) {
24 console.log("No forms found.");
25 return;
26 }
27
28 $("#forms-dropdown").attr("disabled", false);
29 var html = '<option value="none">Select a form to display</option>';
30 for (var i = 0; i < forms.length; i++) {
31 html += `<option value="${forms[i].Key}">${forms[i].Value}</option>`;
32 }
33
34 $("#forms-dropdown").html(html);
35 },
36 function () {
37 console.log("Loading forms failed.");
38 });
39
40 $("#forms-dropdown").on("change", function () {
41 var id = $("#forms-dropdown").val();
42 if (id === undefined) return;
43 if (id === "none") {
44 $("#form-container").html("No form selected.");
45 return;
46 }
47
48 // Render the selected form
49 forms.displayForm(serverUrl,
50 id,
51 "#form-container",
52 {
53 // Get and save data for a particular path or image
54 path: slidePath,
55 currentUserOnly: true,
56 fieldValidationClass: "field-error"
57 });
58 });
59});