tag:blogger.com,1999:blog-21799394152421114852024-03-19T04:50:35.868-07:00Ankur MadaanCloud - Amazon AWS and Microsoft Azure, Serverless, .Net Core, Office 365 and SharePoint posts.
Passionate about how technology delivers perfectionAnkur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-2179939415242111485.post-76480884409943522932021-05-18T13:04:00.005-07:002021-05-18T22:22:51.894-07:00Understanding Containerization, Using Docker - Part 1Every technology that comes into existence is actually a solution of a problem someone wanted to solve. Containerization is no different, history of containerization goes back to 1979 as blogged by Rani Osnot in his blog <a href="https://bit.ly/3onNPy0">https://bit.ly/3onNPy0</a> .
<br>
<br/>
<b>So what problem does containers solve?</b>
In context of virtualization, Containers are a solution to the two problems:-
<br><br>
<ul><li>
With a virtual machine, you have to virtualize an entire operating system as well as the software you want to run. This makes VMs really resource heavy.
The operating systems is often the single largest most resource-intensive piece of hardware on your computer and so running multiple OS's on the same computer, just so that you can have separate environments, uses a lot of your resources.
</li>
<li>How to get software to run reliably when moved from one computing environment to another. This could be from a developer's laptop to a test environment, from a staging environment into production, and perhaps from a physical machine in a data center to a virtual machine in a private or public cloud.</li>
</ul>
<br><br>
To overcome these issues, the Linux operating system began implementing containers. The idea is simple, if you're running a Linux OS on your computer already, why run a new OS for each VM? Instead you can use the core of the OS, called the kernel, for each VM. This way the VMs only run the software that they need to.<br><br><br>
The difficulty with this is that it is important that the VMs not be able to affect each other, or the underlying computer they're running on. And containers need to replicate this functionality. So the Linux team had to implement some safety features into the <b>kernel</b> itself.
<br><br>
Features such as <b>being able to block off different parts of the kernel processor and memory for the different containers</b>, so that the code running on one container can't accidentally access another container through the kernel.<br><br> Now that these containers were implemented at the kernel level, any amount of software could be run inside of one and it would be like running it in its own VM, or own physical machine. And because all <b>Linux distros share the same fundamental Linux kernel</b>, you can easily run containers with different distros, just as easily as you can run containers using the same distro.<br>
The software that makes each distribution unique all runs on top the kernel and it's only the kernel that is shared across all the containers and the host OS. Once containers are implemented at the most basic fundamental part of the Linux OS, software which made it easier to implement these Linux containers begin to pop up.<br><br><br>
One of the first and most successful container software projects is called <b>Docker</b>. Docker makes it easy to define, manage and use Linux containers by simply writing plain text documents to define the software that you want running inside of a particular container.<br><br>
In addition, Docker and other companies began building software that could link containers together into a single app, as well as orchestrate spinning them up and down in the cloud rapidly. In addition to Docker, there are other container systems.
<br><br> Let us understand Containerization(Docker's Prospective) with comparision to VM(Virtual Machine)
<br/><br>
<b>Figure below </b> shows the various layers in a computer that uses VMs. The bottom layer is the hardware of your computer with the OS sitting on top of it. Next to OS is the hypervisor(software to create and run VMs). Next with using this hypervisor system can host multiple gues Operating Systems like Windows, Server, Linux etc. Each VM can contain seperate set of libraries needed by the application and each VM allocated a specific amount of Hardware that includes Memory, CPU cores, Disk Space. Thus the hardware of your system has direct impact on the amount of VM's one can host on a System and limited by hardware.<br><br>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfpwHqZEPvIE0QdpMnxvquKUfWflZXVHUosTmJg0vEhLTwKkiTZiiu_BlZnghssar_yWSJTthcr29y5awq6WS_WPd_aDJWG3I9YhenNlElIavwvqVTWQHiHik0y-qvypSAQx_fWisxEA/s845/VM.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="400" data-original-height="845" data-original-width="679" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfpwHqZEPvIE0QdpMnxvquKUfWflZXVHUosTmJg0vEhLTwKkiTZiiu_BlZnghssar_yWSJTthcr29y5awq6WS_WPd_aDJWG3I9YhenNlElIavwvqVTWQHiHik0y-qvypSAQx_fWisxEA/s400/VM.png"/></a></div>
<br><br><br>
<b>Next Figure </b> shows how Docker fits in the picture. Instead of a hypervisor you now have a Docker engine. The Docker engine manages a number of containers, which hosts your application and the libraries that you need. Unlike VMs container does not contains a copy of the OS- Instead it shares the host's operating system.
<br><br><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9Q_rvBGby5jtudAJjVI8UI1Em6TtmcYmjRZs0mabldhEtPg-vb1qgeAbSAiNdNhYRyKqpuNnbsWrzASrZ0aA_vAyxjc8QcNK6DXKgb5hwDRZZYzojvBzwpTAcK-7WQktcLJtbx3DUMA/s770/Container.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="400" data-original-height="770" data-original-width="679" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9Q_rvBGby5jtudAJjVI8UI1Em6TtmcYmjRZs0mabldhEtPg-vb1qgeAbSAiNdNhYRyKqpuNnbsWrzASrZ0aA_vAyxjc8QcNK6DXKgb5hwDRZZYzojvBzwpTAcK-7WQktcLJtbx3DUMA/s400/Container.png"/></a></div><br><br><br>
A Docker container doesn't have any operating system installed and running on it. But it does have a virtual copy of the process table, network interface(s), and the file system mount point(s). These are inherited from the operating system of the host on which the container is hosted and running.
<br><br>
Now before going further lets understand the most important part of Docker, the <b>DOCKER FILE</b><br>
Dockerfile is used to define a container. This Dockerfile starts with a standard image, usually provided by a software project, such as, a Linux distro or web technology like node.js. From there you can add new pieces to that image in a certain order, usually by running commands telling the image to install and setup new software. Once the file is written and saved, it can be sent in plain text to any two other people and built in just a few seconds on any computer that has Docker installed.<br><br><br>
Once the Docker file is built, you can run the image inside a container, or copy it to multiple times, to run it in as many containers as you want. Further software can be used to network containers to each other, the same way VMs or physical machines can be networked together. So that your containers can communicate with each other to create one large system built with many small containers. <br><br><br>
But that's just on Linux. What if you want to run containers on another operating system?<br><br><br>
While Docker lets you run Linux containers on Mac or Windows by first starting a really lightweight Linux VM that mostly just runs the kernel, and then running all the other containers inside that VM. So this is slower than running Linux containers on the Linux, because you do have a VM, but it's faster than the old paradigm of using a bunch of VMs, because you're only running one, and you get the other benefits of containers along with it. In addition, Microsoft has been working to build Windows containers.
These are containers that are built into the Windows operating systems, so that instead of running a Linux distro and a container, you can run Windows in Windows software in a container. Windows has been working really closely with Docker on this project, so they work with Docker. However, running a Windows container on Linux or Mac doesn't really work at this point.<br><br><br>
I think this might have given enough knowledge to understand Containers, In second part of this blog series We will understand Dockers by implementing a container,and deploying application using it.
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-2491759436788156952018-06-23T17:40:00.003-07:002018-06-24T08:24:09.674-07:00Create Angular Application using Angular CLI<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
<span style="text-align: left;">Where to start on your Angular Project? if this is the question you have then this blog will be very helpful, In this blog we will explore Angular CLI to create/bootstrap angular project. We will use VSCode Node.js, NPM to setup an Angular project using Angular CLI and later clean up some of the code and add support for Jquery and Twitter Bootstrap in the project, also will showcase how to create a component in few seconds with Angular CLI.</span></div>
<br />
It is suggested to read Angular CLI documentation at the official site:- https://cli.angular.io/.<br />
<br />
<h2 style="text-align: left;">
<span style="font-size: x-large;"><u>
Start your angular application using Angular CLI</u></span></h2>
<br />
Open your system and follow these point step by step to learn the approach:-<br />
<br />
<br />
<br />
<br />
<br />
<br />
<li>Open your favorite Command Line tool on the system, CMDER, VSCode Terminal or Git BASH .</li>
<li>I am using CMDER http://cmder.net/, in this example. Make sure your system has Node.JS installed and npm availlable to use globally.</li>
<li>As a first thing we will install angular CLI using NPM globally.<br /><br /><pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;"><b>npm install -g @angular/cli</b></code></pre>
</li>
<li>We can also specify the version after the above command to target specific version:-<br />
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;"><b>npm install -g @angular/cli@1.7.3</b></code></pre>
</li>
<li>This is how it will appear on CMDER:-<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQ-0QX-jiSLVdQMgnzVLxoongAfp2juSExCB-wZ5cmYWCdCMDzULTkveOJtHxXl4hwRZ4CU3piVEuRcOrogssMtGinB6JuTk85I0A0K-6MzmO0pmdrN0l8Hfy5q6x30mm9SUnDH4m9qM/s1600/pst1.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="559" data-original-width="986" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQ-0QX-jiSLVdQMgnzVLxoongAfp2juSExCB-wZ5cmYWCdCMDzULTkveOJtHxXl4hwRZ4CU3piVEuRcOrogssMtGinB6JuTk85I0A0K-6MzmO0pmdrN0l8Hfy5q6x30mm9SUnDH4m9qM/s640/pst1.png" width="640" /></a></li>
<li>Next in your work folder create your project by using Angular CLI command to create new project:-</li>
<li><pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;"><b>ng new {ProjectName}</b></code></pre>
</li>
<li><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_SG713a0u1bmly7eaP_xstCUQ-m6MSy5xBbT5maf2SHFwo0va5jYnE6L3fiCxQZilceTNnfpz4mSHnCR8aKvBZdhyE8xPnLSHKNHS8tEIeKN0vg5YArEDHtWVmR7hiGzAMbbwsEJI54/s1600/pst3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="482" data-original-width="536" height="574" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_SG713a0u1bmly7eaP_xstCUQ-m6MSy5xBbT5maf2SHFwo0va5jYnE6L3fiCxQZilceTNnfpz4mSHnCR8aKvBZdhyE8xPnLSHKNHS8tEIeKN0vg5YArEDHtWVmR7hiGzAMbbwsEJI54/s640/pst3.png" width="640" /></a></li>
<li>Here is how the output will appear after you run this ng command on your Command Line interface:-<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7txmkbISohkNh-qIhiDQrcNJGNURLbHhMBeisbU50DCFfHOMkEGdK2M3H3fBNQeIqCS100dbG9Cg6TQENDwmdSanM-5FRv7vg6LYqBLw_IXSwt6Ez1ibaHjlUIG_eWiXdNmSE30j-5M/s1600/pst2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="436" data-original-width="986" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7txmkbISohkNh-qIhiDQrcNJGNURLbHhMBeisbU50DCFfHOMkEGdK2M3H3fBNQeIqCS100dbG9Cg6TQENDwmdSanM-5FRv7vg6LYqBLw_IXSwt6Ez1ibaHjlUIG_eWiXdNmSE30j-5M/s640/pst2.png" width="640" /></a></li>
It will create the Folder and code files under your workspace. </div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Note: Folder Name will be the same as of your ProjectName,<br />
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Next, lets open this folder in your fav Code editor.<br />
<br />
I am using VSCode here, first thing to notice is package.json file<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoIinlRgkgY2qIhbOXfcp4PaNRnATD6kPCGpzE9yvfXwPmMI2TAKdxexRPRb25DobjVqqk0Up8G-ZTYoRa_YfTHJVdNdCdpTRlUoY9Dus2wwreg6mBEkhtPqnEb98G8uJTPhG-UeFtpQ/s1600/pst5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="437" data-original-width="1010" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoIinlRgkgY2qIhbOXfcp4PaNRnATD6kPCGpzE9yvfXwPmMI2TAKdxexRPRb25DobjVqqk0Up8G-ZTYoRa_YfTHJVdNdCdpTRlUoY9Dus2wwreg6mBEkhtPqnEb98G8uJTPhG-UeFtpQ/s640/pst5.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<ul style="text-align: left;">
<li>This package.json file is the one which tells npm which version of dependencies to install while generating the project. If you see closely you will notice ^ on top of version, it tells/dictates the page that atleast this version or greater than this version, we will stabilize this and keep most recent version here. so that in future if we migrate the code, there should be rights dependencies installed. If you hover on top of each setting it will tell you what is the current version available. You can leave the settings as it is if you want for always upgrading to latest ones.</li>
<li>Next, remove node module folder to re install the dependencies files, open cmder and run this command to do it:-</li>
<li><br /><pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;"><b>rm -rf node_modules</b></code></pre>
</li>
<li>After this is done, we will reinstall dependencies by using npm install command:-<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhX5qAdz1ZYx8GUI8Wkh6Rm22dPj4994fMfd41IV6Y3u1DcNOguJR4K25lbehFfKGJ3g7Fc5DE9qUjLCsRs4WJPE89fx8AFrIlkbfXR0nK5GDd12IQjZ2GMK4iREE8MRLolGmqvjZoGYY/s1600/pst7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="354" data-original-width="929" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhX5qAdz1ZYx8GUI8Wkh6Rm22dPj4994fMfd41IV6Y3u1DcNOguJR4K25lbehFfKGJ3g7Fc5DE9qUjLCsRs4WJPE89fx8AFrIlkbfXR0nK5GDd12IQjZ2GMK4iREE8MRLolGmqvjZoGYY/s640/pst7.png" width="640" /></a></li>
<li><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rQpy95dClPg68VK1-tR3X5AcwIaVLDU-AnFvhL9inMzTjb-9bI3RKQ1kjnsqYEExNdYQ1qIt8ERCgsN7XwpxvEoGVPmRGVx8EMGMX6IYolIpWKbdJgdX9o6MX_YLienGMo9Z_9jfBLk/s1600/pst8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="636" data-original-width="1206" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rQpy95dClPg68VK1-tR3X5AcwIaVLDU-AnFvhL9inMzTjb-9bI3RKQ1kjnsqYEExNdYQ1qIt8ERCgsN7XwpxvEoGVPmRGVx8EMGMX6IYolIpWKbdJgdX9o6MX_YLienGMo9Z_9jfBLk/s640/pst8.png" width="640" /></a></li>
<li>Npm_modules will get back and all appropiate versions of the file gets installed.</li>
<li>Now lets modify the port to run you application on angular-cli.json file, under scripts --start, write<br /><br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><b>ng serve --port 1200</b></pre>
</li>
<li>/This will run when we type npm start in command line and browse the location on 1200 port instead of default 4200 port. I do this just to control on which port i want to run my application:-<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjScFsQiVfdJhgeNFgJqtfcbY1rrz6l_gWQ9jun5qy95U1iN3HumD0VJ8BHAHj6ISaoIbLkdHrs26J68PuFOnAab_ChaqK-XAfEBESqDH-3K1z_6H0lvPqsRnLdLvNBTnoq-zPrnZpjLQA/s1600/pst10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="557" data-original-width="985" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjScFsQiVfdJhgeNFgJqtfcbY1rrz6l_gWQ9jun5qy95U1iN3HumD0VJ8BHAHj6ISaoIbLkdHrs26J68PuFOnAab_ChaqK-XAfEBESqDH-3K1z_6H0lvPqsRnLdLvNBTnoq-zPrnZpjLQA/s640/pst10.png" width="640" /></a></li>
<li>type npm start in CMDER as shown above it will start your application, browse https://localhost:1200, it will open your Angular Application, like this:-<br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeYtSDXRyLkUL0UCv77ehHEbGht4SQthxk-EqZ98dl5ZIz6E0ORBNS6A9_Mg-pX4tECpTXDIqSEXsp1NSJgTjVL9UGDHRiXQY5-O3zsXKRHwYi1e1fozK1J9yI9gPpXeXHHP-thrNIlg/s1600/pst11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="623" data-original-width="940" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeYtSDXRyLkUL0UCv77ehHEbGht4SQthxk-EqZ98dl5ZIz6E0ORBNS6A9_Mg-pX4tECpTXDIqSEXsp1NSJgTjVL9UGDHRiXQY5-O3zsXKRHwYi1e1fozK1J9yI9gPpXeXHHP-thrNIlg/s640/pst11.png" width="640" /></a></li>
</ul>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
<u> <span style="font-size: x-large;">How to add external packages to the project?</span></u></h2>
<div style="text-align: left;">
Now lets see how to add other packages to your Angular Project, we will add twitter bootstrap and as it has jQuery Dependency we will add jquery too.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Too add Bootstrap, go to CMDER and run this command:-<br />
<br /></div>
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><b>npm install Bootstrap</b></pre>
</div>
</div>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgwSafGsVU6MBVjUqUXSQIu4T5lA3gIkYX_nq04LmHE1ecq0uUjpZsprZtRBxCwZF4-EaIr8fMxD_EJ0VBR3HjMnHBOKVML4KJU1-HFBtQw3Mp92b6-JIozY26xvDdnmF9PRWrNU1Pv0/s1600/pst12.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="567" data-original-width="369" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgwSafGsVU6MBVjUqUXSQIu4T5lA3gIkYX_nq04LmHE1ecq0uUjpZsprZtRBxCwZF4-EaIr8fMxD_EJ0VBR3HjMnHBOKVML4KJU1-HFBtQw3Mp92b6-JIozY26xvDdnmF9PRWrNU1Pv0/s640/pst12.png" width="416" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgwSafGsVU6MBVjUqUXSQIu4T5lA3gIkYX_nq04LmHE1ecq0uUjpZsprZtRBxCwZF4-EaIr8fMxD_EJ0VBR3HjMnHBOKVML4KJU1-HFBtQw3Mp92b6-JIozY26xvDdnmF9PRWrNU1Pv0/s1600/pst12.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<ul style="text-align: left;">
<li>It will install all dependency files of bootstrap to npm_modules folder and as well add a refference in Package.json file.</li>
<li>Next add jQuery as bootstrap has dependency on it:-</li>
</ul>
<div>
<br /></div>
</div>
</div>
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><b>npm install jQuery</b></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmXFGXk_xqH42G2Grl8ijrlyFcnBgVcEG3YV_cIeg2Ls0h4WTeU6pts3h8eM4D1lxbXiGRWwH1mLEvJXGN38B1NIBKe76s1BKC4zW_gU_bdiH0_CD2YnqTx9rLyE5K6kSSAhNdbqbV2A/s1600/pst13.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="567" data-original-width="988" height="367" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmXFGXk_xqH42G2Grl8ijrlyFcnBgVcEG3YV_cIeg2Ls0h4WTeU6pts3h8eM4D1lxbXiGRWwH1mLEvJXGN38B1NIBKe76s1BKC4zW_gU_bdiH0_CD2YnqTx9rLyE5K6kSSAhNdbqbV2A/s640/pst13.png" width="640" /></a></div>
And as recent bootstrap has dependency to Popper then install Popper.JS too as shown above.<br />
<br />
<br />
<ul style="text-align: left;">
<li>If you would like to install specific version of bootstrap and jquery then go to package.js folder and mention the specific version and then clear node_modules and npm install like we did earlier to get specific version of jquery and bootstrap.</li>
<li>Next to use bootstrap and jquery in our current project we have to modify angular-cli.json file.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrQa9rUBMCCZR18XyoQ6m3O-Sj7qMsc7rZ-hL0a5tzy706OJkt65ZODKRxwmya7Zy-MCDEFXYhP3qXVqhyrkKiQalh9hZwsG6EE1emzWtahdmxi1eViJBLk28UvLWN8RYyCha4d4xrLI/s1600/pst16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="263" data-original-width="738" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrQa9rUBMCCZR18XyoQ6m3O-Sj7qMsc7rZ-hL0a5tzy706OJkt65ZODKRxwmya7Zy-MCDEFXYhP3qXVqhyrkKiQalh9hZwsG6EE1emzWtahdmxi1eViJBLk28UvLWN8RYyCha4d4xrLI/s1600/pst16.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
As shown in image above, go to Styles section an in the array include the location of bootstrap css file :- "../node_modules/boostrap/dist/css/bootstrap.min.css"</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And to Scripts section in the value array put the Jquery file's path first and then the bootstrap's file's path. which is :-</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
jQuery :- "../node_modules/jquery/dist/jquery.min.js"</div>
<div class="separator" style="clear: both; text-align: left;">
bootstrap:- "../node_modules/boostrap/dist/js/bootstrap.min.js"</div>
<br />
<br />
These paths are in respect of index.html files as eventually on that file root module and components will get registers.<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
and if you do npm start in CMDER, you will see the bootstrap properties in action, just modify html file a little bit like add a container and row div.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
<u><span style="font-size: x-large;">
Generate a new component using Angular CLI.</span></u></h2>
<div>
Its very easy to generate html template, component ts file and testing files using angular CLI, not only that it automatically registers the new component on the module. to do it you have to just type a simple command in your Command line editor:-<br />
<br />
<br />
<ul style="text-align: left;">
<li>We will create component for nav-bar at top of the page. For that just use this command to generate the component:-</li>
</ul>
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><b>ng generate component nav-bar</b></pre>
<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKWnfkGpfLJDLyJeG4Pf-e8-dYj2wVrXQrelqH15S2xbfPPIEDf1BUPVAsVFx2qoQsUhW2PCuTrI7lU9xVJxwW_OfaYA3l1BTMVMwkoXCtxkJ1ESID3eFLUPjTyLm4lkytDhXRAtPEdg/s1600/pst17.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="283" data-original-width="590" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKWnfkGpfLJDLyJeG4Pf-e8-dYj2wVrXQrelqH15S2xbfPPIEDf1BUPVAsVFx2qoQsUhW2PCuTrI7lU9xVJxwW_OfaYA3l1BTMVMwkoXCtxkJ1ESID3eFLUPjTyLm4lkytDhXRAtPEdg/s1600/pst17.png" /></a></div>
</div>
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
CLI will perform five steps first it will create html template for componenet, next the test file spec.ts, then the component itself and then the css file and finally update the main module to register component it has creeated, you can see these changes in your folder structure:-<br />
<br />
<div style="text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgA7NRzEOVyaw8V9D7gkgtl26ivsmXNktsG_U9wz0K3AC74Jm0NGLgkNDGPKV6717Ix-ikovMxAtF8MKkyEGqNrLzjEJajHN4P5YfBeX0RLFvyCozlILC7RqBD0tydxzp6Bib8IL6THY/s1600/pst18.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="459" data-original-width="651" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgA7NRzEOVyaw8V9D7gkgtl26ivsmXNktsG_U9wz0K3AC74Jm0NGLgkNDGPKV6717Ix-ikovMxAtF8MKkyEGqNrLzjEJajHN4P5YfBeX0RLFvyCozlILC7RqBD0tydxzp6Bib8IL6THY/s1600/pst18.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You will see it has generated a new folder with the component name and respective files are automatically added to it.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
CLI generally dictates this as best practice to create each component and its respective files under a single folder, you can nest multiple components under one component, and have them communicate with each other, thats not part of this blog though.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: left;">
Lets delete the spec.ts file as its not needed as of now, i am not doing testing of anything, and just copy the code of Nav Bar from bootrstrap sample to the html template. And then add the <app-nav-bar></app-nav-bar> on top of major app.component template to load the newly created nav component as shown here:-</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xS8axzHBQWKTEPkfyIUmv7hHM-pDQhdQtNgYx-03GVOAsC2RwPEvdzTPWx8UXeFpdOqOAWAbaEDhZpESCTXP57JVkY7cdFXKsRU_zIrs8lC1evjJTwvIJxd3bD2ww612z4S8DEkKTXk/s1600/pst19.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="635" data-original-width="1347" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xS8axzHBQWKTEPkfyIUmv7hHM-pDQhdQtNgYx-03GVOAsC2RwPEvdzTPWx8UXeFpdOqOAWAbaEDhZpESCTXP57JVkY7cdFXKsRU_zIrs8lC1evjJTwvIJxd3bD2ww612z4S8DEkKTXk/s640/pst19.png" width="640" /></a></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;">
<br /></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;">
<br /></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;">
<br /></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;">
<br /></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;">
Thats it, you should see nav bar added on your main page Will share more magic we can do with angular cli further in my blogs, please keep following.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgA7NRzEOVyaw8V9D7gkgtl26ivsmXNktsG_U9wz0K3AC74Jm0NGLgkNDGPKV6717Ix-ikovMxAtF8MKkyEGqNrLzjEJajHN4P5YfBeX0RLFvyCozlILC7RqBD0tydxzp6Bib8IL6THY/s1600/pst18.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com1United States37.09024 -95.712891000000013-36.4162205 99.052733999999987 90 69.521483999999987tag:blogger.com,1999:blog-2179939415242111485.post-51743695391634512092018-06-19T12:24:00.002-07:002018-06-19T12:24:57.994-07:00Connecting Visual Studio Code with your team project on VSTS using Git as version control<div dir="ltr" style="text-align: left;" trbidi="on">
Who does not love Visual Studio code, everyone does. Its not just an editor emmet, source control integration, keyboard shortcusts, json based packages, thousands of benefits. It took me time to learn how to connect it to VSTS with git, so blogging about it.<br />
<br />
<div style="text-align: left;">
Got to VSTS create your team project if a new one you are creating or use an existing one, also make sure to create a security token, here are the steps<br />
<br />
<h2 style="text-align: left;">
Create VSTS project and security token</h2>
</div>
<ul style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufSxB829fynX1KovA1tY-4BeiNMZCcmhqqLcALCr3FwFudjyeBrE4HKmdqKslpMWSGvlQ7TwqKbGTo_FeaoEkSMtvVKVh5RhnLZm74mK1muVvAMpsYGuoZ27BXRnyn7KgVfHb4TZlweA/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><br /></a>
<li>Go to visual studio online:- https://www.visualstudio.com/vso/, login with your credentials.</li>
</ul>
<div>
<br /></div>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufSxB829fynX1KovA1tY-4BeiNMZCcmhqqLcALCr3FwFudjyeBrE4HKmdqKslpMWSGvlQ7TwqKbGTo_FeaoEkSMtvVKVh5RhnLZm74mK1muVvAMpsYGuoZ27BXRnyn7KgVfHb4TZlweA/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="401" data-original-width="1271" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufSxB829fynX1KovA1tY-4BeiNMZCcmhqqLcALCr3FwFudjyeBrE4HKmdqKslpMWSGvlQ7TwqKbGTo_FeaoEkSMtvVKVh5RhnLZm74mK1muVvAMpsYGuoZ27BXRnyn7KgVfHb4TZlweA/s640/1.png" width="640" /></a></div>
<ul style="text-align: left;">
<li>Click New Team Project or just click an existing project, i have used Git and Scrum as VC and Work Item process.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyum1c_UikRnRqFTOmnCeXlZWJSGhF2yCFJuLLN4GoG8j25E4KMuIQKq45QJ4d61qx1e_UoXkyQ35o01P-voz7qCVBJ40jYE2tOrmAOdk39nrWlmEgbuam2Gv5VT8nSyBnfmQABXBmk7Q/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="609" data-original-width="814" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyum1c_UikRnRqFTOmnCeXlZWJSGhF2yCFJuLLN4GoG8j25E4KMuIQKq45QJ4d61qx1e_UoXkyQ35o01P-voz7qCVBJ40jYE2tOrmAOdk39nrWlmEgbuam2Gv5VT8nSyBnfmQABXBmk7Q/s400/2.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul style="text-align: left;">
<li>Once its created, open the project and copy the HTTPS endpoint, for cloning.</li>
<li>Dont forget to create a read me and gitignore file.</li>
<li>Next lets create a security token to authenticate the repository from external tools like VS code.</li>
</ul>
<ul style="text-align: left;">
<li>For creating the token go to your profile and click security in the drop down :-</li>
</ul>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0J2yRoaLV0iObP63rczbPtMR0wgiWKY0QNRPGsZ4GVRb38ra07c-w7ppfYQZOU57eYBhkCSIwbhJxp3NVmjcKDq45XxEi00_NcnlWsYzZWKD73qYf_ObdY-VlnVNZtbJfWBNsaIR6SvM/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="402" data-original-width="670" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0J2yRoaLV0iObP63rczbPtMR0wgiWKY0QNRPGsZ4GVRb38ra07c-w7ppfYQZOU57eYBhkCSIwbhJxp3NVmjcKDq45XxEi00_NcnlWsYzZWKD73qYf_ObdY-VlnVNZtbJfWBNsaIR6SvM/s400/3.png" width="400" /></a></div>
<ul style="text-align: left;">
<li><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Next click ADD and create a new token:-<br /></li>
</ul>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoA8UXHO4UNz_5xUW2Jo3WYWbRSRcUl84l7ndXZVaLXnBsf81n14DeEZOsk8l_vL0ULwrqTGZN9sUOr_z8brGROfRvIxg2WhdpoLF2TK8H3YbJYMLmo9-Kco3PVIyQvnuGntOGN6_gAY/s1600/4.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="430" data-original-width="736" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoA8UXHO4UNz_5xUW2Jo3WYWbRSRcUl84l7ndXZVaLXnBsf81n14DeEZOsk8l_vL0ULwrqTGZN9sUOr_z8brGROfRvIxg2WhdpoLF2TK8H3YbJYMLmo9-Kco3PVIyQvnuGntOGN6_gAY/s400/4.png" width="400" /></a></div>
<ul style="text-align: left;">
<li>As it says please save your token from somewhere where you can reuse it as it appearonce at this interface, so i have copied it on a notepad and saved it on my desktop:-</li>
</ul>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXN7OdiJCnfPLfVfnVKczFoRJa-AiHo-kYbEKHPuVBlW2vPZr3_NR5N3rhroXl3EFRXvRsbRD9S4Qcj5yBHZfCoux7_mZc96h_I50pD2cv5rEDJxI5IzHCchEll3GlTv821wTisx-xOus/s1600/5.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="402" data-original-width="1065" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXN7OdiJCnfPLfVfnVKczFoRJa-AiHo-kYbEKHPuVBlW2vPZr3_NR5N3rhroXl3EFRXvRsbRD9S4Qcj5yBHZfCoux7_mZc96h_I50pD2cv5rEDJxI5IzHCchEll3GlTv821wTisx-xOus/s640/5.png" width="640" /></a></div>
<div>
<br /></div>
<h2 style="text-align: left;">
Add a repository using bash</h2>
<div>
<br /></div>
<ul style="text-align: left;">
<li>Next if you dont have GtBash(GIT) installed on your system, then i will request you to please install it from this location: https://git-scm.com/downloads<br /></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwJxzQOP2pXmKJMy1JPa0gavoFbrjRvWn9_deqdm8cvBf6nUwxDSSo90zPDiE0EhASLYkfjkKm0fcBfGFNz7zk7jwBAYGhVfqQ8AU_2A_RA8GY2terbjA34ZEKVYE7E3j_XDJ3NNeQ6E/s1600/7.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="479" data-original-width="674" height="449" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwJxzQOP2pXmKJMy1JPa0gavoFbrjRvWn9_deqdm8cvBf6nUwxDSSo90zPDiE0EhASLYkfjkKm0fcBfGFNz7zk7jwBAYGhVfqQ8AU_2A_RA8GY2terbjA34ZEKVYE7E3j_XDJ3NNeQ6E/s640/7.png" width="640" /></a></div>
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWn7HcI4qG5wgKQIKoLxeaVJcSwztgvlixTxidOvHxKVgI99pl6rcfY-otXRmHQAfUUwkrsCHevaFPfi_EvwuPQq9DlazHI7BcFZwwcYlyJM4Cj3ubctVOzj9DwNiFnXSA91y-wZ3I_2k/s1600/8.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<ul style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWn7HcI4qG5wgKQIKoLxeaVJcSwztgvlixTxidOvHxKVgI99pl6rcfY-otXRmHQAfUUwkrsCHevaFPfi_EvwuPQq9DlazHI7BcFZwwcYlyJM4Cj3ubctVOzj9DwNiFnXSA91y-wZ3I_2k/s1600/8.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><br /></a>
<li>Once installed open Gitbash and open the folder location where you will keep your repository by using this cd d:\{yourlocation}, as shown here:-<br /><br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWn7HcI4qG5wgKQIKoLxeaVJcSwztgvlixTxidOvHxKVgI99pl6rcfY-otXRmHQAfUUwkrsCHevaFPfi_EvwuPQq9DlazHI7BcFZwwcYlyJM4Cj3ubctVOzj9DwNiFnXSA91y-wZ3I_2k/s1600/8.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="383" data-original-width="597" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWn7HcI4qG5wgKQIKoLxeaVJcSwztgvlixTxidOvHxKVgI99pl6rcfY-otXRmHQAfUUwkrsCHevaFPfi_EvwuPQq9DlazHI7BcFZwwcYlyJM4Cj3ubctVOzj9DwNiFnXSA91y-wZ3I_2k/s640/8.png" width="640" /></a></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyTl6G8VAj9d4cTUpiUzf1A9URUNm3vQIyHWws3aG4x8dLh1e0g_yhr9vyuF0Uhd3QhBYqm-ur_PofX74JmMMO1gdAHLMzJdYU-3rGmsG8KEhORze7mpHJFaA7txqhY7QazBv5Z4XPsNo/s1600/9.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>Now clone your repository by using this command as shown here:-</li>
</ul>
<div>
$git clone {url}</div>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyTl6G8VAj9d4cTUpiUzf1A9URUNm3vQIyHWws3aG4x8dLh1e0g_yhr9vyuF0Uhd3QhBYqm-ur_PofX74JmMMO1gdAHLMzJdYU-3rGmsG8KEhORze7mpHJFaA7txqhY7QazBv5Z4XPsNo/s1600/9.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="383" data-original-width="597" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyTl6G8VAj9d4cTUpiUzf1A9URUNm3vQIyHWws3aG4x8dLh1e0g_yhr9vyuF0Uhd3QhBYqm-ur_PofX74JmMMO1gdAHLMzJdYU-3rGmsG8KEhORze7mpHJFaA7txqhY7QazBv5Z4XPsNo/s640/9.png" width="640" /></a></div>
<ul style="text-align: left;">
<li>you an either provide your credentials in the window pop up appeared or cancel it enter manual as shown here:-<br /></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStnqPffHnZ_T7AvjrKFNGX4B2EdifvqLh69GfeGnim2FatOr197GWIuViOBIzl9b6wwobzOCda6lUPBEEJGtON26nvCVm2vi8S-uobP-etFfyamk57paMRE88rry1ROKkDO2h8dlIRdo/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="383" data-original-width="597" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStnqPffHnZ_T7AvjrKFNGX4B2EdifvqLh69GfeGnim2FatOr197GWIuViOBIzl9b6wwobzOCda6lUPBEEJGtON26nvCVm2vi8S-uobP-etFfyamk57paMRE88rry1ROKkDO2h8dlIRdo/s640/10.png" width="640" /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>User Name is your email address and password is the token we copied, it will clone the repository like this:-<br /></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsAFBPuO_asRflpEjWGiwiAhk4RtSO3plSaPraktSixalRGu4iANytS76sFy-tWjG6bjq0MRQ8Xe9xC0prm-Eks9gnm8xyueNZgfMVg_32yK9qrfVo-iKEekjW0JJ0edMgvZ1YUixKio/s1600/11.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="261" data-original-width="523" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsAFBPuO_asRflpEjWGiwiAhk4RtSO3plSaPraktSixalRGu4iANytS76sFy-tWjG6bjq0MRQ8Xe9xC0prm-Eks9gnm8xyueNZgfMVg_32yK9qrfVo-iKEekjW0JJ0edMgvZ1YUixKio/s640/11.png" width="640" /></a></div>
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h2 style="text-align: left;">
Connect to repository in VSCode</h2>
</div>
<ul style="text-align: left;">
<li>Next Open VScode and open your folder just cloned now.<br /><br /></li>
<li><div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bLEWHOY8vu2Nm2zQ5FfwchXwIIOPxPAPBFjHYiwMG6fQVSGv9fYB91cI54lIsNMp-KcO5D0MnWPj9HA_x-_8hiRV1z_NBmb5GoAJnPgIKfwBm96G_6dmndbJVzPfzFwt5l_km4SrAVo/s1600/12.png" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="471" data-original-width="528" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bLEWHOY8vu2Nm2zQ5FfwchXwIIOPxPAPBFjHYiwMG6fQVSGv9fYB91cI54lIsNMp-KcO5D0MnWPj9HA_x-_8hiRV1z_NBmb5GoAJnPgIKfwBm96G_6dmndbJVzPfzFwt5l_km4SrAVo/s400/12.png" width="400" /></a><br /></div>
</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bLEWHOY8vu2Nm2zQ5FfwchXwIIOPxPAPBFjHYiwMG6fQVSGv9fYB91cI54lIsNMp-KcO5D0MnWPj9HA_x-_8hiRV1z_NBmb5GoAJnPgIKfwBm96G_6dmndbJVzPfzFwt5l_km4SrAVo/s1600/12.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bLEWHOY8vu2Nm2zQ5FfwchXwIIOPxPAPBFjHYiwMG6fQVSGv9fYB91cI54lIsNMp-KcO5D0MnWPj9HA_x-_8hiRV1z_NBmb5GoAJnPgIKfwBm96G_6dmndbJVzPfzFwt5l_km4SrAVo/s1600/12.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bLEWHOY8vu2Nm2zQ5FfwchXwIIOPxPAPBFjHYiwMG6fQVSGv9fYB91cI54lIsNMp-KcO5D0MnWPj9HA_x-_8hiRV1z_NBmb5GoAJnPgIKfwBm96G_6dmndbJVzPfzFwt5l_km4SrAVo/s1600/12.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>Install the VSTS extensions if not installed allready:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9HM5u0VKAco2c0t3-qGl6Jvgrm1txS2C4_16GXLxw54nH-qsX2_cUF9uX4IgnZTJ8HFFaC1BcpHO_lmr6wK4-2O-C4p6bCQuDA93aIegSRTwK8hf6iqlFTJe9xo3KfvWTwOKKg1Y43Bo/s1600/13.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="687" data-original-width="523" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9HM5u0VKAco2c0t3-qGl6Jvgrm1txS2C4_16GXLxw54nH-qsX2_cUF9uX4IgnZTJ8HFFaC1BcpHO_lmr6wK4-2O-C4p6bCQuDA93aIegSRTwK8hf6iqlFTJe9xo3KfvWTwOKKg1Y43Bo/s1600/13.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<ul style="text-align: left;">
<li>Next, lets connect to the Team services, open the command pallete by pressing c+shift+p in VSCode as shown here :-</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkR1w3TGRZmk3mEkYCR29ONwJ0yIOZUh3wWmEzGEC83fMFH1g1CU6O5-0jRPS5u57HaKfXsnpp7Fkw2wYjcE-pCKsmzbFx7cRACsog5TtGNXZ8Z2I_wc9Ytb1gzxEiHL6vN4ibIQolWkQ/s1600/14.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="774" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkR1w3TGRZmk3mEkYCR29ONwJ0yIOZUh3wWmEzGEC83fMFH1g1CU6O5-0jRPS5u57HaKfXsnpp7Fkw2wYjcE-pCKsmzbFx7cRACsog5TtGNXZ8Z2I_wc9Ytb1gzxEiHL6vN4ibIQolWkQ/s640/14.png" width="640" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkR1w3TGRZmk3mEkYCR29ONwJ0yIOZUh3wWmEzGEC83fMFH1g1CU6O5-0jRPS5u57HaKfXsnpp7Fkw2wYjcE-pCKsmzbFx7cRACsog5TtGNXZ8Z2I_wc9Ytb1gzxEiHL6vN4ibIQolWkQ/s1600/14.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>Select Team:signin command and select first option to provide a token manually:-</li>
</ul>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s1600/15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" data-original-height="276" data-original-width="1088" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s640/15.png" width="640" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s1600/15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s1600/15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s1600/15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s1600/15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vdCOWVFEqqKey0I-Gncpq7DbRIH_s59Y2Cn62JiA3CQsYKD_zj0NHvjrMhL21DGlVSzMZQoE6Dboal3AtIeV0MLMgp-0ZhKHdJrfONAaMv-sd9eOsuamgrfh6YK5QDRsaDQ3qFA_dNI/s1600/15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Paste your token that we copied on the notepad earlier:-</li>
<li>Press and enter the you will notice that you are connected to VSTS :-</li>
</ul>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteqAg06Mz4ti-B1PKI9vd9AZWKVL-lKhwGv4-vCaceRTDIFJPbmOWpf9i8kSGna0IyUUSXS0DfNesl636ujpRJz4L7-AOGDHammSCXygfxz1QVcyPR0y-bCjf3-Oyp0wZVU-jdNTETgg/s1600/16.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="85" data-original-width="651" height="51" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteqAg06Mz4ti-B1PKI9vd9AZWKVL-lKhwGv4-vCaceRTDIFJPbmOWpf9i8kSGna0IyUUSXS0DfNesl636ujpRJz4L7-AOGDHammSCXygfxz1QVcyPR0y-bCjf3-Oyp0wZVU-jdNTETgg/s400/16.png" width="400" /></a></div>
</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Next add a new file and you will notice VS Code will tell that you have one pending change:-</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArR29mvUSiX4dYEC8gUt3NBF2zyJHjvjm3ZGPbFzeN3QZcpEyKDXi5zC96SIhYSVrb8fRAeGCjpJEUfD4QeMwdeQW4nERVcUOmFkGuSVYzDa351hyphenhyphenhaRU5o692ovvkvLPj0qfUJ3ubv8/s1600/17.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="1194" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArR29mvUSiX4dYEC8gUt3NBF2zyJHjvjm3ZGPbFzeN3QZcpEyKDXi5zC96SIhYSVrb8fRAeGCjpJEUfD4QeMwdeQW4nERVcUOmFkGuSVYzDa351hyphenhyphenhaRU5o692ovvkvLPj0qfUJ3ubv8/s640/17.png" width="640" /></a></div>
<div>
<br /></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Enter the comment and press ctrl+Enter, it will ask to stage the code before commit, press ok.<br /></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DI044MXQ9CF_ok5AXc3wtsnXVDQakNx3B36CH5VgDBK6LD9Vc3u3E4F2lIfQXOs8ifO5cRtQRYQvrBsRVSsr5sYYC3IdTblbLTaDKTiVlzds2LZUN_MkSeZKecW1b_g4sTgg6l-rx90/s1600/18.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="435" data-original-width="717" height="388" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DI044MXQ9CF_ok5AXc3wtsnXVDQakNx3B36CH5VgDBK6LD9Vc3u3E4F2lIfQXOs8ifO5cRtQRYQvrBsRVSsr5sYYC3IdTblbLTaDKTiVlzds2LZUN_MkSeZKecW1b_g4sTgg6l-rx90/s640/18.png" width="640" /></a></div>
<div>
<br /></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaxvj5ASaXp9A4xNT56a2Ao1iJ-gC3rxiJ8k3GBG5Gw9fU4ZfhCiuTQnyVLJN6L3iPPRIqaCpzbWxDTjhDpW8e7x30H7GATAU-afj9JjkBGLE5piU6BBGnI6qdeKFVmMm3zmKQ5TXrI0/s1600/19.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="424" data-original-width="787" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaxvj5ASaXp9A4xNT56a2Ao1iJ-gC3rxiJ8k3GBG5Gw9fU4ZfhCiuTQnyVLJN6L3iPPRIqaCpzbWxDTjhDpW8e7x30H7GATAU-afj9JjkBGLE5piU6BBGnI6qdeKFVmMm3zmKQ5TXrI0/s640/19.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Your changes are committed to your local repository, now to move it to your master branch. Press sync button on below left corner:-</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-MgUuMmLFoUbj6XXGDiWMJ_C4XwEXPYiyXKYTkgckJvqycI2FI4lecRaC1HP7BEqwEC3iYNZh4sFPTaMqYYLqMP9WNkJtQRIBbgdemiL08jJQExu8VDXrGh3wVvqU_7f9HntSUIvx7o/s1600/20.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="442" data-original-width="691" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-MgUuMmLFoUbj6XXGDiWMJ_C4XwEXPYiyXKYTkgckJvqycI2FI4lecRaC1HP7BEqwEC3iYNZh4sFPTaMqYYLqMP9WNkJtQRIBbgdemiL08jJQExu8VDXrGh3wVvqU_7f9HntSUIvx7o/s640/20.png" width="640" /></a></div>
<div>
<br /></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>At times it may ask multiple times to enter your credentials, please add and proceed.</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9haa6vWtVZLKIJ99l0EYWh-Rns9IFnERtBU2z6_Btngx27-rG0AydFDNuIAFn1PWQBYe6dm4Pa1EKwNBD1N3UNwJfTpE5oa9w_YqITVer4gKzxrqC3lffbW8G-ZfSZ2FrjZcM6K-2_g/s1600/21.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="324" data-original-width="775" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9haa6vWtVZLKIJ99l0EYWh-Rns9IFnERtBU2z6_Btngx27-rG0AydFDNuIAFn1PWQBYe6dm4Pa1EKwNBD1N3UNwJfTpE5oa9w_YqITVer4gKzxrqC3lffbW8G-ZfSZ2FrjZcM6K-2_g/s640/21.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Go to VSTS site now and you can see index.html file is added to your master repository:-</li>
</ul>
<div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBJGCPAhxoZkn9muNx4UR3C_oacwCpIOArcLAdbPPyA64QIvA1H8mXFiIK7MQLmoP3M7e42y1UvzN1ms850rSTii4fTPJdE4yiWEq6ZeB5fup4tYB1aIcQ2E7xrSsGsyPHQlehthFIzQ/s1600/22.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="158" data-original-width="859" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBJGCPAhxoZkn9muNx4UR3C_oacwCpIOArcLAdbPPyA64QIvA1H8mXFiIK7MQLmoP3M7e42y1UvzN1ms850rSTii4fTPJdE4yiWEq6ZeB5fup4tYB1aIcQ2E7xrSsGsyPHQlehthFIzQ/s640/22.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
You have made it, VSCode is now connected to VSTS and Git is your version control.</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-68194277531289896552018-06-06T10:42:00.001-07:002018-06-06T10:42:22.866-07:00Posting updates to SharePoint Online via PowerShell and Rest API<div dir="ltr" style="text-align: left;" trbidi="on">
In my previous blog <a href="http://ankurmadaan.blogspot.com/2017/10/office-365-powershell-and-rest-api.html" target="_blank">office 365 powershell and restApi</a> i demonstrated how to read/get data from SharePoint online site, here in this example we will Post updates.<br />
<br />
Here are the important things to consider when posting updates to office 365:-<br />
<br />
<ol style="text-align: left;">
<li>We have to pass X-RequestDigest value for the form digest HTTP header.</li>
<li>If updating Lists/Document Library and items/documents to avoid concurrency conflicts we need to specify additional HTTP header with the name "IF-MATCH", which takes a value of Etag. Etag can be retrieved by retrieving the target entity(list or list item) with a GET method. This is included in the response HTTP headers and in the response content. In situations where we dont care about concurrency its ok to pass "*" as value.</li>
</ol>
I will use the PnPOnline msi PowerShell module to connect to Office 365 developer tenant of mine. Kindly read the <a href="http://ankurmadaan.blogspot.com/2017/10/office-365-powershell-and-rest-api.html" target="_blank">office 365 powershell and restApi</a> to understand how to use it and load the module.<br />
<br />
Lets talk about the script here.<br />
<br />
<ul style="text-align: left;">
<li>First we will Import the PowerShell module.</li>
</ul>
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">Import-Module "Microsoft.Online.SharePoint.PowerShell"</span></pre>
</div>
<br />
<ul style="text-align: left;">
<li>Next create a global webSession variable, we will add headers to this session via different functions as our code progresses.</li>
</ul>
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">#create webRequest session global Object
$Global:webSession = New-Object Microsoft.PowerShell.Commands.WebRequestSession</span>
</pre>
</div>
<br />
<br />
<ul style="text-align: left;">
<li>Lets create a function where we will pass the url of the SharePoint online site as a param and then will connect to it using Connect-PnPOnline function of PnP SharePoint Online Powershell:-</li>
</ul>
<br />
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">
function Init-PnPSecuritySession{
param($targetSite)
$targetSiteUri = [System.Uri]$targetSite
#connect to the Sharepoint online site
Connect-PnPOnline $targetSite
$context = (Get-PnPWeb).Context
$credentials = $context.Credentials
$authenticationCookies = $credentials.GetAuthenticationCookie($targetSiteUri, $true);
#set retrieved cookies as header to wenreq
$Global:webSession.Cookies.SetCookies($targetSiteUri,$authenticationCookies)
$Global:webSession.Headers.Add("Accept","application/json;odata=verbose");
}
</span></pre>
</div>
Will retrieve the Context from PnP web and then grab the credentials and Authentication Cookie.<br />
Next setup the authentication cookie value and include Accept header for content type.<br />
<br />
<br />
We are using odata=verbose, instead we can use odata = minimalmetadata or odata = nometadata for reducing metadata returned after the rest call.<br />
<br />
<br />
<ul style="text-align: left;">
<li>Next we will write a function in which we will make a rest call to ContextInfo namespace, retrieve the RequestDigest value and pass it to websession object:-</li>
</ul>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">#function to get RequestDigest Value and set it with Http Header
function Init-PnPDigestValue{
param ($targetSite)
$contextInfoUrl = $targetSite + "_api/ContextInfo"
</span></pre>
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">$webRequest = Invoke-WebRequest -Uri $contextInfoUrl</span></pre>
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">-Method Post -WebSession $Global:webSession</span></pre>
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">
$jsonContextInfo = $webRequest.Content | ConvertFrom-Json
$digestValue = $jsonContextInfo.d.GetContextWebInformation.FormDigestValue
$Global:webSession.Headers.Add("X-RequestDigest",$digestValue)
}</span>
</pre>
</div>
<br />
<br />
<ul style="text-align: left;">
<li>Now lets add additional HTTP Headers, as its an Update we will user X-HTTP-Method "MERGE" or You can use "PATCH" along with Post so that any writable property that is not specified in the content Metadata we are passing, will retain its current value.</li>
</ul>
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">$Global:webSession.Headers.Add("X-HTTP-Method","MERGE")
$Global:webSession.Headers.Add("IF-MATCH", "*")#optional
$Global:webSession.Headers.Add("content-type","application/json;odata=verbose")
</span></pre>
</div>
<br />
We are keeping If-Match to *, this is optional and one can ignore it in this case. Its important to mention content-type.<br />
<br />
<ul style="text-align: left;">
<li>Now lets declare the content, we will use stringified JSON object to update Title of the Web here. so it should be like this:-</li>
</ul>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">$newContent = "{ '__metadata': { 'type': 'SP.Web' }, 'Title': 'PHLY CITY Site' }";
$Global:webSession.Headers.Add("content-length",$newContent.Length)
</span></pre>
</div>
<br />
Our Object is SPweb and the property we are modifying is Title. so newContent is set accordingly and also an additional Header parameter is added to provide the content-length.<br />
<br />
Now lets provide our url for sharepoint site and call the functions and then finally Invoke the web request:-<br />
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">$targetSite = "https://phly.sharepoint.com/sites/phly/"
Init-PnPSecuritySession -targetSite $targetSite
Init-PnPDigestValue -targetSite $targetSite
$restCallUrl = $targetSite + "_api/web"
#Invoking the web request with websession and POST method.
$webRequest = Invoke-WebRequest -Uri $restCallUrl -Body $newContent
-Method Post -WebSession $Global:webSession
</span></pre>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Save the entire script and execute it, it will ask you credentials to login to office 365 site and then will invoke the web request. you should be able to see the updated result on the site:-<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFxQc98N16lRt6oQpFAkJrRxndoKePK6wLyIDpECmiaRxIEChYU8QR4IX76ktdzKnls5oTxIBaBk82R1yx39xFGlvBSiAy3HBFphNVxs7J23Kcccyar43padzRYozCQMX3q0qF2-BsdA/s1600/Phlycitysite.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="470" data-original-width="1404" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFxQc98N16lRt6oQpFAkJrRxndoKePK6wLyIDpECmiaRxIEChYU8QR4IX76ktdzKnls5oTxIBaBk82R1yx39xFGlvBSiAy3HBFphNVxs7J23Kcccyar43padzRYozCQMX3q0qF2-BsdA/s640/Phlycitysite.png" width="640" /></a><br />
<br />
<br /></div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-85515987917197888112018-05-16T11:48:00.002-07:002018-05-16T11:50:37.560-07:00Get Projects Data using Project Server Rest API and PowerShell. Project Server 2013<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi, One of the requirements my team received was to extract project server related information to automate Project Servers permission for which we need to extract project server reports on daily basis.<br />
Its very easy and simple to use Project Server Rest API with PowerShell to extract Projects information.<br />
It involves three basic steps:-<br />
<br />
<br />
<ol style="text-align: left;">
<li>Invoke-Webrequest to Project server rest API endpoint.</li>
<li>Parse the result into JSON.</li>
<li>filter the Json result and output to excel.</li>
</ol>
<div>
Here is the script to perform this activity</div>
</div>
<br />
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;">$webRequest = Invoke-WebRequest -Uri "http://{site url}/pwa/_api/ProjectData/Projects"
-Headers @{"Accept"="application/json;odata=verbose"} -UseDefaultCredentials</code></pre>
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;">
$jsonData = $webRequest.Content | ConvertFrom-Json</code></pre>
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; word-wrap: normal;">
$jsonData.d[0].results | Select ProjectTitle, ProjectOwnerName, ProjectId
|Export-Csv -Path c:\ProjectServerDataFinal.csv </code>
</pre>
<br />
<div>
And this will generate the csv file with desired input, you can get all these properties of project using basic Rest API uri and can also provide filters to as desired.</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-18271508759432013642017-11-15T15:57:00.001-08:002017-11-16T01:00:27.827-08:00How to create File Share on Azure<div dir="ltr" style="text-align: left;" trbidi="on">
Hi, i am working with azure these days, and the first thing i did was to create my own file share on the cloud/accessible via instead of using one drive or google drive.<br />
So here are very easy steps to create your own cloud based shared drive on the Azure:-<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<ol style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil02R04n2yqw7zmKfl09Ba4s5CF-7YMimb6Rzy5ko7H0rv-qQsOdH7VyVmbBFHrvgE-u19r3IQqWQmM5shFf4WC4NznxkK-8NIHKjxEmvejDv0CfT6GeZ6_LjtRHJZLVQKDknwG65r8nE/s1600/3rd.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgA9n9hRm66mRMZ4ObW_G8cNiKZHVBBiF-QKlAwizZ-hT8di2bMd7ksDb_IYUfSHsoJXhTDbugzWDP9RyCuYOBgkKmdjbbhLciunmOOuHpT8ARgoww8wgebbiRJwhhB4VmAsjMov1tFg0/s1600/first.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgA9n9hRm66mRMZ4ObW_G8cNiKZHVBBiF-QKlAwizZ-hT8di2bMd7ksDb_IYUfSHsoJXhTDbugzWDP9RyCuYOBgkKmdjbbhLciunmOOuHpT8ARgoww8wgebbiRJwhhB4VmAsjMov1tFg0/s1600/first.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgA9n9hRm66mRMZ4ObW_G8cNiKZHVBBiF-QKlAwizZ-hT8di2bMd7ksDb_IYUfSHsoJXhTDbugzWDP9RyCuYOBgkKmdjbbhLciunmOOuHpT8ARgoww8wgebbiRJwhhB4VmAsjMov1tFg0/s1600/first.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a>
<li>Login to azure portal:- https://portal.azure.com</li>
<li>Click New and next search the market place for storage account (Use if you have any existing one)<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgA9n9hRm66mRMZ4ObW_G8cNiKZHVBBiF-QKlAwizZ-hT8di2bMd7ksDb_IYUfSHsoJXhTDbugzWDP9RyCuYOBgkKmdjbbhLciunmOOuHpT8ARgoww8wgebbiRJwhhB4VmAsjMov1tFg0/s1600/first.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="489" data-original-width="806" height="387" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgA9n9hRm66mRMZ4ObW_G8cNiKZHVBBiF-QKlAwizZ-hT8di2bMd7ksDb_IYUfSHsoJXhTDbugzWDP9RyCuYOBgkKmdjbbhLciunmOOuHpT8ARgoww8wgebbiRJwhhB4VmAsjMov1tFg0/s640/first.png" width="640" /></a></li>
<li>Click Create and keep settings as shown in figure below, the most important thing among settings is performance, for file share the performance have to be standard as Files storage is not available in Premium performance<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cjlyI_S9lH5UiAoHnyTDqbs34ZibMnxRNManlccMAUGff1jnQPZH4KaJyjAASzY4Gtwi7raaVAiSSnOg2sit9Ev2r8MzBfcTv5AjUCG886d61TvIjOQ1GhuKDhp8bQ51DHhNnxrt6-I/s1600/second.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="749" data-original-width="526" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cjlyI_S9lH5UiAoHnyTDqbs34ZibMnxRNManlccMAUGff1jnQPZH4KaJyjAASzY4Gtwi7raaVAiSSnOg2sit9Ev2r8MzBfcTv5AjUCG886d61TvIjOQ1GhuKDhp8bQ51DHhNnxrt6-I/s640/second.png" width="448" /></a></li>
<li>Wait for it to be created, next once created open the storage account and click on overview, next click on the Files in the adjacent window to open file service and click + to add a new file share:-<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoGdae0ObnoXD5d7WujfoICApUxTX7W7GWi7o9KbN1l61WK_LIxtkeZ7eTCrRVsrQizBZkWXeZmbLhLeS7ApyJTiYtGaiI1epQh-mnLbhmZmm2bT7ZjPKNa2NQstT-GaWZ1IPwcUqXMk/s1600/fourth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="362" data-original-width="813" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoGdae0ObnoXD5d7WujfoICApUxTX7W7GWi7o9KbN1l61WK_LIxtkeZ7eTCrRVsrQizBZkWXeZmbLhLeS7ApyJTiYtGaiI1epQh-mnLbhmZmm2bT7ZjPKNa2NQstT-GaWZ1IPwcUqXMk/s640/fourth.png" width="640" /></a><br />One thing to note here that we can have file share size upto 5 TB i.e 5120 GB only</li>
<li>Next click ok and we are good. to access it just open the file storage and click on Connect. You can choose the connection guidelines as per your wish, i prefer using "new use" command. Just copy the new use command and run command shell on your machine and paste the copied string and hit enter.<br /><br />Basically the string you copied is "net use [File Share Path] [User Account] [Access Key1 of Storage Account]".</li>
<li>Just to add here, lets see the cost of creating 1 TB File Share Per Month on Pricing Calculator:-<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJ5iyYqOWaCB4p1Ze_I0A-GcCulTMBZC8ni7az84YJgFEOOp8G_gaybnfzBDzXZ_usA8tXmTCwxPPY0t5SglHqnRxuhxcBtGsnwlPBEOjOBlbWBYBZnOIU4Z0cuijhGtgN6u3xUjl6d4/s1600/fifth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="700" data-original-width="943" height="473" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJ5iyYqOWaCB4p1Ze_I0A-GcCulTMBZC8ni7az84YJgFEOOp8G_gaybnfzBDzXZ_usA8tXmTCwxPPY0t5SglHqnRxuhxcBtGsnwlPBEOjOBlbWBYBZnOIU4Z0cuijhGtgN6u3xUjl6d4/s640/fifth.png" width="640" /></a></li>
<li>62 Dollars plus operations cost.</li>
</ol>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-11738276024859576572017-10-10T13:55:00.000-07:002017-10-10T14:22:53.224-07:00SharePoint Online, PowerShell and Rest API : Introduction<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
In this blog i will show you how to execute Rest API calls via PowerShell for SharePoint Online(Office 365 Tenant). <br />
<br />
<u>I am using SharePoint Online PnP MSI here.</u><br />
<br />
You must have already heard about PowerShell MSI for SharePoint Online developed by Erwin van Hunen and included in SharePoint PnP, i will use the same for connecting to SharePoint online via Powershell, you can download the same using this url:-<br />
<br />
https://github.com/SharePoint/PnP-PowerShell/releases<br />
<br />
Note:- You will need to have Powershell 3.0 to use SharePoint Online msi of SharePoint PnP.<br />
<br />
to View all Commands in PnP, type :-<br />
<br />
<pre style="background-color: #f6f8fa; border-radius: 3px; box-sizing: border-box; color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; line-height: 1.45; overflow: auto; padding: 16px; word-break: normal; word-wrap: normal;"><span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">Get-Command</span> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">-</span>Module <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">*</span>PnP<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">*</span></pre>
<br />
Here is the URL for help documentation for commands:-<br />
<br />
https://github.com/SharePoint/PnP-PowerShell/blob/master/Documentation/readme.md<br />
<br />
<br />
Once you have installed it, lets see how to execute Rest API calls via Powershell.<br />
<br />
You can use Windows Powershell ISE, SharePoint Online Management Shell, CMDER<br />
<br />
I am using CMDER to demo this:-<br />
<br />
Open CMDER and type Powershell, and then load modules:-<br />
<br />
If you are using cmder first time and would like to work using it with PowerShell Online, then import the module like this:-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcF3CBvMp0RMnNS2OhobQfhRyq8JBlR0h8iiUIYKwMXcXMbtS9dkDEGiMhBk1s2l5lhDnJ30afEHrRl9Dvp0jPQ3SoKte8L4yONfM8JCVeqvxQGwvG_Yo4IQFQfgL4zm2WwCulM6G2wk/s1600/first.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="291" data-original-width="979" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcF3CBvMp0RMnNS2OhobQfhRyq8JBlR0h8iiUIYKwMXcXMbtS9dkDEGiMhBk1s2l5lhDnJ30afEHrRl9Dvp0jPQ3SoKte8L4yONfM8JCVeqvxQGwvG_Yo4IQFQfgL4zm2WwCulM6G2wk/s640/first.png" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Now we are ready to write our Command to talk to Rest API.<br />
<br />
Follow these simple steps:-<br />
<br />
<ol style="text-align: left;">
<li>Connect to SP Online:-<br /><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">
$email = Read-Host -Prompt "Please enter your tenant account email"
$pass = Read-host -AsSecureString "Please enter tenant admin password"
$credentials = New-Object –TypeName "System.Management.Automation.PSCredential"
–ArgumentList $email, $pass
$targetSite = "https://<your-tenant>.sharepoint.com/sites/<site-name>/"
$targetSiteUri = [System.Uri]$targetSite
Connect-PnPOnline $targetSiteUri -Credentials $credentials
</site-name></your-tenant></pre>
</div>
</li>
<li>Next retrieve the context from the connection:-<br /><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">
$context = (Get-PnPWeb).Context
</pre>
</div>
</li>
<li>Grab related authentication cookies
<br /><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">
#this is different object then other credentials used earlier
$spcredentials = $context.Credentials
$authenticationCookies = $spcredentials.GetAuthenticationCookie($targetSiteUri,
$true)
</pre>
</div>
</li>
<li>
Initiate a web session and set Cookies and accept headers to it<br /><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre>$webSession = New-Object Microsoft.PowerShell.Commands.WebRequestSession
$webSession.Cookies.SetCookies($targetSiteUri, $authenticationCookies)
$webSession.Headers.Add("Accept", "application/json;odata=verbose")
</pre>
</div>
</li>
<li>
Rest call constructs, here we are just retrieving data of a library with a normal get request.<br /><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre>$targetLibrary = "Documents"
$apiUrl = "$targetSite" + "/_api/web/lists/getByTitle('$targetLibrary')"
</pre>
</div>
</li>
<li>Invoke the request<br /><br /><div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre>$webRequest = Invoke-WebRequest -Uri $apiUrl -Method Get -WebSession $webSession
</pre>
</div>
</li>
<li>Get the results<br /><br /><div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre>$jsonLibrary = $webRequest.Content | ConvertFrom-Json
</pre>
</div>
</li>
</ol>
This is how it will appear in the shell:-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNYysSQpWvhW7b8ZG_qPWkCjK1-OEimi5Z5gvB2Xkw2kC2PWV_-YeVhyspGlRDuS_-N8-QfFc9ms9DpLtOsJ7ANpIVGUKNfv6gYvHemaVJak9O2ZtrDAmqJvs8OMvA3ykPs0Ev4Hq2fg/s1600/second.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="142" data-original-width="991" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNYysSQpWvhW7b8ZG_qPWkCjK1-OEimi5Z5gvB2Xkw2kC2PWV_-YeVhyspGlRDuS_-N8-QfFc9ms9DpLtOsJ7ANpIVGUKNfv6gYvHemaVJak9O2ZtrDAmqJvs8OMvA3ykPs0Ev4Hq2fg/s640/second.png" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
we have successfully executed our Rest Call to SharePoint online.<br />
<br />
To view the results you can consider d as an object and execute Select:-<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3X_l1HEstVRRokA0hv9aDdVQK1dnMJIzQxvye9diHKxH3KRpuNuZDqzXrigbxKxs2WmVLzVYZgX9mA8k5yLc5xLII4_V0sUB6GSKierDp0kxBSWXq6DmLTdRWVockejoevME-YlUzIc/s1600/third.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="533" data-original-width="989" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3X_l1HEstVRRokA0hv9aDdVQK1dnMJIzQxvye9diHKxH3KRpuNuZDqzXrigbxKxs2WmVLzVYZgX9mA8k5yLc5xLII4_V0sUB6GSKierDp0kxBSWXq6DmLTdRWVockejoevME-YlUzIc/s640/third.png" width="640" /></a><br />
<br />
Entire PS Script:-<br />
<br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre>$email = Read-Host -Prompt "Please enter your tenant account email"
$pass = Read-host -AsSecureString "Please enter tenant admin password"
$credentials = New-Object –TypeName "System.Management.Automation.PSCredential"
–ArgumentList $email, $pass</pre>
<pre>
</pre>
<pre>$targetSite = "https://.sharepoint.com/sites//"
$targetSiteUri = [System.Uri]$targetSite
Connect-PnPOnline $targetSiteUri -Credentials $credentials
</pre>
<pre>$context = (Get-PnPWeb).Context</pre>
<pre>#this is different object then other credentials used earlier
$spcredentials = $context.Credentials
$authenticationCookies = $spcredentials.GetAuthenticationCookie($targetSiteUri,
$true)
</pre>
<pre>
</pre>
<pre>$webSession = New-Object Microsoft.PowerShell.Commands.WebRequestSession
$webSession.Cookies.SetCookies($targetSiteUri, $authenticationCookies)
$webSession.Headers.Add("Accept", "application/json;odata=verbose")
</pre>
<pre>$targetLibrary = "Documents"</pre>
<pre>$apiUrl = "$targetSite" + "/_api/web/lists/getByTitle('$targetLibrary')"
$webRequest = Invoke-WebRequest -Uri $apiUrl -Method Get -WebSession $webSession
$jsonLibrary = $webRequest.Content | ConvertFrom-Json
$jsonLibrary.d | Select *
</pre>
</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-32107115742834605262015-07-17T15:24:00.002-07:002015-07-17T16:03:55.827-07:00Javascript Prototypes and Prototype Pattern<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
JAVASCRIPT PROTOTYPES</h2>
<div style="text-align: left;">
Reason why i am blogging about this because i seriously like to share how i got my confusion removed regarding JavaScript Prototypes, i used prototypes for last 3 years just because someone has used it and with a confusion regarding its basics i was just implementing it, this is the case with many of us and this is one of the most confusing topic until unless you don't explore it practically.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
I will show you how i actually got clear about prototype and finally i love these and consider its pattern as the most handy and important when comes to developing APPS.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Note:- I am using Chrome Developer tools console tab for demonstrations.<br />
<br />
Prototype, as per the oxford dictionary a prototype is :-<br />
<br />
<i><b>A first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.</b></i><br />
<i><b><br /></b></i>
So in simple words prototype is a model to create copies out of, and if i relate it at this point with JavaScript and my programming knowledge so it must be my functional blueprints to create objects out of, which is partially true but it has more functionality, now lets see what popular article says about prototype as single lines definitions:-<br />
<ol style="text-align: left;">
<li><i>A prototype is an object from which other objects inherit properties.</i></li>
<li><i>Every JavaScript object has a prototype. The prototype is also an object.</i></li>
<li><i>All JavaScript objects inherit their properties and methods from their prototype.</i></li>
</ol>
<div>
So keeping above three definitions in mind i thought to explore it Chrome browser console and see the practicality of definitions. But first for folks who does not know what a JavaScript object is!<br />
here is a quick information:-</div>
<div>
<br /></div>
<div>
<b>JavaScript Object (Layman Language {key:value} )</b></div>
<div>
A JavaScript object is really just an unordered collection of key:value pairs, and you create key:value pairs separated by commas and packed in Mustaches(Curly Braces):-</div>
<div>
<br /></div>
<div>
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> Student <span style="color: #333333;">=</span> {Name<span style="color: #333333;">:</span><span style="background-color: #fff0f0;">'John Doe'</span>, ID<span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1</span>} <span style="color: #888888;">// this is a container with properties.</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"></pre>
</div>
</div>
<div>
A JavaScript object contains properties as shown above and can also contain methods/functions too :- <br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> Student <span style="color: #333333;">=</span> {Name<span style="color: #333333;">:</span><span style="background-color: #fff0f0;">'John Doe'</span>, ID<span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1</span>,SayHi<span style="color: #333333;">:</span><span style="color: #008800; font-weight: bold;">function</span>(){alert(<span style="background-color: #fff0f0;">'hey By '</span> <span style="color: #333333;">+</span> <span style="color: #008800; font-weight: bold;">this</span>.Name)}}
</pre>
</div>
<br />
And to access property one has to use:-
Student.Name or Student['Name']<br />
<br />
To access methods:-<br />
Student.SayHi();<br />
<br />
<b>Analyze JavaScript Object in Chrome console window for prototype</b><br />
<b><br /></b>
Open Chrome, default will be google.com, and just press F12 open console (Open Console window, i have put it in the source tab)<br />
<ol style="text-align: left;">
<li>There are many ways to create a simple blank object:-<br /><br /><div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIB632qVD_GHLbrD3yu511u87yC8PveZCaYkbgOXmlKV2OQo-2k8lCTeRHKCkmw_VRHCg5DxK802EwyLJdJmcPQzFNKqda6U27Z0ettyp2sJesGFIcduxstRx6zJfgi1hYnFLV_6AliOE/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIB632qVD_GHLbrD3yu511u87yC8PveZCaYkbgOXmlKV2OQo-2k8lCTeRHKCkmw_VRHCg5DxK802EwyLJdJmcPQzFNKqda6U27Z0ettyp2sJesGFIcduxstRx6zJfgi1hYnFLV_6AliOE/s640/img1.png" width="640" /></a></div>
</li>
<li><div style="text-align: left;">
As you can see above i created ankur1,ankur2 and ankur object by different ways.</div>
</li>
<li>Now when i checked my object ankur i can see some method which says ankur.isPrototypeOf () which raised my eye brows and immediately i thought using this method i can actually verify and relate the second definition which says every Object has a prototype.</li>
</ol>
<div>
<b>Now if every object has prototype which is an object then there ankur.prototype should be that property/object</b>.</div>
<div>
Thinking the same when i checked in my browser console i got surprised to see that ankur.prototype is undefined:-</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ldXjJBPv04nIh8mG8g9jsCFZCXbRNNB_NZsqHBWxXavTxEPgRGgfQTl57kx9Z90I1z5i37V8pVaZXTcTxEPQfJfK5DVSn5evcGB6I4G31OXjXhx6mfMvUkkS4j2vzhr4Gqd8Ubo4sUs/s1600/img2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ldXjJBPv04nIh8mG8g9jsCFZCXbRNNB_NZsqHBWxXavTxEPgRGgfQTl57kx9Z90I1z5i37V8pVaZXTcTxEPQfJfK5DVSn5evcGB6I4G31OXjXhx6mfMvUkkS4j2vzhr4Gqd8Ubo4sUs/s640/img2.png" width="640" /></a></div>
<div>
<br /></div>
<div>
so is the definition wrong or confusing? Actually it turned out that it was confusing not wrong:-</div>
<div>
<br /></div>
<div>
<b><i>The true prototype of an object is held by the internal [[Prototype]] property. ECMA 5 introduces the standard accessor Object.getPrototypeOf(object) which to-date is implemented in Firefox, Safari, Chrome and IE9. In addition all browsers except IE support the non-standard accessor __proto__</i></b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAN5BlDjH9KPYihFD6s7pAiBrjBXdec9k5-oSzvvDc08QJoCMX72_4k2Gc7qwMLfRTLO-Qe2KqGx8oN6nLLHlqFXd0t93ZV66UH7uCvwwYCwTcAswB-ePG85ll38BiTePWzP6rKeybw64/s1600/img3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAN5BlDjH9KPYihFD6s7pAiBrjBXdec9k5-oSzvvDc08QJoCMX72_4k2Gc7qwMLfRTLO-Qe2KqGx8oN6nLLHlqFXd0t93ZV66UH7uCvwwYCwTcAswB-ePG85ll38BiTePWzP6rKeybw64/s1600/img3.jpg" /></a></div>
<div>
<br /></div>
<div>
And every object is created using with a Constructor initiation so we can access prototype object using prototype property of constructor too(this works in every browser):-</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSUXh9Tb6nvp9M4X7El_6z08sjtZqKa9AkzRimgw0LeWnLLEF36TBWyHYzdTpfdnNDmHy8wVSkRcNoRN7zbPLQAkHoIFNab8AngahXMaqwbL-fEYfpPQP0R63zzW2lBAIAPpZblEnqtA/s1600/img4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSUXh9Tb6nvp9M4X7El_6z08sjtZqKa9AkzRimgw0LeWnLLEF36TBWyHYzdTpfdnNDmHy8wVSkRcNoRN7zbPLQAkHoIFNab8AngahXMaqwbL-fEYfpPQP0R63zzW2lBAIAPpZblEnqtA/s640/img4.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now this gave me a bigger clarification on the definition of prototype:-</div>
<div class="separator" style="clear: both; text-align: left;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Every JavaScript object has a prototype. The prototype is also an object.</i></div>
<div class="separator" style="clear: both; text-align: left;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: left;">
Lets move forward and analyze the use of prototypes with its two other significant definition:-</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>A prototype is an object from which other objects inherit properties.</li>
<li>All JavaScript objects inherit their properties and methods from their prototype.</li>
</ul>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
To show exactly what these two definition mean, we need first to know something very unique to functions in javscript:-</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Every function in javscript has a property called prototype, and we use functions to create objects like i did above when used function Object() with new to create ankur1, just see this :-</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1U7Ai5hc7dc4ytPUwcL0I0YMhCxr3LeCZS2TkhRijApS9lCQmR6aKPJpHsYQc4eypTdMyRGy_B9TG9kZGaVmBt8eMf6Czyt0ZeRSTm71X3m3vRuGfGmvBMK4DMMqLZHjj-a4rcCwM_0I/s1600/img5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1U7Ai5hc7dc4ytPUwcL0I0YMhCxr3LeCZS2TkhRijApS9lCQmR6aKPJpHsYQc4eypTdMyRGy_B9TG9kZGaVmBt8eMf6Czyt0ZeRSTm71X3m3vRuGfGmvBMK4DMMqLZHjj-a4rcCwM_0I/s640/img5.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Now as shown in the console above, we created a new function Myfunction and it does have a prototype Object which is the same when we create a new object as "new Myfunction()" and try to get the Prototype of that Object.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b><i>This prototype property does have significance when functions are used as constructors to construct a Javascript Object.</i></b></div>
<div class="separator" style="clear: both; text-align: left;">
A function’s <b>prototype </b>property is <b>the object </b>that will be a<b>ssigned as the prototype to all instances created when this function is used as a constructor</b>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
There is chain in javascript Objects, every Objects inherits from Object.prototype which sits at the top of the Chain.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Moving forward, i saw many examples on net where people have defined one level of inheritance using Protoypes, you can find multiple blogs which talks about single level of inheritance like this example:-</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
</div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> humanConstructor <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> human(name) { <span style="color: #008800; font-weight: bold;">this</span>.Name <span style="color: #333333;">=</span> name };
<span style="color: #008800; font-weight: bold;">var</span> Male <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> humanConstructor(<span style="background-color: #fff0f0;">"Man"</span>);
<span style="color: #008800; font-weight: bold;">var</span> Female <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> humanConstructor(<span style="background-color: #fff0f0;">"woman"</span>);
<span style="color: #888888;">//later on i added this..</span>
humanConstructor.prototype.From <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">this</span>.Name <span style="color: #333333;">===</span> <span style="background-color: #fff0f0;">"Man"</span> <span style="color: #333333;">?</span> alert(<span style="background-color: #fff0f0;">"I am from Mars"</span>) <span style="color: #333333;">:</span> alert(<span style="background-color: #fff0f0;">"I am from Venus"</span>);
}
Male.From();<span style="color: #888888;">//Output:"I am from Mars"</span>
Female.From();<span style="color: #888888;">//Output: "I am from Venus"</span>
</pre>
</div>
<br />
The above example is very nice and simple one level inheritance example of prototypes definition mentioned above.<br />
I just added From later on and automatically it got inherited by my objects.<br />
<br />
Using this way i can customize my initial functions(constructors) and add Methods to prototype Object later on, Automatically all my Objects constructed using initial function will get new methods.<br />
But it stores the reference of prototype not the value.<br />
<br />
<br />
Till this it was fine, but later i thought:-<br />
<b>How can i create a Object from Male(from above example) example Boy, and test multilevel inheritance and Chain behavior. And if i try to do this :-</b><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> Boy <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Male(); //This will give error.
</pre>
</div>
<br />
I got error:-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xYfzpF_whT4UutU8cpM2dBsJOMr5ZdbhlWJeaQ84kTsYD3AUaiolJlWV3lMKhublp5fAA-HEE7mBX3hvwD-5Kg2H9thmG_h_zKwG_iv2yOkf7zcdYbewCeuj4Q1pu34s6T81L18jCKQ/s1600/img6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xYfzpF_whT4UutU8cpM2dBsJOMr5ZdbhlWJeaQ84kTsYD3AUaiolJlWV3lMKhublp5fAA-HEE7mBX3hvwD-5Kg2H9thmG_h_zKwG_iv2yOkf7zcdYbewCeuj4Q1pu34s6T81L18jCKQ/s640/img6.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So, after a research i learned about <b>Object.create()</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>So What does actually Object.create() do?</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><i><u>Object.create(proto [, propertiesObject ])</u></i></li>
</ul>
<br />
It extends a prototype and also can add properties using propertiesObject parameter.<br />
<br />
So this is the way to create multilevel inheritance and define the chain mechanism in prototype.<br />
<br />
See the use of Object.create():- here:-<br />
<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> humanConstructor <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> human(name) { <span style="color: #008800; font-weight: bold;">this</span>.Name <span style="color: #333333;">=</span> name };
<span style="color: #008800; font-weight: bold;">var</span> Male <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> humanConstructor(<span style="background-color: #fff0f0;">"Man"</span>);
<span style="color: #008800; font-weight: bold;">var</span> Female <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> humanConstructor(<span style="background-color: #fff0f0;">"woman"</span>);
<span style="color: #888888;">//later on i added this..</span>
humanConstructor.prototype.From <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">this</span>.Name <span style="color: #333333;">===</span> <span style="background-color: #fff0f0;">"Man"</span> <span style="color: #333333;">?</span> alert(<span style="background-color: #fff0f0;">"I am from Mars"</span>) <span style="color: #333333;">:</span> alert(<span style="background-color: #fff0f0;">"I am from Venus"</span>);
}
Male.From();
Female.From();
Male.About <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">"I am the man"</span>;
<span style="color: #888888;">//Object.getPrototypeOf(Boy).About = "My Name is George, and i am a Male";</span>
<span style="color: #008800; font-weight: bold;">var</span> Boy <span style="color: #333333;">=</span> <span style="color: #007020;">Object</span>.create(Male);
alert(Boy.About);<span style="color: #888888;">//I am the Man</span>
alert(Female.About);<span style="color: #888888;">//Unidentified</span>
alert(Boy.Name);<span style="color: #888888;">//Man</span>
alert(Female.Name);<span style="color: #888888;">//woman</span>
</pre>
</div>
<br />
<br />
<b>One practical use of prototypes:-</b><br />
This was where i recently used prototypes, i created a single page app that is meant to work on every browser, it was required to work even in IE8, there is a function in latest browsers called "toISOString()", this was not working in IE8 and some other versions of browsers, but i did used it excessively, so to overcome the issue i used prototypes and created this :-<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"> <span style="color: #008800; font-weight: bold;">if</span> (<span style="color: #333333;">!</span><span style="color: #007020;">Date</span>.prototype.toISOString) {
(<span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">function</span> pad(number) {
<span style="color: #008800; font-weight: bold;">var</span> r <span style="color: #333333;">=</span> <span style="color: #007020;">String</span>(number);
<span style="color: #888888;">//it takes data type in consideration...</span>
<span style="color: #008800; font-weight: bold;">if</span> (r.length <span style="color: #333333;">===</span> <span style="color: #0000dd; font-weight: bold;">1</span>) {
r <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'0'</span> <span style="color: #333333;">+</span> r;
}
<span style="color: #008800; font-weight: bold;">return</span> r;
}
<span style="color: #888888;">//here in this case of prototype pattern, this is the object/datatype on which prototype is applied.</span>
<span style="color: #007020;">Date</span>.prototype.toISOString <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">this</span>.getUTCFullYear()
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">'-'</span> <span style="color: #333333;">+</span> pad(<span style="color: #008800; font-weight: bold;">this</span>.getUTCMonth() <span style="color: #333333;">+</span> <span style="color: #0000dd; font-weight: bold;">1</span>)
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">'-'</span> <span style="color: #333333;">+</span> pad(<span style="color: #008800; font-weight: bold;">this</span>.getUTCDate())
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">'T'</span> <span style="color: #333333;">+</span> pad(<span style="color: #008800; font-weight: bold;">this</span>.getUTCHours())
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">':'</span> <span style="color: #333333;">+</span> pad(<span style="color: #008800; font-weight: bold;">this</span>.getUTCMinutes())
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">':'</span> <span style="color: #333333;">+</span> pad(<span style="color: #008800; font-weight: bold;">this</span>.getUTCSeconds())
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">'.'</span> <span style="color: #333333;">+</span> <span style="color: #007020;">String</span>((<span style="color: #008800; font-weight: bold;">this</span>.getUTCMilliseconds() <span style="color: #333333;">/</span> <span style="color: #0000dd; font-weight: bold;">1000</span>).toFixed(<span style="color: #0000dd; font-weight: bold;">3</span>)).slice(<span style="color: #0000dd; font-weight: bold;">2</span>, <span style="color: #0000dd; font-weight: bold;">5</span>)
<span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">'Z'</span>;
};
}());
}
</pre>
</div>
<br />
Still there is enough left to discuss about JavaScript Prototype but in this blog i wanted to discuss the actual basics of prototypes with practical impressions. Hope it helps.</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0Salisbury, MD, USA38.3606736 -75.59936920000001238.261090599999996 -75.760730700000011 38.4602566 -75.438007700000014tag:blogger.com,1999:blog-2179939415242111485.post-80196241942675645892015-07-14T15:07:00.002-07:002015-07-15T07:12:33.008-07:00JavaScript Closures (Step 1 for App development)<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
JavaScript Closures</h2>
<div>
In this blog i like to write and discuss about the Closures in JavaScript, i am using JavaScript in SharePoint sites from 2007 version, In my first working assignment i was told to premeditate a Site template made using SPServices and Jquery to new SharePoint JavaScript client object model Site back in 2009, It was a Template which enables functionality of Twitter on SharePoint. But that time i just created and written everything in functions which were added under Global namespace automatically.</div>
<div>
And this is normally we do in creating our applications or making some modifications, but with the advancement in client side programming and trend of Single Page applications and many other factors has introduced design patterns and writing javascript libraries.</div>
<div>
<br /></div>
<div>
To make such libraries one basic important concept is Closure.</div>
<div>
<br /></div>
<div>
A closure is concept made out of anonymous functions and a basic fact in javascript that an anonymous function can be returned from other functions, like it can also be assigned to a variable</div>
<div>
<br /></div>
<div>
<i>Local variables defined within the containing function are available through the returned anonymous function and this is called <b>Closure</b>.</i></div>
<div>
<i><br /></i></div>
<div>
Now lets see this in a series of examples:-</div>
<div>
<br /></div>
<div>
<br />
<ol style="text-align: left;">
<li>Basic Closure example:-<br /><!-- HTML generated using hilite.me --><div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> Maddy <span style="color: #333333;">=</span> <span style="color: #007020;">window</span>.Maddy <span style="color: #333333;">||</span> {};
Maddy.getStudentName <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> Student(id) {
<span style="color: #008800; font-weight: bold;">var</span> students <span style="color: #333333;">=</span> { <span style="background-color: #fff0f0;">'1'</span><span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'ankur'</span>, <span style="background-color: #fff0f0;">'2'</span><span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'nelson'</span>, <span style="background-color: #fff0f0;">'3'</span><span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'drew'</span> };
<span style="color: #008800; font-weight: bold;">var</span> getName <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
alert(students[id]);
};
<span style="color: #008800; font-weight: bold;">return</span> getName;
};
Maddy.getStudentName(<span style="color: #0000dd; font-weight: bold;">3</span>)();
</pre>
</div>
<br /><br />here we have a namespace Maddy and under that we have a function getStudentName which incorporates an anonymous function accessing local variable students and retrieving the value of name of student contained in students variable.<br /><br />We have just returned the function to the original function.</li>
<li>The inner function is the closure in above example, it has three access chains, it can access its own variable and variables scoped to outer function and also can access Global function, but it can not access arguments directly of outer function, see this example:-<br /><br />Look at this example which does not use Closure:-<br /><br /><!-- HTML generated using hilite.me --><div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">Maddy.addArguments <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span>()
{
<span style="color: #008800; font-weight: bold;">var</span> sum <span style="color: #333333;">=</span><span style="color: #0000dd; font-weight: bold;">0</span>;
<span style="color: #008800; font-weight: bold;">for</span>(<span style="color: #008800; font-weight: bold;">var</span> i<span style="color: #333333;">=</span><span style="color: #0000dd; font-weight: bold;">0</span>;i<span style="color: #333333;"><</span>arguments.length;i<span style="color: #333333;">++</span>)
{
sum <span style="color: #333333;">+=</span> <span style="color: #007020;">Number</span>(arguments[i]);
}
<span style="color: #008800; font-weight: bold;">return</span> sum;
}
alert(Maddy.addArguments(<span style="color: #0000dd; font-weight: bold;">1</span>,<span style="color: #0000dd; font-weight: bold;">2</span>,<span style="color: #0000dd; font-weight: bold;">3</span>,<span style="color: #0000dd; font-weight: bold;">4</span>,<span style="color: #0000dd; font-weight: bold;">5</span>));
</pre>
</div>
<br />It will work perfectly and will give you output of 15.<br /><br />Now if you use Closure and try to access arguments it wont work.<br /><br /><!-- HTML generated using hilite.me --><div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">Maddy.addArgumentsWithclosure <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">var</span> sum <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">0</span>;
<span style="color: #008800; font-weight: bold;">var</span> doTheSum <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">for</span> (<span style="color: #008800; font-weight: bold;">var</span> i <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">0</span>; i <span style="color: #333333;"><</span> arguments.length; i<span style="color: #333333;">++</span>) {
sum <span style="color: #333333;">+=</span> <span style="color: #007020;">Number</span>(arguments[i]);
}
<span style="color: #008800; font-weight: bold;">return</span> sum;
};
<span style="color: #008800; font-weight: bold;">return</span> doTheSum;
};
alert(Maddy.addArguments(<span style="color: #0000dd; font-weight: bold;">1</span>,<span style="color: #0000dd; font-weight: bold;">2</span>,<span style="color: #0000dd; font-weight: bold;">3</span>,<span style="color: #0000dd; font-weight: bold;">4</span>,<span style="color: #0000dd; font-weight: bold;">5</span>)());
</pre>
</div>
<br />it will return '0' in alert and wont work.<br /><br />So Closure can access local,outer and global variables but cant work with outer function arguments object.</li>
<li>Closures have access to the outer function’s variable even after the outer function returns, also it stores references to the outer function’s variables;<br /><br />example demonstration:-<br /><br /><!-- HTML generated using hilite.me --><div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">Maddy.getValueID <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">var</span> valueId <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">101</span>;
<span style="color: #008800; font-weight: bold;">return</span> {
get_valueId<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">return</span> valueId;
},
set_valueId<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span> (newValue) {
valueId <span style="color: #333333;">=</span> newValue;
}
};
};
<span style="color: #008800; font-weight: bold;">var</span> dummyVar <span style="color: #333333;">=</span> Maddy.getValueID();
alert(dummyVar.get_valueId()); <span style="color: #888888;">//output will be 101</span>
dummyVar.set_valueId(<span style="color: #0000dd; font-weight: bold;">1000</span>);
alert(dummyVar.get_valueId()); <span style="color: #888888;">//output will be 1000
</span>
</pre>
</div>
</li>
</ol>
As shown above set_valueId closure still keeps reference to outer function variables even outer functions is allready executed.</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-13768217556226844622015-07-01T14:14:00.002-07:002015-07-14T15:10:34.263-07:00Configure HostHeaders for SharePoint Web Application in Dev Boxes.<div dir="ltr" style="text-align: left;" trbidi="on">
Hi,<br />
<br />
How bad it looks when developing our applications in our dev boxes we use url's like http://xyz-servername:port/<br />
<br />
With 2013 to configure apps we need to have some DNS entries created. But traditionally not every developer care to have dns entries created for web applications in dev boxes.<br />
<br />
Also learning from my past lessons with different urls in Dev and Production for the simmilar sites, sometimes you have to manually change the urls in infopath forms, workflows to republish the working stuff.<br />
<br />
To make things better, here is the way i am sharing on how to configure host header and edit bindings to let the host header work for you without configuring anything on DNS.<br />
<br />
We will use Powershell to modify the host file and will also set bindings on IIS to make WebApplication availlable outside the server.<br />
<br />
Here are the steps:-<br />
<br />
<ol style="text-align: left;">
<li>Create a WebApplication (You can extend one if you want to override the existing one).<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZm8TVTcffC3C4n5PtFBJeP2UjK06BsxovreIxjotl8NpbFrBQ1qm_lXLbTQg89bgAl2ya7_-h_l4u9GD8T9m63v64TTAuZQLAR6tqIRWmq9JFrvIZgEdiA8N8Han_5rS-Nf3xZFS8RBg/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZm8TVTcffC3C4n5PtFBJeP2UjK06BsxovreIxjotl8NpbFrBQ1qm_lXLbTQg89bgAl2ya7_-h_l4u9GD8T9m63v64TTAuZQLAR6tqIRWmq9JFrvIZgEdiA8N8Han_5rS-Nf3xZFS8RBg/s640/img1.png" width="494" /></a></div>
I just have created a normal web application with host header "ankurmadaan" and port i used is 80. Note:- i allready have a sharepoint default web application on port 80.<br />
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Now we need a root site collection, I like to keep my site collections in there own database, for me it will be root collection so it will go into default database.</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohwI3zVGHD_s6pog2rpNymAqxSrEgXGDoxMkTGaSFPqcLq34k8Y9PMc-1kOk1ooFGVRrEm7wCG7cuclVigG6qNOjfedIAnmhIcrMRnX7cwKGvbkFCaI_-mvaTQzELvwO0M_jXa99OWMQ/s1600/img2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohwI3zVGHD_s6pog2rpNymAqxSrEgXGDoxMkTGaSFPqcLq34k8Y9PMc-1kOk1ooFGVRrEm7wCG7cuclVigG6qNOjfedIAnmhIcrMRnX7cwKGvbkFCaI_-mvaTQzELvwO0M_jXa99OWMQ/s640/img2.png" width="540" /></a><br />
</li>
<li><div class="separator" style="clear: both; text-align: left;">
So now if you try to browse, you will be surprise to see that your site does not works, unless you have an entry for http://ankurmadaan in DNS mapped to ip of your server.</div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Also you will be loop back and Authentication Required pop up will keep coming.</div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
So here is the solution, we will write Powershell Script to make this work:-</div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
First we will write script to get path of hosts file and create a copy of it:-</div>
<pre style="line-height: 16.25px;"><span style="color: #408080; font-style: italic;">#Make backup copy of the Hosts file with today's date </span>
<span style="color: #19177c;">$hostsfile</span> = <span style="color: #ba2121;">'C:\Windows\System32\drivers\etc\hosts'</span>
<span style="color: #19177c;">$date</span> = <span style="color: green;">Get-Date</span> -UFormat <span style="color: #ba2121;">"%y%m%d%H%M%S"</span>
<span style="color: #19177c;">$filecopy</span> = <span style="color: #19177c;">$hostsfile</span> + <span style="color: #ba2121;">'.'</span> + <span style="color: #19177c;">$date</span> + <span style="color: #ba2121;">'.copy'</span>
<span style="color: green;">Copy-Item</span> <span style="color: #19177c;">$hostsfile</span> -Destination <span style="color: #19177c;">$filecopy
</span></pre>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Above code will create a copy of host file for safe way purpose.</div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Next we will add entry for "ankurmadaan" in it:-</div>
<pre><span style="color: green; line-height: 16.25px;">Write-host</span><span style="line-height: 16.25px;"> </span><span style="color: #ba2121; line-height: 16.25px;">"Adding entry for webapplication"</span><span style="line-height: 16.25px;">
</span><span style="color: green; line-height: 16.25px;">add-content</span><span style="line-height: 16.25px;"> -path </span><span style="color: #19177c; line-height: 16.25px;">$hostsfile</span><span style="line-height: 16.25px;"> -value </span><span style="color: #ba2121; line-height: 16.25px;">"127.0.0.1 `t ankurmadaan"</span></pre>
<br />
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Last but not the least if not done allready in your server, entry for LoobBackCheck:-</div>
<pre><span style="color: #408080; font-style: italic; line-height: 16.25px;"># Disable the loopback check</span><span style="line-height: 16.25px;">
</span><span style="color: green; line-height: 16.25px;">New-ItemProperty</span><span style="line-height: 16.25px;"> HKLM</span><span style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 1px solid rgb(255, 0, 0); line-height: 16.25px;">:</span><span style="line-height: 16.25px;">\System\CurrentControlSet\Control\Lsa -Name </span><span style="color: #ba2121; line-height: 16.25px;">"DisableLoopbackCheck"</span><span style="line-height: 16.25px;"> -Value </span><span style="color: #ba2121; line-height: 16.25px;">"1"</span><span style="line-height: 16.25px;"> -PropertyType dword</span></pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</li>
<li><pre><span style="line-height: 16.25px;">So here it is the working http://ankurmadaan/ :-
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6iMYKRUvno4apOVZ8b3uhko9ogxFEbK7kNi-Ql9P7IGMUzRp6R75vTqeEaDBrdgjY6YeokMnvA0MVImh0wmMyAK9J1uiMlhmhcc6O8vtXZLvM_eEIJtCgzfhqGEY9hAz8bqZwSo-tGH4/s1600/img3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6iMYKRUvno4apOVZ8b3uhko9ogxFEbK7kNi-Ql9P7IGMUzRp6R75vTqeEaDBrdgjY6YeokMnvA0MVImh0wmMyAK9J1uiMlhmhcc6O8vtXZLvM_eEIJtCgzfhqGEY9hAz8bqZwSo-tGH4/s640/img3.png" width="640" /></a></div>
</span></pre>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
If you have multiple webapplications and you want to do this entire step in one go, in that case you can use alternate access mappings, here is the script for it:-</div>
<br />
<span style="color: #408080; font-family: monospace; font-style: italic; line-height: 16.25px; white-space: pre;"># Get a list of the AAMs and weed out the duplicates</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$hostsfile</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> = </span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">'C:\Windows\System32\drivers\etc\hosts'</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$hosts</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> = </span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">Get-SPAlternateURL</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> | </span><span style="color: green; font-family: monospace; font-weight: bold; line-height: 16.25px; white-space: pre;">ForEach</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">-Object {</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$_</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">.incomingurl.replace(</span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">"https://"</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">,</span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">""</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">).replace(</span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">"http://"</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">,</span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">""</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">)} | </span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">where-Object</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> { </span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$_</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">.tostring() </span><span style="color: #666666; font-family: monospace; line-height: 16.25px; white-space: pre;">-notlike</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> </span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">"*:*"</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> } | </span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">Select-Object</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> -Unique
</span><span style="color: #408080; font-family: monospace; font-style: italic; line-height: 16.25px; white-space: pre;"># Get the contents of the Hosts file</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$file</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> = </span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">Get-Content</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> </span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$hostsfile</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$file</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> = </span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$file</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> | </span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">Out-String</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: #408080; font-family: monospace; font-style: italic; line-height: 16.25px; white-space: pre;"># write the AAMs to the hosts file, unless they already exist.</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$hosts</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> | </span><span style="color: green; font-family: monospace; font-weight: bold; line-height: 16.25px; white-space: pre;">ForEach</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">-Object { </span><span style="color: green; font-family: monospace; font-weight: bold; line-height: 16.25px; white-space: pre;">if</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
(</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$file</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">.contains(</span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$_</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">))
{</span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">Write-Host</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> </span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">"Entry for $_ already exists. Skipping"</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">}
</span><span style="color: green; font-family: monospace; font-weight: bold; line-height: 16.25px; white-space: pre;">else</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> {</span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">Write-host</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> </span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">"Adding entry for $_"</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> </span><span style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 1px solid rgb(255, 0, 0); font-family: monospace; line-height: 16.25px; white-space: pre;">;</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;">
</span><span style="color: green; font-family: monospace; line-height: 16.25px; white-space: pre;">add-content</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> -path </span><span style="color: #19177c; font-family: monospace; line-height: 16.25px; white-space: pre;">$hostsfile</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> -value </span><span style="color: #ba2121; font-family: monospace; line-height: 16.25px; white-space: pre;">"127.0.0.1 `t $_ "</span><span style="font-family: monospace; line-height: 16.25px; white-space: pre;"> }}
</span><br />
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Now, this will work when you are inside the servers, what will you do to have it accessed by users from outside of the server in your network, like you want to demo it someone, so here is the way to do it:-</div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Go to IIS and right click on this Web Application and click on Edit Bindings:-</div>
</li>
<li><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBjaQo5VnsHUB_o_jdj7xXrTNzra93w8LCVngiHaOVvTLXa2R7CmD6iWsnFX_433_8Bt_38XUqoxUyUmZEltaRW7LSquK3VmfawV_tjKW6KtMe3yxobmEgcA4tqPKG1yNbXGzD0ptXtU/s1600/img4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBjaQo5VnsHUB_o_jdj7xXrTNzra93w8LCVngiHaOVvTLXa2R7CmD6iWsnFX_433_8Bt_38XUqoxUyUmZEltaRW7LSquK3VmfawV_tjKW6KtMe3yxobmEgcA4tqPKG1yNbXGzD0ptXtU/s640/img4.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09AdYadLH2Vy5Ppc8xii2mgrRrXd6es_k8oP8cvFnwvWdCJutF1EEcBtfNtekCmq1xwjG7iZffRRtEb5LtAd8m8FRpmUdsc8r-l0ynMweMme2W5FZY34Nz86HzZlk1SWAW0ogi0pSxiE/s1600/img5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Add a new entry and specify the port name and add server name(current server) on which you are configuring this, WFE if your dev box has multiple servers:-</div>
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09AdYadLH2Vy5Ppc8xii2mgrRrXd6es_k8oP8cvFnwvWdCJutF1EEcBtfNtekCmq1xwjG7iZffRRtEb5LtAd8m8FRpmUdsc8r-l0ynMweMme2W5FZY34Nz86HzZlk1SWAW0ogi0pSxiE/s1600/img5.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09AdYadLH2Vy5Ppc8xii2mgrRrXd6es_k8oP8cvFnwvWdCJutF1EEcBtfNtekCmq1xwjG7iZffRRtEb5LtAd8m8FRpmUdsc8r-l0ynMweMme2W5FZY34Nz86HzZlk1SWAW0ogi0pSxiE/s640/img5.png" width="640" /></a><br />
<br />
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Click ok and the last step is to create an extra alternative access mapping. Open Central Admin ->Configure alternate access mappings -> Add Internal URLs -> Change alternate access mapping location to this web application.</div>
</li>
<li><div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Add internal url http://servername:93 what we used in step 14. also select custom for zone<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicumVDtF-gDxTaKGNdzBvhkA4oT6H6n1lDlBxt2i5XsReR7_rDKkO_jyFcXFh2AmXGHVF76caKdCqlu4NEReEL1b-87wQcLvPoYTmPnqzEiD1EY7U4PotiXYczEkaAa5ALDgcGFXcECs/s1600/img6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicumVDtF-gDxTaKGNdzBvhkA4oT6H6n1lDlBxt2i5XsReR7_rDKkO_jyFcXFh2AmXGHVF76caKdCqlu4NEReEL1b-87wQcLvPoYTmPnqzEiD1EY7U4PotiXYczEkaAa5ALDgcGFXcECs/s640/img6.png" width="640" /></a></div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Now browse http://servername:93 , it will open the same site as http://ankurmadaan will open in the server.</div>
<br />
<br />
NOTE:- you have to configure hosts file in each of the server connected to your dev box but binding can be done on any WFE to expose the site outside of the server.<br />
</li>
</ol>
<div style="background: #f8f8f8; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="margin: 0px;"></pre>
</div>
<div style="background: #f8f8f8; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="margin: 0px;"><span style="line-height: 125%;">
Thanks.</span></pre>
</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-90266822606388218792013-07-02T05:06:00.001-07:002013-07-02T05:08:58.813-07:00Develop Microsoft SharePoint 2013 APPS - Part 1<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">Yes this is the time I think I should talk about my learning and work with SharePoint 2013 Apps, The main reason of APPS in SharePoint 2013 is to give Developers the power of creating customizations without full trust access to the target farm, and the sweet reason is you can create apps and publish them in marketplace or corporate app catalog.</span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">This blog series about sharepoint apps will be of different parts and i will try to discuss everything i know here with demonstration. So lets begin:-</span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><strong>APPS the Word</strong>(APPS for SharePoint):- You all are familliar with the word app, it was Nokia, Apple then Android who made this word popular in today Techno World, and even a first grade student can explain to you what does an "app" means, Microsoft evolve this in sharepoint from Farm Solutions --> then came SandBox Solutions --> then SharePoint Apps, the reason of this evaluation was mainly to avoid hick ups that admin people feels for Solution Deployment and to avoid effecting SharePoint Farm with custom Solutions or Customizations.</span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
Many of Clients i worked with preffered SharePoint Designer Based customization even though i gave them explanation on how this disturbes the caching and Loading of SharePoint Pages as these have to go through different Parsing mechanism, the only answer they have is Designer based things are easy to modify, change and does not effect our SharePoint Environment.</div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
Yes partially they are right but actually it costs alot to performance and Migration , Upgradation Scenerios.</div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
So i think this evolution of SharePoint Apps are handy but this does not means that Sandbox Solutions are completely Obsolute, Microsoft Says that one should now preffer APPS as much as one can but at situations you have to go with Sandbox Solutions, as we can not modify things on SharePoint Main Sites with Apps</div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<strong>Silly Classification :-</strong></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">One can classify apps on the basis of Configuration<span style="mso-spacerun: yes;"> </span>and hosting model.</span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><strong><u>Conifguration</u></strong>:- <strong>1) Full Page 2)App Parts 3)UI Command Extension.</strong></span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Personally if you ask then my favourite is <strong>APP Parts </strong>but in this part of series we will work with Full Page Apps.</span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Ahhh i am sorry i should explain you guys first what are these:-</span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><strong>Full-page </strong>Based on one or more web pages, these apps include a dedicated UI. You should provide a back button for returning to the parent site, where the app is launched from—but your app will have a UI of its own.Simple as it sounds.. create web pages put javascript on the background yeah and here we go.<br /><strong></strong></span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><strong>App Parts </strong></span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Also called Client Parts, these render some app content in an <strong>IFrame</strong> inside pages of the parent site. Usually, App Parts are used to provide users with a small piece of information or functions that can directly interact with the SharePoint user interface. <br /><strong></strong></span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><strong>UI command extension</strong> </span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;"><span style="font-family: 'Calibri','sans-serif'; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Used to extend the UI of the parent site, these apps may include a ribbon button or an ECB (Edit Control Block) command to lead the user to a page or function provided by an external app.</span></span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<br /></div>
<strong><u>Hosting Model Classification</u></strong><br />
<strong>SharePoint-hosted</strong><br />
<br />
This model relies on a subweb of the parent site (also called an app web) and enables you to use all the common SharePoint artifacts for implementing the UI and the behavior of the SharePoint app. You can take advantage of all the features of SharePoint, such as lists, Web Parts, pages, workflows, and so on.<br />
<br />
<strong>Autohosted</strong><br />
Apps following this model are hosted on Microsoft Windows Azure, which can access a Microsoft SQL Azure database for managing data, too. The apps are automatically deployed on Windows Azure on your behalf and can communicate with SharePoint through events and the Client Object Model. Secure communication with SharePoint is enforced using OAuth.<br />
<strong><br /></strong><strong>Provider-hosted </strong><br />
From a functional perspective, apps that follow this model are almost the same as autohosted apps. The only difference is that a provider-hosted app has to be deployed on your own hosting environment and does not necessarily use the Windows Azure environment.<br />
<br />
<strong>Lets Start:-</strong><br />
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; mso-bidi-font-family: Segoe;">Ok so lets stop any more discussion and jump on the first app development, I have my development environment ready services required for APPS and Forward lookup Zones for Apps and Service Applications are configured Properly. There are several blogs availlable on how to do this <a href="http://msdn.microsoft.com/en-us/library/fp179923.aspx">http://msdn.microsoft.com/en-us/library/fp179923.aspx</a></span><br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; mso-bidi-font-family: Segoe;">Ok SO lets begin to develop our very basic and Simple App.</span><br />
<br /></div>
• This going to be a on-premise/sharepoint hosted app.<br />
• Open Visual Studio 2012, create a new project -> Select SharePoint Apps ->;Apps for SharePoint 2013, .Net Framework 4.5 and give a proper name to project (I have given it as KickOff).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvefxVuT8C2hz-0TiwIAn316_ZKGPjqLNsUh1XN_iebDt7mEXvn1pHDP1GoV_Kj-9Vu7rB8imXd6SWHhd0wVoycx0wajbYE1IM7YGHihEWy7OG5KzQWo7SgBKr9IwESSNG1Y9-zeW8Cm8/s944/first.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="363" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvefxVuT8C2hz-0TiwIAn316_ZKGPjqLNsUh1XN_iebDt7mEXvn1pHDP1GoV_Kj-9Vu7rB8imXd6SWHhd0wVoycx0wajbYE1IM7YGHihEWy7OG5KzQWo7SgBKr9IwESSNG1Y9-zeW8Cm8/s640/first.jpg" width="640" /></a></div>
<div align="left" class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; mso-bidi-font-family: Segoe;"></span>• Enter Url of target SharePoint Site & then Change hosting to “SharePoint Hosted” from Autohosted .<br />
• Click Finish and VS 2012 will create a Project for us.<br />
• And this will be what you will get :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjda5qILCJwwJXbHLydp4K7P0vw4qzDBVW9zZdMKlQm6JIdk23CFHnLchiqVybypAkmnsWubNOo7nG_d2u0Hy4mazsKHCGebob7G2AuCrOonS3o-svRJBMrZdT8LafEdjFyTOhe6PuUJfo/s1304/second.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="226" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjda5qILCJwwJXbHLydp4K7P0vw4qzDBVW9zZdMKlQm6JIdk23CFHnLchiqVybypAkmnsWubNOo7nG_d2u0Hy4mazsKHCGebob7G2AuCrOonS3o-svRJBMrZdT8LafEdjFyTOhe6PuUJfo/s640/second.jpg" width="640" /></a></div>
Now let me brief about what we have :-<br />
1. Features Folder:-<br />
Contains all the features for provisioning contents and capabilities to the target web site, Upon creation this contains only one feature scoped to web-level.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaeMJNoo4WO8lsqnIDkeHE8VOMSKu0yC5J-4nJuvzOkbAMHBVn4elTciStOOYEllvivyRViZcHvh-3eIJz5QBBZqtLTVB6_R71UeX217UZIjGMFpQNVQUUJKaZzUpG_TNZSsPXKDF3Vk/s1048/third.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaeMJNoo4WO8lsqnIDkeHE8VOMSKu0yC5J-4nJuvzOkbAMHBVn4elTciStOOYEllvivyRViZcHvh-3eIJz5QBBZqtLTVB6_R71UeX217UZIjGMFpQNVQUUJKaZzUpG_TNZSsPXKDF3Vk/s640/third.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
One Major thing to note is you cant modify the scope of this feature and it packages all the contents, the main perpose of this feature is to deploy all the APP contents to the “TARGET APP WEBSITE”.</div>
<br />
<br />
I would like to add a note here that you should know:-<br />
<br />
<em><u><strong>NOTE</strong>:-One has to remember that an app website is provisioned and unprovisioned together with its app. Thus, we create an app that stores content inside its app web, if end user remove or uninstall the app, however the app will be gone also its related data will go away.</u></em><br />
<br />
2. Package Folder:- Contains the package for deploying the app.<br />
3. Content Folder:- Contains CSS style and a Module to deploy it to the target app.<br />
4. Images Folder:- A Module and Images with default APP Icon image of 96*96 pixel, you can modify this with one of yours.<br />
5. Pages Folder:- Module Feature and the pages of target app contains in this folder, default.aspx is the page contained by default.<br />
6. Scripts Folder:- Represents a Module Feature that is for Javascript Files, APP.js file is the file where we put oue custom scripts(it is our entry point.<br />
7. AppManifest.xml file:- Contains configuration and deployment information related to app.<br />
8. Packages.config file:- Information about the packages referenced by Visual studio project.<br />
<br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; mso-bidi-font-family: Segoe;">Allright now lets just see what happens when out of box feature contained web is deployed to the Site, press F5 and see what happens:-<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBz0Pc4SCK1b6Fbiv_CqJPaYOUKXfC6-9KwUX9zSKwpZM8Lpxp0K2WiFi-otEHDDH1RhK9A0y-KsKBZLOLeTFu39qx7U8Td58Hvcz8-pkrqV4ck33o4mkorEn7px7HnI6kSujMTW1sJ0/s1126/fourth.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="138" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBz0Pc4SCK1b6Fbiv_CqJPaYOUKXfC6-9KwUX9zSKwpZM8Lpxp0K2WiFi-otEHDDH1RhK9A0y-KsKBZLOLeTFu39qx7U8Td58Hvcz8-pkrqV4ck33o4mkorEn7px7HnI6kSujMTW1sJ0/s640/fourth.jpg" width="640" /></a></div>
First Uploading of app starts then installation begins:-<br />
<br />
Depending on the kind of environment and configuration installation progresses and takes time<br />
<br />
And thus the app will get open:-<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyeHA1NdNsCPUuGFP8LySEGFSghzUA8NFZM7aH98cjaFMdNuOiAf65kRnqhmd9l7a6MqL7CHdxid3RtglGUhry7vY6F6JUZjEwSJKWlY5BHFntjWBX_MIwmtHK5z6AWa-bdk8FD2Y7TE/s841/fifth.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="410" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyeHA1NdNsCPUuGFP8LySEGFSghzUA8NFZM7aH98cjaFMdNuOiAf65kRnqhmd9l7a6MqL7CHdxid3RtglGUhry7vY6F6JUZjEwSJKWlY5BHFntjWBX_MIwmtHK5z6AWa-bdk8FD2Y7TE/s640/fifth.jpg" width="640" /></a></div>
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; mso-bidi-font-family: Segoe;">You can see there that it does have its default.aspx page loaded and link to go to the site from which it was reffered, in my case "test site" </span></div>
If you go back to the Man Site "Test Site in my case" then This app is located under site contents:-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQv1vkOnGgI3Mqqqg8aaimt6nkirU9v1OIw31YB9RfnO9cYnXPiuJKWekYujkA_ONHlC_gpARj0afSaxMLiYdU1zipXrRbw8otsrE-wdMUGcGP8JSeCzUCo6fs4tW7oE6sqh-X0hVmTwI/s1332/sixth.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="258" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQv1vkOnGgI3Mqqqg8aaimt6nkirU9v1OIw31YB9RfnO9cYnXPiuJKWekYujkA_ONHlC_gpARj0afSaxMLiYdU1zipXrRbw8otsrE-wdMUGcGP8JSeCzUCo6fs4tW7oE6sqh-X0hVmTwI/s640/sixth.jpg" width="640" /></a></div>
<strong>Now Lets Start the Fun :- Make Changes</strong><br />
Open Default.aspx page:-<br />
You will see this :-<br />
<textarea cols="71" rows="7" style="height: 184px; width: 657px;"> <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script></textarea><br />
Apart from SP.js files it also contains an App.js file reference and this is our target start point of scripting and we will use this to provide our logic.<br />
<br />
<br />
Now let me just show you a very simple thing, we will create a div and load all site users into it:- so declare a div element in your page with id:- “AppDetails”<br />
<br /></div>
<pre><textarea cols="68" style="height: 71px; width: 621px;"><div id="AppDetails">
</div>
</textarea></pre>
<br />
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: Segoe; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin;">And Now lets open" App.js" file and modify the code in it</span><br />
<br />
<span style="color: black; font-family: 'Segoe','sans-serif'; font-size: 9pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: Segoe; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin;">add two global variables :-</span><br />
<br />
<br />
var htmltoappend = ""; //Will store the html string to append in div<br />
var siteUsers; // will store the siteUser object retrieved from CSOM of SharePoint 2013.<br />
<br />
This is how the modified APP.js will be:-<br />
<br />
<br /></div>
<pre><textarea cols="70" rows="49" style="height: 1190px; width: 642px;">'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var htmltoappend = ""; // Variable to store html string
var siteUsers; //Variable to store siteUsers Object..
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
getUserName();
populateWebDetails();//Populates Users and generates the html for div
});
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message());
}
function populateWebDetails()
{
var webload = context.get_web();
context.load(webload);
siteUsers= webload.get_siteUsers();
context.load(siteUsers);
context.executeQueryAsync(onwebcallsuccedded , onwebcallfail);
}
function onwebcallsuccedded()
{
htmltoappend = "<table>
<tr><td>Property Name</td><td>Property Value</td></tr>
";
var userEnum = siteUsers.getEnumerator();
while (userEnum.moveNext()) {
var current = userEnum.get_current();
htmltoappend += "
<tr><td>User Name</td><td>" +current.get_title() + "</td>";
}
htmltoappend +="</Table>"
$get("AppDetails").innerHTML= htmltoappend;
}
function onwebcallfail(sender, args)
{
}
</textarea></pre>
<br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<span style="color: black; font-family: Consolas; font-size: 9.5pt;">We are just initializing siteusers and showing the title of each users and creating a table and loading <span style="mso-spacerun: yes;"> </span>this table into the div, just run the app now and see the changes:-</span></div>
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxkBJSeBB8QlPSteuZKijmGB5XhwWPnSbvUfPK5h3Wd7n3j1zkK_oGw0BVPZ5ucr52AiTc5vdrsnexl3S6WaEEvKluQvGvoeqpfGwQPJtuRDsgXzif84BXbO20rtTj0so-BGhBDrIai8/s545/seventh.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="502" oya="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxkBJSeBB8QlPSteuZKijmGB5XhwWPnSbvUfPK5h3Wd7n3j1zkK_oGw0BVPZ5ucr52AiTc5vdrsnexl3S6WaEEvKluQvGvoeqpfGwQPJtuRDsgXzif84BXbO20rtTj0so-BGhBDrIai8/s640/seventh.jpg" width="640" /></a></div>
<br />
Thanks and coming up next is App Parts and many more exiting Notes about SharePoint Apps....<br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<br /></div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-35436068505900445332012-10-19T07:25:00.003-07:002012-10-19T07:30:43.962-07:00Custom SharePoint 2010 Ribbon Action for a Specific List Using Visual Studio 2010<div dir="ltr" style="text-align: left;" trbidi="on">
Greeting to all my blog readers, we all know how good the sharepoint 2010 Ribbon is, and most wonderfull part is that it is Customizable by using both Visual Studio 2010 and SharePoint Designer 2010.<br />
<br />
Recently on Microsoft Technet Forums a person asked this question: "I need a Ribbon Button for a Specific Lists using Visual Studio 2010" as he was thinking to attach Javascript code or CSOM code on that button(not possible with designer way), there was no way he was able to achieve the same using <customaction> in Elements.xml file.</customaction><br />
<br />
So i tried my luck with Server Side Object Model to achieve this and later even got the code Client Script object model and Server Side Object Model code to do this. In this blog i am only sharing the way i discovered this in server side object model.<br />
I am showing code written as a Console Application to create a Ribbon Button on Specific List using Visual Studio.<br />
<br />
It uses UserCustomActions Collection Property of SPList Object and to add a new UserCustomAction.<br />
The Major Property is: <span style="font-family: Consolas; font-size: x-small;"><span style="font-family: Consolas; font-size: x-small;"></span></span><br />
<span style="font-family: Consolas; font-size: x-small;"><span style="font-family: Consolas; font-size: x-small;"><span style="font-size: small;"><span style="color: #6fa8dc;"><strong>UserCustomAction.CommandUIExtension, <span style="color: black;">this recieves token from the XML, the same way we enter in the Elements.xml during the traditional way. So here is how my code looks like:-</span></strong></span>
</span>
</span></span><br />
<br />
<div>
<pre> </pre>
<pre> </pre>
<pre><textarea cols="66" rows="29" style="height: 771px; width: 616px;"> public static void Main(string[] args)
{
//
SPSite osite = new SPSite(@"http://ServerUrl:PortNo./");
SPWeb oweb = osite.RootWeb;
SPList olist = oweb.Lists["*LISTNAME*"]; //Desired List for Ribbon Button
//New SPUserCustomAction
SPUserCustomAction action = olist.UserCustomActions.Add();
//Location for new Custom Action..
action.Location="CommandUI.Ribbon";
//This is Optional as we are setting the same late in commandUIExtension..
action.ImageUrl="/_layouts/images/mewa_frozenb.gif";
//This Property takes CAML based Input that we use in Elements.xml...
action.CommandUIExtension = @"<commanduiextension>" +
"<commanduidefinitions><commanduidefinition Location='Ribbon.ListItem.Actions.Controls._children'>" +
" <button Id='Ribbon.List.Items.Action.ankurButton' " +
"Sequence='03' " +
"Alt='ankurcustom' " +
"Command='testToShow' " +
"Image16by16='/_layouts/images/mewa_frozenb.gif' " +
"Image32by32='/_layouts/images/mewa_frozenb.gif' " +
"LabelText='ankurcustom' " +
"ToolTipTitle='ankurcustom' " +
"ToolTipDescription='Test To Show' " +
"TemplateAlias='o1'></Button>" +
"</CommandUIDefinition></CommandUIDefinitions>"+
"<commanduihandlers>" +
"<commanduihandler Command='testToShow' " +
"CommandAction='javascript: alert(\"ankur says hello\")'>" +
"</CommandUIHandler>" +
"</CommandUIHandlers>" +
"</CommandUIExtension>";
action.Update();
}
}</textarea></pre>
<pre> </pre>
<pre> </pre>
<pre> </pre>
<pre>Thats it and you will get a Explicit Ribbon button for a Particular List Only...</pre>
</div>
</div>
Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-8371245642149231682012-07-19T03:44:00.001-07:002012-07-19T03:45:16.427-07:00SharePoint 2013 is Running at my Home System Now<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: center;">
<span style="font-family: Calibri;"><strong><span style="font-size: large;">SP 2013 is at my home now:<o:p></o:p></span></strong></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">It took me three days to make it happen, but yes I have got
SP2013 Foundation Preview running on my system.<o:p></o:p></span></div>
<span style="font-family: Calibri;">It is not that tricky that I thought it going to be,
actually if we struggled during 2010 and know very well the right ways of
installing SharePoint on<span style="mso-spacerun: yes;"> </span>a 64 bit
environment then it won’t be a big deal this time as we are habitual of certain issues.<o:p></o:p></span><br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">So here Is how my first 2013 site<span style="mso-spacerun: yes;"> </span>SharePoint foundation site looks like:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkQxu1fBQNeWA23QEugVOL9tXA_E0Wpc354-H8YNasXXhG_mAmX80P2D1P9FYYaAaaGrb6eCu6y1aCIPoKZ37-amUp2DYPFmiuXIhI4-4r0s4ZwkKsaMxoqS07_BQwRy_0-v3gQchdPk/s1600/Sp2013.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkQxu1fBQNeWA23QEugVOL9tXA_E0Wpc354-H8YNasXXhG_mAmX80P2D1P9FYYaAaaGrb6eCu6y1aCIPoKZ37-amUp2DYPFmiuXIhI4-4r0s4ZwkKsaMxoqS07_BQwRy_0-v3gQchdPk/s640/Sp2013.jpg" width="640" /></a></div>
<br />
<br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">My Current System Configuration:<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">1)Windows Server 2008 R2<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">2)Sql Server 2008 R2.<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">3)VS 2012 RC<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">4)SharePoint Foundation 2013.<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">How I made it happen:<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">1)I downloaded SP Foundation from here:<o:p></o:p></span></div>
<a href="http://www.microsoft.com/en-us/download/details.aspx?id=30345"><span style="color: blue; font-family: Calibri;">http://www.microsoft.com/en-us/download/details.aspx?id=30345</span></a><br />
<br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">2)Next I Downloaded SP 1 for Windows Server 2008 R2, which
is require for SP2013 install from here:</span></div>
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<a href="http://download.microsoft.com/download/0/A/F/0AFB5316-3062-494A-AB78-7FB0D4461357/windows6.1-KB976932-X64.exe"><span style="font-family: "Segoe UI","sans-serif"; font-size: 9pt; line-height: 115%;"><span style="color: blue;">http://download.microsoft.com/download/0/A/F/0AFB5316-3062-494A-AB78-7FB0D4461357/windows6.1-KB976932-X64.exe</span></span></a><strong><span style="color: #2a2a2a; font-family: "Segoe UI","sans-serif"; font-size: 9pt; line-height: 115%;"><o:p></o:p></span></strong></div>
<span style="font-family: Calibri;"></span><br />
<span style="font-family: Calibri;">Next I ran the Pre-requisite for SP2013 , if you find any
issues with pre-requisite then suggest to follow this blog, which describes
awesome powershell scripts to get them all, it helped me too:</span><br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<a href="http://www.dontpapanic.com/blog/?p=241"><span style="color: blue; font-family: Calibri;">http://www.dontpapanic.com/blog/?p=241</span></a><o:p></o:p></div>
</div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-88699778107690686082012-05-04T04:47:00.001-07:002012-05-04T04:48:35.101-07:00SharePoint, How to Implement Logs in my SharePoint Code Easily..<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Calibri;">Hi everyone, today I am going to discuss a very important
topic of Implementing Logs in SharePoint Code. </span><br />
<span style="font-family: Calibri;"></span><br />
<span style="font-family: Calibri;">As per the scenario the SharePoint Logs which code generates
get stores in the 14 hive folder at location:<o:p></o:p></span><br />
<span style="font-family: Calibri;">C:\Program Files\Common Files\Microsoft Shared\Web Server
Extensions\14\LOGS<o:p></o:p></span><br />
<span style="font-family: Calibri;"></span><br />
<span style="font-family: Calibri;">If you try to see this then you can find logs which SharePoint
code creates, and also usage reports, next you can use tools like <a href="http://sharepointlogviewer.codeplex.com/" target="_blank">SharePoint Log Viewer </a> to have a Look into these.<o:p></o:p></span><br />
<span style="font-family: Calibri;"></span><br />
<span style="font-family: Calibri;">So how can we write these logs in our Customizations?<o:p></o:p></span><br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;">
<span style="font-family: Calibri;">Many People have their own thoughts on Logging; I have
myself used several approaches like:<o:p></o:p></span></div>
<span style="font-family: Calibri;">1) Use a text file, deploy it to the Layouts folder and then
write the logs into it, benefit with this is we can view these logs from any
SharePoint Site url.<o:p></o:p></span><br />
<span style="font-family: Calibri;"></span><br />
<span style="font-family: Calibri;">2)Use a Custom List on the Specific SharePoint Site <span style="mso-spacerun: yes;"> </span>and implement Logging into it.<o:p></o:p></span><br />
<br />
<span style="font-family: Calibri;">3</span><span style="font-family: Calibri;">)Use </span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">SPDiagnosticsServiceBase
</span><span style="font-family: Calibri;">class<span style="mso-spacerun: yes;"> </span>of
Microsoft.SharePoint.Administration to create logs in the SharePoint 14 hive
folder, the out of box and generic Way.</span><br />
<br />
<br />
<span style="font-family: Calibri;"></span><br />
<span style="font-family: Calibri;"><div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
Here we are going to
discuss the general and best approach, approach number 3 as mentioned above.<o:p></o:p></div>
<span style="font-family: Times New Roman;">
</span>
<br />
Tasks we will do:<o:p></o:p><br />
<span style="font-family: Times New Roman;">
</span>1)Create a Utility
Logger class which inherits from <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">SPDiagnosticsServiceBase.<o:p></o:p></span><br />
<span style="font-family: Times New Roman;">
</span><br />
<br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
2)Create a Console
Application which will generate the Logs using our Logger.cs<span style="mso-spacerun: yes;"> </span>Class.<o:p></o:p></div>
<span style="font-family: Times New Roman;">
</span><br />
<span style="font-family: Times New Roman;">
</span><br />
<span style="font-family: Times New Roman;"><div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<span style="font-family: Calibri;">We will inherit the
SPDiagnosticsServiceBase class: <o:p></o:p></span></div>
<span style="font-family: Calibri;">I am trying to re-use
the code written here: <strong> </strong><a href="http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.administration.spdiagnosticsservicebase.aspx" target="_blank"><strong>SPDiagnosticsServiceBase</strong></a><o:p></o:p></span><br />
</span><br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<strong>Step:1)Code Logger.cs
Class.</strong></div>
<pre><textarea cols="71" rows="56" style="height: 1199px; width: 657px;">public class Logger : SPDiagnosticsServiceBase
{
//Constants
public static string areaName = "Custom Developments By Ankur";
public enum CategoryID
{
None = 0,
Processing = 100,
Faulting = 200
}
//Constructors
public Logger() : base("Custom Ankur Developments Logging Service", SPFarm.Local) { }
public Logger(string Name, SPFarm Farm) : base(Name, Farm) { }
//Properties
private static Logger local;
public static Logger Local
{
get
{
{
if (local == null)
local = new Logger();
}
return local;
}
}
//Methods
protected override IEnumerable<SPDiagnosticsArea> ProvideAreas()
{
List<SPDiagnosticsCategory> categories = new List<SPDiagnosticsCategory>();
uint catId0 = (uint)(int)Enum.Parse(typeof(CategoryID), CategoryID.None.ToString());
categories.Add(new SPDiagnosticsCategory(CategoryID.None.ToString(), TraceSeverity.Verbose, EventSeverity.None, 0, catId0));
uint catId100 = (uint)(int)Enum.Parse(typeof(CategoryID), CategoryID.Processing.ToString());
categories.Add(new SPDiagnosticsCategory(CategoryID.Processing.ToString(), TraceSeverity.Verbose, EventSeverity.Information, 0, catId100));
uint catId200 = (uint)(int)Enum.Parse(typeof(CategoryID), CategoryID.Faulting.ToString());
categories.Add(new SPDiagnosticsCategory(CategoryID.Faulting.ToString(), TraceSeverity.Unexpected, EventSeverity.Error, 0, catId200));
yield return new SPDiagnosticsArea(areaName, categories);
}
public static void LogError(string errorMessage)
{
SPDiagnosticsCategory category = Logger.Local.Areas[areaName].Categories[CategoryID.Faulting.ToString()];
Logger.Local.WriteTrace(0, category, TraceSeverity.Unexpected, errorMessage);
}
public static void LogInfo(string infoMessage)
{
SPDiagnosticsCategory category = Logger.Local.Areas[areaName].Categories[CategoryID.Processing.ToString()];
Logger.Local.WriteTrace(0, category, TraceSeverity.Verbose, infoMessage);
}
}
}
</textarea></pre>
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<br /></div>
</span><span style="font-family: Times New Roman;">
<o:p></o:p></span><br />
<strong>2) Code for the Console Application/In our Custom Code of SharePoint Solutions:</strong><br />
<textarea cols="70" rows="12" style="height: 241px; width: 648px;"> try
{
Logger.LogInfo("My Custom Logging Started----Ankur");
this.UpdateProgress(100);
}
catch (Exception x)
{
Logger.LogError(String.Format("Custom Ankur Log Error: {0}", x.Message));
}
finally
{
Logger.LogInfo("Custom Ankur Logging Completed");
}
</textarea><br />
<br />
<div class="MsoNormal" style="line-height: normal; margin: 0in 0in 0pt; mso-layout-grid-align: none;">
<span style="font-family: Calibri;">Finally we can use
SharePoint Log Viewer to View the Logs<o:p></o:p></span></div>
<o:p><a href="http://sharepointlogviewer.codeplex.com/" target="_blank">SharePoint Log Viewer.</a></o:p><br />
<br />
<br />
<br />
<pre> </pre>
<div>
</div>
</div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-65515255637571982092012-03-12T05:15:00.162-07:002012-03-12T06:50:23.533-07:00Creating Custom Workflow Activity using Visual Studio 2010 for SharePoint 2010 (SharePoint A to Z Series)<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;"><strong>Hi</strong>, since long i was thinking to blog about this topic and finally got a chance to do so. Normally we prefer to create Designer Based Workflows, as they are easy to create, manage and quite flexible.</span></span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;"></span></span><br />
<span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">But still at situations Designer Workflows not allow us to do certain Tasks, for an instance , performing cross site Tasks, like Creating a Document Library in a different site or Creating a new site on certain conditions.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Instead of Creating Complete Workflow we can still use Custom Activities Development in Visual Studio 2010 which is much easier to built and easy to manage for client's Power Users.</span></div><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"></span><br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">So what<span style="mso-spacerun: yes;"> </span>i mean is simple “Code an Activity” instead of Coding a Complete Workflow.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Now lets come to the point and follow some steps to create a simple Workflow Activity. Remember this will be Number 1, and quite easy one, later i will post some bigger and much cruciall Activities.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><strong>What I’m about to show you is what I did and tested in the following environment:</strong></span><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"></span> </div>• Microsoft Windows server 2008 R2 Enterprise Edition<br />
• SharePoint Server 2010 Enterprise Edition<br />
• MS SQL 2008 Enterprise Edition<br />
• Visual Studio 2010 Ultimate<br />
• Code was done in C# only<br />
<strong>(Note: we don’t need the exact environment, but as such a similar one to get started)</strong><br />
<br />
<strong><span style="color: blue; font-size: large;">Step: 1) Create a Project to support Activity Deployment to Farm</span></strong><br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Create an Empty Project in VS2010 and Name it “<strong>CustomActivityDemo</strong>”, make Sure it should be a Farm Scoped Project.(No SandBoxed), </span><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">And select the site on which you like to test it <span style="color: lime;">/*Empty SharePoint Project*/</span></span></span></div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXfM4Lqwx2xlv26bLQzd-rOMv_M-gN03D3ctKrpAfHO75Im19RxkC7m-XzoWY-CNmpw3PlgB6AaVVCxq3WF-1yA6I_oenOKhvQ-PVruOZsnJuJK9RB4klCIeD6xzvxXFLyrszNh1iolI/s1600/1st.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXfM4Lqwx2xlv26bLQzd-rOMv_M-gN03D3ctKrpAfHO75Im19RxkC7m-XzoWY-CNmpw3PlgB6AaVVCxq3WF-1yA6I_oenOKhvQ-PVruOZsnJuJK9RB4klCIeD6xzvxXFLyrszNh1iolI/s1600/1st.jpg" yda="true" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Next Click Finish.. It will be just like a scenerio where this project will act as a Rocket Launcher for our Rocket(Activity).. :)</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">We will setup code and properties later in this, now lets move ahead and create our Activity Project in the Same Solution.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"></span><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="color: blue; font-size: large;">Step :2) Create WorkFlow Activity Project</span></span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">At the Solution level Right Click and “Add a Project” in VS2010.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Next Select the Visual C# >Workflow ><strong>Workflow Activity Library</strong> and set the project name as ‘<strong>CreateSiteActivity</strong>’.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Now whole solution will appear like this:</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcSXkX2Xxx7nbnQKLirur87DMJ7pldDbFwL9s4OEW87P0V9ZXvv45uvnV1dgbOPn4cDcOPpQQ4novAc7FyFi0nSkE6_VFwQGnWNRIE9-s15Ur0l-ra1mDiDYLMEtQEjLS86IX4djrhqqw/s1600/2nd.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; height: 208px; margin-bottom: 1em; margin-right: 1em; width: 691px;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcSXkX2Xxx7nbnQKLirur87DMJ7pldDbFwL9s4OEW87P0V9ZXvv45uvnV1dgbOPn4cDcOPpQQ4novAc7FyFi0nSkE6_VFwQGnWNRIE9-s15Ur0l-ra1mDiDYLMEtQEjLS86IX4djrhqqw/s640/2nd.jpg" width="640" yda="true" /></a></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Note that after adding Workflow Activity Library Project a Design view of Activity appears which shows Activity1.cs</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">lets now follow these subpoints:</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">• Right click the Activity1.cs and rename it to “CreateSiteActivity.cs”,</span></div><br />
<br />
• Again Right Click “CreateSiteActivity” and click “View Code”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOYDL1saJTjIMG5a7T2ZlPfnsPznjuAIn1bew4F1svBiV5VIPKn6xGRSDiXVT7dcS3zA_YhbcBx5yoOxKFmVV6K3pmaoee6OpY4NnqWRAyKMc3XjyeyYXU37N_NG2EPCxtRkRzlxGjtA/s1600/3rd.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOYDL1saJTjIMG5a7T2ZlPfnsPznjuAIn1bew4F1svBiV5VIPKn6xGRSDiXVT7dcS3zA_YhbcBx5yoOxKFmVV6K3pmaoee6OpY4NnqWRAyKMc3XjyeyYXU37N_NG2EPCxtRkRzlxGjtA/s1600/3rd.jpg" yda="true" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">• Now add a reference to</span><br />
<span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"> Microsoft.SharePoint.dll and Microsoft.SharePoint.WorkflowActions.dll<span style="mso-spacerun: yes;"> </span> located in ISAPI Library:</span><br />
<br />
• Import the following NameSpaces in the code file:<br />
<pre><textarea cols="44" style="height: 59px; width: 409px;">using Microsoft.SharePoint;
using Microsoft.SharePoint.Workflow;
using Microsoft.SharePoint.WorkflowActions;
</textarea>
</pre><br />
This will how the code will appear now:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmeZSu6qoQslvT89LnItKY-_Heg_isgM5EW_YVcVUwHFgp2YDn3P1XbS91tUBF834SY7ElbkYUqyIbaVZwv5Km8be5yIket_1p2brQEUpYOoUof5KcSwnL0_0z-MPZeuKWAGx9sX78Yg/s1600/4th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmeZSu6qoQslvT89LnItKY-_Heg_isgM5EW_YVcVUwHFgp2YDn3P1XbS91tUBF834SY7ElbkYUqyIbaVZwv5Km8be5yIket_1p2brQEUpYOoUof5KcSwnL0_0z-MPZeuKWAGx9sX78Yg/s640/4th.jpg" width="640" yda="true" /></a></div><strong><em><span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">Before going further lets discuss some of the important terminologies:</span></em></strong><br />
<strong><em><span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"></span><br />
</em></strong><span style="color: blue; font-size: large;">Step :3) Some Introduction to WorkFlow Terminologies:</span><br />
<span style="color: black;">This will be boring a bit but very quickly please do read these lines as it will clear our process in a bigger way:</span><br />
<br />
<strong><span style="color: blue; font-size: large;"><em>Dependency Property</em></span></strong><br />
Dependency properties provide a centralized repository of a workflow's state. <br />
The <strong><em>DependencyObject</em></strong> is a hash table that stores the current values of any DependencyProperty that is applied to it.<br />
<br />
<strong><span style="color: blue; font-size: large;"><em>Dependency Object Class:</em></span></strong><br />
<br />
<pre><textarea cols="62" style="height: 36px; width: 572px;">public abstract class DependencyObject : IComponent, IDisposable
</textarea></pre>An instance type of a dependency property can be bound to instance data, in which case the actual value is not determined until runtime. <br />
You set this type of dependency property's value to be an ActivityBind to bind to the actual value that is accessed at runtime.<br />
<br />
ActivityBind binds an activity property to any of the following:<br />
• Another activity property. <br />
• A field.<br />
• A property.<br />
• A method.<br />
<br />
In Simpler Word:<br />
<br />
<em><strong>Dependency Property provide a mechanism that allows SharePoint Designer to provide values for your custom action before you add your custom functionality. </strong></em><br />
<br />
To allow SharePoint Designer to pass values to your custom action when the workflow runs, you must create public properties inside your custom action. In this example, you will create a custom action that will create a new site within SharePoint whenever executed inside a SharePoint Designer workflow. <br />
<br />
Before Writing any Dependency Property and its Binding Property, we have to think about our Inputs, so in this example here are the inputs:<br />
<br />
<strong><em>SiteUrl</em></strong>: Where the site will be located.<br />
<br />
<strong><em>SiteTitle</em></strong>: Title for the new site.<br />
<br />
<strong><em>SiteDescription</em></strong>: Description for the new site.<br />
<br />
<br />
<strong><em>SiteTemplate</em></strong>: Template to use to create the new site.<br />
<br />
<strong><em>InheritPermissions</em></strong>: True, if the new site will inherit permissions from its parent site.<br />
<br />
<br />
For each field, you create a property in your custom action to allow the users to specify these values when designing their workflow in SharePoint Designer. <br />
<br />
When creating properties for a custom action, you create the property itself and a matching DependencyProperty. The DependencyProperty class allows SharePoint Designer to bind the property to the UI in the workflow wizard, where the user specifies the values of these properties in the workflow being created. <br />
<br />
<br />
<br />
<strong><em>Note</em></strong>: Please follow the Syntax we will use while Creating a Property and a Matching Dependency Property, there is Matching Relation require in both of these Names.<br />
<br />
Add the following code to create a property and DependencyProperty for SiteUrl:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XnrmCwhogZsTjU9x1K_VFsGcqRfdZkTMZ1-bOLmkSl6khB4hPJbP4gHv3XW2toSIKFp10YpaHCEz8seULYgzdEDX6xXbqIrIHD-K3LdD8SvS575VzM19MTTD7DhWPC5fP9ydq_YIx_g/s1600/5th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XnrmCwhogZsTjU9x1K_VFsGcqRfdZkTMZ1-bOLmkSl6khB4hPJbP4gHv3XW2toSIKFp10YpaHCEz8seULYgzdEDX6xXbqIrIHD-K3LdD8SvS575VzM19MTTD7DhWPC5fP9ydq_YIx_g/s640/5th.jpg" width="640" yda="true" /></a></div><br />
<span style="color: black; font-family: "Segoe UI", "sans-serif"; font-size: 9.5pt;"><strong><em>Parameters it takes are</em></strong> : 1)String Name of the associated Property, Type of Property, Type of Owner(Activity Class Name)</span><br />
<br />
<pre><textarea cols="72" rows="7" style="height: 144px; width: 662px;">public static DependencyProperty SiteUrlProperty =DependencyProperty.Register("SiteUrl", typeof(string),typeof(CreateSiteActivity));
public string SiteUrl {
get { return this.GetValue(SiteUrlProperty).ToString(); }
set { this.SetValue(SiteUrlProperty, value); }
}
</textarea>
</pre><br />
<span style="font-family: Calibri;">Now for a while just think on what we have written:</span><br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">Dependency Property Name : <b style="mso-bidi-font-weight: normal;">SiteUrlProperty</b> and Matching Property Name is <b style="mso-bidi-font-weight: normal;">SiteUrl</b></span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">It is required to follow above Syntax i.e always write Dependency Property with Suffix “<strong><em>Property</em></strong>” if you miss this then you will get Compilation Error.</span></div><span style="color: blue; font-size: large;">Step: 4) Getting Current Workflow Context </span><br />
<span style="color: blue; font-size: large;"><br />
</span></div><pre><textarea cols="72" rows="6" style="height: 155px; width: 663px;"> public static DependencyProperty __ContextProperty =
DependencyProperty.Register("__Context", typeof(WorkflowContext),
typeof(CreateSiteAction));
public WorkflowContext __Context {
get { return (WorkflowContext) this.GetValue(__ContextProperty); }
set { this.SetValue(__ContextProperty, value); }
}
</textarea></pre><br />
<br />
<span style="color: blue; font-size: large;">Step:5) Complete Rest of Dependency Properties Simmilarly</span><br />
<br />
<span style="color: black;">simmilarly complete the Dependency Properties for rest of inputs we discussed earlier and code should now look like this:</span></div><pre><textarea cols="72" rows="54" style="height: 1073px; width: 659px;">using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.Workflow;
using Microsoft.SharePoint.WorkflowActions;
using System;
using System.ComponentModel;
using System.Web;
using System.Workflow.Activities;
using System.Workflow.ComponentModel;
namespace CustomActionsLibrary {
public class CreateSiteAction : SequenceActivity {
public static DependencyProperty SiteUrlProperty =
DependencyProperty.Register("SiteUrl", typeof(string),
typeof(CreateSiteAction));
public string SiteUrl {
get { return this.GetValue(SiteUrlProperty).ToString(); }
set { this.SetValue(SiteUrlProperty, value); }
}
public static DependencyProperty SiteTitleProperty =
DependencyProperty.Register("SiteTitle", typeof(string),
typeof(CreateSiteAction));
public string SiteTitle {
get { return this.GetValue(SiteTitleProperty).ToString(); }
set { this.SetValue(SiteTitleProperty, value); }
}
public static DependencyProperty SiteDescriptionProperty =
DependencyProperty.Register("SiteDescription", typeof(string),
typeof(CreateSiteAction));
public string SiteDescription {
get { return this.GetValue(SiteDescriptionProperty).ToString(); }
set { this.SetValue(SiteDescriptionProperty, value); }
}
public static DependencyProperty SiteTemplateProperty =
DependencyProperty.Register("SiteTemplate", typeof(string),
typeof(CreateSiteAction));
public string SiteTemplate {
get { return this.GetValue(SiteTemplateProperty).ToString(); }
set { this.SetValue(SiteTemplateProperty, value); }
}
public static DependencyProperty InheritPermissionsProperty =
DependencyProperty.Register("InheritPermissions", typeof(bool),
typeof(CreateSiteAction));
public bool InheritPermissions {
get { return (bool) this.GetValue(InheritPermissionsProperty); }
set { this.SetValue(InheritPermissionsProperty, value); }
}
public static DependencyProperty _ContextProperty =
DependencyProperty.Register("_Context", typeof(WorkflowContext),
typeof(CreateSiteAction));
public WorkflowContext _Context {
get { return (WorkflowContext) this.GetValue(_ContextProperty); }
set { this.SetValue(_ContextProperty, value); }
}
}
</textarea></pre><br />
<span style="color: blue; font-size: large;">Step:6) Execution of Main Action</span><br />
<br />
Whenever in Workflow the pointer reaches to the Activity then There is an entry method which executes and this method/function is Execute :<br />
<br />
<br />
We need to override this function to write the functionality of our activity:<br />
<pre><textarea cols="71" rows="6" style="height: 153px; width: 650px;">protected override ActivityExecutionStatus Execute(ActivityExecutionContext
executionContext) {
try
{
} catch (Exception ex) {
}
}
</textarea></pre><br />
This function returns an ActivityExecutionStatus which is an enum containing values. And takes executionsyntax as parameter.<br />
<br />
<br />
For getting refference to current site , we will use _Context property that we defined above <br />
<br />
<br />
<span style="color: blue; font-size: large;">Step:7) Code to insert in Execute Method:</span><br />
<br />
<pre><textarea cols="69" rows="44" style="height: 1038px; width: 631px;"> protected override ActivityExecutionStatus Execute(ActivityExecutionContext executionContext)
{
try {
SPWeb oweb = this._Context.Web;
string templateId;
switch (this.SiteTemplate)
{
case "Team Site":
templateId = "STS#0";
break;
case "Blank Site":
templateId = "STS#1";
break;
case "Document Workspace":
templateId = "STS#2";
break;
case "Wiki Site":
templateId = "WIKI#0";
break;
default:
templateId = "BLOG#0";
break;
}
oweb.AllowUnsafeUpdates = true;
oweb.Webs.Add(this.SiteUrl, this.SiteTitle, this.SiteDescription, 1033, templateId, !this.InheritPermissions, false);
return ActivityExecutionStatus.Closed;
}
catch(Exception ex){
ISharePointService service =
(ISharePointService)executionContext.GetService(
typeof(ISharePointService));
if (service == null)
{
throw;
}
service.LogToHistoryList(this.WorkflowInstanceId,
SPWorkflowHistoryEventType.WorkflowError, 0, TimeSpan.Zero,
"Error Occurred", ex.Message, string.Empty);
return ActivityExecutionStatus.Faulting;
}
}</textarea></pre><br />
<br />
<br />
<br />
Note: If an error occured then we have used ISharePointService to logtohistory list whatsoever error occurs.<br />
<br />
<span style="color: blue; font-size: large;">Step : 8) Create ACTIONS file</span><br />
<br />
<span style="color: black;"><strong><em>NOTE:Before reading the next lines first Sign the Assembly and run "sn.exe -T 'Path to Dll'" command to get the PublicKeyToken Value of CreateSiteActivity.dll</em></strong></span><br />
<br />
<span style="color: blue;"><span style="color: black;">Next Step is to Create an Action File, this file is require to tell Designer how the Activity will appear in UI to the USER, this will make the custom activity to appear in the Wizard.</span></span><br />
<span style="color: black;"></span><br />
<span style="color: black;"><br />
</span><br />
<span style="color: black;">An ACTIONS file is an XML file that is used by SharePoint Designer's workflow wizard to provide a user-friendly experience for configuring actions. Every action must be configured in an ACTIONS file before it can be used in SharePoint Designer. By default, there is only one ACTIONS file, located at </span><br />
<span style="color: black;"><br />
</span><br />
<span style="color: black;">{14 Hive}\TEMPLATE\1033\Workflow\WSS.ACTIONS, and it contains an entry for each of the built-in actions in Windows SharePoint Services.</span></div><br />
<pre> </pre><br />
<textarea cols="72" rows="34" style="height: 649px; width: 663px;"><?xml version="1.0" encoding="utf-8"?> <WorkflowInfo> <Actions Sequential="then" Parallel="and"> <Action Name="Create A Subsite" ClassName="CreateSiteActivity.CreateSiteActivity" Assembly="CreateSiteActivity,Version=1.0.0.0, Culture=neutral, PublicKeyToken=5c3f29e162d61460" AppliesTo="all" Category="List Actions"> <RuleDesigner Sentence="Create subsite with these settings: %1, %2, %3, %4 and %5"> <FieldBind Field="SiteUrl" Text="url" Id="1" DesignerType="TextArea"/> <FieldBind Field="SiteTitle" Text="title" Id="2" DesignerType="TextArea"/> <FieldBind Field="SiteDescription" Text="description" Id="3" DesignerType="TextArea"/> <FieldBind Field="SiteTemplate" Text="site template" Id="4" DesignerType="TextArea"/> <FieldBind Field="InheritPermissions" Text="inherit permissions" Id="5" DesignerType="TextArea"/> </RuleDesigner > <Parameters> <Parameter Name="SiteUrl" Type="System.String, mscorlib" Direction="In" /> <Parameter Name="SiteTitle" Type="System.String, mscorlib" Direction="In" /> <Parameter Name="SiteDescription" Type="System.String, mscorlib" Direction="In" /> <Parameter Name="SiteTemplate" Type="System.String, mscorlib" Direction="In" /> <Parameter Name="InheritPermissions" Type="System.Boolean, mscorlib" Direction="In" /> <Parameter Name="_Context" Type="Microsoft.SharePoint.WorkflowActions.WorkflowContext, Microsoft.SharePoint.WorkflowActions" Direction="In"/> </Parameters> </Action> </Actions> </WorkflowInfo> </textarea><br />
<br />
<br />
for a complete refference of this file please visit this msdn article:<br />
<a href="http://msdn.microsoft.com/en-us/library/bb897811.aspx">http://msdn.microsoft.com/en-us/library/bb897811.aspx</a><br />
<br />
<span style="color: blue; font-size: large;">Step:9) Deployment Process</span><br />
<br />
Deployment Process Consists of Four Sub Steps:<br />
<br />
<br />
<strong><span style="color: blue;"><em>1)Sign The Assembly and Get The Public Token and place it in the ACTIONS file:</em></span></strong><br />
<br />
Right Click “CreateSiteActivity” Project and then go to Properties and then in “Signing”, create a new key name it “CreateSiteActivity”, then BUILD the Project and later Sign the assembly using:<br />
<br />
Sn.exe –T “path to CreateSiteActivity.dll”<br />
<br />
Note the PublicKeyToken and modify the Actions file accordingly.<br />
<br />
<strong><span style="color: blue;"><em>2)Place the ACTIONS file to the Worklfow Mapped Folder of SharePoint 14 Hive:</em></span></strong> <br />
<br />
<br />
In the CustomActivityDemo project <strong>Add a SharePoint Mapped Folder </strong>to Template /1033/Workflow<br />
<br />
i.e{SharePointRoot}/Template/1033/Workflow and save the above ACTIONS file, with ACTIONS as extension.<br />
<br />
<strong><span style="color: blue;"><em>3)Deploying CreateSiteActivity DLL to GAC and Create Safe Control in Web Config of the Web Application</em></span></strong>.<br />
<br />
<br />
1)Expand the Package Item in the CustomActivityDemo Project,<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgneyAYDpzCFdQ-2uK7i4VHoVk0jx8WMx8q7iqq3zVkhUULz2UhGQlSDxJgC1sXUXcXTwX7x4v6AetUgiJi2jbeKqIygXVZy6vHg5nmpvmyhelUtcTtwUJGAbdyiR_2Vth2m7dVMMmqwP4/s1600/6th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgneyAYDpzCFdQ-2uK7i4VHoVk0jx8WMx8q7iqq3zVkhUULz2UhGQlSDxJgC1sXUXcXTwX7x4v6AetUgiJi2jbeKqIygXVZy6vHg5nmpvmyhelUtcTtwUJGAbdyiR_2Vth2m7dVMMmqwP4/s400/6th.jpg" width="360" yda="true" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;">Then double click it, which will open the Package properties then click Advanced.</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXBYM84jXyifbldcP9mTSjVHdbu_bhjaJCkcNKm5Mc836irQ-yF4mEULxPPkHUG-gXpKi4vLvRs6tZcTUyzvArjik5lsiTHMl07WR1j9-vIQiuemnS1eMEfCbFXXl6MVJocth6dJv1Po/s1600/7th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXBYM84jXyifbldcP9mTSjVHdbu_bhjaJCkcNKm5Mc836irQ-yF4mEULxPPkHUG-gXpKi4vLvRs6tZcTUyzvArjik5lsiTHMl07WR1j9-vIQiuemnS1eMEfCbFXXl6MVJocth6dJv1Po/s640/7th.jpg" width="640" yda="true" /></a></div><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;"></span></span><br />
<div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"> click Add. And select Existing Assembly:</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKAmkRiljcbDxChoXsL11TOIeY4EgGcPLBalWG1-zO0WrXddxA4QbpPleqpbJLP89fdkvbhjDe1R0ogNSk_USwqUqafhduYMdqcblrW-xCowEDuwLZ-vS8e8lMDjjmdp1Ew9wf9cO8oA/s1600/8th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKAmkRiljcbDxChoXsL11TOIeY4EgGcPLBalWG1-zO0WrXddxA4QbpPleqpbJLP89fdkvbhjDe1R0ogNSk_USwqUqafhduYMdqcblrW-xCowEDuwLZ-vS8e8lMDjjmdp1Ew9wf9cO8oA/s640/8th.jpg" width="640" yda="true" /></a></div><div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">Add Necessary Information to add safe control, when complete it will appear as this:</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSV90S9XgkcWTlty10cWYEOleCKwbOQTNvhChZpdbr9ma7woGSq7QO8g0Xd7quChrBCYB8Koe7mveg1NvWF6Wk0vAPXX4qmiltBVke4GqZ_N2WFd-I2RiR8Y2hcAjpTSTfrbRyB-X_uHY/s1600/9th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; height: 396px; margin-bottom: 1em; margin-right: 1em; width: 686px;"><img border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSV90S9XgkcWTlty10cWYEOleCKwbOQTNvhChZpdbr9ma7woGSq7QO8g0Xd7quChrBCYB8Koe7mveg1NvWF6Wk0vAPXX4qmiltBVke4GqZ_N2WFd-I2RiR8Y2hcAjpTSTfrbRyB-X_uHY/s640/9th.jpg" width="640" yda="true" /></a></div><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"></span><br />
<div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><strong><em><span style="color: blue;">4)Add Authorize Type in web config</span></em></strong></span></div><div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;">To do this, we will include a feature in sharePoint Project: "CustomActivityDemo" (The Rocket Launcher) Project, Name it something Suitable and Scope it to WebApplication:</span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOsaFRo-M_OJepXYNgyny6SYFdg0O3UeLQ5BQAZW8yfQkKroB4vg2BtWwkdHLeIXtcjGgWfGUILqh9wdZGy_4OCV7xEkHXXJXs6mYrle869lu-0Am5SNmUcVr7UTGrVkkea9hH9MD5ehY/s1600/10th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOsaFRo-M_OJepXYNgyny6SYFdg0O3UeLQ5BQAZW8yfQkKroB4vg2BtWwkdHLeIXtcjGgWfGUILqh9wdZGy_4OCV7xEkHXXJXs6mYrle869lu-0Am5SNmUcVr7UTGrVkkea9hH9MD5ehY/s640/10th.jpg" width="640" yda="true" /></a><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="color: blue;"></span></span> </div><br />
<br />
<br />
<br />
<span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="color: blue;"></span></span><br />
<div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="color: black;">Then right click the Feature and Add a Reciever:</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDF2TCbBKqk0sDZGvzEgRwqTAm-k4XQc5pDi4r25R6frnzIkxUrhFnYTUSJUc8dcpc4Q-8NaFa4TqtGoO6b1rD9EC93-cQexQVrYFMyg1D_bNbQneEeQK5cgEXRdGJQ9RMWZJ8oGr9Ak/s1600/11th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDF2TCbBKqk0sDZGvzEgRwqTAm-k4XQc5pDi4r25R6frnzIkxUrhFnYTUSJUc8dcpc4Q-8NaFa4TqtGoO6b1rD9EC93-cQexQVrYFMyg1D_bNbQneEeQK5cgEXRdGJQ9RMWZJ8oGr9Ak/s640/11th.jpg" width="640" yda="true" /></a></div><div class="MsoNormal" style="margin: 0in 0in 10pt; text-align: justify; text-justify: inter-ideograph;"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: Calibri; mso-hansi-font-family: Calibri;"><span style="color: black;">Add using Microsoft.SharePoint.Administration Namespace to its code file<br />
Uncomment Feature Activated Block.</span></span></div>As scope of the Feature is SPWebApplication , from properties take the instance of feature parent as spwebapplication:<br />
<br />
If you see the properties of SPWebAPPlication Instance then you can see a collection WebConfigModifcations:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0VqVdIxMZuV8XQbBMaQHpmcJ_ofLFiPQF1jFAWiVqqMD52Wv0c9VAia2QQN-qvmZ6nmHiPtEmp77VdcLoyXGDsiUr_Lm73CwaT5yJ4s6WnbDXDHzNEUPCDY3Z-VY-_cdAntMEfNPuqKg/s1600/12th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0VqVdIxMZuV8XQbBMaQHpmcJ_ofLFiPQF1jFAWiVqqMD52Wv0c9VAia2QQN-qvmZ6nmHiPtEmp77VdcLoyXGDsiUr_Lm73CwaT5yJ4s6WnbDXDHzNEUPCDY3Z-VY-_cdAntMEfNPuqKg/s640/12th.jpg" width="640" yda="true" /></a></div>Now we have to add a new webconfigmodifcation to this collection , to do so create an Instance of SPWebConfigModification class: <br />
<br />
<br />
SPWebConfigModification modification = new SPWebConfigModification();<br />
<br />
<br />
Now we will initiate these properties of Modification:<br />
<br />
<pre><textarea cols="71" rows="37" style="height: 763px; width: 653px;">*)Name
modification.Name =”AuthType”;
*)Owner
modification.Owner = “//Owner Assembly name”/ CreateSiteActivity (in our case)
*)Path
modification.Path= "configuration/System.Workflow.ComponentModel.WorkflowCompiler/authorizedTypes";
*)Type:
modification.Type = SPWebConfigModification.SPWebConfigModificationType.EnsureChildNode;
*) Value //complete Assembly information
mofication.value = "<authorizedType Assembly=\"CreateSiteActivity, Version=1.0.0.0, Culture=neutral, PublicKeyToken=5c3f29e162d61460\" " +
"Namespace=\"CreateSiteActivity\" TypeName=\"*\" Authorized=\"True\" />";
//Add and apply the modification
currentWebApp.WebConfigModifications.Add(modification);
currentWebApp.WebService.ApplyWebConfigModifications();</textarea></pre><pre> </pre><pre> </pre><pre> </pre><pre> </pre><span style="color: blue;">Entire Code will appear as this:</span><br />
</div><pre><textarea cols="71" rows="46" style="height: 889px; width: 648px;">using System;
using System.Runtime.InteropServices;
using System.Security.Permissions;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Security;
using Microsoft.SharePoint.Administration;
namespace CustomActivityDemo.Features.CustomActivityFeature
{
/// <summary>
/// This class handles events raised during feature activation, deactivation, installation, uninstallation, and upgrade.
/// </summary>
/// <remarks>
/// The GUID attached to this class may be used during packaging and should not be modified.
/// </remarks>
[Guid("d2be807f-9acf-4a85-9c00-4efb7caa35ac")]
public class CustomActivityFeatureEventReceiver : SPFeatureReceiver
{
// Uncomment the method below to handle the event raised after a feature has been activated.
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
SPWebApplication currentWebApp = (SPWebApplication)properties.Feature.Parent;
SPWebConfigModification modification = new SPWebConfigModification();
modification.Name = "AuthType";
modification.Owner = "CreateSiteActivity";
modification.Path = "configuration/System.Workflow.ComponentModel.WorkflowCompiler/authorizedTypes";
modification.Type = SPWebConfigModification.SPWebConfigModificationType.EnsureChildNode;
modification.Value = "<authorizedType Assembly=\"CreateSiteActivity, Version=1.0.0.0, Culture=neutral, PublicKeyToken=5c3f29e162d61460\" " +
"Namespace=\"CreateSiteActivity\" TypeName=\"*\" Authorized=\"True\" />";
//Add and apply the modification
currentWebApp.WebConfigModifications.Add(modification);
currentWebApp.WebService.ApplyWebConfigModifications();
}
</textarea></pre><br />
<br />
Next Build, Package and Deploy your solution.<br />
<br />
<span style="color: blue; font-size: large;">Step: 10) Test the new Action</span><br />
Next open the site which we used for testing this project in SharePoint Designer and Create a New List Workflow on any of List (take Task).<br />
<br />
And in List Actions you can see our newly created activity:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrNDOjD70wZo3f78IQZvdNvqDUKOPHWU1y4WVaxn9G-6vw-13WLyKX_ZGf2VzAXgzr2LOePPqXnEw-iUFfGVBP2c5c2_uej05JxohGwFyw1pSsAFziDc_Uk_Skm0TJjWPyKM-4ZoUDBg/s1600/13th.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrNDOjD70wZo3f78IQZvdNvqDUKOPHWU1y4WVaxn9G-6vw-13WLyKX_ZGf2VzAXgzr2LOePPqXnEw-iUFfGVBP2c5c2_uej05JxohGwFyw1pSsAFziDc_Uk_Skm0TJjWPyKM-4ZoUDBg/s640/13th.jpg" width="640" yda="true" /></a></div><br />
It will Work as it did at my end. Please test yourself and use it in your daily workflow cycle.<br />
<br />
Hope it will help and Workflow Activities creation will be now a simple process for you all.</div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com12tag:blogger.com,1999:blog-2179939415242111485.post-75365943854812791762011-11-24T03:55:00.000-08:002011-11-24T03:55:29.356-08:00Programming InfoPath Forms 2007 - Part 1(Creating the Infopath Form Project)<div dir="ltr" style="text-align: left;" trbidi="on">We all know the power of Infopath Forms, everyone simply Love them, they are sleek, easy to use and end users also finds them interesting.<br />
<br />
But for <strong>Developers</strong>, ahh dont tell me, if you believe ---> "<strong>They are Easy to C</strong>ode" and Debug with SharePoint Process w3p.exe??<br />
<br />
Actually it is not as simple as we think, from my exeriences with this blog, i will share what i do normally.<br />
<br />
This will be 3 parts series and in 1st part we will create the Base, "The Project containing Code".<br />
<br />
Many of times when a newbie code with VSTA, he gets confuse how can i attach the process to debug the code and why VSTA is opening VS 2005, by default, so in this post, i will show you how can we create a VS 2008 Code Project for Infopath Forms.<br />
<br />
With this as well we have a Case Study, which will remain there for all three Posts.<br />
<br />
These Posts are not about designing forms, so i believe if you are reading this then you must be aware of designing Infopath Forms.<br />
<br />
Here we will use a very simple Case Study:<br />
<ul><li>In a Company namely "Lorem Ipsum" :).. Scrum Follows, and everyday a manager assigns Tasks To his associates, on work they have to perform, Manger uses an Infopath form, to create multiple tasks for his associates.</li>
</ul>So Keeping this in mind, i have developed a solution simmilar.<br />
<br />
SO Lets Look into it:<br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;"><strong>Infrastructure:</strong></span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;">1)Team Site:We will have a sharepoint site, can take a Team Site, with Enterprise Features Activated.</div>2)Infopath Form Library:<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">We will have an Infopath Form Library “TasksCreator”,namely .</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">3)<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Task List: </span></span><span style="font-family: Calibri;"><span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">For assigned Tasks we will use Default Team Site Tasks List.</span></span></span></div><span style="font-family: Calibri;"><strong>Infopath Form Design:</strong></span><br />
<br />
<span style="font-family: Calibri;">Please follow these Points to Design the Form:</span><br />
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;"><span style="font-family: "Times New Roman";"><strong>1)</strong> </span></span></span><span style="font-family: Calibri;">Open Infopath 2007 Designer and click Design a Form Template:</span></div><div class="MsoNormal" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none; margin: 0in 0in 10pt;"><span style="font-family: Calibri;"></span> <img border="0" hda="true" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCdaB_2mlrST4YJNOsnkwuBmvuxI9Nl-vXzErIca9YCpF8QAFofAsN4sBfndE50zx5YMaAuArRmDo1n38_-09BAP6iuqhH9KmzCtyfjmQBenCVtPYbZ2pPrJam6yuWCL0vkuAowqDEZw/s400/Untitled.jpg" width="400" /></div><div class="MsoNormal" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none; margin: 0in 0in 10pt;">Choose Blank from Infopath Form Template Options:</div><div class="MsoNormal" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none; margin: 0in 0in 10pt;">Don’t Forget to “Enable Browser Compatible Features Only”.</div>2)<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Next we will Design our Form , so that i will contain a repeating table a check box and a manager textBox like this:</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBk6dskDro5JvkAZ91893CgTtkJ6jyV63436nWrcR2KSwjhQnA0ibp2F5U9_-FxO1py_VH8HROMcO7oUuQ7aH7L0EkPJRm9H0efoMfgxkm4Vk8Jjw6HQJAaQH3cxy5P-VuOW-J0KL_cQ/s1600/2.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBk6dskDro5JvkAZ91893CgTtkJ6jyV63436nWrcR2KSwjhQnA0ibp2F5U9_-FxO1py_VH8HROMcO7oUuQ7aH7L0EkPJRm9H0efoMfgxkm4Vk8Jjw6HQJAaQH3cxy5P-VuOW-J0KL_cQ/s400/2.jpg" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Remember, we are not giving importance to the way form is designed, instead we want to give prefference to Coding, so go ahead change the way it looks .</span><br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Details:</span><br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"></span><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">So here is how<span style="mso-spacerun: yes;"> </span>My Data Source is Presently:</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja1J4dhX6dbRzWfeLSQNtE0ubRITMCY9DX7iO9hnS-Cy56jJMlr4n3Jr50_EfrujPcfcnydusGUcS1oL4e7zWUved92Dsrv11eNUlYJ-iY-sX3pk6sNH8Q8q0P9N5BS2xbp1KER7ad5Ko/s1600/4.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja1J4dhX6dbRzWfeLSQNtE0ubRITMCY9DX7iO9hnS-Cy56jJMlr4n3Jr50_EfrujPcfcnydusGUcS1oL4e7zWUved92Dsrv11eNUlYJ-iY-sX3pk6sNH8Q8q0P9N5BS2xbp1KER7ad5Ko/s1600/4.jpg" /></a></div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
<br />
<br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoNormal" style="margin: 0in 0in 10pt;"><br />
</div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="mso-list: Ignore;">·<span style="font-family: "Times New Roman";"> </span></span></span><span style="font-family: Calibri;">managerName: Manager’s Name-Text</span></div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="mso-list: Ignore;">·<span style="font-family: "Times New Roman";"> </span></span></span><span style="font-family: Calibri;">assignTaskCheck- CheckBox Value True/False</span></div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="mso-list: Ignore;">·<span style="font-family: "Times New Roman";"> </span></span></span><span style="font-family: Calibri;">Entry: Section</span></div><ul><li><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Group7: Repeating Table</span></div></li>
</ul><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="mso-list: Ignore;">·<span style="font-family: "Times New Roman";"> </span></span></span><span style="font-family: Calibri;">Group1: Contact Selector</span></div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="mso-list: Ignore;">·<span style="font-family: "Times New Roman";"> </span></span></span><span style="font-family: Calibri;">TaskDescription,DueDate,DateComplete</span></div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -0.25in;"><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="mso-list: Ignore;">·<span style="font-family: "Times New Roman";"> </span></span></span><span style="font-family: Calibri;">targetSite(V. Important) : To get the current Web url on which this form is running, instantiating SPSite object</span></div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto;"><span style="font-family: Calibri;">among all of these targetSite is very important field, in this we will store the target site and use its url to instantiate SPSite object in our code..</span><br />
<br />
<span style="font-family: Calibri;">For details on how to add Contact Selector in </span><br />
<br />
Now Comes the Action Part: <strong>Coding this Form to perform our Action</strong>:<br />
<br />
Here are the Steps we will follow to do this for us:<br />
1)<strong>Modify Trust Level</strong><br />
<br />
Go To Tools in the Menu, from there go to Form Options and select “Security and Trust”, uncheck Automatically Determine Security Level and then select “<strong>Full Trust</strong>”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLk0A0LYwltOAC4bJU-rJmAKv5OyvCvAcI-_F4kMasvkw10vUYiWCaQqg2qgu9sP5sz1xpRVQpBiHmLxWUN3C-m4L9qg_ig9_xEpgcRJRWhve5ZDb88ltj5n70XRsgnTt_2FHoaKyzPzg/s1600/5.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLk0A0LYwltOAC4bJU-rJmAKv5OyvCvAcI-_F4kMasvkw10vUYiWCaQqg2qgu9sP5sz1xpRVQpBiHmLxWUN3C-m4L9qg_ig9_xEpgcRJRWhve5ZDb88ltj5n70XRsgnTt_2FHoaKyzPzg/s400/5.jpg" width="400" /></a></div><br />
<br />
<br />
</div><div class="MsoListParagraph" style="margin: 0in 0in 10pt 1in; mso-add-space: auto;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
2)Change The Coding Language for VSTA<br />
I am a C-Sharper, so I will choose C#, you will find this in” Programming “ section of Form Options:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRr3_NSMf_0c9CbiT_1_9dmpDayK0SENChn98S7D3r7lbh2j_V98gUkSM23tjBLd42QcFC9wALlPm8SnO6ZIC2Z9tEe6gFr9cVHj0AGVC0Qy3foKh7oSzuQ7IhgN0Xm1nN1T6Csuryzvc/s1600/6.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRr3_NSMf_0c9CbiT_1_9dmpDayK0SENChn98S7D3r7lbh2j_V98gUkSM23tjBLd42QcFC9wALlPm8SnO6ZIC2Z9tEe6gFr9cVHj0AGVC0Qy3foKh7oSzuQ7IhgN0Xm1nN1T6Csuryzvc/s400/6.jpg" width="370" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Also at a point of time if you feel that you need to remove the code, then you can do this by clicking Remove Code Button. <br />
<br />
3)Make Data Connections: <br />
<br />
Before Starting Coding we will create two Connections and Manage Submit Options, <br />
<br />
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-kSaNS0xkSo16gE6wXNQ3T2amlmmX3UwhqhyphenhypheneHj1N7heii_TPmiSli2Kh3kClIDeaeeiy4uDK_KvnFBAJjaiHCuAAr-NfYmXEMdaxwCMcmaDNLoSfLncms9biHaMp94OWS9Y8_UH-Sw/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" hda="true" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-kSaNS0xkSo16gE6wXNQ3T2amlmmX3UwhqhyphenhypheneHj1N7heii_TPmiSli2Kh3kClIDeaeeiy4uDK_KvnFBAJjaiHCuAAr-NfYmXEMdaxwCMcmaDNLoSfLncms9biHaMp94OWS9Y8_UH-Sw/s320/7.jpg" width="320" /></a></div><br />
<br />
a)Context: For Contact Selector, as you can find details in the link <a href="http://msdn.microsoft.com/en-us/library/ms558892.aspx">http://msdn.microsoft.com/en-us/library/ms558892.aspx</a><br />
<br />
b)“SharePoint Library Submit”- This we will use to modify later with our code to submit our form in the library, for now just create it as follows:<br />
Go to Data Connections then select "<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">To Submit Data to Document/ Form Library"</span><br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">For Now just Give any Form Library in the Site, later we will modify it using code.</span><br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"> </span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoAElqMsCnPZJcpKdu4NvJ7wdU2vrTkNg5Ln1XMKROFUtCGDArcD28UNNHZ4yTqflrauoVI-1QyJuZ1T2K87IIe6SuVpypDNsf9Ct0VB_r3Y8oyqm2UWM-hgxDteW2k7PbVAxPjXorvjg/s1600/8.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoAElqMsCnPZJcpKdu4NvJ7wdU2vrTkNg5Ln1XMKROFUtCGDArcD28UNNHZ4yTqflrauoVI-1QyJuZ1T2K87IIe6SuVpypDNsf9Ct0VB_r3Y8oyqm2UWM-hgxDteW2k7PbVAxPjXorvjg/s400/8.jpg" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
I have Given File Name with a Format: <strong>concat(managerName, "-form", today())</strong><br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">you can choose different way, and do check <strong>Allow Overwrite if file exists</strong>. That’s it finish it by doing next twice.</span><br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"></span><span style="font-family: Calibri;">4)Enable Submit Options:</span><br />
<br />
Go To : Tools in Menu, Submit Option and Configured as below, choose Perform Custom Code action,<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9FrlweUDfT2IutMRtnrolt0dnwMsTePRlDxxCzUaZdO4CQnc9Cvlx-xGoQM70EJIDdeLa16Vqi2fOUwqPd8px3_F4LPp1Qrf7JUPOFTnhoTDtl6lxDDcP8ikSL91g1LHsArYUOYD15E/s1600/9.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9FrlweUDfT2IutMRtnrolt0dnwMsTePRlDxxCzUaZdO4CQnc9Cvlx-xGoQM70EJIDdeLa16Vqi2fOUwqPd8px3_F4LPp1Qrf7JUPOFTnhoTDtl6lxDDcP8ikSL91g1LHsArYUOYD15E/s400/9.jpg" width="296" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Press Edit Code. Save the form if its prompted and then it will open VSTA -2005 Code for you in VS-2005 Environment, <br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEKv9tsHCSlxbYxIND5Geaf4OgJgO6vtF_e31TqEQ1gy7J7aoZOOkSxdiBagqIZuiepxQkMlT1cxJaXsy-kP33Pu-uzRfCdJRWh9cIScLcfEn_BA8OBvm7lcBjKMXKhRoxfQXx1Mb2nxE/s1600/10.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEKv9tsHCSlxbYxIND5Geaf4OgJgO6vtF_e31TqEQ1gy7J7aoZOOkSxdiBagqIZuiepxQkMlT1cxJaXsy-kP33Pu-uzRfCdJRWh9cIScLcfEn_BA8OBvm7lcBjKMXKhRoxfQXx1Mb2nxE/s400/10.jpg" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-family: Calibri;">Don’t do anything now just Save it, and if asked , press ok in the submit Options in Infopath Designer and Save the code .</span><br />
<br />
<br />
5)Now Lets Convert Our Code in the VS-2008 Code.<br />
<br />
<span style="font-family: Calibri;">Go to the Infopath Designer click on Submit Button and in Button Properties in Action Drop Down Choose Submit, and that’s it. We are now ready with coding work. Save The Form.</span><br />
<br />
<br />
Close the VSTA , VS 2005 project, do copy the directory path of it, and open then open VS-2008.Or Just Change the Location of the Project and then open it in VS2008, It Will ask you to Upgrade the Project, Please do that and that’s it we are done with it.<br />
It Will Get Upgraded, Now Close The Project.<br />
<br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><strong>* Save<span style="mso-spacerun: yes;"> </span>Form as Source Files:</strong></span><br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Next, we will Extract the Form Source Files and save it in a Folder as “Infopath Form Template” Open the Form in Infopath Designer 2007, Go to File then choose Save as Source Files.</span><br />
<br />
<span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"> </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHqWBHnB4woEE2Ur2ZrixfVGz7XQNAkzyElVSEAHp2_SkKzofWO-wNBxvTvtGfmrgUxWmKK75tXxlDSE6UTGaEG_BiYwqhXJvrSw9_rNNedzWxrlQNCS2DUeYWasEBSH46-eUQY14YnQ/s1600/11.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHqWBHnB4woEE2Ur2ZrixfVGz7XQNAkzyElVSEAHp2_SkKzofWO-wNBxvTvtGfmrgUxWmKK75tXxlDSE6UTGaEG_BiYwqhXJvrSw9_rNNedzWxrlQNCS2DUeYWasEBSH46-eUQY14YnQ/s400/11.jpg" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
NOTE: Please Do Follow the Same Name of the Folder as we have choosen.<br />
<br />
Now Copy that Folder and Place in the Project that we upgraded above at root.<br />
<br />
<strong><span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">* Open the Project in VS 2008.</span></strong>Open the project again and “Click show all files”, then you will be able to see Infopath Form Template folder, include the folder in the project.<br />
<br />
<br />
Rebuild The Project, and you can see pdb and dll created in the same folder.<br />
<br />
If .pdb files are not created then check if the Project is in Debug mode and Debug Config should Be Full.<br />
<br />
For this , go to Project Properties, their select “Build” and from there choose Advanced option in the lower right corner, and in output for Debug Info Change Drop Down Value to full, see below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjce8vqzoEix_KOvJ8vQ_5WDCsvoLJzVV4pyrELqxTYi2HeMCXwbxCWiYPXdR9TPTGSmAJWJQ5EcL_2C-IHFUlaZTQpB-63hgmm64sHVfMF65W_j7UQrDEQFx4th5_RFHop8LDw7g-xs/s1600/12.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjce8vqzoEix_KOvJ8vQ_5WDCsvoLJzVV4pyrELqxTYi2HeMCXwbxCWiYPXdR9TPTGSmAJWJQ5EcL_2C-IHFUlaZTQpB-63hgmm64sHVfMF65W_j7UQrDEQFx4th5_RFHop8LDw7g-xs/s400/12.jpg" width="400" /></a></div><strong><br />
</strong><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Save the Project and Now we are ready with the upgrade and its finally a Infopath Form SharePoint Compatible VS-2008 Project. You can now see that VS 2008 contains all Designer Menu Items and Options. <br />
<br />
Data Source and rest of Properties are enabled in the same VS2008, <br />
<br />
Open Manifest.xsf file in Infopath Form Template Folder, so here we have over Designer Enabled here in you can see the form right there in VS2008.:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KCP8P94Ch4tmJEKaZ2bzLylJw8lgbALXTqmfv5Veh8dWVeADLjbttgzC3GMvUgsCQ_0rVFGTjFcsaQq5h2Clod57Qg3a7TVl-yRE_9L3TCMvyF6C0zgg7tLdxe0iQzToMPvII-7c-rI/s1600/13.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hda="true" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KCP8P94Ch4tmJEKaZ2bzLylJw8lgbALXTqmfv5Veh8dWVeADLjbttgzC3GMvUgsCQ_0rVFGTjFcsaQq5h2Clod57Qg3a7TVl-yRE_9L3TCMvyF6C0zgg7tLdxe0iQzToMPvII-7c-rI/s400/13.jpg" width="400" /></a></div> <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Go To Second Part of this Blog to see how to do coding with this to achieve our Case Study.</div><br />
<ul style="text-align: left;"><li><div class="MsoListParagraph" style="margin: 0in 0in 10pt 0.5in;">It Contains a Manager Name Text Box(We will use it for Naming the Form), as per logic it contains name of manager who will assign multiple tasks to his associates.</div></li>
<li><div class="MsoListParagraph" style="margin: 0in 0in 10pt 0.5in;"><span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">"Assign Action Item" <strong>Check Box</strong>, If Checked then our repeating table will get appear and manager can create multiple Tasks in it , it will look like this: </span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqiNtnu8j2Dhio71A1x5ahTb2z5-KUCeOEqChxMQyZjF_ravX7o_6IGGMvpHvwMYsO3E5JybU8Jb9HhWVGMZ8EnBuMCBMAu7fqOCZzUR84rnnBU_qFJXrT9cJUOZfW5ZuV14qJjNKfZI/s1600/3.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; height: 265px; margin-bottom: 1em; margin-right: 1em; width: 429px;"><img border="0" hda="true" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqiNtnu8j2Dhio71A1x5ahTb2z5-KUCeOEqChxMQyZjF_ravX7o_6IGGMvpHvwMYsO3E5JybU8Jb9HhWVGMZ8EnBuMCBMAu7fqOCZzUR84rnnBU_qFJXrT9cJUOZfW5ZuV14qJjNKfZI/s400/3.jpg" width="400" /></a><span style="font-family: "Calibri", "sans-serif"; font-size: 11pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"></span></div></li>
</ul><div class="MsoListParagraph" style="margin: 0in 0in 10pt 0.5in;"><br />
</div></div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-80933573711659686962011-10-19T03:26:00.000-07:002011-10-19T03:26:19.500-07:00Record Center 7089 error, Access Denied while creating SharePoint 2007 acess Denied<div dir="ltr" style="text-align: left;" trbidi="on">Actually, my client has asked me to do some fun with OfficialFile.asmx service,wwooooh i was thinking for it self quite .<br />
<br />
But on his site collection when i tried to create a record site, first i got access denied error but later i checked site was created but it was doing nothing..Strange<br />
<br />
And then i went into more details and Got the main reason of this error:<br />
<br />
How i resolved the problem.:<br />
<br />
•First i tried to activate Office SharePoint Server Publishing Feature(requirement of Record Site Template)..//Got access denied error <br />
<br />
•Then after doing some Bing Search, i got a STSADM command which resolved my issue, i have to activate Publishing Resource at my Site Collection level, and this what i did: <br />
<br />
•C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN><br />
<br />
stsadm -o activatefeature -name PublishingResources -url http://website<br />
<br />
<br />
<br />
Note that we are activating Publishing Resources at the Site Collection. <br />
<br />
That was it then when next i went to activate Publishing feature it let me to do that perfectly and later i was able to create a Record Centre Site without any problem.....<br />
</div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-39089040627048764702011-08-29T07:00:00.000-07:002011-08-29T07:12:31.795-07:00SharePoint 2010 Workflow using Visual Studio 2010<div dir="ltr" style="text-align: left;" trbidi="on"><div closure_uid_923ft5="172"><strong><span style="color: blue;">In My previous posts I have taken a developer approach to prescribe the things to go for while developing some custom SharePoint solutions, but here Iwill show one by one every step to achieve this. You’re about to witness an evolution in building workflows for Microsoft, no need for command line deployment, specific configuration of workflow features, and dealing with workflow and feature xml files.</span></strong></div><br />
<br />
What I’m about to show you is what I did and tested in the following environment:<br />
• Microsoft Windows server 2008 R2 Enterprise Edition<br />
<br />
• SharePoint Server 2010 Enterprise Edition<br />
<br />
• MS SQL 2008 Enterprise Edition<br />
<br />
• Visual Studio 2010 Ultimate<br />
<br />
• Code was done in C# only<br />
<br />
<div closure_uid_923ft5="174"><span style="color: blue;"><strong>(Note: we don’t need the exact environment, but as such a similar one to get started)</strong></span></div>1. In your SharePoint 2010 create a Document Library (unless you already have one) which can be easily achieved by choosing “New Document Library” from the “Site Actions” menu (located in the top left corner) ,give it a name “Here I have Given: Tax Reports” and click “Create”.<br />
Now you need to create a mock contract template in Word 2010 for your Document Library <br />
<br />
2. When in your Document Library, click the Library Settings in The top Ribbon under Library Tag.<br />
<br />
3. On the Customize Documents page, locate the Columns section.<br />
<br />
<strong>4. Create a Employee custom column:</strong><br />
<strong><br />
</strong><br />
<div closure_uid_923ft5="272"><em>o Click Create Column.</em></div><em><br />
</em><br />
<em>o Type in the column name: “Employee”.</em><br />
<em><br />
</em><br />
<em>o Select the type Single line of text.</em><br />
<em><br />
</em><br />
<em>o For the “Require that this column contains information setting” click Yes.</em><br />
<em><br />
</em><br />
<em>o Click Ok to add the new column.</em><br />
<div closure_uid_923ft5="273"><br />
5. Add two more columns: a “Employer” column that is type Single line of text and a “TaxAmount” column that is type Currency. Both columns should be required.</div><div closure_uid_923ft5="173"><br />
</div><div class="separator" closure_uid_923ft5="331" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhniyOb1XYG4Ac_xDGQ3EI0pfSuH-manaPSSyI6PbTH5NkI0X6VbQRBfk3RRlWX4j5WmlhzRZ15s3JP6nSDf6nrWQcxNKnPAhiXMpeAhF3xzLfDWw1pgqG7r4D2a7q45tOp54dV8lDoLss/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhniyOb1XYG4Ac_xDGQ3EI0pfSuH-manaPSSyI6PbTH5NkI0X6VbQRBfk3RRlWX4j5WmlhzRZ15s3JP6nSDf6nrWQcxNKnPAhiXMpeAhF3xzLfDWw1pgqG7r4D2a7q45tOp54dV8lDoLss/s640/1.JPG" width="640" /></a></div><br />
<br />
<div closure_uid_923ft5="380">6. Return to the document library home page.</div><div closure_uid_923ft5="380"><br />
</div>7. Under Library Tools, extreme left select “New Document” and create a document.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlx8w4aXapJ1XVDC0kBsqsUS2U1mvaEcqKOS71AOd6vwKhKZ957Vu-II3l0PcfZiTBsUDmDEQSkjQ4jXhYKOMD49Q5j4X6Imc11xbojRcSoyqGcGCTvlerFTzGo2iEQ08yfTg0IiyzQ8/s1600/2.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="253" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlx8w4aXapJ1XVDC0kBsqsUS2U1mvaEcqKOS71AOd6vwKhKZ957Vu-II3l0PcfZiTBsUDmDEQSkjQ4jXhYKOMD49Q5j4X6Imc11xbojRcSoyqGcGCTvlerFTzGo2iEQ08yfTg0IiyzQ8/s400/2.JPG" width="400" /></a></div><div class="separator" closure_uid_923ft5="471" style="clear: both; text-align: center;"><br />
</div><div closure_uid_923ft5="226"><span style="font-family: "Calibri", "sans-serif"; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">8.</span><span style="font-family: "Times New Roman", "serif"; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"> </span><span closure_uid_923ft5="381" style="font-family: "Calibri", "sans-serif"; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">A new document appears in Word 2010,choose “Enable Editing”. Go to File and observe that there are text boxes for the custom columns from the document library:</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4awXxz6m5ELZewXPWexcSqxtmsq0EAmA_t-XtA57R_ROaVqLprAHQMbBnhEgv4lwAZ1g9aVGD56hGXoh42FIQkL6mQSWiMVKcIfsmAQ6J4iABp94DF8bl1K7ZgJ8lsbc8aGmny3_YNE/s1600/3.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="249" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4awXxz6m5ELZewXPWexcSqxtmsq0EAmA_t-XtA57R_ROaVqLprAHQMbBnhEgv4lwAZ1g9aVGD56hGXoh42FIQkL6mQSWiMVKcIfsmAQ6J4iABp94DF8bl1K7ZgJ8lsbc8aGmny3_YNE/s640/3.JPG" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div closure_uid_923ft5="226"><span style="font-family: "Calibri", "sans-serif"; font-size: 10pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"></span><br />
9. On the Office menu click Save As. Save the document as %PATH OF YOUR CHOICE%\Contract.docx. If you are prompted to confirm saving to the new Word 2010 file format, click “Ok”.</div><br />
<br />
10. Insert content controls for each of the server properties:<br />
<em>o Place the selection in the document where you want the content control to be placed.</em><br />
<em>o Select the Insert tab on the ribbon.</em><br />
<em>o Click Quick Parts, then click Document Property, and then click “Emplyee”.</em><br />
<em>o Repeat these steps to add content controls in the document for the Employer and the Tax Amount properties.</em><br />
<em>o For now, leave the content controls empty – do not add text to them.</em><br />
<div closure_uid_923ft5="557"><br />
</div>11. On the Office menu, click Exit Word. When prompted to save changes to the document, click “Yes”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_fpbK9G6Gf7m3HhPYMMC-9hyNiDX0VP3YWchpW1ITtaPfLaUddG6e9WcZwo0ZARUswIKXC42BWfxpPp69SOICrE6EBWERpJiKssFAVPutmODumMFF6-W8SPAWIhQybT8p9XhjK-XXOg/s1600/4.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="238" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_fpbK9G6Gf7m3HhPYMMC-9hyNiDX0VP3YWchpW1ITtaPfLaUddG6e9WcZwo0ZARUswIKXC42BWfxpPp69SOICrE6EBWERpJiKssFAVPutmODumMFF6-W8SPAWIhQybT8p9XhjK-XXOg/s400/4.JPG" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div closure_uid_923ft5="230">12. Return to the document library in Internet Explorer, click Settings and then select Document Library Settings.</div><br />
<br />
13. On the “Customize Documents” page, locate the “Content Types” section and click the Document link.<br />
<br />
<span style="color: red;"><strong>14. NB. If you can’t locate the “Content Types” section, in the “General Settings” section locate “Advanced Settings” in there switch the radio button under “Allow management of content types” to “Yes”, now when you come back to the “Customize Documents” page you should be able to locate the “Content Types” section.</strong></span><br />
<div closure_uid_923ft5="233"><br />
</div><div closure_uid_923ft5="233"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a closure_uid_923ft5="608" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7kPhMHV81N7woRgDng92MzezP3nM97u00SdJ8hey81qqoIapJu6fQTdOYu3gLYc2YRLJjeE7LX0-81nIQjd9zbWuZ32-C24kwyK_M35Vhi_p6jn5Vy35Ylk2clELNStJUfErPzuCqXkc/s1600/5.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="329" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7kPhMHV81N7woRgDng92MzezP3nM97u00SdJ8hey81qqoIapJu6fQTdOYu3gLYc2YRLJjeE7LX0-81nIQjd9zbWuZ32-C24kwyK_M35Vhi_p6jn5Vy35Ylk2clELNStJUfErPzuCqXkc/s640/5.JPG" width="640" /></a></div><div closure_uid_923ft5="233">15. On the “List Content Type: Document page”, click the “Advanced Settings” link.</div><br />
<div closure_uid_923ft5="625"><br />
16. Select the Upload a new document template radio button and then click Browse. Browse to select %PATH OF YOUR CHOICE%\Contract.docx and then click Ok.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieCo5HBJ5MzwJv7eILIYkZlfs3EEvWeu0eZNKx1puGcHXItgNsrDsgO9snpvIzdEuAz08pR3WqsuSLhAjymhHbhuXolmDKBbauLeuLpxfO4ae05NmIvjiHbVlDozt9uSonKWp7oyiHy0/s1600/6.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="168" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieCo5HBJ5MzwJv7eILIYkZlfs3EEvWeu0eZNKx1puGcHXItgNsrDsgO9snpvIzdEuAz08pR3WqsuSLhAjymhHbhuXolmDKBbauLeuLpxfO4ae05NmIvjiHbVlDozt9uSonKWp7oyiHy0/s640/6.JPG" width="640" /></a></div><div closure_uid_923ft5="235"><br />
</div><div closure_uid_923ft5="235">17. In Internet Explorer, return to the document library.</div><br />
<br />
18. Upload a new document:<br />
<br />
<em>o In the document library, click the “New Document” Library Tools and then click “Document”. Word starts and loads a new document based on the contract template you created.</em><br />
<em>o Fill in the values for Title, Employee, Employer and TaxAmount. You can fill in the values on the document properties bar (just below the ribbon) or you can fill in the content controls: the end result will be the same.</em><br />
<em>o Once all required fields have been filled in, on the Office menu, click Save.</em><br />
<em>o Save the document with a filename of your choice to the document library. If you receive a message that the document must be checked in for it to be visible to others, click OK.</em><br />
<em>o On the Office menu, click Close. When prompted to check in the document, click “Yes”.</em><br />
<em>o In the Check In dialog, click Ok to accept the version defaults. Exit Word.</em><br />
<div closure_uid_923ft5="657"><em>o Your new document appears in the document library. Notice that the Employee, Employer and TaxAmount columns reflect the values you entered in the Word document.</em></div><div closure_uid_923ft5="659"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0g4PCbmYItIuUIr0QYz9JVmduAQwEVe68g0FMcMCGh6Q5BYnR5bGHpSmRU2kP3FlJ2Q-9SY6s6zcgD5W-N3CYN15nc2IJjNc3nXnrni_t3NVzWyUn29sVMcPNRwf-a-G7CFxqdLtsIQ/s1600/7.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="114" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0g4PCbmYItIuUIr0QYz9JVmduAQwEVe68g0FMcMCGh6Q5BYnR5bGHpSmRU2kP3FlJ2Q-9SY6s6zcgD5W-N3CYN15nc2IJjNc3nXnrni_t3NVzWyUn29sVMcPNRwf-a-G7CFxqdLtsIQ/s640/7.JPG" width="640" /></a></div><div closure_uid_923ft5="659"><br />
</div><div closure_uid_923ft5="658">19. You may upload additional documents if you wish.</div><br />
<br />
20. Close Internet Explorer.<br />
<br />
<div closure_uid_923ft5="237"><span style="background-color: white; color: blue;"><strong>Now comes the fun part, creating the workflow itself </strong></span></div><span style="background-color: blue;"><br />
</span><br />
<div closure_uid_923ft5="248">21. Start Visual Studio.</div><br />
22. On the File menu, click New and then click Project. The New Project dialog appears.<br />
<br />
23. In the list of Project Types, expand SharePoint select 2010.<br />
<br />
24. Select the Sequential Workflow project type.<br />
<br />
25. Name the project TaxWorkflow, specify the default location and click “OK”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9s81vmZc-wBYg_gyRIJ_uS7W90UvstJL2oT16tTj7iDSY6jJzSygJ3R1GqjUSEN-i6-qVmbtUR2Zv3_f1hsuVezdqdGQ7slPvF-Tzo3oR8miNI8VTUK0yiHy2XIuKzHEYXGwT5s4j_0/s1600/8.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="326" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9s81vmZc-wBYg_gyRIJ_uS7W90UvstJL2oT16tTj7iDSY6jJzSygJ3R1GqjUSEN-i6-qVmbtUR2Zv3_f1hsuVezdqdGQ7slPvF-Tzo3oR8miNI8VTUK0yiHy2XIuKzHEYXGwT5s4j_0/s640/8.JPG" width="640" /></a></div> <br />
<div closure_uid_923ft5="250"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><span closure_uid_923ft5="249" style="font-family: Calibri;">26.</span></span><span style="font-family: "Times New Roman", "serif"; mso-fareast-font-family: "Times New Roman";"> </span><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;">The New SharePoint Workflow wizard appears. Change the workflow name to TaxWorkflow, use your local site where you created your Document Library (eg http://localhost/yoursite) for debugging and click “Next”.</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9y7wiJQ7-uH-X8T_B8uTC57W3ZXVBXAYIQTvjjkcz8fSmkXqI5FEkYxi9mbXFbo9vaLEK94NqgTDrdC-2D0ZhDoR2pzcC9HxRLSYIzKwIH5YQfye4oVCA3fJO4Do82oFHE3nBV6WrNo/s1600/9.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="456" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9y7wiJQ7-uH-X8T_B8uTC57W3ZXVBXAYIQTvjjkcz8fSmkXqI5FEkYxi9mbXFbo9vaLEK94NqgTDrdC-2D0ZhDoR2pzcC9HxRLSYIzKwIH5YQfye4oVCA3fJO4Do82oFHE3nBV6WrNo/s640/9.JPG" width="640" /></a></div><div closure_uid_923ft5="250"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"></span></div>27. Select ListWorkflow and press next, and then choose the default debug setting and library to associate workflow with<br />
<br />
<div closure_uid_923ft5="252"><span style="color: red;"><strong>Note: If History, Task List is not presented it would not let you create the workflow, please create Task lIst in case of a blank Site template.</strong></span></div><div closure_uid_923ft5="252"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQtfyhK8mAuHyFId15v3wawPyXH8UOuiMpIdS0ZCOLNxUnlTQSD381y_Kg604KKcnWw4eUONWcnblKyeH41iVlfTy5tw7WrJLe10WliPFlKbe8HvjV3F7UHf9gMFzTZtqmbMda-aMnqxw/s1600/10.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="466" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQtfyhK8mAuHyFId15v3wawPyXH8UOuiMpIdS0ZCOLNxUnlTQSD381y_Kg604KKcnWw4eUONWcnblKyeH41iVlfTy5tw7WrJLe10WliPFlKbe8HvjV3F7UHf9gMFzTZtqmbMda-aMnqxw/s640/10.JPG" width="640" /></a></div><div closure_uid_923ft5="793"><br />
</div>29. The new workflow appears in the designer.<br />
<div closure_uid_923ft5="253"><br />
</div><div class="separator" style="clear: both; text-align: center;"></div><div closure_uid_923ft5="254"><br />
</div><div closure_uid_923ft5="254"><span style="color: blue;"><strong>Add a CreateTask Activity to the Workflow </strong></span></div><br />
<br />
30. If the toolbox is not displayed, then on the View menu, click Toolbox.<br />
<br />
31. From the SharePoint Workflow tab on the control toolbox, drag a CreateTask activity and drop it onto the workflow designer between onWorkflowActivated1 and the end of the workflow ( ). The new activity is named createTask1 by default.<br />
<div closure_uid_923ft5="255"><br />
</div><div closure_uid_923ft5="255"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRGMucKuhDlJ6GogjF-Nsrz540k_asMPLLBOZ-hTVxL7WdJPahEwAd6XoOJa3I1fEWxPDbs2Fd7zZ5XMR2nu108XCcz4zh6W5RKVrR0ZwwsjXsW7A8iZ8zG85dRarEXCZorUguYA8q88/s1600/12.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRGMucKuhDlJ6GogjF-Nsrz540k_asMPLLBOZ-hTVxL7WdJPahEwAd6XoOJa3I1fEWxPDbs2Fd7zZ5XMR2nu108XCcz4zh6W5RKVrR0ZwwsjXsW7A8iZ8zG85dRarEXCZorUguYA8q88/s1600/12.JPG" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div closure_uid_923ft5="255"><br />
</div><div closure_uid_923ft5="255"><br />
</div><div closure_uid_923ft5="255"><br />
</div><div closure_uid_923ft5="255">32. Configure the TaskID property of createTask1:</div><br />
o In the Properties window, click the ellipsis for the value of the TaskID property. The Bind ‘TaskID’ to an activity’s property dialog appears.<br />
o Type the new member name myTaskId, ensure that the Create property radio <>button is selected and click OK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuzdsmszlFJHN4auJ0x4euQlzaLoUSBzfmUfcCmopVXOPWFXRDx9SjggfGe1NddYEskN7enFbTrUcDov6Hpy4QNhqXMwRME2JQiw04-LNl0bq_vvQyQ9QPd15Wo20Jyfqjv3UZ_vAFII/s1600/13.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="322" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuzdsmszlFJHN4auJ0x4euQlzaLoUSBzfmUfcCmopVXOPWFXRDx9SjggfGe1NddYEskN7enFbTrUcDov6Hpy4QNhqXMwRME2JQiw04-LNl0bq_vvQyQ9QPd15Wo20Jyfqjv3UZ_vAFII/s400/13.JPG" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<div closure_uid_923ft5="257"><br />
</div><div closure_uid_923ft5="257">33. Configure the TaskProperties property of createTask1:</div><br />
o In the Properties window, click the ellipsis for the value of the TaskProperties property. The Bind “TaskProperties” to an activity’s property dialog appears.<br />
o Type the new member name “myTaskProperties”, ensure that the Create property radio button is selected and click OK.<br />
<br />
34. In the properties window, select the MethodInvoking handler. Type MyTaskCreation and press the Enter key. The code window appears.<br />
<br />
35. Add code to the MyTaskCreation event handler and also add the CustomFieldText function.<br />
<br />
<br />
<pre closure_uid_923ft5="1245" style="background-color: #eeeeee; border-bottom: rgb(153,153,153) 1px dashed; border-left: rgb(153,153,153) 1px dashed; border-right: rgb(153,153,153) 1px dashed; border-top: rgb(153,153,153) 1px dashed; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; height: 405px; line-height: 14px; overflow: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 108.09%;"><textarea closure_uid_923ft5="1239" closure_uid_ibegf0="122" cols="73" rows="11" style="height: 391px; width: 694px;"> private void MyTaskCreation(object sender, EventArgs e)
{
try
{
myTaskID = Guid.NewGuid();
myTaskProperties = new Microsoft.SharePoint.Workflow.SPWorkflowTaskProperties();
myTaskProperties.PercentComplete = (float)0.0;
myTaskProperties.AssignedTo = System.Threading.Thread.CurrentPrincipal.Identity.Name;
myTaskProperties.DueDate = DateTime.Now.AddDays(3);
myTaskProperties.StartDate = DateTime.Now;
myTaskProperties.Title = "Tax Report Workflow";
myTaskProperties.Description = String.Format("This is a Tax Report for {0} [Employee] working with {1} . " + "The Tax amount is {2}.",
CustomFieldValue("Employee"),
CustomFieldValue("Employer"),
CustomFieldValue("TaxAmount"));
}
catch (Exception ex)
{
//Add exception handling
throw (new Exception("Unable to initialize task.", ex));
}
}</textarea>
</pre><br />
<br />
<br />
<pre style="background-color: #eeeeee; border-bottom: rgb(153,153,153) 1px dashed; border-left: rgb(153,153,153) 1px dashed; border-right: rgb(153,153,153) 1px dashed; border-top: rgb(153,153,153) 1px dashed; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><textarea closure_uid_923ft5="1239" closure_uid_ibegf0="122" cols="68" rows="5" style="height: 275px; width: 639px;"> private string CustomFieldValue(string fieldName)
{
try
{
object item = this.workflowProperties.Item[fieldName];
string s = this.workflowProperties.Item.Fields[fieldName].GetFieldValueAsText(item);
return s;
}
catch (Exception ex)
{
return String.Empty;
}
}
</textarea>
</pre><br />
<br />
<br />
<br />
<br />
<br />
36. On the View menu, click Designer to return to the workflow designer.<br />
<br />
<br />
37. In the Properties window, select the text box for the CorrelationToken property value. Type myTaskToken and press the Enter key.<br />
<br />
38. Expand the CorrelationToken property to display the OwnerActivityName subproperty.<br />
<br />
39. For the OwnerActivityName subproperty, select Workflow1 in the dropdown.<br />
<br />
Add a While Activity to the Workflow <br />
<br />
40. If the toolbox is not showing, then on View menu, click Toolbox.<br />
<br />
41. Drag a While activity and drop it between createTask1 and the end of the workflow ( ). The new activity is named whileActivity1 by default.<br />
<br />
42. In the Properties window, locate the Condition property for whileActivity1.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEtECanCZthhOGlmZhCpSd-jWsHyMWqk_LXu4nrv_OQQ7teb51utG4jOr9u4c_c5mrzmKWI4qiLemeXkYL-UWTF-ggaxizwhRPAi69sNUhOro9Z5NefVwQIUlZyKeWuj-Ei89HRGOkyWg/s1600/14.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEtECanCZthhOGlmZhCpSd-jWsHyMWqk_LXu4nrv_OQQ7teb51utG4jOr9u4c_c5mrzmKWI4qiLemeXkYL-UWTF-ggaxizwhRPAi69sNUhOro9Z5NefVwQIUlZyKeWuj-Ei89HRGOkyWg/s320/14.JPG" width="270" /></a></div><div closure_uid_923ft5="957"><br />
</div><div closure_uid_923ft5="258"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><br />
</div><div closure_uid_923ft5="982"><div closure_uid_923ft5="1240"><span style="font-family: "Calibri", "sans-serif"; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">43.</span><span style="font-family: "Times New Roman", "serif"; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"> </span><span style="font-family: "Calibri", "sans-serif"; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">Select Code Condition in the property value</span></div><div closure_uid_923ft5="1240"><br />
</div></div><div closure_uid_923ft5="956">44. Expand the Condition property to display the Condition subproperty.</div><br />
• 1. For the Condition subproperty, type myTaskNotCompleted and press the Enter key. The myTaskNotCompleted event handler appears in the code window.<br />
• 2. In the Workflow1 class, add the taskCompleted variable at the class-level.<br />
<br />
<br />
<pre closure_uid_923ft5="1249" style="background-color: #eeeeee; border-bottom: rgb(153,153,153) 1px dashed; border-left: rgb(153,153,153) 1px dashed; border-right: rgb(153,153,153) 1px dashed; border-top: rgb(153,153,153) 1px dashed; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; height: 64px; line-height: 14px; overflow: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><textarea closure_uid_923ft5="1239" closure_uid_ibegf0="122" cols="68" rows="5" style="height: 275px; width: 639px;">private bool taskCompleted = false;</textarea>
</pre><br />
<br />
<br />
• 3. Add code to the myTaskNotCompleted event handler that will return a result indicating whether or not the task has completed; the task is completed when its PercentComplete property is 1.0.<br />
<br />
<pre style="background-color: #eeeeee; border-bottom: rgb(153,153,153) 1px dashed; border-left: rgb(153,153,153) 1px dashed; border-right: rgb(153,153,153) 1px dashed; border-top: rgb(153,153,153) 1px dashed; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><textarea closure_uid_923ft5="1239" closure_uid_ibegf0="122" cols="68" rows="1" style="height: 98px; width: 639px;"> private void MyTaskNotCompleted(object sender, ConditionalEventArgs e)
{
e.Result = !taskCompleted;
}
</textarea>
</pre><br />
<br />
Add an OnTaskChanged Activity to the Workflow<br />
<br />
48. On the View menu, click Designer. <br />
<br />
49. If the toolbox is not visible, then on the View menu, click Toolbox.<br />
<br />
50. From the SharePoint Workflow tab on the toolbox, drag an OnTaskChanged activity and drop it in the center of whileActivity1. The new activity is named onTaskChanged1 by default.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRouqeU78W7nno5hgk5L8qo6x6_sjFhy2zc_VE7TSycvQgnFlWVnRvquPzSZCNlE10oqPs-zNBKm5pLcbr7LiIz03It1Z4DsPd3BcE6wt0kKRNq_gK0xWWlCgF91-0meyIg4-aMJK5eQ/s1600/15.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRouqeU78W7nno5hgk5L8qo6x6_sjFhy2zc_VE7TSycvQgnFlWVnRvquPzSZCNlE10oqPs-zNBKm5pLcbr7LiIz03It1Z4DsPd3BcE6wt0kKRNq_gK0xWWlCgF91-0meyIg4-aMJK5eQ/s320/15.JPG" width="260" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
51. In the Properties window, set the CorrelationToken property of onTaskChanged1 to myTaskToken. <br />
<br />
<br />
52. Set the AfterProperties property of onTaskChanged1:<br />
<div closure_uid_923ft5="1009"><br />
</div><em>o In the Properties window, select the ellipsis for the AfterProperties property.</em><br />
<em closure_uid_923ft5="1010">o On the Bind ‘AfterProperties’ to an activity’s property dialog, select the Bind to new member tab.</em><br />
<em>o Name the new member afterMyTaskPropertyChange, ensure that the Create Property radio button is selected and click OK.</em><br />
<div closure_uid_923ft5="1008"><br />
</div><div closure_uid_923ft5="1008">53. Set the TaskId property of onTaskChanged1:</div><br />
<em>o In the Properties window, select the ellipsis for the TaskId property.</em><br />
<div closure_uid_923ft5="1013"><em closure_uid_923ft5="1012">o On the Bind to an existing member tab, select the myTaskId property and click OK.</em></div><div closure_uid_923ft5="1011"><br />
</div><div closure_uid_923ft5="1011">54. Double-click onTaskChanged1 in the workflow designer. The Invoked event handler for onTaskChanged1 appears in the code window. </div><br />
55. Add code to onTaskChanged1_Invoked that will set the taskCompleted variable to true when the PercentComplete property of the task is 1.0.<br />
<div closure_uid_923ft5="259"><br />
</div><div closure_uid_923ft5="260"><pre style="background-color: #eeeeee; border-bottom: rgb(153,153,153) 1px dashed; border-left: rgb(153,153,153) 1px dashed; border-right: rgb(153,153,153) 1px dashed; border-top: rgb(153,153,153) 1px dashed; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><textarea closure_uid_923ft5="1239" closure_uid_ibegf0="122" cols="68" rows="4" style="height: 127px; width: 639px;"> private void onTaskChanged1_Invoked(object sender,ExternalDataEventArgs e)
{
if (afterMyTaskPropertyChange.PercentComplete == 1.0)
{
taskCompleted = true;
}
}
</textarea>
</pre></div><div closure_uid_923ft5="260"><br />
</div><div closure_uid_923ft5="260">56. In the Workflow1 class, set breakpoints on the MyTaskCreation and onTaskChanged1_Invoked methods.</div><br />
<span closure_uid_923ft5="1016" style="color: red;">Note: To set the breakpoints, select the first line of each method in the code windowand press the F9 key.</span><br />
<br />
57. Press F5 to start debugging the project.<br />
<br />
<div closure_uid_923ft5="1017"><span style="color: red;">Note: Watch the output window as the project is built and deployed. The output window shows you many of the steps that VSTO takes for deploying the workflow solution - without VSTO, these are all steps that you would take manually. One of the SharePoint requirements for a new workflow solution is that the SharePoint worker process and IIS must be restarted; thus build/deploy times may vary.</span></div><span style="color: red;"><br />
</span><br />
58. Internet Explorer starts and displays the document library with the document(s) that you uploaded.<br />
<br />
<span style="color: red;"><strong>Note: You might encounter the following warning (below), if you do, click “No” do as it said and start again.</strong></span><br />
<div closure_uid_923ft5="262"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7mwEErxpfakdAROwgOWZFP1-anbG1TTVa3xf3smPdpgxuPLt6p6hEHFGPi3CLZ3CBcmKGc8Gy5objQIE6twMpUudpnOoQWZIGTIYuFMF2dfrPnqfvCh3G0yDXwIAj-E1X5_gnKj08IA/s1600/16.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="162" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7mwEErxpfakdAROwgOWZFP1-anbG1TTVa3xf3smPdpgxuPLt6p6hEHFGPi3CLZ3CBcmKGc8Gy5objQIE6twMpUudpnOoQWZIGTIYuFMF2dfrPnqfvCh3G0yDXwIAj-E1X5_gnKj08IA/s400/16.JPG" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div closure_uid_923ft5="262"><br />
</div><div closure_uid_923ft5="262"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><span closure_uid_923ft5="264" style="font-family: Calibri;">59.</span></span><span style="font-family: "Times New Roman", "serif"; mso-fareast-font-family: "Times New Roman";"> </span><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;">Next Just upload a new document and will able to see the current progress:</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLLhgvX3VSr8nK6WWWUXwoMY3qs9C8T8avHzOadfjsMhuJr28K49x99fJaw_IHVGTTXT_cDX3ub9aUoPEw8pqEXwRxLxHNeT5oKwM1AWLzQl_rbc-vTwVV8u1dRwhyphenhyphenRMEAM8lyp_9YMs/s1600/17.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="132" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLLhgvX3VSr8nK6WWWUXwoMY3qs9C8T8avHzOadfjsMhuJr28K49x99fJaw_IHVGTTXT_cDX3ub9aUoPEw8pqEXwRxLxHNeT5oKwM1AWLzQl_rbc-vTwVV8u1dRwhyphenhyphenRMEAM8lyp_9YMs/s640/17.JPG" width="640" /></a></div><div closure_uid_923ft5="262"><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><span closure_uid_923ft5="266" style="font-family: Calibri;">60.</span></span><span style="font-family: "Times New Roman", "serif"; mso-fareast-font-family: "Times New Roman";"> </span><span style="mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><span style="font-family: Calibri;">Then go Tasks List.</span></span></div><div closure_uid_923ft5="262"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43WudwmcSce5M1cJ5Mi1KmenpOtk1cjKygehaUQ5TYLpKlg4kcsfiNSZIwz9wVGNsIc37kAlgU2O_zmnCfTa6q1J1x6A9v1r3svLz-AACIxFPufeTX_nYx-IKr8c4tALupT1WlML772c/s1600/18.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="99" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43WudwmcSce5M1cJ5Mi1KmenpOtk1cjKygehaUQ5TYLpKlg4kcsfiNSZIwz9wVGNsIc37kAlgU2O_zmnCfTa6q1J1x6A9v1r3svLz-AACIxFPufeTX_nYx-IKr8c4tALupT1WlML772c/s640/18.JPG" width="640" /></a></div><div closure_uid_923ft5="262"><br />
</div><div closure_uid_923ft5="262"><span style="font-family: "Times New Roman", "serif"; line-height: 115%; mso-fareast-font-family: "Times New Roman";">61.You can see a new task created above.</span></div><div closure_uid_923ft5="262"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdParb-6b-738TACLKVoAqgn7N8hM995IpvxyFX6H1zB-XlGbZXVYLfASfPRBlZfeduqR1UESqM9GjNwR6s2XWV_Mr1PA2jaZpB-Y-3MSlG5NP_-ySuoRbvR-8rMwgZXfpDEkjjOlgPg/s1600/19.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="536" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdParb-6b-738TACLKVoAqgn7N8hM995IpvxyFX6H1zB-XlGbZXVYLfASfPRBlZfeduqR1UESqM9GjNwR6s2XWV_Mr1PA2jaZpB-Y-3MSlG5NP_-ySuoRbvR-8rMwgZXfpDEkjjOlgPg/s640/19.JPG" width="640" /></a></div><div closure_uid_923ft5="262"><br />
</div><div closure_uid_923ft5="262">Go Ahead and Edit the document and you can see the status as above.</div><div closure_uid_923ft5="1158"></div><br />
<div closure_uid_923ft5="270">Just make it 100% complete.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a closure_uid_923ft5="1211" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkY3SugJVd9HHD9OWOpWFW63aYP73AtXcOD-m0kY-NvYmrjgOwG8QzPioPZQ7H4qLxXKBwLbTU8GxAhI5nTvYLkSQGE88fsHyyamKRI0txVn1651cjg-xzJa3b7XHajCYnHfu-lpp8pPI/s1600/20.JPG" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="80" qaa="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkY3SugJVd9HHD9OWOpWFW63aYP73AtXcOD-m0kY-NvYmrjgOwG8QzPioPZQ7H4qLxXKBwLbTU8GxAhI5nTvYLkSQGE88fsHyyamKRI0txVn1651cjg-xzJa3b7XHajCYnHfu-lpp8pPI/s640/20.JPG" width="640" /></a></div><br />
<br />
<br />
<div closure_uid_923ft5="269"><span closure_uid_923ft5="268" style="font-family: "Times New Roman", "serif"; mso-fareast-font-family: "Times New Roman";"><span style="color: blue;"><strong>And you can see that TaxWorkflow Completed...</strong></span></span></div><br />
<br />
<br />
<br />
<br />
</div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com1Noida, Delhi, India28.58 77.32999999999992726.16859 73.59464849999992 30.99141 81.065351499999935tag:blogger.com,1999:blog-2179939415242111485.post-82892243832199601602011-07-11T04:06:00.000-07:002011-07-11T04:06:13.337-07:00CLAIMS BASED AUTHENTICATION in SharePoint 2010<b>Authentication??</b><br />
<br />
Authentication, in simple English, we say “<b>The Person is Actually the one what he/she claims to be</b>”.<br />
<br />
<div class="MsoNormal" style="margin: 0in 0in 10pt;"><span style="font-family: Calibri;">Like in Famous James Bond Series, if Black Suited, Maybach Driving guy says to you, HI I am Bond , James Bond, will you seriously going to believe him, until or unless you see his ID or “Solid Action” the same thing implies with Technology, and we have to provide a way to our websites, so that<span style="mso-spacerun: yes;"> </span>system can authenticate this is the James actually trying to Login the Site.</span></div><div class="MsoNormal" style="margin: 0in 0in 10pt;">Microsoft Provides for example <strong>Active Directory</strong>, in which we can create rules belongs to person and Groups and let the system recognize the access accordingly.</div><br />
Suppose if James tries to login to our site and he is member of <strong>007 Active Directory</strong> and yes it does have access to our site, so James will get access. Till the time our site is running on the basis of Active Directory to which all users of site belong we will have no issue,we don’t need Claims Based Authentication in this .<br />
<br />
but this is not the case in General.<br />
<br />
<strong>So where does requirement comes:</strong><br />
<br />
<br />
1. Sometimes Rules, Company Laws, etc doesn’t allow to capture everything and publish on the sites, means we cannot ask a user to provide all his personal information and place it on an open internet site.<br />
Example, why a girl who is actually a lady but doesnt look too aged, like to reveal his age to anyone.<br />
<br />
2. We work in a Network Environment, where Business Communicates with Other Business and not everyone does have the same Active Directory Authentication and even if they have then it might not be necessary that it will have the same instance of “AD”, Still organization like to provides maximum integration facilities to its users.<br />
<br />
So here we go with <strong>Claims Based Authentication</strong>, it addresses the above challenges.<br />
<br />
It addresses <strong>privacy and ask very less personal Information from the user</strong> and by<strong> trusting</strong> other parties or systems to do the “<strong>proof of identity</strong>” <strong>check</strong>.<br />
<br />
<strong>So what does Claims Based Authentication do?</strong><br />
<br />
Suppose we have to create a site for a “Pharma Company” which sales its medicines worldwide, called xyzPharma.<br />
<br />
But hold on Before implementing authentication, we need to make sure that are we implementing the thing which will pass legal laws of Global Countries, take for example in U.S there are many Supplements/ Shampoos or even drugs which are banned but they are legal in Some other company, so if we have to make this implementation cut to clear then how can we do it, answer is very simple ”Claims Based Authentication”, at the same time we need not to ask who actually the person is,!<br />
<br />
<br />
<br />
<blockquote>It turns out that in the country, the Government has set up a web service that users log on to, which authenticates them based on their citizenId and citizenPassword. It then is able to tell other systems that a user is their country citizen or not, without revealing who that user is.<br />
<br />
So we implement our “xyz pharma” website by building a claims-aware system. Instead of building the standard “username and password” login mechanisms, we simply ask the Government’s web service to tell us if the user browsing our site is of which country. The claim that our system uses is a “userCountry” claim, and the claim value is either yes or no. We simply don’t build any authentication system at all beyond a simple “if (userIsofCountry) then..“ statement. </blockquote><br />
<br />
By doing this, we address privacy concerns – we don’t know or keep personally identifiable information – while at the same time ensuring that we don’t sell drugs to someone where it is banned. <br />
<br />
Claims Based Authentication:<br />
<br />
<br />
It actually integrates the different systems by allowing communication via open standards and does provide platform to develop more specialized “identity connectors” between systems.<br />
<br />
<br />
<br />
<strong>How is it implemented?</strong><br />
<br />
The claims-based authentication implementation has a number of components. In simplified terms here’s how the pieces of technology fit together.<br />
<br />
<blockquote><span style="color: blue;">• From a developer’s point of view, the platform that Microsoft is providing is called the Windows Identity Foundation. This used to be called the Geneva framework. It provides a programming library suitable for building claims-aware applications. This library is also used by SharePoint 2010.</span><br />
<span style="color: blue;"><br />
</span><br />
<span style="color: blue;">• Active Directory Federation Services implements services to create, accept, and transform tokens that contain claims. </span><br />
<span style="color: blue;"><br />
</span><br />
<span style="color: blue;">• Cardspace provides a user interface for users to select which “identity card” they wish to use for a particular system</span></blockquote><br />
<br />
For More details read this very good article on Claims Based Authentication:<br />
<a href="http://www.pascalbonheur.com/2010/03/claims-based-authorization-in-sharepoint-2010-real-life-example-part-1/">Claims Based Authentication-Part1</a>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-76560698066824550132011-05-26T23:40:00.000-07:002011-05-27T00:04:43.571-07:00How To add a pdf icon in Sharepoint sites<div dir="ltr" style="text-align: left;" trbidi="on">So, Why not pdf icons are included in sharepoint? <br />
Let the answer be unspoken. <br />
but how to add that, so when we create a doccument library, icon will appear when we upload a pdf file? <br />
<br />
So here we go with steps. <br />
<br />
1)Copy pdf_smallicon from adobe site. <br />
2)Open 12\Template\Images folder <br />
3)Paste it in that. <br />
4)open Docicon.xml file which is over here : 12\Template\XML\Docicon.xml <br />
5)Go to <byextension>tag <br />
6)Add this <br />
<pre style="background-color: #eeeeee; border-bottom: rgb(153,153,153) 1px dashed; border-left: rgb(153,153,153) 1px dashed; border-right: rgb(153,153,153) 1px dashed; border-top: rgb(153,153,153) 1px dashed; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><textarea cols="68" rows="4" style="height: 127px; width: 639px;"><mapping key="pdf" value="pdficon_small.gif">
<mapping key="accdt" value="icaccdb.gif">
<mapping key="accdc" value="icaccdb.gif">
<mapping key="asax" opencontrol="" value="icasax.gif">
</textarea>
</pre>7)Thats all, go ahead upload any pdf file now and see the magic...</div>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-64957717552178671592011-05-26T23:11:00.000-07:002011-05-27T00:07:51.374-07:00LINQ to Sharepoint 2010.LINQ (New Data Access Paradigm), when i hear it for the first time, i was sitting in a seminar and dotnet geeks were giving long lectures on it.It will make developer's life more easy.....<br />
<br />
LINQ is a new data access paradigm which allows users to express SQL like syntax against a variety of data sources. LINQ can improve performance by allowing the back end data source to decide the best way to solve the query.<br />
Was Amazed when used it in 2007 days for filtering CAML returned data.<br />
<br />
CRUDQ options were allready there for maiking things good for us. but still there was something easy to implement was missing.<br />
<br />
And finally with 2010 Microsoft given us LINQ to SharePoint.<br />
Namespace Microsoft.SharePoint.Linq.<br />
<br />
For people who are wondering , what is the use of it when we have CAML and more things availlable.<br />
<br />
So for those the answer i have is its very fast, Even perform all CRUDQ options, you can bring data from multiple List and as well its very easy to write and intelliscence support we have for gettting the column names and more of the things for which we struggled alot in past looking deeper in internal names of the columns ows_xyz...<br />
<br />
SharePoint now fully supports LINQ for querying lists so that you can query information from the platform in a more condensed, easier to understand format. <br />
<br />
<br />
<br />
SPMETAL, the new command line utillity we have for providing the basic structure for LINQ.<br />
<br />
In this Post i will be sharing my own experience of working with it and using LINQ to SHAREPOINT.<br />
<br />
Writing LINQ queries are very easy but tricky things comes with SPMETAL generated code and how to use SPMETAL utillity and usage of Parameters.xml as parameter file in the command line and as well the way of utillizing the data fetched by LINQ query on EntityList.<br />
<br />
First we will take the brief on how LINQ does the Processing(building CAML in the background and then we will come to SPMETAL and way to create the code using Parameter.xml and also i will take the case what if some fields doesnt appear the code file,how to do hard fixing(the term i normally say) )<br />
<br />
Next i will explain, how to query with scope recurssive when querying Document Library for Folders.<br />
<br />
In the end i will explain how to bind the data to a GridView with Template Columns to the Ienumerable list of data returned by LINQ query.Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-6202529005649999252011-02-14T00:29:00.000-08:002011-02-14T01:13:52.877-08:00MOSS to Sharepoint 2010 site Upgrade<strong>Hello Folks Now as we have SharePoint 2010, most of us are looking forward to upgrade their present Moss site to their new SharePoint 2010 farm</strong>, this blog of mine will represent that only:<br /><br />Just follow these steps:<br /><strong></strong><br /><strong>Requirements</strong><br />Before we Begin to do this amazing task let us discuss our requirements:<br />1) SharePoint Server 2010.<br />2) SQL Management Studio 2010.<br />Also the requirement is that the MOSS or wss site from which we are going to migrate to 2010 should be hosted in a farm with SP2 Upgrades of respective versions.<br /><br /><strong>Initial Preperation</strong><br />Following are the tasks which we are going to do here:<br />1) First take the Backup of MOSS/WSS hosted web application using SQL Management Studio 2005.<br />Remember we have to be very concise about naming of the backups, it should be consistent and same, with what is there right now, that’s why with MOSS SDK , Microsoft suggests:” please do change the name of Content Database while creating a web application”. See Below the best practice for creating a web application:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdabq0X5dxc_a33qrZ6okg_9He9J8IKHq4N3WtCPLWzuCj_17idaWVkDbw5uKkZeKy5FErGlcAOIsfbV3mQOC_UQTptTvGCyjSp0r9w9ULB3Nj5iVqqjChQk8niRFuTRGmPavDfLbJyk/s1600/1_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 300px; HEIGHT: 144px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573461611190679106" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdabq0X5dxc_a33qrZ6okg_9He9J8IKHq4N3WtCPLWzuCj_17idaWVkDbw5uKkZeKy5FErGlcAOIsfbV3mQOC_UQTptTvGCyjSp0r9w9ULB3Nj5iVqqjChQk8niRFuTRGmPavDfLbJyk/s400/1_blog.JPG" /></a><br /><br /><br /><br /><br /><strong>NOTE: </strong>we are migrating whole web application, so whatever sites will be there in web application will get migrated as well.<br />This is application Based migration.<br /><br /><strong>•Taking Backup(on MOSS/WSS Farm)</strong><br /><br /><br /><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEY6vIf43pvPvZJRS-ea_b4VxID-B-wtuxya30KNBgOyH_mUPQvpNyO0_mnWkg0gY2Mqu2Ukqk8lUjDg9WpMS7ljKLzhdfoGAbJPXuSkeYwYYDvPL-tnC8RzQMDwjENDo2Hf_4dUvW-4/s1600/2_Blog.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 218px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573462284331729010" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEY6vIf43pvPvZJRS-ea_b4VxID-B-wtuxya30KNBgOyH_mUPQvpNyO0_mnWkg0gY2Mqu2Ukqk8lUjDg9WpMS7ljKLzhdfoGAbJPXuSkeYwYYDvPL-tnC8RzQMDwjENDo2Hf_4dUvW-4/s400/2_Blog.JPG" /></a><br /><br /><strong>For taking back up follow these steps:</strong><br />1) Go to Microsoft Sql management studio 2005, open the relative Sqlserver instance and then look for the “WSS_Content_31477”, which we created specifically for this application.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizBHMdvxBWceEMLIJq3Uw8hj1oSE4jXBGbjURdzRvl1dFkO6P_IKpjQ0uINPIbIb4GsnSMG7od6O87lQoiKiaZEUUn_ZDVZ_Q4ktfUVmhKfTvoq3SA6cYy37wF3XzT4-R2mKyR5hwedNc/s1600/3_Blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 322px; FLOAT: left; HEIGHT: 354px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573462658503451826" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizBHMdvxBWceEMLIJq3Uw8hj1oSE4jXBGbjURdzRvl1dFkO6P_IKpjQ0uINPIbIb4GsnSMG7od6O87lQoiKiaZEUUn_ZDVZ_Q4ktfUVmhKfTvoq3SA6cYy37wF3XzT4-R2mKyR5hwedNc/s400/3_Blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />After restoring the database, Now provide the Web Application’s application pool Identity user <strong>“dbo.owner”</strong> rights for this database.<br /><br /><strong>•Creating a Web Application in 2010</strong><br />Now we will create a web application and on this application we will attach our WSS_Content_31477 database.<br />Go to central admin, create a new web application, please name the content database keeping in mind that we have to remove this later.<br />Go to manage applications and create a new web application:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjba4KThen85UHeDJhhiB-vBxdDxY3W-TEs7VJ7uKCXGX46fALmRB-es8qoI5MWNbZWhOoPus0RZLxUeDd7pFkNcQ_8tkbwgL_gEaHGsR9Rxv22jzv9XmWDMHiWhytgx_LNg7-L0SIzto8/s1600/4_Blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; HEIGHT: 114px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573463031567237890" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjba4KThen85UHeDJhhiB-vBxdDxY3W-TEs7VJ7uKCXGX46fALmRB-es8qoI5MWNbZWhOoPus0RZLxUeDd7pFkNcQ_8tkbwgL_gEaHGsR9Rxv22jzv9XmWDMHiWhytgx_LNg7-L0SIzto8/s400/4_Blog.JPG" /></a><br /></p><p><br /></p><p></p><p>Now we will delete its current database and attach our own database,<br />For doing that go to manage content database and select the current web application<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSQ9Ez0UQMl5S0GOlUn5ySBwV1bGjqG6HAbIDm_A4EcqDF_FjBkQn-O3PyaqJsqRaJn7C3gqLh767IWqqQ6QLof6P5ETxkw1vCsZ_ipK0X5vfp71ZuLcORfShg438l2nJrv0ML0j50SM/s1600/5_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; HEIGHT: 57px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573463290249716962" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSQ9Ez0UQMl5S0GOlUn5ySBwV1bGjqG6HAbIDm_A4EcqDF_FjBkQn-O3PyaqJsqRaJn7C3gqLh767IWqqQ6QLof6P5ETxkw1vCsZ_ipK0X5vfp71ZuLcORfShg438l2nJrv0ML0j50SM/s400/5_blog.JPG" /></a><br /></p><p><br />Click on this particular database, Make the status to OFFLINE: </p><p><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TmMBhwrJw0dE7dSR0ufsIcjF1tpcspoeaJs-EvYCwGvWtcIAzxwW0CYLuwZ85k4O5Fhf-cGxpY9Ayooo8cjjzhBBdj6TkT5oL8-H-8oIRRwJbz3f7MbaieaoqAL_284Zb0SiEymce-Q/s1600/6_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 241px; FLOAT: left; HEIGHT: 224px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573463573391261618" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TmMBhwrJw0dE7dSR0ufsIcjF1tpcspoeaJs-EvYCwGvWtcIAzxwW0CYLuwZ85k4O5Fhf-cGxpY9Ayooo8cjjzhBBdj6TkT5oL8-H-8oIRRwJbz3f7MbaieaoqAL_284Zb0SiEymce-Q/s400/6_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />And press ok with Remove content database selected.<br />Now we have done with our detaching of database, now we will add our database to this web application using Powershell.<br />Open Sharepoint Powershell command prompt.<br />And write this command:<br /></p><blockquote>Mount-SPContentDatabase –Name WSS_Content_31477<br />–WebApplication “http://nameofwebapplication:port/</blockquote><br />A timer will start:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVRDZuUBrHYu_p2CVV8NFMJWdeWbikyw7CG_Xlca8C3TbH91-pJokQgIzy3nzh84g1Ol3hQD13lU_6Ddx5OtvD9Mbz67O_oFaAY5C1ZTDGMsVk5IvEDOl53GV7d261UCH4K-TFJLwP90/s1600/7_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; FLOAT: left; HEIGHT: 116px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573463998447499106" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVRDZuUBrHYu_p2CVV8NFMJWdeWbikyw7CG_Xlca8C3TbH91-pJokQgIzy3nzh84g1Ol3hQD13lU_6Ddx5OtvD9Mbz67O_oFaAY5C1ZTDGMsVk5IvEDOl53GV7d261UCH4K-TFJLwP90/s400/7_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Which will display the current status of attaching wait once it get 100%.<br /><br />When everythings goes fine then it will show follow screen with 100% status<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MnHAqNJUQkrprnJcA6SBQzK9fQ2DAO6AIHwlrBPeDtJefclKgGcr5bbFGgT6mt6u8MEb_lJ38m-TkgEba3M0YYG3hXvIDJwmubHKj2rM-0qPVc0sa5xDE1vsjUGWTmP4gaeMBpxoy5A/s1600/8_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; FLOAT: left; HEIGHT: 139px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573464297915429186" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MnHAqNJUQkrprnJcA6SBQzK9fQ2DAO6AIHwlrBPeDtJefclKgGcr5bbFGgT6mt6u8MEb_lJ38m-TkgEba3M0YYG3hXvIDJwmubHKj2rM-0qPVc0sa5xDE1vsjUGWTmP4gaeMBpxoy5A/s400/8_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Now its time to change <strong>the Site Administrators, WHY?</strong>Farm is new so could be possible we are at new Active Directory or Administrator could be Domain Specific, if your active directory is same then need not to worry about this section<br /><br />For changing the Site administrators , In application management go to change site administrator and assign new administrators for this application.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1smFcPLy8q_uoViqb4-zQUiTAZnUhkyZzCxGP8Wsawg5XcQnXpjO0vdIljzZ621NgZZIz4M9LdzCqNwzUyPHhlFVx7_yRkz5T2PsOJOZx9tZA6TgvjUmhZJ15daTGIeDfPhU_2ERI8A/s1600/9_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 371px; FLOAT: left; HEIGHT: 313px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573464584173708290" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1smFcPLy8q_uoViqb4-zQUiTAZnUhkyZzCxGP8Wsawg5XcQnXpjO0vdIljzZ621NgZZIz4M9LdzCqNwzUyPHhlFVx7_yRkz5T2PsOJOZx9tZA6TgvjUmhZJ15daTGIeDfPhU_2ERI8A/s400/9_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Now its time for the Main action open your site collection in the web application.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7FTFixQCALe8KZ_YQaCUf6UrByJPniQlJ-ttu9bj3SlvY3axq8naWlOcGJfjbUs4es_NHz31W8JO3jPPbVJ5wQEDX34Cr7B7686Q4H_mqavE0NVk5C72nIUe6nQvHyWpYtghGaDHFuY/s1600/10_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; FLOAT: left; HEIGHT: 97px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573464844681630514" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7FTFixQCALe8KZ_YQaCUf6UrByJPniQlJ-ttu9bj3SlvY3axq8naWlOcGJfjbUs4es_NHz31W8JO3jPPbVJ5wQEDX34Cr7B7686Q4H_mqavE0NVk5C72nIUe6nQvHyWpYtghGaDHFuY/s400/10_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Enter the credentials of the new administrators and here we go…<br /><br />Now a surprise will comes to you, You will see the same 2007 site in 2010 with exactly same look and feel,<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzTdsdshSTzUpbbX3_7llPJAtL7NJmCjvDpTmVSlcKATV65_bNWUq8WjsQUumBt1nTEb-dkPS4l4rALHJY8V1L2KjyeIbGSOiLlJ1gKHZz_CgMYRBJjzPjsdWhy1nWasUpgR0tBsusSs/s1600/11_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; FLOAT: left; HEIGHT: 220px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573465138392835794" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzTdsdshSTzUpbbX3_7llPJAtL7NJmCjvDpTmVSlcKATV65_bNWUq8WjsQUumBt1nTEb-dkPS4l4rALHJY8V1L2KjyeIbGSOiLlJ1gKHZz_CgMYRBJjzPjsdWhy1nWasUpgR0tBsusSs/s400/11_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />this is not what we require, So what to do next, for this go to next section : Visual Upgrade.<br /><br />But the good thing was that everthying work exactly the same:<br /><br />Search Working like it works in moss and everything was fine. Lets see if it remains same in next step:<br /><br /><br /><strong>•Doing Visual Upgrade</strong><br />Now we will bring 2010 on it.<br /><strong>1)We will bring Ribbon and 2010 feel.<br />2) If necessary we will change master page config<br />3)We will cross check the functionality.</strong><br /><br />Now go to site actions and then site settings<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnHD0H0_cB4ImCbw4FR3Mnhu7uKdUWcppLgEVwUR3epbkFsWM_XoXUS6nKiCNzBwKkpFnRTlR7AbaLciPnOfAlwpgzk2KqbF3VDaJqxhbQFu6voJEgnBG3Q_UgYst6sr9vSFddT1d83c/s1600/12_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 226px; FLOAT: left; HEIGHT: 207px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573465548386146930" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnHD0H0_cB4ImCbw4FR3Mnhu7uKdUWcppLgEVwUR3epbkFsWM_XoXUS6nKiCNzBwKkpFnRTlR7AbaLciPnOfAlwpgzk2KqbF3VDaJqxhbQFu6voJEgnBG3Q_UgYst6sr9vSFddT1d83c/s400/12_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />And then press Visual upgrade right below<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazbQaTAoaN_SkllZ-1XSyjvZPnZXO-29tgo2whPTautiGcBzRiVaRcC_j3bP_P6TK7umMEbY2o5adBOjLKrDgRq3Od758tNDYprNBfI68Q8zRqxd6XxIQ5RSvVoMTdpfUDIKkHZutiAs/s1600/13_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 135px; FLOAT: left; HEIGHT: 294px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573465796548601394" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazbQaTAoaN_SkllZ-1XSyjvZPnZXO-29tgo2whPTautiGcBzRiVaRcC_j3bP_P6TK7umMEbY2o5adBOjLKrDgRq3Od758tNDYprNBfI68Q8zRqxd6XxIQ5RSvVoMTdpfUDIKkHZutiAs/s400/13_blog.JPG" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />And Update all sites, and that was it.<br /><br />HURRAH…We Done IT..Finally:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvHe1Kpj-mE5Ji5mVmuR1WXcuH-Z7F3msIUYf_O8uCnmVVZvORqhyphenhyphenJv6h1Jais1GUvEAgOJzW8Ejw6n-XSroR-zsJOp7bfvx3MAge3TcespejeUxAo2CkUALy-OWmeKjMYA3Rnn5cJnQ/s1600/14_blog.JPG"><img style="MARGIN: 0px 10px 10px 0px; WIDTH: 400px; FLOAT: left; HEIGHT: 209px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5573465998361688242" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvHe1Kpj-mE5Ji5mVmuR1WXcuH-Z7F3msIUYf_O8uCnmVVZvORqhyphenhyphenJv6h1Jais1GUvEAgOJzW8Ejw6n-XSroR-zsJOp7bfvx3MAge3TcespejeUxAo2CkUALy-OWmeKjMYA3Rnn5cJnQ/s400/14_blog.JPG" /></a><br /><p></p>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-75131040657832180502010-08-17T23:55:00.000-07:002010-08-17T23:56:56.875-07:00Command to reset the sharepoint databases, if u r reinstalling SharepointClick Start, click Run, type cmd in the Open box, and then click OK.<br />At the command line, change to the following directory:<br />\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN<br />At the command prompt, type the following command to create a new configuration database:<br />psconfig -cmd configdb -create -server ServerName -database ConfigDBName -user Domain\User -password Password<br />Rerun the SharePoint Products and Technologies Wizard.<br /><br /><br />http://support.microsoft.com/kb/927156Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-15905363361863011582010-06-28T04:55:00.000-07:002010-06-28T05:01:48.859-07:00Creating Attractive Bar Charts based on data in sharepoint lists and Surveys.Errr..Reporting of sharepoint sites, data and lists and the backbone for it are sharepoint charts.We have KPI webparts and so many other things in Sharepoint, But today i am discussing how can we generate Charts using data from sharepoint lists..<br />So lets discuss how we are going to do this ??<br /><br />I am creating a sharepoint webpart which will bring the data from a survey and represent it in a wonderfull bar chart, not the basic simple one...<br /><br /><br /><br /><br />using System;<br />using System.Collections.Generic;<br />using System.ComponentModel;<br />using System.Linq;<br />using System.Text;<br />using System.Web;<br />using System.Web.UI;<br />using System.Web.UI.WebControls;<br />using Microsoft.SharePoint.WebPartPages;<br />using System.Web.UI.DataVisualization.Charting;<br />using Microsoft.SharePoint;<br /><br />namespace ChartingMS<br />{<br /> <br /> [ToolboxData("<{0}:Charts runat=server></{0}:Charts>")]<br /> public class Charts : WebPart<br /> {<br /> System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();<br /> CheckBox ShowLegend = new CheckBox();<br /> int agree = 0;<br /> int disagree = 0;<br /> protected override void OnLoad(EventArgs e)<br /> {<br /> Chart1.Legends.Add("Legend1");<br /> Chart1.Legends["Legend1"].Enabled = ShowLegend.Checked;<br /><br /> <br /> <br /> }<br /> protected override void CreateChildControls()<br /> {<br /> remotecount();<br /> ShowLegend.AutoPostBack = true;<br /> ShowLegend.Text = "Show Legend ";<br /> Chart1.Width = 500;<br /> Chart1.Height = 320;<br /> Chart1.RenderType = RenderType.ImageTag;<br /> string imagespath = System.Configuration.ConfigurationSettings.AppSettings["ChartImageHandler"].ToString();<br /> Chart1.ImageLocation = imagespath + "ChartPic_#SEQ(200,30)";<br /> Chart1.Palette = ChartColorPalette.BrightPastel;<br /> Title t = new Title("Each ministry should work independently to automate their own processes using their internal IT manpower. ", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));<br /> Chart1.Titles.Add(t);<br /> Chart1.ChartAreas.Add("Agree");<br /> // create a couple of series<br /> Chart1.Series.Add("Agree");<br /> Chart1.Series.Add("Disagree");<br /> // add points to series 1<br /> Chart1.Series["Agree"].Points.AddY(agree);<br /> //Chart1.Series["Agree"].Points.AddY(8);<br /> // Chart1.Series["Agree"].Points.AddY(12);<br /> // Chart1.Series["Agree"].Points.AddY(6);<br /> // Chart1.Series["Agree"].Points.AddY(9);<br /> // Chart1.Series["Agree"].Points.AddY(4);<br /> // add points to series 2<br /> Chart1.Series["Disagree"].Points.AddY(disagree);<br /> //Chart1.Series["Disagree"].Points.AddY(6);<br /> // Chart1.Series["Disagree"].Points.AddY(18);<br /> // Chart1.Series["Disagree"].Points.AddY(16);<br /> //Chart1.Series["Disagree"].Points.AddY(21);<br /> //Chart1.Series["Disagree"].Points.AddY(14);<br /> Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;<br /> Chart1.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);<br /> Chart1.BorderlineDashStyle = ChartDashStyle.Solid;<br /> Chart1.BorderWidth = 2;<br /> this.Controls.Add(Chart1);<br /> this.Controls.Add(ShowLegend);<br /> }<br /><br /><br /> protected override void RenderWebPart(HtmlTextWriter output)<br /> {<br /> RenderChildren(output);<br /><br /> }<br /><br /> public void remotecount()<br /> {<br /> SPSite osite = SPContext.Current.Site;<br /> SPWeb oweb = SPContext.Current.Web;<br /> SPListCollection lists = oweb.Lists;<br /> SPList survey = lists["Ministry Survey"];<br /><br /> SPQuery oquery = new SPQuery();<br /> oquery.Query = "<view><Query><OrderBy><FieldRef Name='Created' Ascending='False' /></OrderBy></Query></view>";<br /> SPListItemCollection items = survey.GetItems(oquery);<br /> foreach (SPItem item in items)<br /> {<br /> if (item["ows_Each_x0020_ministry_x0020_should"].ToString() == "Agree")<br /> {<br /><br /> agree = agree + 1;<br /> }<br /><br /> if (item["ows_Each_x0020_ministry_x0020_should"].ToString() == "Disagree")<br /> {<br /><br /> disagree = disagree + 1;<br /> }<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /> }<br /><br /><br /> }<br />}Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com0tag:blogger.com,1999:blog-2179939415242111485.post-87717971023614948992010-06-23T01:54:00.000-07:002010-06-23T03:06:15.838-07:00Displaying Image Attachments of a list Item Sharepoint wss3.0<div align="center"><br /><span style="font-family:arial;"><strong>Heya, Again Old Ankur, With a new post.</strong><br /></span><span style="font-family:arial;"><strong>I am Loving the way Client Object Model with Ecma Script functions in Sharepoint2010.<br />Well but in this post I am picking up an issue of WSS 3.0 or sharepoint 2007.</strong><br /></span><br />Today I was onto a task creating a helpful site on MOSS. In that I was trying to attach a automated generated Image file with the item in a list.<br /><br />I started with an idea that In the DispForm of the list I will show the attached Image as well.<br />So when a user go to the list item and view it he can see the image as naturally he is able to see other properties of the item.<br />I used DataView Web Part SharePoint designer to ease the things but it was not much helping me out as I was able to see that Attachments is 1 or 0 but how to display it I was not getting.<br /></div><div align="center"><span style="color:#3366ff;">So I followed this</span><br /><br /><a href="http://www.codeproject.com/KB/sharepoint/DataViewAttachments.aspx">DataviewAttachments</a><br /><br />And Modified it in my own ways so that I can associate it with the existing DipForm.aspx page.<br />So these are the steps which I follow to achieve this:<br />I use SharePoint Designer 2007, Sharepoint List Web Services Javascript files. You can find the require by going onto <strong>Darren’s Blog </strong>:<br /><a href="http://darrenjohnstone.net/2008/07/22/examples-for-the-sharepoint-and-office-live-javascript-api">Darren's Blog</a><br />So lets go…<br />1)Open the DispForm.aspx of the List in sharepoint Designer 2007.<br />It will look like this: </div><p align="justify"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1SO_t8NJlIW804yNxgecgbm48EPOhfHFz0uGnIGqJjLKGp04nq44PP3TxhbxcNXaiB_p57DN9w4OXcJoVWvxHOODRAd1gvM1xDMz1D5ezDAQQu1F1LAo5417Cfo5ByaHAIhMelSn2f4/s1600/1.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 303px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485893080249005442" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1SO_t8NJlIW804yNxgecgbm48EPOhfHFz0uGnIGqJjLKGp04nq44PP3TxhbxcNXaiB_p57DN9w4OXcJoVWvxHOODRAd1gvM1xDMz1D5ezDAQQu1F1LAo5417Cfo5ByaHAIhMelSn2f4/s400/1.JPG" /></a><br />2)Then Select the ListViewwebpart which is already there and click code view.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLct6cqfHSFAVYC2GjzwHLeMKbwA1Yp2_ptLph4chkGWaBFZnBnaOemw9wIoO72l_KA3oe6eDOpE0u6mIUWj7MZrke-FForw-kCWiigy2qb4cF6j5TleXAyILuTu9aY5uMerYAw5z_qk/s1600/2.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 269px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485894254118755026" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLct6cqfHSFAVYC2GjzwHLeMKbwA1Yp2_ptLph4chkGWaBFZnBnaOemw9wIoO72l_KA3oe6eDOpE0u6mIUWj7MZrke-FForw-kCWiigy2qb4cF6j5TleXAyILuTu9aY5uMerYAw5z_qk/s400/2.JPG" /></a><br />Now what we will do is in the code view of list view web part we modify the <isincluded>tag’s Value from “true” to “false”.<br />After that return to Design View.<br />Note: we have not deleted the webpart there is a reason behind that and it is necessary to make IsIncluded to false.<br />Than it will look like this<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheH7kGczc1BqufYdkjyAsUJ3TkfCjWN42rX8D3gi39L5z1B3mraUktOSfClwx3EOOWrC6mXMmIxSqZa7t1wSu6meAjk92fUrMVTRU12THQnCbDnX9wMLb0FvWC9Zm4OP9YD-bSxM3eMYg/s1600/3.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 300px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485895052071150386" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheH7kGczc1BqufYdkjyAsUJ3TkfCjWN42rX8D3gi39L5z1B3mraUktOSfClwx3EOOWrC6mXMmIxSqZa7t1wSu6meAjk92fUrMVTRU12THQnCbDnX9wMLb0FvWC9Zm4OP9YD-bSxM3eMYg/s400/3.JPG" /></a><br />After this go to split view and add another row just below the row where earlier listviewwebpartzone is placed .see this<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7XLbf5kaVU4RthiCk5VHJsDTTyeIELqz5CGPzjlKHFPZSlqCj1x4RiWTIiS0wTaTeFiG5_8DMYLDU-74L1LRQrXdOjIy_fd48qwSa1QDqIqg6OCh15HkkbGRUybXenVht9JvIl4CV6eI/s1600/4.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 358px; DISPLAY: block; HEIGHT: 400px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485904188047429298" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7XLbf5kaVU4RthiCk5VHJsDTTyeIELqz5CGPzjlKHFPZSlqCj1x4RiWTIiS0wTaTeFiG5_8DMYLDU-74L1LRQrXdOjIy_fd48qwSa1QDqIqg6OCh15HkkbGRUybXenVht9JvIl4CV6eI/s400/4.JPG" /></a><br />In that new row’s column put your cursor and after that go to menu bar and click insert >>sharepoint controls>>customlistform like this<br /><br /><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4-q1aY8z6Oh5Gw_v2vfuRG5QIK7cwR3u8zENbxRgrVVQa-89w_jX4DyG5iJCFsLqQlYtwYdolnmZRYVwlwK9P0Qv9cEl8fkhwTZZVxhPJCOZlMMk4tBUb_k5KunzJIok-8ggJlrS9PY/s1600/5.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 320px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485904990563427602" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4-q1aY8z6Oh5Gw_v2vfuRG5QIK7cwR3u8zENbxRgrVVQa-89w_jX4DyG5iJCFsLqQlYtwYdolnmZRYVwlwK9P0Qv9cEl8fkhwTZZVxhPJCOZlMMk4tBUb_k5KunzJIok-8ggJlrS9PY/s400/5.JPG" /></a><br />Chose your list and select display form. A new form will be get added which will be showing your list data now.<br />Then just below the last column create another row in the form table and this code….<br /></p><blockquote><p><div id="att{@ID}" style="padding: 10px;"></div><br /><script type="text/javascript"><br />getAttachments("YourListName",'<xsl:value-of select="@ID"/>'); </script></p><p><br />And inside the contentplaceholder </p></blockquote><blockquote><p><asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server"></p><p><br />Add this code:<br /></p><p><script src="../../_JS/SPAPI_Core.js"></script><br /><script src="../../_JS/SPAPI_Lists.js"></script><br /><script src="../../_JS/jquery-1.3.2.min.js"></script><br /><script type="text/javascript"><br />function getAttachments(List,ID){<br />var lists = new SPAPI_Lists('YourSite');<br />var items = lists.getAttachmentCollection(List,ID);<br />if (items.status == 200){<br />var rows = items.responseXML.getElementsByTagName('Attachment');<br />var str="";<br />for (var i=0; i<rows.length; i++){<br />temp=rows[i].childNodes[0].nodeValue;<br />ext=temp.substring(temp.lastIndexOf('.')+1);<br />switch(ext){<br />case "jpg":<br />case "png":<br />case "gif":<br />bdy='<img src="'+temp+'" alt="'+temp+'" border="0" />';<br />break;<br />default:<br />bdy=temp;<br />}<br />str+='<a href="'+temp+'" target="_blank">'+bdy+'</a>'+"<br />";<br />}<br />document.getElementById("att"+ID).innerHTML = str;<br />}else{<br />alert('There was an error: ' + items.statusText);<br />}<br />}<br /></script></p></blockquote><br />Don’t forget to change your list name and yoursite name in the above code…<br />And add the List.asmx files in the _JS like this..<br /><br /><br /><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEYNzjcgCo6ROImxm90DhIfYfS4lieThaJLLb6fcqsm7Nl656sjBSh0UOzdfJZVHBYZEoqve0hVGiKlfkhE1GYIjDn-WV0Wl8av84Ro_vNfo9heuwJZ1-ee7T7TXT-lgb9Um1kT71EO8/s1600/6.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 350px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485906026001838482" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEYNzjcgCo6ROImxm90DhIfYfS4lieThaJLLb6fcqsm7Nl656sjBSh0UOzdfJZVHBYZEoqve0hVGiKlfkhE1GYIjDn-WV0Wl8av84Ro_vNfo9heuwJZ1-ee7T7TXT-lgb9Um1kT71EO8/s400/6.JPG" /></a><br />Note : Jquery files are not necessary for this don’t get confuse<br />After doing this ,save your page….<br />And when you try to view the item now you will be able to the image like this…<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZFwHqA2ZPQK7xNRmTAMLIQUCpQWV7hZyNE6P1S402vxGyNpF-14mxqnZzM031sGUmBvdEfH_QogwDCkiWcJ5XoOK9ex5GX3JX5I6pzoQ3MGAjHdX1zAJubZxDhilWugYai4mW-u-dfs/s1600/7.JPG"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 256px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5485906534636282370" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZFwHqA2ZPQK7xNRmTAMLIQUCpQWV7hZyNE6P1S402vxGyNpF-14mxqnZzM031sGUmBvdEfH_QogwDCkiWcJ5XoOK9ex5GX3JX5I6pzoQ3MGAjHdX1zAJubZxDhilWugYai4mW-u-dfs/s400/7.JPG" /></a><br /><br />It is the attachment…..You can view 9 attachments with this list with this code…..<br />Now what is happening behind the scene is we are calling the list data through list web service.<br /><br />First we are taking all the items having attachments and then passing the ID of the particular item to get the Path of the image and rendering it into innerhtml of the DIV ……<br />Feel free to ask any queries if have at ankurmadaan2787@live.in </p>Ankur Madaanhttp://www.blogger.com/profile/03608318083606789080noreply@blogger.com2