IdeaMovers

How to configure Code to connect to Visual Studio Online

Tony Cantu — Fri, 24 Nov 2017 14:12:12 GMT

In this quick article I am going to walk through the process of getting Visual Studio Code (Code) to connect to Visual Studio Online(VSO). Visual Studio Online allow us to build our team, without borders, and help us manage versioning, source control, and so much more. As for my customer and I, we will use it for CSR in SharePoint and write a few PowerShell scripts to help manage the SharePoint farm. @Code, from twitter, helped me get started on the right track and I also used the following documentation to get me started: https://docs.microsoft.com/en-us/vsts/git/share-your-code-in-git-cmdline I did not, however, follow it completely as I ended up doing a few things differently and in a different order. However, I thank those guys for giving me something to follow. There are a few assumptions that i make. One, that you have downloaded and installed Code, that you have installed the Visual Team Studio Services Extension, and that you have a subscription to VSO. I will not be going into those subjects here. So let's get started!

Create New Project

The first thing you should do is navigate to VSO, login and head over to Projects. Once there, click on "New Project", wait for it to load and create a new Git Team Project. Make sure you select Git as the Version Control as it is a requirement for this article. Once you have filled in all the information click on "Create". The image below is of a newly created project in VSO. While here, you are going to need the URL of your project repository. Save it somewhere or just copy it into a text file and save it to your desktop for later use. Now we need to make sure that you have Alternate Authentication Credentials configured in VSO. This is so that Git can access the repository. Git cannot login to VSO like you are able to, with email and password. Because of this, we need to configure Alternate Authentication Credentials. The need to configure Alternate Authentication Credentials has nothing to do with Code or how it connects to VSO. This is simply so that Git can connect to VSO and replicate your repository locally to your computer.

In VSO, mouse over your profile avatar and click on "Security"

Fill out the information if it is empty. Make sure you log these new credentials somewhere. We will need it shortly in the tutorial.

Download and Install Git

First, what is Git and why do I need it? Git is a version control system. It helps you manage small and large projects. For us, it is what allows us to communicate with VSO and most importantly it allows Code to communicate with VSO. Download and install Git from: https://git-scm.com/download/ Once downloaded, double click the downloaded file to start the installation. For this installation, I selected the default settings for just about every step in the installation process (with one exception). You can modify the installation however you want or just follow along. You should now have Git installed on your computer. Let's get it communicating with our VSO project, shall we?

Setup Git Locally

Create a folder on your local hard drive. You can use the Git terminal to create the folder structure but for simplicity I used File Explorer. If you are following my example, I used C:\Scripts. Now open, if it isn't already, the Git Bash Terminal and navigate to the newly created folder by typing the following command (notice that I have removed my computer name from the image. Yours will be prefixed with your computer name):

cd c:\Scripts

Now that we are in the folder that we want to be working on we want to clone our VSO Repository into it. Run the following commands:

```
git init
```
- This initializes Git in the folder you are currently in. If you navigate to that folder after running the command, in my case c:\Scripts, you should see a new ".git" folder.
```
git config --global user.name "Your Name"
```
- This is the information you created in the steps above where you set up Alternate Authentication Credentials.

git config --global user.password "your password"

This is sent to VSO using SSL in the step below

```
git clone 
```
- This will clone your VSO repository to your local machine. Specifically in the folder you are currently in. In my example I was in "C:\Scripts". My VSO Repository is "CSR". To make sure it all worked correctly navigate to C:\Scripts and make sure you now have a new folder with the name of your VSO Repository. What mine looks like: c:\Scripts\CSR.

Test the configuration in Visual Studio Code

Launch Code and open the folder that holds your VSO Repository. In my case I am opening "CSR" in "C:\Scripts". If you have the Visual Studio Team Services extension installed in Code it will immediately recognize the repository and give you the functionality you need to use VSO with Code. It is all looking good if Code is working for you like it is for me. Now I believe it is time to test this idea of using VSO with Code. Notice in the screenshot above there are no files in the "CSR" folder. We will create a new .js file and move it over to VSO. Let's start by creating the file. I will name mine "test.js". Yes, very original. Notice that Code immediately recognizes the file is not being tracked. This means that the file has neither been committed locally or pushed to VSO. The "U" on the far right stands for "Untracked" (image below). Now open the "Command Palette" from the ribbon in Code. Go to View --> Command Palette. In the Command Palette box enter "team" and select "Team: Signin" to sign in to VSO (image below). At this point you are presented with two options to login to your VSO subscription:

