source: trunk/samples/kauri-forms-sample/src/main/kauri/pages/advanced-controls.html.xml @ 930

Revision 930, 4.3 KB checked in by freya, 4 years ago (diff)

sample page to show advanced controls + page to show selection control behavior
Line 
1<html xmlns:t="http://kauriproject.org/template" t:inherit="module:/templates/layout/layout.xml">
2 
3<t:block name="extra-headers">
4    <t:superBlock/>
5    <title>Some advanced controls</title>
6    <t:variable name="dbmockpath" value="${publicUri('service:/data/')}"/>
7    <t:variable name="organisation" src="service:/data/organisation/1"/>
8
9    <script type="text/javascript">
10      var fconf = {
11        "createURI": "${publicUri('service:/data/organisation/')}",
12        fieldTypes: {
13            'contact' : {
14            base :  "case",
15            control : "case-control",
16            cases : {
17                phone : "string" ,
18                mail : {
19                    members : {
20                      'street' : "string",
21                      'nr' : "string",
22                      'postal-code' : "string",
23                      'city' : "string",
24                      'country' : "string"
25                    }
26                }
27              }
28            }
29          },
30          controlTypes:{
31              sliderControl:{
32                    base: 'slider-control',
33                    min: 1,
34                    max: 1000,
35                    step: 1,
36                    isRange: false
37              },
38              holidayRange:{
39                     base:'date-control',
40                     yearRange:'+0:+2',
41                     isRange : true
42               
43              }
44          }         
45     };
46
47     
48      jQuery(document).ready(function() {
49          var basicForm = new jQuery.org.kauriproject.forms.Form("org-form", fconf);
50          basicForm.setCreateMode(true);
51          basicForm.submitSuccess = function (data, success) {
52              window.location = "grid.html";
53          };
54          basicForm.setWireValue(${organisation});         
55      });
56    </script>   
57</t:block>
58 
59
60<t:block name="main">
61   
62     
63      <h2>Basic kauri form</h2>
64      <p>
65        We'll show some of the more advanced controls on this page:
66        <ul>
67            <li>A case control</li>
68            <li>A googlemaps control to show a location</li>
69            <li>A slider control</li>
70            <li>A daterange picker</li>
71        </ul>
72      </p>
73      <fieldset>
74        <legend>Add an organisation</legend>
75         <form id="org-form" method="get" action="">
76            <table style="width:auto">
77                <tbody>
78                    <tr>
79                        <td><label kauri-role="label" kauri-idref="name" for="name">Name</label></td>
80                        <td><span kauri-idref="name" kauri-type="string"/></td>       
81                        <td><span kauri-idref="name" kauri-role="messages"/></td>
82                    </tr>
83                    <tr>
84                        <td><label kauri-role="label" kauri-idref="contact" for="contact">Contact by</label></td>
85                        <td><span kauri-idref="contact" kauri-type="contact"/></td>       
86                        <td><span kauri-idref="contact" kauri-role="messages"/></td>
87                    </tr>
88                    <tr>
89                        <td><label kauri-role="label" kauri-idref="location">Location</label></td>
90                        <td><span kauri-idref="location" kauri-type="location"/></td>       
91                        <td><span kauri-idref="location" kauri-role="messages"/></td>
92                    </tr>
93                    <tr>
94                        <td><label kauri-role="label" kauri-idref="size">Number of employees in company</label></td>
95                        <td><span kauri-idref="size" kauri-type="integer" kauri-control="sliderControl"/></td>       
96                        <td><span kauri-idref="size" kauri-role="messages"/></td>
97                    </tr> 
98                    <tr>
99                        <td><label kauri-role="label" kauri-idref="holiday">Next collectively holiday</label></td>
100                        <td><span kauri-idref="holiday" kauri-type="date-range" kauri-control="holidayRange"/></td>       
101                        <td><span kauri-idref="holiday" kauri-role="messages"/></td>
102                    </tr>
103                </tbody>
104            </table>
105       
106            <input type="submit" kauri-role="submit" value="submit"/>     
107           </form>
108         </fieldset>
109       
110       </t:block>
111</html>
Note: See TracBrowser for help on using the repository browser.