{"id":553,"date":"2012-09-18T23:58:58","date_gmt":"2012-09-19T05:58:58","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=553"},"modified":"2013-06-28T15:44:25","modified_gmt":"2013-06-28T21:44:25","slug":"a-simple-sharepoint-2013-app-to-create-geolocation-fields-and-map-views","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/a-simple-sharepoint-2013-app-to-create-geolocation-fields-and-map-views\/","title":{"rendered":"A Simple SharePoint 2013 App To Create Geolocation Fields and Map Views"},"content":{"rendered":"

One of the new features in SharePoint 2013 is the Geolocation field.  You can learn more about it here<\/a> in the MSDN.  As I was developing some new SharePoint 2013 demos for my upcoming sessions at the SharePoint Connections Fall 2012 Conference<\/a> I started looking into this new functionality.  My goal was to see how I could use the new Geolocation field type it to replace the Silverlight Bing Maps control I created for my SharePoint 2010 mashup demo<\/a>.<\/p>\n

As I went through the MSDN examples I saw that all of the examples and code samples use command line programs to create the Geolocation field and map-enabled list view that relies on the Geolocation field.  Personally, I\u2019m not a fan of using command line tools when I develop solutions, I\u2019d rather have something with a simple user interface that allows me to create new components quickly and easily without having to open a command prompt and remember the syntax associated with the command line program or a script.  If you have been following my blog for a while you\u2019re probably familiar with the SharePoint Feature Manager I created about 6 years ago to manage features for a SharePoint site which falls into this same category.<\/p>\n

So, along these lines, I decided to create a simple SharePoint Hosted App that allows me to easily specify which list I would like to add a Geolocation field to, give the Geolocation field a name, specify a name for the map-enabled list view that relies on the Geolocation field, and click a button or two to make everything for me.<\/p>\n

This is also a fantastic way to roll out this functionality to your users and give them self service capabilities to create this type of functionality directly from a web browser.<\/em><\/strong><\/p>\n

It turned out to be a very easy exercise!  Here\u2019s what the SP APP looks like.<\/p>\n

\"image\"<\/a><\/p>\n

Just fill in the values, click the buttons the Geolocation field, and the Geolocation column and the map-enabled view are created in the target list as you can see below.<\/p>\n

\"image\"<\/a><\/p>\n

\"image\"<\/a><\/p>\n

Here\u2019s what the new Map list view looks like.  That\u2019s some pretty sweet out of the box functionality!<\/p>\n

\"image\"<\/a><\/p>\n

Here\u2019s how I went about it.  First, I added some simple controls to the default.aspx page.<\/p>\n

\n
<%-- The following 4 lines are ASP.NET directives needed when using<\/span> SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"<\/span> MasterPageFile="~masterurl\/default.master"<\/span> language="C#"<\/span> %>
<%@ Register Tagprefix="SharePoint"<\/span> Namespace="Microsoft.SharePoint.WebControls"<\/span> Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"<\/span> %>
<%@ Register Tagprefix="Utilities"<\/span> Namespace="Microsoft.SharePoint.Utilities"<\/span> Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"<\/span> %>
<%@ Register Tagprefix="WebPartPages"<\/span> Namespace="Microsoft.SharePoint.WebPartPages"<\/span> Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"<\/span> %>

<%-- The markup and script in<\/span> the following Content element will be placed in<\/span> the <head> of the page --%>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead"<\/span> runat="server"<\/span>>
    <script type="text\/javascript"<\/span> src="..\/Scripts\/jquery-1.6.2.min.js"<\/span>><\/script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet"<\/span> type="text\/css"<\/span> href="..\/Content\/App.css"<\/span> \/>

    <!-- Add your JavaScript to the following file -->
    <script type="text\/javascript"<\/span> src="..\/Scripts\/App.js"<\/span>><\/script>

    <!-- The following script runs when the DOM is<\/span> ready. The inline code uses a SharePoint feature to ensure -->
    <!-- The SharePoint script file sp.js is<\/span> loaded and will then execute the sharePointReady() function<\/span> in<\/span> App.js -->
    <script type="text\/javascript"<\/span>>
        $(document).ready(function<\/span> () {
            SP.SOD.executeFunc('sp.js'<\/span>, 'SP.ClientContext'<\/span>, function<\/span> () { sharePointReady(); });
        });
    <\/script>
<\/asp:Content>

<%-- The markup and script in<\/span> the following Content element will be placed in<\/span> the <body> of the page --%>
<asp:Content ContentPlaceHolderId="PlaceHolderMain"<\/span> runat="server"<\/span>>

    <div>
        List Name:<br \/><input type="text"<\/span> id="listName"<\/span>\/><p \/>
        Geolocation Field Name:<br \/><input type="text"<\/span> id="fieldName"<\/span>\/><p \/>
        View Name:<br \/><input type="text"<\/span> id="viewName"<\/span>\/><p \/>
        <button id="createFieldButton"<\/span> type="button"<\/span> value=""<\/span>>Create Geolocation Field<\/button><p \/>
        <button id="createViewButton"<\/span> type="button"<\/span> value=""<\/span>>Create Map View<\/button>
    <\/div>

<\/asp:Content>
<\/pre>\n
<\/div>\n
Then, I wrote the JavaScript to do the work and added it to the app.js file.<\/p>\n
\n
var<\/span> context;
var<\/span> web;
var<\/span> user;
var<\/span> field;
var<\/span> view;

function<\/span> sharePointReady() {
    context = new<\/span> SP.ClientContext.get_current();
    web = context.get_web();

    $("#createFieldButton"<\/span>).click(function<\/span> () {
        var<\/span> fieldName = $("#fieldName"<\/span>).val();
        createGeoLocationField(fieldName);
    });

    $("#createViewButton"<\/span>).click(function<\/span> () {
        var<\/span> fieldName = $("#fieldName"<\/span>).val();
        var<\/span> viewName = $("#viewName"<\/span>).val();
        createGeoLocationView(viewName, fieldName);
    });
}

function<\/span> createGeoLocationView(viewName, fieldName) {
    spHostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"<\/span>));
    rootClientContext = new<\/span> SP.ClientContext(spHostUrl);
    list = rootClientContext.get_web().get_lists().getByTitle($("#listName"<\/span>).val());

    var<\/span> viewCreationInformation = new<\/span> SP.ViewCreationInformation();
    viewCreationInformation.set_title(viewName);

    var<\/span> viewType = new<\/span> SP.ViewType();    
    viewCreationInformation.set_viewTypeKind(viewType.html)

    view = list.get_views().add(viewCreationInformation);

    view.set_jsLink("mapviewtemplate.js"<\/span>);
    view.get_viewFields().add("Location"<\/span>);

    view.update();

    rootClientContext.load(view);
    rootClientContext.executeQueryAsync(
        Function.createDelegate(this<\/span>, this<\/span>.onCreateGeoLocationViewSucceeded),
        Function.createDelegate(this<\/span>, this<\/span>.onCreateGeoLocationViewFailed)
    );
}

function<\/span> onCreateGeoLocationViewSucceeded() {
    var<\/span> result = 'The view '<\/span> + view.get_title() + ' was successfully added.'<\/span>;
    alert(result);
}

function<\/span> onCreateGeoLocationViewFailed(sender, args) {
    alert('Request failed. '<\/span> + args.get_message() +
        '\\n'<\/span> + args.get_stackTrace());
}

function<\/span> createGeoLocationField(fieldName) {
    spHostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"<\/span>));
    rootClientContext = new<\/span> SP.ClientContext(spHostUrl);
    list = rootClientContext.get_web().get_lists().getByTitle($("#listName"<\/span>).val());
    field = list.get_fields().addFieldAsXml(
        '<Field DisplayName=\\''<\/span> + fieldName + '\\' Type=\\'Geolocation\\' \/>'<\/span>,
        true<\/span>,
        SP.AddFieldOptions.defaultValue
    );

    rootClientContext.load(field);
    rootClientContext.executeQueryAsync(
        Function.createDelegate(this<\/span>, this<\/span>.onCreateGeoLocationFieldSucceeded),
        Function.createDelegate(this<\/span>, this<\/span>.onCreateGeoLocationFieldFailed)
    );
}

function<\/span> onCreateGeoLocationFieldSucceeded() {
    var<\/span> result = 'The GeoLocation field '<\/span> + field.get_title() + ' was successfully added.'<\/span>;
    alert(result);
}

function<\/span> onCreateGeoLocationFieldFailed(sender, args) {
    alert('Request failed. '<\/span> + args.get_message() +
        '\\n'<\/span> + args.get_stackTrace());
}

function<\/span> getQueryStringParameter(paramToRetrieve) {
    var<\/span> params<\/span> =
        document.URL.split("?"<\/span>)[1].split("&"<\/span>);
    var<\/span> strParams = ""<\/span>;
    for<\/span> (var<\/span> i = 0; i < params<\/span>.length; i = i + 1) {
        var<\/span> singleParam = params<\/span>[i].split("="<\/span>);
        if<\/span> (singleParam[0] == paramToRetrieve)
            return<\/span> singleParam[1];
    }
}
<\/pre>\n
<\/div>\n
It\u2019s pretty simple, as you can see.  Hopefully this helps you out and gives some ideas that you can use to create your own SP APPs.<\/p>\n
It\u2019s already snowing at the ski resorts in Colorado!  Opening day shouldn\u2019t be more than 30 days away at some of them!<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the new features in SharePoint 2013 is the Geolocation field.  You can learn more about it here in the MSDN.  As I was developing [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[99],"tags":[10,22,75,5,76,7,68,74,72,73],"class_list":["post-553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sharepoint-2013","tag-custom-development","tag-development-utilities","tag-geolocation","tag-helpful-code","tag-mapping","tag-sharepoint","tag-sharepoint-2013","tag-sharepoint-apps","tag-sharepoint-hosted","tag-sp-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=553"}],"version-history":[{"count":6,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":735,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/553\/revisions\/735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/557"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}