Click here to close now.




















Welcome!

Industrial IoT Authors: Liz McMillan, Kevin Benedict, Cloud Best Practices Network, Jason Bloomberg, Continuum Blog

Blog Feed Post

How to: Use the SharePoint 2013 Client Object Model (SP.js) from a Client Web Part

I was talking to Tom Resing (@resing) last week about using the SharePoint Client Object Model inside a Client Web Part and it became apparent that I left you all hanging with my last post.  I got you to the point where you could build your web part, but referencing SP.js is not as simple as you would think it would be.  I had to look at a lot of code samples to put this all together.  This follow-up post will give you the necessary steps to get started working with SharePoint right away.

The first thing I do is add some script references to the page.  For Client Web Parts, I tend to use a new .js file to host the web part’s JavaScript and I leave app.js to serve the needs of Default.aspx.  Building on my example from the last post, I add a new script called HelloWorldClientWebPart.js.  I add this in the Scripts folder. 

AppHelloWorldScriptProjectItem

We’ll add our code to this file in a minute but first I want to add those references.  In this case, we aren’t loading a reference to SP.js yet.  Instead, we’ll load jQuery from a CDN as well as MicrosoftAjax.js.  You may not need all of those, but chances are you do.

<head>

    <script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

    <script type="text/javascript" src="../Scripts/HelloWorldClientWebPart.js"></script>

</head>

Now we’ll jump over to our new script file.  We’re going to borrow a few lines from App.js starting with variables to hold the context, web, and user.

var context;

var web;

var user;

Now we use jQuery’s document.ready function to add our code.

$(document).ready(

    function () {

    }

);

You can add this line to your document.ready function to get a reference to the SPSite object of the site hosting the client web part (app part) as opposed to the site actually hosting the app itself.  We’ll also need it to get our reference to SP.js as well.

//Get the URI decoded SharePoint site url from the SPHostUrl parameter.

var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

This method relies on getQueryStringParameter which you’ll find in many App examples.

function getQueryStringParameter(urlParameterKey) {

    var params = document.URL.split('?')[1].split('&');

    var strParams = '';

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split('=');

        if (singleParam[0] == urlParameterKey)

            return decodeURIComponent(singleParam[1]);

    }

}

To get the host URL, you will have to modify your elements.xml to make this work.  Do this by adding {standardtokens} to the URL of the Content element.

<Content Type="html" Src="~appWebUrl/Pages/HelloWorldClientWebPart.aspx?{StandardTokens}" />

When you do this, SharePoint will automatically pass you a number of query string parameters that you can take advantage of including the SPHostUrl.  At that point you can pass the URL into your call to get a SPWeb object.

Back in the JavaScript file, we add the rest of our code.  First we need to get the URL to the 15 folder inside _layouts and assign it to our layoutsRoot variable.  Now we can use the jQuery getScript() method to retrieve the scripts we need.  Before you get SP.js, you have to get SP.Runtime.js.  That is why you see the nested calls below.  Once SP.js can be retrieved, it makes a call to the execOperation method.  This method can then take advantage of the SharePoint Client Object Model.

//Build absolute path to the layouts root with the spHostUrl

var layoutsRoot = spHostUrl + '/_layouts/15/';

 

$.getScript(layoutsRoot + "SP.Runtime.js", function () {

    $.getScript(layoutsRoot + "SP.js", execOperation);

}

);

To demonstrate it’s use, we’ll use the same script example used in App.js.  We start by defining execOperation and getting a reference to the content and SPSite object.

function execOperation() {

    // get context and then username

    context = new SP.ClientContext.get_current();

    web = context.get_web();

 

    getUserName();

}

We then use the same getUserName() and other functions from App.js.

function getUserName() {

    user = web.get_currentUser();

    context.load(user);

    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

 

// This function is executed if the above OM call is successful

// It replaces the content of the 'welcome' element with the user name

function onGetUserNameSuccess() {

    $('#message').text('Hello ' + user.get_title());

}

 

// This function is executed if the above OM call fails

function onGetUserNameFail(sender, args) {

    alert('Failed to get user name. Error:' + args.get_message());

}

Putting the entire script together, here is what it looks like.

var context;

var web;

var user;

 

//Wait for the page to load

$(document).ready(

    function () {

        //Get the URI decoded SharePoint site url from the SPHostUrl parameter.

        var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

 

        //Build absolute path to the layouts root with the spHostUrl

        var layoutsRoot = spHostUrl + '/_layouts/15/';

 

        $.getScript(layoutsRoot + "SP.Runtime.js", function () {

            $.getScript(layoutsRoot + "SP.js", execOperation);

        }

        );

 

        // Function to execute basic operations.

        function execOperation() {

            // get context and then username

            context = new SP.ClientContext.get_current();

            web = context.get_web();

 

            getUserName();

        }

    }

);

 

function getQueryStringParameter(urlParameterKey) {

    var params = document.URL.split('?')[1].split('&');

    var strParams = '';

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split('=');

        if (singleParam[0] == urlParameterKey)

            return decodeURIComponent(singleParam[1]);

    }

}

 

