Skuid Page XML for "NewCaseWithMap" example

NewCaseWithMap.xml

<skuidpage showsidebar="true" showheader="true" tabtooverride="Case">
   <models>
      <model id="Case" limit="1" query="false" createrowifnonefound="true" sobject="Case">
         <fields>
            <field id="Subject"/>
            <field id="Status"/>
            <field id="Priority"/>
            <field id="Latitude__c"/>
            <field id="Longitude__c"/>
         </fields>
         <conditions/>
      </model>
   </models>
   <components>
      <pagetitle model="Case">
         <maintitle>
            <template>New {{Model.label}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.labelPlural}}</template>
         </subtitle>
         <actions>
            <action type="savecancel" afterCancel="/{{Model.KeyPrefix}}/o" afterSave="/{{Id}}"/>
         </actions>
      </pagetitle>
      <panelset type="custom">
         <panels>
            <panel width="50%">
               <components>
                  <basicfieldeditor showsavecancel="false" showheader="true" model="Case" mode="edit">
                     <columns>
                        <column width="100%">
                           <sections>
                              <section title="Basics">
                                 <fields>
                                    <field id="Subject"/>
                                    <field id="Status"/>
                                    <field id="Priority"/>
                                    <field id="Latitude__c"/>
                                    <field id="Longitude__c"/>
                                 </fields>
                              </section>
                           </sections>
                        </column>
                     </columns>
                  </basicfieldeditor>
               </components>
            </panel>
            <panel width="50%">
               <components>
                  <template multiple="false" model="Case" allowhtml="true">
                     <contents>&lt;div class="nx-editor-header-title"&gt;Where did this Case happen?&lt;/div&gt;</contents>
                  </template>
                  <custom name="LocationPicker"/>
               </components>
            </panel>
         </panels>
      </panelset>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="external" name="Google Maps API" cachelocation="false" url="https://maps.google.com/maps/api/js?sensor=false&amp;.js">var params = arguments[0],
   $ = skuid.$;
</jsitem>
         <jsitem location="inline" name="jQuery UI Map rc1" cachelocation="false" url="">
/*! jquery-ui-map rc1 | Johan Säll Larsson */
eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?"":e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('(3(d){d.a=3(a,b){j c=a.w(".")[0],a=a.w(".")[1];d[c]=d[c]||{};d[c][a]=3(a,b){K.I&amp;&amp;2.16(a,b)};d[c][a].J=d.n({1A:c,1z:a},b);d.S[a]=3(b){j g="1y"===1D b,f=H.J.12.15(K,1),i=2;l(g&amp;&amp;"1C"===b.1B(0,1))9 i;2.13(3(){j h=d.Z(2,a);h||(h=d.Z(2,a,k d[c][a](b,2)));l(g&amp;&amp;(h=h[b].10(h,f),"4"===b||o!=h))i=h});9 i}};d.a("1x.1t",{r:{1s:"1r",1w:5},1v:3(a,b){l(b)2.r[a]=b,2.4("8").B(a,b);P 9 2.r[a]},16:3(a,b){2.C=b;a=a||{};m.n(2.r,a,{1e:2.D(a.1e)});2.1c();2.1j&amp;&amp;2.1j()},1c:3(){j a=2;2.q={8:k 6.7.1u(a.C,a.r),L:[],t:[],u:[]};6.7.s.1N(a.q.8,"1M",3(){d(a.C).19("1L",a.q.8)});a.F(a.r.1Q,a.q.8)},1d:3(a){j b=2.4("1i",k 6.7.1P);b.n(2.D(a));2.4("8").1O(b)},1K:3(a){j b=2.4("8").1G();9 b?b.1F(a.18()):!1},1E:3(a,b){2.4("8").1J[b].O(2.z(a))},1I:3(a,b){a.8=2.4("8");a.Y=2.D(a.Y);j c=k(a.1H||6.7.1k)(a),e=2.4("L");c.V?e[c.V]=c:e.O(c);c.1i&amp;&amp;2.1d(c.18());2.F(b,a.8,c);9 d(c)},y:3(a){2.G(2.4(a));2.B(a,[])},G:3(a){A(j b R a)a.U(b)&amp;&amp;(a[b]p 6.7.T?(6.7.s.X(a[b]),a[b].x&amp;&amp;a[b].x(o)):a[b]p H&amp;&amp;2.G(a[b]),a[b]=o)},1p:3(a,b,c){a=2.4(a);b.v=d.1l(b.v)?b.v:[b.v];A(j e R a)l(a.U(e)){j g=!1,f;A(f R b.v)l(-1&lt;d.1n(b.v[f],a[e][b.1q]))g=!0;P l(b.11&amp;&amp;"1m"===b.11){g=!1;1o}c(a[e],g)}},4:3(a,b){j c=2.q;l(!c[a]){l(-1&lt;a.2i("&gt;")){A(j e=a.14(/ /g,"").w("&gt;"),d=0;d&lt;e.I;d++){l(!c[e[d]])l(b)c[e[d]]=d+1&lt;e.I?[]:b;P 9 o;c=c[e[d]]}9 c}b&amp;&amp;!c[a]&amp;&amp;2.B(a,b)}9 c[a]},2h:3(a,b,c){j d=2.4("Q",a.2j||k 6.7.2l);d.M(a);d.2k(2.4("8"),2.z(b));2.F(c,d)},2d:3(){o!=2.4("Q")&amp;&amp;2.4("Q").2c()},B:3(a,b){2.q[a]=b},2e:3(){j a=2.4("8"),b=a.2g();d(a).17("2f");a.2m(b)},2r:3(){2.y("L");2.y("u");2.y("t");2.G(2.q);m.2s(2.C,2.2t)},F:3(a){a&amp;&amp;d.2o(a)&amp;&amp;a.10(2,H.J.12.15(K,1))},D:3(a){l(!a)9 k 6.7.N(0,0);l(a p 6.7.N)9 a;a=a.14(/ /g,"").w(",");9 k 6.7.N(a[0],a[1])},z:3(a){9!a?o:a p m?a[0]:a p 2n?a:d("#"+a)[0]},2q:3(a,b){j c=k 6.7[a](m.n({8:2.4("8")},b));2.4("t &gt; "+a,[]).O(c);9 d(c)},2p:3(a,b){(!b?2.4("t &gt; E",k 6.7.E):2.4("t &gt; E",k 6.7.E(b,a))).M(m.n({8:2.4("8")},a))},2b:3(a,b,c){2.4("t &gt; "+a,k 6.7.1X(b,m.n({8:2.4("8")},c)))},1W:3(a,b,c){j d=2,g=2.4("u &gt; 1f",k 6.7.1f),f=2.4("u &gt; 1g",k 6.7.1g);b&amp;&amp;f.M(b);g.1Y(a,3(a,b){"20"===b?(f.1Z(a),f.x(d.4("8"))):f.x(o);c(a,b)})},1S:3(a,b){2.4("8").1R(2.4("u &gt; 1a",k 6.7.1a(2.z(a),b)))},1T:3(a,b){2.4("u &gt; 1b",k 6.7.1b).1V(a,b)}});m.S.n({17:3(a){6.7.s.19(2[0],a);9 2},W:3(a,b,c){6.7&amp;&amp;2[0]p 6.7.T?6.7.s.1U(2[0],a,b):c?2.1h(a,b,c):2.1h(a,b);9 2},27:3(a){6.7&amp;&amp;2[0]p 6.7.T?a?6.7.s.26(2[0],a):6.7.s.X(2[0]):2.28(a);9 2}});m.13("2a 29 22 21 23 25 24".w(" "),3(a,b){m.S[b]=3(a,d){9 2.W(b,a,d)}})})(m);',62,154,'||this|function|get||google|maps|map|return||||||||||var|new|if|jQuery|extend|null|instanceof|instance|options|event|overlays|services|value|split|setMap|clear|_unwrap|for|set|el|_latLng|FusionTablesLayer|_call|_c|Array|length|prototype|arguments|markers|setOptions|LatLng|push|else|iw|in|fn|MVCObject|hasOwnProperty|id|addEventListener|clearInstanceListeners|position|data|apply|operator|slice|each|replace|call|_setup|triggerEvent|getPosition|trigger|StreetViewPanorama|Geocoder|_create|addBounds|center|DirectionsService|DirectionsRenderer|bind|bounds|_init|Marker|isArray|AND|inArray|break|find|property|roadmap|mapTypeId|gmap|Map|option|zoom|ui|string|pluginName|namespace|substring|_|typeof|addControl|contains|getBounds|marker|addMarker|controls|inViewport|init|bounds_changed|addListenerOnce|fitBounds|LatLngBounds|callback|setStreetView|displayStreetView|search|addListener|geocode|displayDirections|KmlLayer|route|setDirections|OK|mouseover|dblclick|mouseout|dragend|drag|clearListeners|removeEventListener|unbind|rightclick|click|loadKML|close|closeInfoWindow|refresh|resize|getCenter|openInfoWindow|indexOf|infoWindow|open|InfoWindow|setCenter|Object|isFunction|loadFusion|addShape|destroy|removeData|name'.split('|'),0,{}));</jsitem>
         <jsitem location="inlinecomponent" name="LocationPicker" cachelocation="false" url="">var element = arguments[0],
   $ = skuid.$;

var STARTING_LAT_LNG = new google.maps.LatLng(53.307697, -6.222317);
var ZOOM = 15;
var MAP_WIDTH = '450px';
var MAP_HEIGHT = '400px';


var model = skuid.model.getModel('Case');
var row = model.getFirstRow();
var LatitudeField = 'Latitude__c';
var LongitudeField = 'Longitude__c';

element.css({width:MAP_WIDTH,height:MAP_HEIGHT})
   .gmap({'center': STARTING_LAT_LNG, zoom: ZOOM})
  .bind('init', function(event, map) { 
    $(map).click( function(event) {
        var lat=event.latLng.lat();
        var lng=event.latLng.lng();
        console.log('New Latitude: ' + lat + ', Longitude: ' + lng);

        // Update our row's Latitude and Longitude Field with the new values
        var updates = {};
        updates[LatitudeField] = lat;
        updates[LongitudeField] = lng;
        model.updateRow(row,updates);

        // Force any registered lists in our page to update
        // (this will get our Field Editor to show changes)
        $.each(model.registeredLists,function(){
            $.each(this.renderedItems,function(){
                $.each(this.fields,function(){
                    if (this.id === LatitudeField || this.id===LongitudeField) {
                        this.render();
                    }
                });
            });
        });
    });
});
</jsitem>
      </javascript>
   </resources>
</skuidpage>