Angular 2 – ngClass Introduction

As the debate is going on about Angular 2 vs ReactJS I have chosen to master the former for now due to my experience and very good impression that I have with AngularJS 1.x. I would be writing a series of articles on Angular 2 going forward.

In this post I’m going to discuss about the ngClass directive.

ngClass:

This directive is used to dynamically assign a class to a HTML element in which this directive is being used. For example look at the below example:

<div [ngClass]="{'colorDiv':true, 'nonColorDiv':false}">ngClass</div>

The above div element will have the class “colorDiv” assigned rather than “nonColorDiv” as per the Boolean values assigned to them.

Now if you want the Boolean values to be dynamic then we need to create a Boolean variable in the component and then use that variable in the ngClass directive.

For example let us have a look at the below div element:

<div [ngClass]="{'colorDiv': isColorDiv, 'nonColorDiv': !isColorDiv }">ngClass</div>

The component code:

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
 selector: 'my-app',
 templateUrl: 'appTemplate.html',
 styleUrls: ['style.css']
})

export class App {
 isColorDiv:boolean;
 constructor() {
 this.isColorDiv= true;
 }
}

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ App ],
 bootstrap: [ App ]
})
export class AppModule {}

As you see the isColorDiv variable has been declared as a Boolean variable based on which the class of the div changes.

Getting all values from a lookup field in SharePoint using ECMAScript client object model

I recently had a requirement wherein I had to retrieve all the values of a lookup column of a list and bind it to a dropdown using ECMAScript client object model. The tricky part is that the lookup list and column name are not known and thus are to be retrieved dynamically.

I see that there are articles describing to do the same with a choice field but none for a lookup field. So I tried to figure out a way to it for a lookup field.

First in order to accomplish this we need to find the name or GUID of the list and the column which is being used as a lookup column. The below code is used in order to do that:

var context = SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle(listName);
var field = list.get_fields().getByInternalNameOrTitle(fieldName);

//Cast the above column as a lookup column
var lookUpField = context.castTo(field, SP.FieldLookup);

//Load the above castes lookup field
context.load(field);

//Call executeQueryAsync and pass in success and failure anonymous functions
context.executeQueryAsync(function () {

   //lookUpField.get_lookupList() gives the GUID of the lookedup list
   var lookUpListId = lookUpField.get_lookupList();

   //lookUpField.get_lookupField() gives the title of the lookedup field
   var lookUpFieldName = lookUpField.get_lookupField();

   //The onFieldLoaded function is called where we process the lookedup list and field to retrieve the values
   onFieldLoaded(lookUpListId, lookUpFieldName);
},
function (sender, args) {
   console.log(args);
});

Now that you have got the GUID of the lookedup list and the name of the lookedup field, we go ahead and write the code for retrieving all the values of the lookedup field in the OnFieldLoaded() function.

function onFieldLoaded(listID, FieldName) {
  var list = context.get_web().get_lists().getById(listID);
  var query = new SP.CamlQuery();
  query.set_viewXml('<View/>');

  var listItems = list.getItems(query);
  context.load(listItems,'Include('+FieldName+')');
  context.executeQueryAsync(
  function () {
    for (i = 0; i < listItems.get_count() ; i++){
    console.log(listItems.itemAt(i).get_item(FieldName));
    }
  },
  function (request, error) {
    console.log(error);
  });
}

Failed to instantiate the file. Specified list does not exist.

If you have created a module for deploying ASPX pages to the Pages library in your SharePoint site, you may get the below error while trying to manually activate the feature that contains the module.

“Failed to instantiate file “abcd.aspx” from module “Pages”: The specified list does not exist.

This error mostly occurs in the non-English language sites. The reason could be that the URL of the “Pages” library would contain the language specific names like “Pagine”, “Paginas”, and etc. based on the respective language. This happens in spite of retrieving the URL value from the resource files in your module as shown below:

This could be a SharePoint bug.

The solution is to deploy through VS or activate the feature through PowerShell command:

Enable-SPFeature -identity “Feature folder name” -URL SiteURL

Hope this has helped you.

Access managed properties in Control template

Those who have worked with display templates would have worked with accessing managed properties in the item template of the Content Search Web Part (CSWP). There might be a requirement when you want to access the values of the managed properties of each result item in the control template of your CSWP rather than your item template.

The below code does exactly that:

a. $.each() is the jQuery loop function that is used to loop through each result returned

b. ctx.ListData.ResultTables[0].ResultRows retrieves the “RelevantResults” results from the 4 result tables available in the CSWP as shown below:

c. function (key, val) is the function that is going to process each search result.

d. val.EmailDate.toString(): Here only we are accessing the managed property called “EmailDate” from the variable “val” which would hold the values of all managed properties of the result item.

Debug SharePoint display templates in Google Chrome

In spite of being a Microsoft .NET and SharePoint developer I have no regards for Internet Explorer no matter whatsoever. Google chrome is the best browser in the history of browsers.

You may also like to have a look at the below blog posts regarding Content Search Web Parts:

• Content search web part for specific SharePoint list\library
• Display default content when there are no results returned in Content Search Web Part

Let me you explain a small tip on how to debug the display templates of your Content Search Web Parts in SharePoint in Google Chrome.

There will always going to be 2 files created for your display template. One is the .HTML file in which you would be working and the other is the .JS file which gets automatically created and used by SharePoint once you upload your .HTML file.

a. Open the page in which you have your CSWP.

b. Press Ctrl+Shift+J. This will open your developer dashboard.