// This function prepares, loads, and then executes a SharePoint query to get the current users information

function getUserName() {

    user = web.get_currentUser();

    context.load(user);

    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

 

// This function is executed if the above OM call is successful

// It replaces the content of the 'welcome' element with the user name

function onGetUserNameSuccess() {

    $('#message').text('Hello ' + user.get_title());

}

 

// This function is executed if the above OM call fails

function onGetUserNameFail(sender, args) {

    alert('Failed to get user name. Error:' + args.get_message());

}

Lastly, I update HelloWorldClientWebPart.aspx with a div to hold the results.  Here is what the entire file looks like.

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />

<head>

    <script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

    <script type="text/javascript" src="../Scripts/HelloWorldClientWebPart.js"></script>

</head>

<div>

    <h2>Hello World Client Web Part!</h2>

    <div id="message"></div>

</div>

We can then execute the app in the debugger and then add the App Part to the root page of our developer site.  It should look something like this when you’re done.

AppClientWebPartWithJavaScript

Sorry to leave you hanging like that on my previous blog post.  I hope this helps you get started with your app.  It’s a bit involved but not too bad.  It would be nice to create a custom SharePoint Project Item that does this for us.

Come see my sessions at SPC12 and follow me on twitter @coreyroth.

Read the original blog entry...

More Stories By Corey Roth

Corey Roth, a SharePoint Server MVP, is a consultant at Hitachi Consulting specializing in SharePoint and Office 365 for clients in the energy sector. He has more than ten years of experience delivering solutions in the energy, travel, advertising and consumer electronics verticals.

Corey specializes in delivering ECM and search solutions to clients using SharePoint. Corey has always focused on rapid adoption of new Microsoft technologies including Visual Studio 2013, Office 365, and SharePoint.

He is a member of the .NET Mafia (www.dotnetmafia.com) where he blogs about the latest technology and SharePoint. He is dedicated to the community and speaks regularly at user groups and SharePoint Saturdays.

@ThingsExpo Stories
The Internet of Things is in the early stages of mainstream deployment but it promises to unlock value and rapidly transform how organizations manage, operationalize, and monetize their assets. IoT is a complex structure of hardware, sensors, applications, analytics and devices that need to be able to communicate geographically and across all functions. Once the data is collected from numerous endpoints, the challenge then becomes converting it into actionable insight.
With the proliferation of connected devices underpinning new Internet of Things systems, Brandon Schulz, Director of Luxoft IoT – Retail, will be looking at the transformation of the retail customer experience in brick and mortar stores in his session at @ThingsExpo. Questions he will address include: Will beacons drop to the wayside like QR codes, or be a proximity-based profit driver? How will the customer experience change in stores of all types when everything can be instrumented and analyzed? As an area of investment, how might a retail company move towards an innovation methodolo...
SYS-CON Events announced today that HPM Networks will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. For 20 years, HPM Networks has been integrating technology solutions that solve complex business challenges. HPM Networks has designed solutions for both SMB and enterprise customers throughout the San Francisco Bay Area.
Consumer IoT applications provide data about the user that just doesn’t exist in traditional PC or mobile web applications. This rich data, or “context,” enables the highly personalized consumer experiences that characterize many consumer IoT apps. This same data is also providing brands with unprecedented insight into how their connected products are being used, while, at the same time, powering highly targeted engagement and marketing opportunities. In his session at @ThingsExpo, Nathan Treloar, President and COO of Bebaio, will explore examples of brands transforming their businesses by t...
Through WebRTC, audio and video communications are being embedded more easily than ever into applications, helping carriers, enterprises and independent software vendors deliver greater functionality to their end users. With today’s business world increasingly focused on outcomes, users’ growing calls for ease of use, and businesses craving smarter, tighter integration, what’s the next step in delivering a richer, more immersive experience? That richer, more fully integrated experience comes about through a Communications Platform as a Service which allows for messaging, screen sharing, video...
SYS-CON Events announced today that Pythian, a global IT services company specializing in helping companies leverage disruptive technologies to optimize revenue-generating systems, has been named “Bronze Sponsor” of SYS-CON's 17th Cloud Expo, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Founded in 1997, Pythian is a global IT services company that helps companies compete by adopting disruptive technologies such as cloud, Big Data, advanced analytics, and DevOps to advance innovation and increase agility. Specializing in designing, imple...
As more and more data is generated from a variety of connected devices, the need to get insights from this data and predict future behavior and trends is increasingly essential for businesses. Real-time stream processing is needed in a variety of different industries such as Manufacturing, Oil and Gas, Automobile, Finance, Online Retail, Smart Grids, and Healthcare. Azure Stream Analytics is a fully managed distributed stream computation service that provides low latency, scalable processing of streaming data in the cloud with an enterprise grade SLA. It features built-in integration with Azur...
SYS-CON Events announced today that Micron Technology, Inc., a global leader in advanced semiconductor systems, will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Micron’s broad portfolio of high-performance memory technologies – including DRAM, NAND and NOR Flash – is the basis for solid state drives, modules, multichip packages and other system solutions. Backed by more than 35 years of technology leadership, Micron's memory solutions enable the world's most innovative computing, consumer,...
Contrary to mainstream media attention, the multiple possibilities of how consumer IoT will transform our everyday lives aren’t the only angle of this headline-gaining trend. There’s a huge opportunity for “industrial IoT” and “Smart Cities” to impact the world in the same capacity – especially during critical situations. For example, a community water dam that needs to release water can leverage embedded critical communications logic to alert the appropriate individuals, on the right device, as soon as they are needed to take action.
As more intelligent IoT applications shift into gear, they’re merging into the ever-increasing traffic flow of the Internet. It won’t be long before we experience bottlenecks, as IoT traffic peaks during rush hours. Organizations that are unprepared will find themselves by the side of the road unable to cross back into the fast lane. As billions of new devices begin to communicate and exchange data – will your infrastructure be scalable enough to handle this new interconnected world?
While many app developers are comfortable building apps for the smartphone, there is a whole new world out there. In his session at @ThingsExpo, Narayan Sainaney, Co-founder and CTO of Mojio, will discuss how the business case for connected car apps is growing and, with open platform companies having already done the heavy lifting, there really is no barrier to entry.
With the Apple Watch making its way onto wrists all over the world, it’s only a matter of time before it becomes a staple in the workplace. In fact, Forrester reported that 68 percent of technology and business decision-makers characterize wearables as a top priority for 2015. Recognizing their business value early on, FinancialForce.com was the first to bring ERP to wearables, helping streamline communication across front and back office functions. In his session at @ThingsExpo, Kevin Roberts, GM of Platform at FinancialForce.com, will discuss the value of business applications on wearable ...
WebRTC has had a real tough three or four years, and so have those working with it. Only a few short years ago, the development world were excited about WebRTC and proclaiming how awesome it was. You might have played with the technology a couple of years ago, only to find the extra infrastructure requirements were painful to implement and poorly documented. This probably left a bitter taste in your mouth, especially when things went wrong.
Too often with compelling new technologies market participants become overly enamored with that attractiveness of the technology and neglect underlying business drivers. This tendency, what some call the “newest shiny object syndrome,” is understandable given that virtually all of us are heavily engaged in technology. But it is also mistaken. Without concrete business cases driving its deployment, IoT, like many other technologies before it, will fade into obscurity.
The Internet of Things (IoT) is about the digitization of physical assets including sensors, devices, machines, gateways, and the network. It creates possibilities for significant value creation and new revenue generating business models via data democratization and ubiquitous analytics across IoT networks. The explosion of data in all forms in IoT requires a more robust and broader lens in order to enable smarter timely actions and better outcomes. Business operations become the key driver of IoT applications and projects. Business operations, IT, and data scientists need advanced analytics t...
In his session at @ThingsExpo, Lee Williams, a producer of the first smartphones and tablets, will talk about how he is now applying his experience in mobile technology to the design and development of the next generation of Environmental and Sustainability Services at ETwater. He will explain how M2M controllers work through wirelessly connected remote controls; and specifically delve into a retrofit option that reverse-engineers control codes of existing conventional controller systems so they don't have to be replaced and are instantly converted to become smart, connected devices.
SYS-CON Events announced today that IceWarp will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. IceWarp, the leader of cloud and on-premise messaging, delivers secured email, chat, documents, conferencing and collaboration to today's mobile workforce, all in one unified interface
Akana has announced the availability of the new Akana Healthcare Solution. The API-driven solution helps healthcare organizations accelerate their transition to being secure, digitally interoperable businesses. It leverages the Health Level Seven International Fast Healthcare Interoperability Resources (HL7 FHIR) standard to enable broader business use of medical data. Akana developed the Healthcare Solution in response to healthcare businesses that want to increase electronic, multi-device access to health records while reducing operating costs and complying with government regulations.
For IoT to grow as quickly as analyst firms’ project, a lot is going to fall on developers to quickly bring applications to market. But the lack of a standard development platform threatens to slow growth and make application development more time consuming and costly, much like we’ve seen in the mobile space. In his session at @ThingsExpo, Mike Weiner, Product Manager of the Omega DevCloud with KORE Telematics Inc., discussed the evolving requirements for developers as IoT matures and conducted a live demonstration of how quickly application development can happen when the need to comply wit...
The Internet of Everything (IoE) brings together people, process, data and things to make networked connections more relevant and valuable than ever before – transforming information into knowledge and knowledge into wisdom. IoE creates new capabilities, richer experiences, and unprecedented opportunities to improve business and government operations, decision making and mission support capabilities.