Tag: SharePoint 2013

QR Code Generator Add-In for SharePoint

Ravichandran Krishnasamy4 Comments

Using this you can generate QR Code for any text value and URL, this add-in can be add anywhere in you SharePoint Dashboard. Below you can see step by step instructions to develop this SharePoint Add-In. Also the complete project source code is available for download, find the download link at the bottom of this post.

2016-01-26_21-30-19

Create new Project in Visual studio using “App for SharePoint” template, here I’m using visual studio 2015 version. In the new project wizard select SharePoint-Hosted and rest you can select based on your requirements. Provider-Hosted application can also be selected.
I’ve added two JS files qr.js and initstrings.js, these JS files are developed by Microsoft. Here I modified those files. Modified files can be found in the project.

2016-01-26_18-44-22
Add new “Client Web Part (Host Web)” and select “Create a new app web page for the client web part content”, Edit newly created aspx page which is located in the Pages folder. Add below JS code and HTML. In the JS function I am passing Textbox value and Div name as parameter, JavaScript will generate QR code based on the content in Text box value.

 <script type="text/javascript">
 function generatefn() {
 if ($('#QR_URL').val() != '')
 onLoadQrCode($('#QR_URL').val(), 'DivImage');
 }
 </script>

 <input type="text" id="QR_URL" value="" style="width:250px" /><input onclick="generatefn()" type="button" id="btnGenerate" value="Generate" />
<div id="DivImage"></div>

Project source Download link

zip_icon https://code.msdn.microsoft.com/QR-Code-Generator-Add-In-a4cdd884

Provider Hosted App For SharePoint Online

Ravichandran KrishnasamyLeave a comment

Create a new project in visual studio using “App for SharePoint” template, here I’m using visual studio 2015 version. After selected project can see a wizard

2016-01-24_10-20-52

Enter SharePoint online URL and select “Provider-Hosted” option next it will ask for user name and password, then wizard will automatically select “SharePoint Online” Option

2016-01-24_10-26-11

Next select ASP.Net MVC Web Application in the wizard

2016-01-24_10-29-44

Next leave by default selection of “Use Windows Azure Access Control Service (for SharePoint Cloud Apps)” then finish the wizard.

Create new razor view under home view folder

2016-01-24_12-02-36

Add new ActionResult in HomeController.cs, below code will retrieve list items from the “Shared Documents” and generates a DataTable. pass the DataTable to View.

 public ActionResult DocumentList()
{
DataTable dt = new DataTable();
var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
using (var clientcontext = spContext.CreateUserClientContextForSPHost())
{
List list = clientcontext.Web.GetList(spContext.SPHostUrl.ToString() + "Shared Documents");
clientcontext.Load(list);
CamlQuery cq = new CamlQuery();
ListItemCollection lic = list.GetItems(cq);
clientcontext.Load(lic, items => items.Take(15).Include(item => item["FileLeafRef"], item => item["Modified"],
item => item["Author"], item => item["FileRef"], item => item["File_x0020_Size"]));
clientcontext.ExecuteQuery();
dt.Columns.Add("File Name");
dt.Columns.Add("Modified", typeof(DateTime));
dt.Columns.Add("Author");
dt.Columns.Add("Size");

foreach (ListItem item in lic)
{
DataRow dr = dt.NewRow();
dr["File Name"] = "<a href=\"" + spContext.SPHostUrl.ToString().TrimEnd('/') + item["FileRef"]
+ "\">" + item["FileLeafRef"] + "</a>";
dr["Modified"] = item["Modified"];
dr["Author"] = ((FieldUserValue)item["Author"]).LookupValue;
dr["Size"] = item["File_x0020_Size"];
dt.Rows.Add(dr);
}
}

return View(dt);
}

Add below code to your new view, code will generate a HTML table using our ModelTable.

<div style="padding:5px 10px 3px 5px">
<table border="1" cellpadding="5" id="my-table">
<thead>
<tr>
@foreach (System.Data.DataColumn col in Model.Columns)
{
<th>@col.Caption</th>
}</tr>
</thead>
<tbody>
@foreach (System.Data.DataRow row in Model.Rows)
{
<tr>
@foreach (var cell in row.ItemArray)
{
<td>@Html.Raw(cell.ToString())</td>
}</tr>
}</tbody>
</table>
</div>

View name and action result name should be same else mention the view name in the return statement of action result.

In the AppManifest file select the permissions tab and Scope as list and permission as Read

2016-01-24_14-10-05

Run the project in visual studio using play button (F5), now can see SharePoint App Permission approval page, select Documents list then click “Trust it”

2016-01-24_14-13-02

After that SharePoint will redirect to our local hosted site, navigate to newly created view page. Page will display SharePoint list data.

2016-01-24_14-40-48

You can now compare your retrieved data with the actual SharePoint list.

2016-01-24_14-41-22

JQUERY BASICS – Part 2

Ravichandran KrishnasamyLeave a comment

load()
Using load method we can load other page’s full content or other page’s particular control inner HTML
Ex. Below code will load the MainDiv inner HTML. so inside the load method we need to pass page URL as a parameter if you want load full other source page or if you want to load particular element’s inner HTML then after the URL parameter give one space then enter the selector, here I’ve passed div id as selector (#MainDiv)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>main page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>HTML from another page:</b>

<div id="new-projects"></div>

 
<script>
 $("#new-projects").load("anotherpage.html #MainDiv");
</script>

</body>
</html>

This is the other source page

 

 
<!doctype html>
<html lang="en">
<head>
<title>another page</title>
</head>
<body>
full HTML contents From another page
<div id="MainDiv">
<h3 style="color:green">div inner html from another page</h3>
</div>
</body>
</html>

OutPut

2016-01-16_16-33-35

each()

each() will take collection from selector and loop the items, this is same as Foreach in c#.
Ex. Below code will loop the all div elements and elements inner HTML append into one p tag.

 
<!DOCTYPE html>
<html>
<head>
<title>For Each</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script>
 $(document).ready(function () { $('div').each(function () { $('.ptag').append($(this).html()); }); });

 </script>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<p class="ptag"></p>


</body>
</html>

Output

2016-01-16_16-34-27

slideToggle()

The jQuery library provides several techniques for adding animation to a web page, slideToggle will hide and show the targeted element,

Ex, below code will hide and show the all div elements

</pre>
<!DOCTYPE html>
<html>
<head>
<title>Show Hide</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>Div 1</div>


<div>Div 2</div>


<div>Div 3</div>


<div>Div 4</div>

 <input type="button" id="button" value="click here" />
 <script>
 $('#button').click(function () { $('div').slideToggle(1500); });
 </script>
</body>
</html>