tag:blogger.com,1999:blog-27863521085968811122023-11-16T03:31:15.084-08:00HASHTAGGED SHAREPOINTHow's and what's of SharePointAnonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-2786352108596881112.post-82382013616255473632017-04-20T14:32:00.002-07:002017-04-20T14:35:44.179-07:00SharePoint Framework Tool Chain<div dir="ltr" style="text-align: left;" trbidi="on">
<h4 style="text-align: left;">
1. GET NODE</h4>
<div style="text-align: left;">
Download LTS ( Long Term Support ) version of node . You can also check if you have node by running </div>
<div style="text-align: left;">
<blockquote class="tr_bq">
node --version</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA2It651Ma8yyAXuZ92mN2k221BWv1ZeH3F2hhgrE4pZYN-nybrEwwG5WmpgKUBbBn580Yx_xnQyUIgywrF5hyphenhyphenkaoJGXlla1_7X_lBM9GFsfWDUnKWvRo4v_fEumRk0QTdRrSoTd7aDVAk/s1600/node.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA2It651Ma8yyAXuZ92mN2k221BWv1ZeH3F2hhgrE4pZYN-nybrEwwG5WmpgKUBbBn580Yx_xnQyUIgywrF5hyphenhyphenkaoJGXlla1_7X_lBM9GFsfWDUnKWvRo4v_fEumRk0QTdRrSoTd7aDVAk/s320/node.PNG" width="320" /></a></div>
<br /></div>
<h4 style="text-align: left;">
2. INSTALL NPM</h4>
<div style="text-align: left;">
NPM, also know as node package manager is used to install packages and dependencies to your project. If you are coming from a .NET background NPM is like Nugget packages in visual studio.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Usually NPM is installed as a part of Node.js installation.</div>
<div style="text-align: left;">
You can check the version of NPM by running the below command </div>
<blockquote class="tr_bq">
npm --version</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw06zXQWexyh_XII-0z1anQHJJozO5EewDreJpSp7poUNdB9bXzeL0xmFvO2_8Q7iCQYr_2REAh-aUBZ6heFLYq-8unBmpnQu2KBBPn8V5Qkmn3zfy9H6FmrqGt7ABZfckfpc_xWtAzkkp/s1600/npm.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw06zXQWexyh_XII-0z1anQHJJozO5EewDreJpSp7poUNdB9bXzeL0xmFvO2_8Q7iCQYr_2REAh-aUBZ6heFLYq-8unBmpnQu2KBBPn8V5Qkmn3zfy9H6FmrqGt7ABZfckfpc_xWtAzkkp/s320/npm.PNG" width="320" /></a></div>
<div style="text-align: left;">
You can install npm by using the below command</div>
<blockquote class="tr_bq">
npm install -g </blockquote>
-g is a switch which means global and it is installed globally<br />
<br />
<h4>
3. INSTALL YEOMAN</h4>
<div>
Yeoman is used for scaffolding projects. It can be installed via npm using the below command </div>
<blockquote class="tr_bq">
npm install yo -g</blockquote>
<div>
If you have yeoman installed you can check its version using the below command </div>
<blockquote class="tr_bq">
yo --version</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSW0nc_S_4SjH04mBkcmfJpFujYQQE8XqLiv23_zqeppke2BRQ06EAL89Z9Dpg6ei3yCjGWDB1BNzMzWCDgFnGP9w54HA_6L2Qo9trQS6udem_ZypCRn0mRDarqRRcL6I8I1W09d0w05Cb/s1600/yo.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSW0nc_S_4SjH04mBkcmfJpFujYQQE8XqLiv23_zqeppke2BRQ06EAL89Z9Dpg6ei3yCjGWDB1BNzMzWCDgFnGP9w54HA_6L2Qo9trQS6udem_ZypCRn0mRDarqRRcL6I8I1W09d0w05Cb/s320/yo.PNG" width="320" /></a></div>
<br />
<h4 style="text-align: left;">
4. INSTALL SHAREPOINT GENERATOR</h4>
This needs to be installed so that yeoman can create SharePoint projects<br />
Use the below command to install SharePoint generator<br />
<blockquote class="tr_bq">
npm install @Microsoft/generator-sharepoint -g</blockquote>
If you have already installed it , you can check the list of generators installed by running the PowerShell command<br />
<blockquote class="tr_bq">
yo --generators</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6l3dxSWdAjfZWOEajjVV6SuIFRLyFmHRvejlVbJU8W9bliqvoyauoBttOQ7W434hKnxmM9SsJ7dRtBrlWZrBLtpbzsp98aUqJ8SeLGCijPs-esIxNfShSYKDvVw1gEqFnUE0rj-19azO6/s1600/sp.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6l3dxSWdAjfZWOEajjVV6SuIFRLyFmHRvejlVbJU8W9bliqvoyauoBttOQ7W434hKnxmM9SsJ7dRtBrlWZrBLtpbzsp98aUqJ8SeLGCijPs-esIxNfShSYKDvVw1gEqFnUE0rj-19azO6/s320/sp.PNG" width="320" /></a></div>
<br />
Now your machine is ready to develop modern client webparts using SharePoint framework.<br />
<br />
Mentioned below are a couple of new concepts we need to learn while creating these webparts<br />
<br />
<ul style="text-align: left;">
<li><b><span style="font-size: large;">Typescript</span></b> : is a language developed by Microsoft. This is a superset of JavaScript but is strongly typed and catches syntax errors and exceptions. This allows an easier transition for .NET developers from C# to JavaScript as you can define classes, interfaces, declare datatypes and much more.</li>
</ul>
<div style="text-align: left;">
These files have .ts as extension and are complied by tsc complier. If you are developing in Visual Studio Code, you don't need to worry about installing tsc. However you may need to if you are using some other IDE. </div>
<ul style="text-align: left;">
<li><b><span style="font-size: large;">Gulp</span></b> : Gulp is like MSBuild. This is used to automate tasks like build, package, debug and deploy. Gulp is also installed using npm</li>
</ul>
<blockquote class="tr_bq">
npm install gulp -g</blockquote>
or if you have gulp already installed you can check using<br />
<blockquote class="tr_bq">
gulp --version </blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglLXsSWprJkSjDw9J4QW95PC1oBp4yy2CJYMsvVPNanWiP5F9y6fME7xvxE_XyqgJDY6mb3L1eONaySjVT4Dd_w6__Qcj443xOyRMXXsn9L1oncPb7Wmg5eOlNwl2R7FpsAPz1akZ5mdHf/s1600/gullp.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglLXsSWprJkSjDw9J4QW95PC1oBp4yy2CJYMsvVPNanWiP5F9y6fME7xvxE_XyqgJDY6mb3L1eONaySjVT4Dd_w6__Qcj443xOyRMXXsn9L1oncPb7Wmg5eOlNwl2R7FpsAPz1akZ5mdHf/s320/gullp.PNG" width="320" /></a></div>
<br />
<ul style="text-align: left;">
<li><b><span style="font-size: large;">React/Angular</span></b> : A learning curve to learn modern JavaScript framework like react and angular </li>
</ul>
<div style="text-align: left;">
</div>
</div>
Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com0tag:blogger.com,1999:blog-2786352108596881112.post-24155655973990529782017-04-17T13:51:00.003-07:002017-04-17T16:02:41.658-07:00Delete List/Library on SharePoint Online when there is no remove or delete option<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="border-image: none; clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fOe8yYGBlqjTAt-BJs9ryyyNI22U09ImJtZrweVEkEFqoUZmkGDMLnkK8U_BJLjPqguYzYcWgEi66irdc1udmSassxcPG_bVuVmTgan26l3oqiGJ50Oi4fGo94nWO7_hVIKFGzv_lNG0/s1600/Before.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fOe8yYGBlqjTAt-BJs9ryyyNI22U09ImJtZrweVEkEFqoUZmkGDMLnkK8U_BJLjPqguYzYcWgEi66irdc1udmSassxcPG_bVuVmTgan26l3oqiGJ50Oi4fGo94nWO7_hVIKFGzv_lNG0/s640/Before.PNG" width="640" /></a></div>
<div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
There are two possible reasons as to why you cannot see the remove or delete option on a list or a library.</div>
</div>
</div>
<div style="border-image: none;">
<br /></div>
<ol style="border-image: none; text-align: left;">
<li><div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
You don't have enough permissions.</div>
</div>
</div>
</li>
<li><div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
The library or list was created with "Allow Deleting" property set to false.</div>
</div>
</div>
</div>
</div>
</li>
</ol>
<div style="border-image: none; text-align: left;">
<div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
In this post I am going to talk more about Point #2 and discuss how can we set it to true using CSOM for SharePoint Online.</div>
</div>
</div>
</div>
<div style="border-image: none; text-align: left;">
<div style="border-image: none;">
I am creating a console application using visual studio and using the latest version of SharePoint online CSOM. The older version of this nugget package does not contain enabling "Allow Deletion: . So make sure you get the latest version.</div>
</div>
<div style="border-image: none; text-align: left;">
<br />
<a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a></div>
Add the nugget package in below picture.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmPhQUFLu4n62rPWUDddfeLJQT-bu5SLTE4ZsOleEiay3xuTL2jkRvNImtUX9umQjDBisgdZmqrw8jlzUiUGFQ-SdM6pw2I0orGVJKJa2SqXc2-08Uz4QEmbZCvuVS_FSMeG71RXvP7B7/s1600/CSOM.PNG" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmPhQUFLu4n62rPWUDddfeLJQT-bu5SLTE4ZsOleEiay3xuTL2jkRvNImtUX9umQjDBisgdZmqrw8jlzUiUGFQ-SdM6pw2I0orGVJKJa2SqXc2-08Uz4QEmbZCvuVS_FSMeG71RXvP7B7/s640/CSOM.PNG" width="640" /></a><br />
<div style="border-image: none; text-align: left;">
<div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
<div style="border-image: none;">
<div class="separator" style="border-image: none; clear: both; text-align: center;">
<a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div style="border-image: none;">
<br /></div>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<pre class="prettyprint" style="border-image: none; text-align: left;">string siteCollectionUrl = "https://company.sharepoint.com/";
string userName = "user@microsoft.com";
string password = "xxxxxxxx";
ClientContext ctx = new ClientContext(siteCollectionUrl);
SecureString secureString = new SecureString();
password.ToList().ForEach(secureString.AppendChar);
ctx.Credentials = new SharePointOnlineCredentials(userName, secureString);
Web web = ctx.Web;
ctx.Load(web);
ctx.ExecuteQuery();
Console.WriteLine(web.Url.ToString());
Console.WriteLine("Current Site: " + web.Title);
List library = web.Lists.GetByTitle("Documents");
ctx.Load(library, l=>l.AllowDeletion);
ctx.ExecuteQuery();
Console.WriteLine("Allow deletion for library is : " + library.AllowDeletion);
</pre>
<div style="border-image: none;">
<a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="border-image: none; clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRu4US3yuaQe7IW4Je3kLTpL_4ZgLvLA8EFpwUZNbb5hOXZikJx8mEk9Bkh1GUIVlk_DfFm4WiN6a3mOSTu9l6CRh_T_ig-yRHrwzIGpeWjW9iwpCVksVeCoDMgWmNRjXlpHIEWKsmKxpU/s1600/console.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRu4US3yuaQe7IW4Je3kLTpL_4ZgLvLA8EFpwUZNbb5hOXZikJx8mEk9Bkh1GUIVlk_DfFm4WiN6a3mOSTu9l6CRh_T_ig-yRHrwzIGpeWjW9iwpCVksVeCoDMgWmNRjXlpHIEWKsmKxpU/s640/console.PNG" width="640" /></a></div>
<div style="border-image: none;">
<br /></div>
<div style="border-image: none;">
<br /></div>
<div style="border-image: none;">
<br /></div>
<div style="border-image: none;">
<div style="border-image: none;">
Since "Allow deletion" property is set to false. We have to set it to true to get back the delete list/library link.</div>
</div>
<div style="border-image: none;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><br /></div>
<pre class="prettyprint" style="border-image: none;">if (!library.AllowDeletion)
{
library.AllowDeletion = true;
library.Update();
ctx.ExecuteQuery();
ctx.Load(library, l => l.AllowDeletion);
ctx.ExecuteQuery();
Console.ForegroundColor = ConsoleColor.Yellow;
Console.WriteLine("Allow deletion for library after update is : " + library.AllowDeletion);
}
</pre>
<br />
<div style="border-image: none;">
<br /></div>
<div style="border-image: none;">
<div style="border-image: none;">
<a href="https://www.blogger.com/" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4_XZWbxUFj8qR_ik861XXv_GSX-KR-vFp6s7NBa_V3GVT8QJSGuThvWVjsE_bAqn8KSSaCrRZKHvIdiy_mbrzEneQXAFAs1DYvZ_GppmWfKO1QJcms7eneY8RSdUPUmBjtI4WllASbdx/s1600/console1.PNG" imageanchor="1"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4_XZWbxUFj8qR_ik861XXv_GSX-KR-vFp6s7NBa_V3GVT8QJSGuThvWVjsE_bAqn8KSSaCrRZKHvIdiy_mbrzEneQXAFAs1DYvZ_GppmWfKO1QJcms7eneY8RSdUPUmBjtI4WllASbdx/s400/console1.PNG" width="400" /></a></div>
</div>
<br />
<div style="border-image: none;">
<div style="border-image: none;">
Now if we go back to the library and refresh the settings page of list/library. We now see that the delete link is back.</div>
<div style="border-image: none;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwe4TVIf5OwUFONf4sym83jQ4owhhMBdJ43AoaZSrsgBPd0_JSiJ_DCkJUB_zSqF9s3FJ7FJRRaRosFcrh4reZtQJRSKUXytkBTHPlbGISyWsirCY-CJB6e-LvNdG4ip8p9Xj4wAn0T1XR/s1600/After.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwe4TVIf5OwUFONf4sym83jQ4owhhMBdJ43AoaZSrsgBPd0_JSiJ_DCkJUB_zSqF9s3FJ7FJRRaRosFcrh4reZtQJRSKUXytkBTHPlbGISyWsirCY-CJB6e-LvNdG4ip8p9Xj4wAn0T1XR/s320/After.PNG" width="320" /></a></div>
<div style="border-image: none;">
<br /></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com0tag:blogger.com,1999:blog-2786352108596881112.post-47401943568877741032016-04-14T15:25:00.000-07:002016-04-14T15:26:42.444-07:00Create Graphs and Charts from SharePoint lists using charts.js <div dir="ltr" style="text-align: left;" trbidi="on">
Chart.js is an HTML5 responsive library to build beautiful charts.<br />
<br />
Now that charts web part is no longer available in SharePoint 2013, I decide to go for this option. We can also use excel services , but I like this better :)<br />
<br />
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert"></script><br />
We will be using REST api to pull items from the list and draw out charts<br />
Create a canvas tag<br />
<blockquote class="tr_bq">
<canvas id="myChart" width="600" height="400"></canvas></blockquote>
Include <a href="https://jquery.com/">jquery.js </a>, <a href="http://www.chartjs.org/">chart.js</a> and <a href="http://underscorejs.org/">underscore.js </a> and the below script will do the work.<br />
<br />
Make sure to change the List name and use internal name for columns instead of display name. Add this to the script editor or content editor web parts . If you are on one site and want to get data from another site you have to modify the code.<br />
<br />
<pre class="prettyprint">var chartX = []; //X-Axis Labels
var chartY = []; //Y-Axis Values
var chartJs = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js";
var chartId = "myChart"; //Chart Canvas Div
var charts = ["Line", "Bar", "Radar", "Polar Area", "Pie", "Doughnut"];
var colors = ["#009EA0", "#A7A9AC", "#D15F27", "#BAD80A", "#E0AA0F", "#754760", "#373535"]
var listName = "Incoming Requests"; //Data List Name
var xAxisName = "Request_x0020_Category"; //X-Axis Label Names from List
var yAxisName = "Time_x0020_Calc"; //Y-Axis Values from List
//Set chart number to render different charts
// 0 = Line Chart
// 1 = Bar Chart
// 2 = Radar Chart
// 3 = Polar Area Chart
// 4 = Pie Chart
// 5 = Doughnut Chart
var chartNumber = 3;
//Set group by boolean to create chart based on count of x Axis
var boolGroupByXAxis = true;
var numberOfItemsFromList = null; //Limit number of items returned from the list , for unlimited items type null
$(document).ready(function() {
console.log(_spPageContextInfo.webAbsoluteUrl);
var Url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items"; //
if (numberOfItemsFromList != null) {
Url = Url + "?$top=" + numberOfItemsFromList;
}
getItems(Url, boolGroupByXAxis, charts[chartNumber]);
});
function getItems(url, groupby, chartType) {
$.ajax({
url: url,
method: 'GET',
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json; odata=verbose");
},
cache: true,
error: function(data) {},
success: function(data) {
if (!groupby) {
$.each(data.d.results, function(i, item) {
chartX.push(item[xAxisName]);
chartY.push(item[yAxisName]);
});
} else {
var arrCount = _.countBy(data.d.results, function(obj) {
return obj[xAxisName];
});
console.log(arrCount);
chartX = _.keys(arrCount);
chartY = _.values(arrCount);
}
loadJS(chartJs, function() {
//Generate Data
var data = [];
if (chartType == "Line" || chartType == "Bar" || chartType == "Radar") {
data = {
labels: this.chartX,
datasets: [{
fillColor: "rgba(0,160,175,0.5)",
strokeColor: "rgba(0,160,175,0.8)",
highlightFill: "rgba(0,160,175,0.75)",
highlightStroke: "rgba(0,160,175,1)",
data: this.chartY
}]
};
} else if (chartType == "Pie" || chartType == "Doughnut" || chartType == "Polar Area") {
$.each(chartX, function(i, item) {
data.push({
value: chartY[i],
color: colors[i],
label: item
});
});
console.log(data);
}
//Display Chart
var ctx = document.getElementById(chartId).getContext("2d");
switch (chartType) {
case "Line":
var myNewChart = new Chart(ctx).Line(data);
break;
case "Bar":
var myNewChart = new Chart(ctx).Bar(data);
break;
case "Radar":
var myNewChart = new Chart(ctx).Radar(data);
break;
case "Polar Area":
var myNewChart = new Chart(ctx).PolarArea(data);
break;
case "Pie":
var myNewChart = new Chart(ctx).Pie(data);
break;
case "Doughnut":
var myNewChart = new Chart(ctx).Doughnut(data);
break;
default:
var myNewChart = new Chart(ctx).Line(data)
}
});
}
});
}
function loadJS(src, callback) {
var s = document.createElement('script');
s.src = src;
s.async = true;
s.onreadystatechange = s.onload = function() {
var state = s.readyState;
if (!callback.done && (!state || /loaded|complete/.test(state))) {
callback.done = true;
callback();
}
};
</pre>
</div>
Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com15tag:blogger.com,1999:blog-2786352108596881112.post-43075310533440485282015-12-22T14:16:00.003-08:002015-12-22T17:15:30.617-08:00Detrermine which worker process to attach to while debugging SharePoint Webparts<div dir="ltr" style="text-align: left;" trbidi="on">
With number of webappliations on your farm and their respective application pools, it becomes difficult to find out which worker process to attach to when you want to debug your webpart.<br />
<br />
I assume you know how to get the name of application pool from your web application.<br />
<br />
<ul style="text-align: left;">
<li>Once you do, run cmd in admin mode. </li>
<li>change directory to c:\Windows\System\Inetsrv </li>
<li>and run appcmd list wp</li>
</ul>
<br />
This will list out the worker process running for all the web applications. In my case its the following:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IHQY7hJLryatTWRDmtqrlrFvub7Xe-tx58FNYcOiTPIh-L5-3JHiHCCIYSjXnltI4o1R74OF5EMk0mwPUu1R4ewj8gdq6LomDOPAyLtY5J0dqejUDUTHQDe_liPRcyzqRAtygAPGUWGt/s1600/Capture.PNG" imageanchor="1"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IHQY7hJLryatTWRDmtqrlrFvub7Xe-tx58FNYcOiTPIh-L5-3JHiHCCIYSjXnltI4o1R74OF5EMk0mwPUu1R4ewj8gdq6LomDOPAyLtY5J0dqejUDUTHQDe_liPRcyzqRAtygAPGUWGt/s640/Capture.PNG" width="640" /></a><br />
<br />
<br />
Then in visual studio,<br />
<ul style="text-align: left;">
<li>Set breakpoints</li>
<li>deploy your solution</li>
<li>click on debug </li>
<li>then click on attach to process and find out the process with the id which is 4316 in my case.</li>
</ul>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlRyewpMcLMw05FbU1lZ1KHOD_SWVPNbHUsBhnGMvBhV0zpTAjIh6OAPw7Kc2ro5vRMX6FO9qTAn8pGYntCYsB58c2wmK3dEwtxtjlWNZJicsW12CwmhJMgpOBIDIuKGrHLNGPP3CndVB/s1600/Capture1.PNG" imageanchor="1"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlRyewpMcLMw05FbU1lZ1KHOD_SWVPNbHUsBhnGMvBhV0zpTAjIh6OAPw7Kc2ro5vRMX6FO9qTAn8pGYntCYsB58c2wmK3dEwtxtjlWNZJicsW12CwmhJMgpOBIDIuKGrHLNGPP3CndVB/s640/Capture1.PNG" width="640" /></a></div>
Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com1tag:blogger.com,1999:blog-2786352108596881112.post-88372666419574161092015-09-03T11:01:00.000-07:002015-09-03T16:59:51.349-07:00Office UI Fabric and SharePoint Add-ins<div dir="ltr" style="text-align: left;" trbidi="on">
Microsoft has released first version of <a href="https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/" target="_blank">Office UI Fabric</a>. Check out the announcement blog post here : <a href="https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/" target="_blank">Introducing Office UI Fabric </a><br />
<br />
<h2 style="text-align: left;">
</h2>
<h3 style="text-align: left;">
WHAT IS OFFICE UI FABRIC ?</h3>
<h3 style="text-align: left;">
</h3>
<blockquote class="tr_bq">
<div style="text-align: left;">
Office UI Fabric is a responsive, mobile-first, front-end framework that enables you to create web experiences by using the Office Design Language. It is implemented with a set of fonts and with CSS classes that provide UI components, icons, animation, and the official Office color palette. </div>
</blockquote>
<br />
If you have experience working with bootstrap, you will find it a lot easier to work with office UI Fabric as well. It is built on the same lines and divides the page into a 12 column grid layout thereby making it responsive across devices. In addition to that you can now use the same icons, font, animation etc used in office.<br />
<br />
<br />
<h3 style="text-align: left;">
HOW TO USE IT IN SHAREPOINT ADD INS?</h3>
<h3 style="text-align: left;">
</h3>
<ul style="text-align: left;">
<li> Since it is dependent on jquery , you would need to include it in your development project</li>
<li> Include css and js files as per the components you want to use </li>
</ul>
and you are good to go. <br />
<br />
You can find further details here : <a href="https://github.com/OfficeDev/Office-UI-Fabric/tree/master/ghdocs" target="_blank">Fabric Docs</a><br />
<br />
<h3 style="text-align: left;">
SHAREPOINT THEMES AND OFFICE UI FABRIC</h3>
<h3 style="text-align: left;">
</h3>
<br />
To Use SharePoint themes, we have to make explicit calls to include host web css files in out project . I will soon post an article on how to go about that.<br />
And every time the host web's theme is changed , add-in's theme is changed as well.<br />
<br />
But its not true in case of office UI Fabric and add-in's theme doesn't change with the change of host web theme.<br />
<br />
It is recommended not to mix the two.<br />
</div>
Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com0tag:blogger.com,1999:blog-2786352108596881112.post-26080092325038213192013-12-03T11:07:00.002-08:002015-09-03T12:52:19.582-07:00Breadcrumb navigation in SharePoint 2013<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: left;"><div style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVoyQuB1hMrIZ2w4mZOL5P_QQsvi6JCRPduteFAEmOaFJyXIm5g9xQ-G2Y6V8fidqlcKmZA4Nw8Gnrk7R3SZymj9HCo4eboNigGqdMW0jamn37pXguIjrAHfzBMP8apgzJJooj_rjjwZ_/s1600/header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVoyQuB1hMrIZ2w4mZOL5P_QQsvi6JCRPduteFAEmOaFJyXIm5g9xQ-G2Y6V8fidqlcKmZA4Nw8Gnrk7R3SZymj9HCo4eboNigGqdMW0jamn37pXguIjrAHfzBMP8apgzJJooj_rjjwZ_/s1600/header.jpg" /></a></div><br />
<br />
Here is a quick way to add bread crumb navigation to SharePoint 2013 . By default we can only see the current location . To get a navigation which drills down to parent site collection , i usually go with the following approach. </div></div><div style="text-align: left;"><div style="text-align: left;"><br />
</div><div style="text-align: left;"><a href="http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.listsitemappath_members.aspx" target="_blank">ListSiteMapPath</a> creates a <a href="http://msdn.microsoft.com/EN-US/library/d9w2t610" target="_blank">SiteMapPath </a>control that renders as site map as a hierarchical set instead of nested un-ordered lists.</div></div><div style="text-align: left;"><div style="text-align: left;"><span style="color: #2a2a2a; font-family: 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"><br />
</span></div></div><div style="text-align: left;"><div style="text-align: left;"><span style="color: #2a2a2a; font-family: 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"><br />
</span></div></div><div style="text-align: left;"><div style="text-align: left;">Both of the controls have the “SiteMapProvider” property. ListSiteMapPath has a property “SiteMapProviders” which means we can specify more than one provider object with one ListSiteMapPath control. There are many providers for us to choose. Following articles describes it well <a href="http://www.ktskumar.com/blog/2008/04/sharepoint-navigation-providers-part-1/" style="background-color: transparent;">http://www.ktskumar.com/blog/2008/04/sharepoint-navigation-providers-part-1/</a> :</div></div><div style="text-align: left;"><div style="text-align: left;"><br />
</div><div style="text-align: left;">• SPSiteMapProvider</div><div style="text-align: left;">• SPContentMapProvider</div><div style="text-align: left;">• SPXmlContentMapProvider</div><div style="text-align: left;">• CurrentNavSiteMapProvider</div><div style="text-align: left;">• CurrentNavSiteMapProviderNoEncode</div><div style="text-align: left;">• CombinedNavSiteMapProvider</div><div style="text-align: left;">• GlobalNavigation</div><div style="text-align: left;">• CurrentNavigation</div><div style="text-align: left;">• ExtendedSearchXmlContentMapProvider</div><div style="text-align: left;">• AdministrationQuickLaunchProvider</div><div style="text-align: left;">• SharedServicesQuickLaunchProvider</div><div style="text-align: left;">• PWASiteMapProvider</div><div style="text-align: left;">• GlobalNavSiteMapProvider</div><div style="text-align: left;">• SiteDirectoryCategoryProvider</div><div style="text-align: left;">• MySiteMapProvider</div><div style="text-align: left;">• MySiteLeftNavProvider</div><div style="text-align: left;">• MySiteSubNavProvider</div><div style="text-align: left;">• SPNavigationProvider</div></div><div style="text-align: left;"><div style="text-align: left;"><br />
</div></div><div style="text-align: left;"><div style="text-align: left;"><br />
</div><div style="text-align: left;">Add following code snippet to any content place holder in master page where we want breadcrumb navigation to appear, in my case i added it in "PlaceHolderPageTitleInTitleArea" .</div></div><div style="text-align: left;"><div style="text-align: left;"><br />
</div></div><div style="text-align: left;"><div style="text-align: left;"><span style="color: #666666;"><!--SPM:<SharePoint:ListSiteMapPath</span></div></div><div style="text-align: left;"><span style="color: #666666;"> runat="server"</span></div><div style="text-align: left;"><span style="color: #666666;"> SiteMapProviders="CurrentNavSiteMapProviderNoEncode"</span></div><div style="text-align: left;"><span style="color: #666666;"> RenderCurrentNodeAsLink="false"</span></div><div style="text-align: left;"><span style="color: #666666;"> PathSeparator=""</span></div><div style="text-align: left;"><span style="color: #666666;"> CssClass="ms-breadcrumb"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeStyle-CssClass="ms-breadcrumbNode"</span></div><div style="text-align: left;"><span style="color: #666666;"> CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"</span></div><div style="text-align: left;"><span style="color: #666666;"> RootNodeStyle-CssClass="ms-breadcrumbRootNode"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageOffsetX="0"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageOffsetY="289"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageWidth="16"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageHeight="16"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"</span></div><div style="text-align: left;"><span style="color: #666666;"> RTLNodeImageOffsetX="0"</span></div><div style="text-align: left;"><span style="color: #666666;"> RTLNodeImageOffsetY="312"</span></div><div style="text-align: left;"><span style="color: #666666;"> RTLNodeImageWidth="16"</span></div><div style="text-align: left;"><span style="color: #666666;"> RTLNodeImageHeight="16"</span></div><div style="text-align: left;"><span style="color: #666666;"> RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"</span></div><div style="text-align: left;"><span style="color: #666666;"> HideInteriorRootNodes="true"</span></div><div style="text-align: left;"><span style="color: #666666;"> SkipLinkText=""/>--></span></div><div><div style="text-align: left;">Adding above results in the following</div></div><div><div style="text-align: left;"><br />
</div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxXp7UN2NnOqq4Pv46DFimyazz8tAi1xDpAkVi53EoFXGHL7xXY21_BJxpdxIv5e00bxheoBWcLkOk4TTPKDc3tuag80fGoMrFixmDXxM2jDn5wcesu2bFXRN2VJCBgyG0gvlNyw8RxFj/s1600/BrdCrmb01.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em; text-align: left;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxXp7UN2NnOqq4Pv46DFimyazz8tAi1xDpAkVi53EoFXGHL7xXY21_BJxpdxIv5e00bxheoBWcLkOk4TTPKDc3tuag80fGoMrFixmDXxM2jDn5wcesu2bFXRN2VJCBgyG0gvlNyw8RxFj/s1600/BrdCrmb01.PNG" /></a></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Now, instead of <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9OSWiPyD7a9zLkaNi4pmYNs7OJijs3jp9ncDTl1_13OoDIwAFKMnaYVGlX1lOLE3YqMDkx2L8oQw_WeA7AARaFwO2wDe1mekXc57qcKGnQFJl6jHd7g3B0UTymhsXVOfRsLVLrOZiAOT/s1600/BC02.PNG" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-left: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9OSWiPyD7a9zLkaNi4pmYNs7OJijs3jp9ncDTl1_13OoDIwAFKMnaYVGlX1lOLE3YqMDkx2L8oQw_WeA7AARaFwO2wDe1mekXc57qcKGnQFJl6jHd7g3B0UTymhsXVOfRsLVLrOZiAOT/s1600/BC02.PNG" /></a>i wanted <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycwEtd539uTNT-d830oa5DDLPMFGa6FUUd719qR7L8fbzuueVfwyFCvhlKbLzILhoHf_umbyFww1tf7zk_dhqAaoehPUPZa595IK8WRd5Y37lumbMjKEZWzRW4kkhbzjWhUnuZnzIOVIU/s1600/BC03.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycwEtd539uTNT-d830oa5DDLPMFGa6FUUd719qR7L8fbzuueVfwyFCvhlKbLzILhoHf_umbyFww1tf7zk_dhqAaoehPUPZa595IK8WRd5Y37lumbMjKEZWzRW4kkhbzjWhUnuZnzIOVIU/s1600/BC03.PNG" /></a>as bread crumb separator. </div></div><div><div style="text-align: left;"><span style="color: #666666;"> NodeImageOffsetX="0"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageOffsetY="289" </span><span style="color: red;">change to 573</span></div></div><div><div style="text-align: left;"><span style="color: #666666;"> NodeImageWidth="16" </span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageHeight="16" </span><span style="color: red;">change to 10</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23" </span><span style="color: red;">Image used for separator</span></div><div style="text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"></div></div><div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Making above changes did the trick for me . After above changes our navigation is supposed to look like this.</div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeNjlExaD1OBcQQL6JOIog_mD3LyTgFzYfP-A0Hla6oj3WXJI-KbGSv__mb0k_SUgbk5UO_a6n_heArl495jt4UxacfcumlzhzALpRhEX_XCX9K8vXVOJDEhSGlGmL7K2INApl9tip8_He/s1600/BC04.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em; text-align: left;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeNjlExaD1OBcQQL6JOIog_mD3LyTgFzYfP-A0Hla6oj3WXJI-KbGSv__mb0k_SUgbk5UO_a6n_heArl495jt4UxacfcumlzhzALpRhEX_XCX9K8vXVOJDEhSGlGmL7K2INApl9tip8_He/s1600/BC04.PNG" /></a></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Adding the following css aligns breadcrumb items in a horizontal menu </div></div><div><div style="text-align: left;"><br />
</div></div><div><div><div style="text-align: left;"><span style="color: purple;">.ms-breadcrumb li,ul </span>{</div></div><div><div style="text-align: left;"> <span style="color: red;">display</span><span style="color: blue;">: inline; </span> <span style="color: red;">margin-left</span><span style="color: blue;">:-2.5em </span> </div></div><div><div style="text-align: left;">}</div><div style="text-align: left;"><br />
</div></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfuts-9Ll4Ya_o_BAuJeBbes5rzFjGEJ7qQLJhoG5pCIqpff7ANHwEsrZaiQ09Xk1L4iqU61ZQpVZf-wB8PUGxfagjBuRK0X1Cl-JPpZ-0YKEXQVvPcOr-TTDxmNIJULzN8GF5vPya800D/s1600/BC05.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em; text-align: left;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfuts-9Ll4Ya_o_BAuJeBbes5rzFjGEJ7qQLJhoG5pCIqpff7ANHwEsrZaiQ09Xk1L4iqU61ZQpVZf-wB8PUGxfagjBuRK0X1Cl-JPpZ-0YKEXQVvPcOr-TTDxmNIJULzN8GF5vPya800D/s1600/BC05.PNG" /></a></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div></div><div><div><div style="text-align: left;"><span style="color: purple;">.ms-breadcrumb > li:first-child > span:first-child</span>{</div></div><div><div style="text-align: left;"><span class="Apple-tab-span" style="white-space: pre;"> </span><span style="color: red;">display</span><span style="color: blue;">:none</span></div></div><div><div style="text-align: left;">}</div><div style="text-align: left;"><br />
</div></div></div><div><div style="text-align: left;">Above hides image separator at the beginning </div></div><div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: left;"><br />
</div></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Syveblq-FIVCFYnrLwtN959Od9eQp-aMNHS4eJ_7CqYSWCoWeu4uVRvqxqTcgKk6CU7z-sGyWIAgmtlgtEygYowXVYMlK_45P2YbeL9e5RsrfVT6GE9n4SzVIRR9QtT5eCo8HO-Ozu18/s1600/bc06.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Syveblq-FIVCFYnrLwtN959Od9eQp-aMNHS4eJ_7CqYSWCoWeu4uVRvqxqTcgKk6CU7z-sGyWIAgmtlgtEygYowXVYMlK_45P2YbeL9e5RsrfVT6GE9n4SzVIRR9QtT5eCo8HO-Ozu18/s1600/bc06.PNG" /></a></div><div style="text-align: left;"><br />
</div></div><div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Following css can be overridden to change the way we want our navigation to appear</div></div><div><div style="text-align: left;"><span style="color: #666666;"> CssClass="ms-breadcrumb"</span></div><div style="text-align: left;"><span style="color: #666666;"> NodeStyle-CssClass="ms-breadcrumbNode"</span></div><div style="text-align: left;"><span style="color: #666666;"> CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"</span></div><div style="text-align: left;"><span style="color: #666666;"> RootNodeStyle-CssClass="ms-breadcrumbRootNode"</span></div></div><div><div style="text-align: left;"><br />
</div></div></div>Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com10tag:blogger.com,1999:blog-2786352108596881112.post-23983030162898918482013-12-02T09:31:00.000-08:002015-09-08T13:36:21.206-07:00Change welcome menu text in SharePoint 2013 <div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQyNUNMe8Im-QD6sEgOyqizT64J4o3V2bolXQuazMHp5Yu57XUgwUFxt8BcaGUGJf70Zz_eiAn4zxWQhWBKpMr-0_ynd7UiP9n36sDA3kLGALx4-PqOjEx-9ageShX9tWGGrybaA-N6GPl/s1600/hi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQyNUNMe8Im-QD6sEgOyqizT64J4o3V2bolXQuazMHp5Yu57XUgwUFxt8BcaGUGJf70Zz_eiAn4zxWQhWBKpMr-0_ynd7UiP9n36sDA3kLGALx4-PqOjEx-9ageShX9tWGGrybaA-N6GPl/s1600/hi.png" /></a></div><br />
<br />
<br />
Make SharePoint more user friendly by giving your users a friendly welcome message. We will use jquery to achieve this. Make sure to include jquery file . You can download it from <a href="http://jquery.com/download/" target="_blank">Jquery Download Link</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4drDkrNY_QvVgogNKOtfAvt7KeYgvEZKU0wAIhLG8LfM-XGNabnClftvhc2ayk8DV5KuTwbGhdPHYq6PHnZiX6qJUtAOBAZCVOAa4cZ1Ndr8BVUMUU_ZAGsQeK2YM6NmTbWga4uMHs0SX/s1600/WelcomeMenuBefore.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4drDkrNY_QvVgogNKOtfAvt7KeYgvEZKU0wAIhLG8LfM-XGNabnClftvhc2ayk8DV5KuTwbGhdPHYq6PHnZiX6qJUtAOBAZCVOAa4cZ1Ndr8BVUMUU_ZAGsQeK2YM6NmTbWga4uMHs0SX/s200/WelcomeMenuBefore.PNG" width="200" /></a></div><br />
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert"></script><br />
<br />
<pre class="prettyprint">$(document).ready(function (){
var _welcomemenu = $("a[title='Open Menu']")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text(); //get the text of element
var _newwelcomemenu = _welcomemenu.split(',')[1] +" " + _welcomemenu.split(',')[0]; //swipe first and last name
$("a[title='Open Menu']").text( "Welcome " + _newwelcomemenu); // Add friendly text
});
</pre><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-OvxmR82D_ypkeZ4A31jGy84Hy0shyphenhyphenTGjvU9ss4FXMfXcxd2k5HsizljxOZ2bCQsvAk-yGyABA42KUrUZbqGp6z8nh83FHG8SpIbs8jh-qP70ySBnNrNkHhILlRnHomqm3ATPKuRifsFR/s1600/WelcomeMenuAfter.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-OvxmR82D_ypkeZ4A31jGy84Hy0shyphenhyphenTGjvU9ss4FXMfXcxd2k5HsizljxOZ2bCQsvAk-yGyABA42KUrUZbqGp6z8nh83FHG8SpIbs8jh-qP70ySBnNrNkHhILlRnHomqm3ATPKuRifsFR/s1600/WelcomeMenuAfter.PNG" /></a></div><br />
</div>Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com0tag:blogger.com,1999:blog-2786352108596881112.post-61207968130571208192013-11-21T12:25:00.001-08:002015-09-08T13:33:02.957-07:00Create Embedded Video / External Link Video using managed CSOM<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;">We have been introduced to two new ways of adding videos to SharePoint in the latest version of SP i.e. SP 2013:</div><div dir="ltr" style="text-align: left;">1. Embedded videos</div><div dir="ltr" style="text-align: left;">2. Link to video.</div><div dir="ltr" style="text-align: left;"></div><div dir="ltr" style="text-align: left;">Following is the code to add these videos programmatically using CSOM(client side object model).</div><div style="text-align: left;"><br />
<a name='more'></a></div><div style="text-align: left;"><div class="MsoNormal"><span style="font-family: "Tahoma","sans-serif";"><o:p></o:p></span></div></div></div><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert"></script><br />
<pre class="prettyprint">using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.Video;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
namespace Upload_Videos
{
class Program
{
static void Main(string[] args)
{
string _siteUrl = ""; // url of site
string _videoTitle = ""; // title of video
string _embeddedCode = ""; // embedded code for video
string _externalLink = ""; // link for video
using (ClientContext context = new ClientContext(_siteUrl))
{
try
{
Web _web = context.Web; // gets web object of current context
List _videoList = _web.Lists.GetByTitle("Assets"); // gets object of library where we need to add video , make sure that this library has option to add video content type
context.Load(_videoList.RootFolder);
context.ExecuteQuery();
var _contentType = GetContentType(context, _videoList, "Video");// gets content type ID for video
var _contentTypeId = _contentType.Id;
VideoSet.CreateVideo(context, _videoList.RootFolder, _videoTitle, _contentTypeId); // creates video with the name stored in _videoTitle
context.ExecuteQuery();
Microsoft.SharePoint.Client.Folder Ofile = context.Web.GetFolderByServerRelativeUrl(_videoList.RootFolder.ServerRelativeUrl + "/" + _videoTitle);
context.Load(Ofile.ListItemAllFields);
context.ExecuteQuery();
Ofile.ListItemAllFields["Title"] = _videoTitle;
Ofile.ListItemAllFields["VideoSetEmbedCode"] =_embeddedCode;
//Ofile.ListItemAllFields["VideoSetExternalLink"] = _externalLink; //to set link for video
Ofile.ListItemAllFields.Update();
context.ExecuteQuery();
Console.WriteLine("Video created!");
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
}
Console.ReadLine();
}
}
static private ContentType GetContentType(ClientContext ctx, List lst, string contentType)
{
ContentTypeCollection listContentTypes = lst.ContentTypes;
ctx.Load(listContentTypes, types => types.Include(type => type.Id, type => type.Name,type => type.Parent));
var result = ctx.LoadQuery(listContentTypes.Where(c => c.Name == contentType));
ctx.ExecuteQuery();
ContentType targetContentType = result.FirstOrDefault();
return targetContentType;
}
}
}
</pre>Anonymoushttp://www.blogger.com/profile/02517654121271833844noreply@blogger.com6