Option 1: Provide an access token manually (current experience)
- If you already have an access token, use this option. Using this options means that you got your Access Token from VSO. I won't go into much detail here but if you look up a few steps, to where you set up the Alternative Authentication Credentials you will see the option to create an Access Token.
Option 2: Authenticate and get an access token automatically (new experience)
- If you do not have an Access Token yet, select this option and follow the instructions. Code will walk you through the entire process.

Make sure to follow the directions completely. Code will give you a random access token that will be required in the next few steps. If you go away from Code during any point in this process you will have to start again as the token will fail to exist. After copying the random code highlighted in blue, hit enter. A browser window will open up where you will have to enter the code. Enter the code in the form field. This will display two new buttons. Click on Continue. After you click on continue you will have to login to VSO. This is where you enter your email and password to your VSO subscription. At the end, you will receive a confirmation that you have successfully logged into VSO and in doing so have bridged together Code and VSO. Once you are signed in, go back to Code and try to commit the new file that was created. Click on the Source control icon. In our example, I am pointing at it with a red arrow. Then Commit the changes. Now "Push" the changes to VSO by clicking on the three dots (...) and click on "Push". The file, in our case "test.js" will shows up in VSO. We have successfully connected VSO with Code. If you have any questions or need clarification on any of the steps, feel free to reach out to me. Thanks!

Using Chart.js with REST in SharePoint 2013

Tony Cantu — Thu, 03 Aug 2017 09:07:36 GMT

[caption id="attachment_276" align="aligncenter" width="1024"] Task by Percent Completed[/caption] In a previous post I wrote about how to include Chart.js into a SharePoint page. Chart.js is a great tool to chart data. In the first blog the data was constant and hard coded into the script. In this article I include data that is a bit more dynamic, data that is in motion, data that is a bit more SharePoint-like-- a SharePoint Task List. I will also introduce three new concepts: REST, jQuery and JSLink. When you combine REST and JSLink magic happens inside of SharePoint. It's like fizz in a soft drink, like gun powder inside the firecracker, like.. well you get the point- magic happens! To get introduced to both concepts you can find information in the following links:

This articles picks up where the other one left off so I am not going to spend time configuring the page and setting up the libraries. You can go back to Using Chart.js in SharePoint 2013 if you have not done so just yet. In my previous post, the JavaScript was simple and easy. After all, Chart.js is the one that is doing all the heavy lifting. The JavaScript looked like this: The new version of this script looks similar when it comes to Chart.js. As a matter of fact, the only thing that changes is the dataset that gets build dynamically and the colors that I use in the chart. To begin creating our dataset I use the jQuery.ajax() call to query the Task List I am working with.

$.ajax({
	url:"/_api/Web/Lists/getbytitle('task%20list%20example')/items?$select=Title,Status,PercentComplete",
	type: "GET",
	headers: {
		"Accept": "application/json;odata=verbose"
	},
	success: successHandler,
	error: errorHandler
});

Although the $.ajax() call above is full of nuggets (and I will walk through as many as I can), the key point to take from the above code is that the jQuery.ajax() call is an asynchronous request to my task list. What is Ajax? Ajax stands for Asynchronous JavaScript and XML. Its main function is to load and display data in the background without reloading the entire page. In other words, the function is doing is thing in the background… while everything else loading and rendering. Kind of cool, eh? Enter REST endpoints. If you were to take the above REST Endpoint and drop in the URL bar of your browser, you should get back some information. In fact, that is one sure way to make sure that you are getting back the data you need. If the page that comes back doesn't have the data you need, then you need to modify your request. In my request above, I use a select statement to get me what I need, in this case I just need the "Title", "Status", and "PercentComplete" fields. $select=Title,Status,PercentComplete" Like most http request, we are setting the "Type" as a "Get" request: type: "GET" I am also setting the headers to return the data we need in JSON (JavaScript Object Notation) format. This means that our data will come back to us as a collection of Name/Values pairs.

headers: {
"Accept": "application/json;odata=verbose"
},

Finally we have the functions that are called depending on the success of the $.ajax() call:

success: successHandler,
error: errorHandler

I am only going to concentrate on the successHandler() function because this is where I manipulate the data to fit the needs that Chart.js requires. Not to be left behind, however, the errorHandler() function is an important function as well. You can do a lot of things, and you should, if your request happens to fail. Let's get started on the successHandler().

function successHandler(data){
	var myDataSet = data.d.results;
	var myLabels = [];
	var myData = [];
	$(myDataSet).each(function()
	{
		myLabels.push(this.Title);
		myData.push((this.PercentComplete * 100));
	});
	myData.push(0); // creates a '0' index on the graph

To start, as already mentioned, the successHandler() function is only called when the $.ajax() call is successful. This means that the request was able to query the REST endpoint and now has a result set, a collection of the data we requested. This collection, this data is then passed to the successHandler() function in the way of the "data" parameter. function successHandler(data){ Because the data collection that we get back from the server has a lot of metadata we are not going to use we have to drill into the collection and get only what we need. Because of this I declare a variable that will hold the Name/Value pairs I need. var myDataSet = data.d.results; If you look closely at the first article or the Chart.js documenation, it requires an array that hold the values for the "Labels" and the "Data" that will be graphed. Because of this we declare two new arrays, name them accordingly and start populating them by looping through the data collection.

var myLabels = [];
var myData = [];
$(myDataSet).each(function()
{
	myLabels.push(this.Title);
	myData.push((this.PercentComplete * 100));
});
myData.push(0); // creates a '0' index on the graph

Now that we have our arrays populated we need to instruct Chart.js to use them. To do this, I first have to get the canvas that Chart.js uses to create the graphs. Again, this information will be found on the previous blog. We also tell Chart.js what type of graph we are looking to create. In this example we are using the bar graph.

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {

// The type of chart we want to create
type: 'bar',

In the following code, there are three things that I will cover. These three settings are what make Chart.js do what it does. In a nutshell we assign myLabels (our custom array that we created and populated above) to labels. We create a title for our graph by setting the label setting: label: "Task by Percent Completed". We set the colors that each bar will use, also an array and finally we assign myData array to the data setting.

data: {
	labels: myLabels,
	datasets: [{
	label: "Task by Percent Completed",
	backgroundColor: ['rgb(255, 0, 0)','rgb(0,0,255)','rgb(0,255,0)','rgb(255,0,255)','rgb(255,255,0)','rgb(0,255,255)','rgb(127,0,255)'],
	borderColor: 'rgb(0, 0, 0)',
	data: myData,
	}]
},

After it is all said and done, you should have created a graph using data from a SharePoint list. The complete code is below:

$.ajax({
    url:"https://army.deps.mil/NETCOM/sites/106SB/SharePointTraining/ms/_api/Web/Lists/getbytitle('task%20list%20example')/items?$select=Title,Status,PercentComplete",
    type: "GET",
    headers: {
        "Accept": "application/json;odata=verbose"
    },
    success: successHandler,
    error: errorHandler
});

function successHandler(data){
    var myDataSet = data.d.results;
        var myLabels = [];
        var myData = [];
        $(myDataSet).each(function()
        {
            myLabels.push(this.Title);
            myData.push((this.PercentComplete * 100));
        });
        myData.push(0); // creates a '0' index on the graph

    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',


        data: {
            labels: myLabels,
            datasets: [{
                label: "Task by Percent Completed",
                backgroundColor: ['rgb(255, 0, 0)','rgb(0,0,255)','rgb(0,255,0)','rgb(255,0,255)','rgb(255,255,0)','rgb(0,255,255)','rgb(127,0,255)'],
                borderColor: 'rgb(0, 0, 0)',
                data: myData,
            }]
        },

        // Configuration options go here
        options: {}
    });
};

Using Chart.js in SharePoint 2013

Tony Cantu — Wed, 12 Jul 2017 13:36:10 GMT

Chart.js

At the time of this writing the version of Chart.js is 2.6.0. You can go to GitHub and download the latest version. For testing purposes, our purpose for today, I am only working with Chart.min.js. You, however, are free to download everything if you like. If you are just starting out, it would be beneficial to download the files that include some sample code. Once downloaded, be sure to upload Chart.min.js to a document library in your site collection or site. I won't go into details of where this file can go in your SharePoint farm. Company policy, best practice, and user permissions should all play a role in your decision of which document library the file should be uploaded to. For this example, and it is my preference only, I created a 'js' document library that holds all of my JavaScript files. Easy to use, easy to find. Also, for the purpose of this tutorial, we will be using the 'Getting Started' section of the Chart.js Documentation. I have opened Visual Studio Code, an exceptional and well written editor, and have created the following file and named it 'chartJS.js': The above image simply combines the code in the Chart.js Documentation into one file that I uploaded to the 'js' document library. The only thing you need to worry about here is that you have to make sure that the first line, "…/js/Chart.ms.js' actually points your 'Chart.ms.js' file. Notice on the image above that mine points to the '/js' document library. This correlates with the steps above. Once you have created this file, save it with the '.js' file extension and because it has a '.js' file extension, it will go in the 'js' document library. To recap, you should have at least two (2) new '.js' files in your document library. For me, that would be my 'js' document library.

SharePoint Page

Once Chart.min.js has been uploaded to your document library it is time to work with the SharePoint page that will hold the content and eventually display the chart(s). Create a new page in the 'Site Pages' document library. The type of page doesn't really matter here but I will be using the 'Web Part Page'. The 'Web Part Page' looks like the image below: To create the page navigate to the 'Site Pages' gallery, go to the ribbon and click 'Pages'. Then 'View All Pages.' In the ribbon click 'New Document' and from the drop-down choose 'Web Part Page.'

HTML-ing, SharePoint-ing, JavaScript-ing

(whatever you would like to call it) Now that we have our page ready to go, we will start working with the code. This task can be accomplish in multiple ways. The one we are going to use for this example will free us to be a bit more versatile when it comes to reusing the file we just created. To get started we are going to need the 'Content Editor' Web Part. If your page is not in edit mode, you will need it to be. Once in Edit Mode, click on the 'Add a Web Part' link of the 'Header' Web Part Zone. In the 'Categories' section navigate down to 'Media and Content'. In the 'Parts' section select the 'Content Editor' Web Part and click on the 'Add' button on the bottom right. The 'Header' Web Part Zone should now have a new Web Part with the title 'Content Editor'. Now we need to add the chartJS.js file to the 'Content Editor' Web Part. Mouse over the far right hand side of the 'Content Editor' Web Part to get the Web Part menu to display. It will only display if you mouse over the down arrow next to the check box. Click on 'Edit Web Part' in the menu. The page will reload and display the Web Part Property window to the far right of the page. In the 'Content Link' section of the 'Content Editor' enter the URL to your file-- the chartjs.js file that we created in the beginning. In our example it would be '../js/chartjs.js'. Once you have added the URL to the file, you can click on the 'Test Link' to make sure that SharePoint can find the file. If SharePoint can find the file, it will either open the file in your browser or prompt you to download it. If SharePoint can’t find your file it means you have the URL wrong. Work with it until SharePoint can see it. Click on the 'OK' Button Once the page finishes rendering, you should be able to see the demo content display. Save your file, Check it in and Publish it so that everyone can see your test demo!

Some or all identity references could not be translated.

Tony Cantu — Sun, 23 Apr 2017 08:58:34 GMT

What is the Managed Accounts feature? What are Managed Accounts? A TechNet article on SharePoint 2013 Managed Accounts describes what managed accounts are/is: "Automatic password change enables SharePoint 2013 to automatically generate long, cryptographically-strong passwords on a schedule that you can determine." In essence, the Managed Account feature enables SharePoint to modify the password(s) of a domain service account(s) that is being used by SharePoint before the password expires. Symptoms You get the error "Some or all identity references could not be translated" when trying to browse to Configure Service Accounts in Central Administration. From the ULS logs, you can see the following: System.Security.Principal.IdentityNotMappedException: Some or all identity references could not be translated Cause In our case, for some reason, SharePoint was unable to resolve one or more managed accounts with Active Directory. A good percentage of the time, the associated AD account has been deleted or modified, but the managed account is not. Resolution Open SharePoint 2010 Management Shell with administrative privileges. To identify the affected account, run: Get-SPManagedAccount You should see one or more accounts without an entry in the "PasswordExpiration" column. I found two of them. To get things moving again, you have to remove the account(s) off of SharePoint so it doesn't try to manage them.

$ma = Get-SPManagedAccount 
$ma.Delete()

Have Fun SharePoint-ing!