Programming SharePoint
Today, lets take a look at using SharePoint Framework Office UI Fabric. Lets start by creating a SharePoint Framework project. Create a new folder and execute the yo @microsoft/sharepoint command within the folder. If you have not yet set up your workstation for SharePoint Framework you can check out my post SharePoint Framework SpFx Setup Continue reading “SharePoint Framework Office UI Fabric”
Today, lets take up the topic ‘SharePoint Framework provision assets’. Basically I am referring to the basic building blocks of SharePoint such as:
Step 1: First of all, lets download and install the NodeJS LTS version. Once it is installed you can run
node -vwhich will list the current version. Continue reading “SharePoint Framework SpFx Setup”
Today, we will look at creating a SharePoint SPA using AngularJS and Breeze in a SharePoint hosted app. Single Page Apps or SPA does not mean the application is limited to one page. The experience of navigating between pages is seamless for the user without the postback which happens when navigating to a page.
Continue reading “Creating a SharePoint SPA using AngularJS and Breeze”
In this article, we will learn about using AngularJS in SharePoint 2013. Specifically we’ll see how we can do the CRUD operations on a list in the host web from a SharePoint hosted app using AngularJS.
Continue reading “Using AngularJS in SharePoint”
The SharePoint 2013 workflow architecture has introduced a workflow manager farm. Workflow manager communicates with SharePoint 2013 using the REST API. Workflow manager requires the user profile application to be already created and configured.
Read on to understand workflows in SharePoint 2013. We’ll go over an example of creating a workflow for a contacts list which creates a task to categorize the contact as Developer, Team Lead or Manager instead of the out of box Approve, Reject options in the task form.
Continue reading “Workflows in SharePoint 2013 using Visual Studio”
In this article we’ll see how to plug in some JavaScript and use the JavaScript object model or JSOM to interact with SharePoint. The advantage with JSOM is that it allows you to batch the requests to the server.
It would also be easier to make REST API calls from JavaScript. And, it would be easier to work with the return data like json from these REST calls using JavaScript as well.
Continue reading “Using JavaScript or JQuery and JSOM in SharePoint”
In this article, I’ll walk you through the SharePoint 2016 installation on Hyper-V. I used Windows 10 as the Hyper-V host, but you can use any OS which supports Hyper-V. The high level steps are:
Lets say we have a SharePoint Site Page or Application Page which has a server side method and we would like to call this method from JavaScript code. Wouldn’t it be great if we can do the server side processing and return the result such as a string or a json object back to the client side? Well, this is precisely what we can do using WebMethod framework.
Continue reading “WebMethods in SharePoint using JQuery”
Sometimes, we would want to download multiple files based on a pre-defined query such as a monthly report or a bulk download.
If it is a few files or if it is a complete folder, we can use the explorer view to copy paste the files. However, if we want to customize the query or automate the process, then we need to write custom code to download the files programmatically. This is also true, if we want to access the metadata of the files along with downloading the actual files.
Continue reading “Download files from SharePoint document library using C#”
I faced an issue recently which was kind of an oversight when I look back now. However, there is one small trick which I learned or noticed which can save someone some time and a bit of frustration if you don’t see that small option. So, let me share that with you today. But first, lets set up the context to reproduce the problem.
I created a simple custom list. Add a people picker column with these two configurations:
Add a choice column called Status with just 2 options
Now, lets create a new item. Ensure that you add multiple users in the people picker field(Users).
Below image shows how the list looks like after the item has been added. We can see 3 people are added to the people picker field and Status is set to Submitted by default.
Now, lets create a flow which will set the status to Completed. Pretty simple requirement. However, we need to remember that the People picker is a required field. So, we need to set a value to this field.
Here, we can see that if the people picker field is left empty, it gives an error.
So, here I have added a get item which will retrieve all the values for the User field. In this case it has 3 items. If I try to set the claims to the claims of the get item, Flow automatically puts a loop around this activity. So, for each of the 3 items, we update the claims.
But this is the problem. Every time, we set the claims, it replaces the previous value, it does not append. If we need to manually append, we have to construct a json object with each claims value. However, there is a simpler way. This is what I wanted to share with you.
Solution / Trick: There is small button next to the User Claims field. If you hover on it, it says ‘Switch to input entire array’. If you click on it, it changes it’s icon and we can input the entire array.
Changes to this..
In this mode, we can take the value which we got from the get item (which contains all 3 items) and set it in the update item. Now, it doesn’t create the loop around it.
Thats it! Let me know if you found this helpful or interesting. Or what you are interested in reading about. Cheers!
Let us have a look at a SharePoint Framework SpFx example without using any client side framework i.e it uses plain vanilla JavaScript or TypeScript.
In the previous post, we set up the development environment and created a simple hello world web part. If you need to setup your dev environment, you can check out the post – SharePoint Framework SpFx setup. Now, lets examine how to
customize the SharePoint Framework SpFx step by step to retrieve and display some list data.
In the top of the HelloWorldWebPart.ts, we need to import the SPHttpClient and SPHttpClientResponse objects. This will provide us the helper methods to make the REST calls.
import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';
Lets create couple of interfaces to represent the structure of data returned from the api
export interface ITaskListItems {
value: ITaskListItem[];
}
export interface ITaskListItem {
Title: string;
}
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.helloWorld }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<div id="taskListInfo" />
</div>
</div>
</div>
</div>`;
this.loadTaskListInfoAsync();
}
loadTaskListInfoAsync calls two helper methods
private loadTaskListInfoAsync(): void {
this.getListData()
.then((response) => {
this.renderListInfo(response.value);
});
}
private getListData(): Promise {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getByTitle('Tasks')/Items?$select=Title`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
Now we can see the SharePoint Framework SpFx example in the SharePoint online workbench.
Now lets deploy our SharePoint Framework SpFx example to SharePoint online. Press Ctrl + C to stop the gulp serve
Under the config folder, check the package-solution.json file. You can change any of the parameters such as id,
name etc. You can leave it as defaults for now.
Now, we can package up the solution
gulp package-solution
which will create a package file
Once it is added to app catalog, it will list the app and error column should say something like ‘No errors’
Now, lets add the SharePoint Framework SpFx example to the dev site. navigate to the dev site and click the gear icon and ‘Add an app’ and select the hello world web part.
Ensure ‘gulp serve’ is running on your local machine again. Now you can go to any page in your site and add this web part.
Notice that we are still serving this app from local server. You might get an error if gulp serve is not running
locally.
Now instead of serving the files locally, we can upload it or host it in the CDN which is given for free by
Microsoft. Let’s go ahead and upload our SharePoint Framework SpFx example package to Microsoft CDN.
First, ensure you have the latest SharePoint
Online Management Shell
Next, connect to your tenant admin site
Connect-SPOService -Url https://<yourtenant>-admin.sharepoint.com
Enable the public CDN for the tenant
Set-SPOTenantCdnEnabled -CdnType Public
Lets check the setting by running
Get-SPOTenantCdnOrigins -CdnType Public and we should get back
gulp bundle --shipgulp package-solution --ship and redeploy the package. If the previous local package is already present, it will ask to replace. Click on ‘Replace it’
Now, if we refresh our page and go to the console window and check the Sources tab, we can see the files for the SharePoint Framework SpFx example are servedLets see how we can display the SharePoint list item permissions using REST API Continue reading “Display the SharePoint list item permissions using REST API”
Lets explore customizing SharePoint Forms using JSLink.
Lets say we want to customize the New Form of a custom list.
Continue reading “Customizing SharePoint Forms using JSLink”
In SharePoint 2010, FAST search existed alongside with SharePoint Search. In SharePoint 2013, both have been integrated and you now have a single interface of SharePoint Search.
In this post, we’ll go over some SharePoint 2013 Search concepts such as crawled properties, managed properties. Then, we’ll see how you can customize the search center with Custom result page and navigation, Result Source, Display template, Result type, Query Rules and Refiners.
Continue reading “Customizing SharePoint 2013 Search Center”