c. Click on “Sources” from the tabs as shown below:

d. Expand _catalogs/masterpage and then Display Templates/Content Web Parts

e. You should be seeing the .JS file of your display template. Click on the .JS file to open it in the workspace.

f. Put a breakpoint anywhere and refresh the page and the page load would pause when the break point is hit in the display template as shown below:

g. From now you can debug like how you do in Visual Studio using F10 and F11.

Display default content when there are no results returned in Content Search Web Part

Content search web part in SharePoint 2013 is a new feature that can comfortably replace the development of custom web parts from Visual Studio.

You may also like to have a look at the below blog posts regarding Content Search Web Parts:

• Content search web part for specific SharePoint list\library
• Debug SharePoint display templates in Google Chrome

There might be a requirement when there are no results returned from your CSWP’s query, you would still need to display some default content. Follow the below steps in order to accomplish this:

a. Edit your content search web part.

b. In the tool part, uncheck the option “Don’t show anything when there are no results.”

c. Open the control template of you content search web part, search for the below if condition:

d. The text or the HTML content that you give inside the above if condition would appear in your web part when it has no results to display. You may use it to display any custom empty message when there are no results returned.

Hope you found this to be helpful.

Access is denied. Verify that either the Default Content Access Account has access to this repository…

Do you get this error that says “Access is denied. Verify that either the Default Content Access Account has access to this repository, or add a crawl rule to crawl this repository. If the repository being crawled is a SharePoint repository, verify that the account you are using has “Full Read” permissions on the SharePoint Web Application being crawled.” while performing a crawl in SharePoint environment?

Googling will make you to check the value of “DisableLoopbackCheck” from the registry editor or check if the content access account has access to the DB or check if the content access account has “Full Control” permission in the service application.

Before or after you do all the above, please make sure that you have entered the correct or the latest password of your content access account in the search administration page. In the search service application.

Maximum before and after current page properties in SharePoint 2013 search

If you have used or worked with SharePoint search, you must have come across the pagination control that appears in the bottom of the search results web part in the search results page.

This control came as a separate web part in SP 2010 where we had the below 2 properties in the tool pane that can be set to show the maximum no. of page links to be shown before the current page and the maximum no. of links to be shown after the current page.

Whereas in SP 2013 the pagination has become a part of the core search results web part itself and is being created in the control template of the web part (more on that later). And the above 2 properties of the pagination are not seen in the tool pane of the search results web part which came as a surprise to me.

Later, to my surprise when I exported the search results web part I was able to see the 2 properties in the .webpart file as shown below:

Setting the properties in the .webpart file and importing it back to SharePoint made the necessary changes in the pagination reflecting. Hope you find it useful.

Taxonomy hidden list in SharePoint

The taxonomy hidden list contains all the metadata taxonomy terms that are used in your site collections. Below are some of the facts about this list:

a. As the name of the list indicates, the list is a hidden list which means you will not be seeing a link to this list anywhere in your site collection.

b. The URL of the list would be like: http://YourSharePointSite/Lists/TaxonomyHiddenList/

c. This list will only be present in the root site of your site collection.

d. The list by default has read access to all NT\Authenticated users. Make sure to verify this when your users have issues with using the metadata taxonomy service.

e. The list contains only the taxonomy terms that were actually used anywhere in your site collections. That means when you are using a taxonomy term for the first time in any list, that term gets added as a new list item in the taxonomy hidden list.

f. This list contains the following fields to store the data about the taxonomy terms:

Content search web part for a specific SharePoint list\library

This is supposed to be my first blog post on SharePoint 2013. This is about the new and the much spoken about Content search web part in SharePoint 2013. While I was working on it, I wanted to load the list items from a particular library in the content search web part. I could not find much help by googling on how to configure the query builder of the CSWP to target a specific SharePoint library.

You may also like to have a look at the below blog posts regarding Content Search Web Parts:

• Display default content when there are no results returned in Content Search Web Part
• Debug SharePoint display templates in Google Chrome

In this post I will explain how to target a particular library as well as a list in a CSWP by modifying its query through various options.

a. Add a CSWP to your page and edit the web part to view its tool pane. In the tool pane of the web part click on Change query to open the query builder modal window as shown below:

b. As you see in the above screen shot, the default configuration in the query builder is to show the recently edited items in the current site.

c. In order to display the list items from a library, select “Documents” from Select a query and select “Specify a URL” from Restrict by app and enter the URL of your library in the text that appears immediately below the drop down as shown in the below screenshot.

Note: While entering the URL of the library, please note that the URL should not have any “%20” in it and the URL should only be up to the library’s name. For e.g. if the URL of the library is: http://sharepointsite.com/My%20Aricles/Forms/AllItems.aspx, please change it to http://sharepointsite.com/My Aricles/ while entering.

Once you finish, the results would be shown in the Search result preview.

d. Click OK and you should see your web part displaying the document links from the document library in your CSWP.

Now let us see how to accomplish the same requirement for a list.

a. In the same web part, follow the same procedure to edit the query builder of the web part.

b. Replace the URL of the library with your list URL. You should be seeing that no results are returned in the Search result preview section.

c. Click on “Switch to Advanced mode”, you should be seeing the below screen:

d. As you see in the query text textbox, the file extensions of the results are being queried which restricts the results to documents alone and avoids list items.

e. Remove the text that checks for file extensions as shown below:

f. Now click on “Test query” and you should see the list items from the SharePoint list returned.