Skip to content

Instantly share code, notes, and snippets.

@zachelrath

zachelrath/NewCaseWithMap.xml

Created March 12, 2014 18:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zachelrath/9512979 to your computer and use it in GitHub Desktop.
Save zachelrath/9512979 to your computer and use it in GitHub Desktop.
Download ZIP
Skuid Page XML for "NewCaseWithMap" example
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment