Gift For Developers From SharePoint

Introduction

This article is the first in a series to explore the SharePoint Content Editor Web part and how it is a gift for SharePoint developers.

In the SharePoint world, we have many components that can be useful for end users and also it provides many items for developers and administrators. Here I have begun a series to explore the components that can be really helpful for developers.

Those components might come builtin from SharePoint or they third-party components that solve the developer's problems and make their work easier.

Let's jump into the series now.

In this article, we will explore the options provided by the Content Editor Web part and how it is helpful for developers.

The Content Editor Web Part is used for adding formatted text, tables, hyperlinks and images to the web part page. The Microsoft Office team has given provided an introduction to the Content Editor Web part on this link Content Editor Web Part.

For example, a developer wanted to test the application to access the web site details / creating a slideshow application using the client-side code using JavaScript or other client-side frameworks.

To do that, the user must edit the SharePoint Page every time using SharePoint Designer or during the creation of the app. The developer must edit, deploy and publish to view the result.

To avoid those cumbersome steps, we can easily test it using a content editor web part. Basically this Web Part doesn't offer the ability to enter a script, styles and other form related tags into the Content Editor Web Part directly. So we need to use some tricks to include scripts and style tags on the Content Editor Web part.

The Content Editor Web Part has the good option to include the script and styles in the web part properties called “Content Link”, there we can provide the link to our script file (that can be any text formatted file HTML, text, JavaScript and XML). So that we can update/modify the script and test our code frequently.

Include Script embed tags To Content Editor Web Part

• First we need to create a simple HTML file (called webinfo.html), that includes script, CSS and HTML content to test our application.

For example.

File Name: WebInfo.html

<!—HTML Content
<div id="myapp"></div>
<!—Script Content
<script type='text/javascript'>
var oWeb;
function getwebdetails()
{
    var clientContext = SP.ClientContext.get_current(); // equivalent to SPContext.Current
    oWeb = clientContext.get_web(); //Gets the current Web Object
    clientContext.load(oWeb);
    clientContext.executeQueryAsync(onSucceeded,onFailed);
}
function onSucceeded()
{
    document.getElementById("myapp").innerHTML = "<b>Web Title:</b> " + oWeb.get_title();
}
function onFailed(sender, args)
{
    try
    {
        console.log('Error: ' + args.get_message());
    }
    catch (err)
    {
    }
}
ExecuteOrDelayUntilScriptLoaded(getwebdetails, "sp.js");
</script>

• Then upload that file to any Document Library, I always prefer the Site Assets Library for uploading these kinds of files. So we can upload the file Site Assets Library. The URL will be; http://sharepointsite/siteassets/WebInfo.html

• Create a Web Part page or wiki page in any of the libraries.

• Edit the created page and add the Content Editor Web Part. This web part is available under the Media and Content category.

• Use the Edit Web Part option from the context menu of the added web part to get the Web Part Properties.

• In the Web Part properties, we have a Content Link TextBox. There we need to provide the HTML file the URL as input. For example, http://sharepointsite/siteassets/WebInfo.html and click to save the web part with the contents from the HTML page.

• Now the code works fine. By using the same HTML file, we can test multiple applications without changing / updating the webpart with multiple times.

Summary

By using this approach, we can save our precious time on developing the following client-side applications like App creation, REST API Calls to the SharePoint or external sites, SharePoint JavaScript Object model codes.