Posts

SharePoint Online/2013 Replace no results default text ‘Nothing here matches your search’ from search results web part

Image
  As we all aware, SharePoint search have great potential to provide very powerful search solution. Couple of new webparts are added in SharePoint 2013, like Content Search web part for which I should use rather a word "Smart" search web part. With a new rendering mechanism, content search webpart becomes more and more simple to edit and customize. That mechanism is called "Display Templates" and these are based upon simple Json to HTML templates. I recently has faced a project scenario, where I was asked to replace the part of search result web part and I provided a solution by updating search display template. Requirement:   When we add a search result web part on any result page along with a search text box web part to enter search keywords. Search results will be displayed in web part if keyword matches any text. When we add both these web parts on page and before entering the search term also the results web part show  “Nothing here matches your search” (as sho...

Angular 5: Intallation and configuration with Angular CLI

Image
Hi Guys, In this blog, I am sharing how one can easily install angular (version 5.2.0). Angular 6 beta is out till date, which is not yet stable. Most of developers are excited to try one of the most modern and powerful frontend JS framework. Here is the quick guide to install angular 5 with CLI on development environment. I am choosing a stable version of Angular (5.2.0) for installation purpose in this blog. Lucky, if you are familiar with Angular 2 or 4 and have good experience with it, the process of starting a new Angular 5 project is pretty much the same. However, if you are new to angular and not having previous experience with Angular, don't worry -- installing Angular 5 is like a breeze. Let's get started. Pre-requisites: Here are the list of tools which you require before proceeding. Visual Studio Code/Visual Studio - Download Node.js - Download Node Package Manager(NPM) To check whether or not you have both of these installed, visiting your commend line(Win ...

SQL Server install error Wait on the Database Engine Recovery Handle Failed

Image
Hi Guys, Last week during the installation of SQL Server standalone instance, I have faced an issue. After installing all the prerequisites and I started installing SQL Server. Though, I did not get any warnings or errors in any of the rules or steps during the SQL Server installation wizard, but I got the below error at the end of the installation: The following error has occurred: Wait on the Database Engine recovery handle failed. Check the SQL Server error log for potential causes. This issue is giving misleading message. Well, I could not able to understand the cause of this error. I followed standard installation guide and completed pre-check before proceeding installation of SQL Server, but I still got this issue. In this blog, I will explain how did I resolved this issue. After many rounds of troubleshooting I decided to do some research on the web.  This was the first time I got this issue, so I had no clue about how to fix except for reading and analyzing the error log files....

AngularJS: Export Json object to Excel using AlaSQL

Hello, I have spent significant time developing AngularJS and Angular 2 applications. But this requirement is quite new to me. Well, user wants to export to excel feature on one of our application page where we are using filtered data based upon some parameters. The design decision was on me whether to choose server side function to convert Json object in to CSV format and then export it to excel. But I decided to choose another approach, not to involve server in exporting a Json data. I was not aware about ALASQL but later explored and found its very useful for me to implement this solution. Here I am explaining how to implement it. What you need to import : ALASQL js-xlsx Just an intro about these two libraries: AlaSQL is an open source SQL database for Javascript with a strong focus on query speed and data source flexibility for both relational data and schemaless data. It works in your browser, Node.js, and Cordova. This library is designed for: Fast in-memory SQL data pro...

AngularJS: Bind UI Select selection sequentially

Image
Hello, I felt lucky to work with angularJS with the integration with SharePoint(as backend) in my recent project. There was a requirement to have two drop-downs on a single page application where on selection of one; other drop-down value will be automatically filtered.  I am going to share with you guys that how I have implemented.  I understand that this may not be Ideal way of doing it but I am sure that it is quickest solution that I did in code to achieve this requirement. HTML: The below html will generate two dropdowns and populate with country and states data. <h3>Countries</h3> <ui-select ng-model="ctrl.country.selected" name="country" theme="bootstrap" title="Select a Country" > <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="country in ctrl.countries | filter: $select.search"> <span...

Not able to view result while building Search Query

Image
Hello SharePointers ;), Here is another quick finding which I just thought should be shared to save someone precious time. If you are dealing with SharePoint 2013 search and Result sources, you must try to test the query template before saving it. If you are not able to see any results instead just a red error saying below text don't get scared I have quick solution for you. “The Search display templates are not present on this site collection. To add them, you need to activate the “Search Server Web Parts and Templates” feature on the Site Collection Features page. Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types. Template ‘~sitecollection/_Catalogs/masterpage/DisplayTemplates/System/Control_QueryBuilderPreview.js’ not found or has sytax errors. (Load Template: ) ” You must get frustrated because your search is properly configured, its crawling the ...

CSS Trick: Create tag icon with dynamic text width using Pure CSS

Image
Hi Guys, If you are searching for a tag icon which can be used to show few keywords on any page. Then this is the place where you can find a very simple trick to generate it with in few minutes. The icon created using this CSS trick has feature that it can take dynamic width based upon the text width. Below image is the example how it will rendered:     Click here for the Demo . Basics: Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles . For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle. HTML I usually markup tags with unordered list. So the markup is fairly simple: <ul class="tags"> <li>CSS</li> <li>HTML</li> <li>Mohit</li> <li>Vashishtha</li> <li>SharePo...