S1E18: Cascading Drop Down using SharePoint restAPI Search Refiners

S1E18: Cascading Dropdowns using SharePoint Search Refiner
RestAPI

Taking our search drop-down to another level with cascading
drop-down logic to filter search for 100K job postings list. We walk-through
out the process of filtering search by a refiner value and explain why this
better and more accurate than a simple search filter.

The response time is pretty quick, and because we are
leveraging the power of SharePoint search and refiners, we are able to do this
against 100K items in milliseconds.

We also, walk through the process of passing data from one
angularJS component to another component housed on a separate page.

Key Code Snippets

====================

1) SharePoint Search RestAPI Scopes to a Result Source Name
(not guid)

Note: guids stinks, because they are different per
environment, thus requiring you to change the code when deployed...SMH

/_api/search/query?querytext='*'&rowlimit=1&refiners='RefinableString00,RefinableString01'&selectproperties='Title'&properties='SourceName:Job
Postings,SourceLevel:SPSite'

2) How to filter by a refiner value (URL query parm)

&refinementfilters='RefinableString00:
equals("Business Development")'

3) Here is the entire project:

http://snicdn.s3.amazonaws.com/job-portal/JobPortal-Sample-2018-08-01.zip

#spEasyDev #sharepointrefiners #ngsharepoint #spclassroom

#spclassroom #spEasyDev #bootstrapandsharepoint
#distortedspribbon #sharepointsearch #sharepointrestapi #sharepointpagelayouts
#sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016
#sharepoint #sharepointandangularjs #odata #sharepointlargelists
#sharepointdevelopertutorial

S1E16: How to Fix the SharePoint Ribbon after Applying Bootstrap! sharep...

S1E16: How to Fix the SharePoint Ribbon after Applying Bootstrap!



When adding a custom design that uses the bootstrap framework, there are several ribbon icons, layouts, and spacing that may get distorted due to bootstraps overarching and general CSS rules.



In this video we will walk-through the process on how to correct these mis-aligned items.



We will also look at the logic needed to determine if we are in design mode or live mode with client-side coding. This is important because with this logic, you can do some really cool things, to the angularJS web part for the content managers and hide them from the end users. In this video we will walkthrough this implementation and discuss some of the scenarios.





#spclassroom #spEasyDev #bootstrapandsharepoint #distortedspribbon #sharepointsearch #sharepointrestapi #sharepointpagelayouts #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs #odata #sharepointlargelists #sharepointdevelopertutorial

S1E15: Easy Way to Convert a Complex UI Design into SharePoint Page Layo...

S1E15: Easy Way to Convert a Complex UI Design into SharePoint Page Layout with AngularJS!



In this SharePoint Developer Tutorial, we will walk-through the process of converting a complex responsive deisgn search page into a SharePoint page layout with angularJS.



AngularJS templating really makes this process easy and SharePoint forward. We are working around the Bootstrap grid system, and a a lot fo custom css classes. We must keep all of this in tact, but at the same time, extract the various components needed for custom calls.



This process is known to be very tediuos, and requires great attention to detail, else, things will get screwed-up once we put it in SharePoint.



Check out this video, you may grab a few tips and tricks along the way.



#spclassroom #spEasyDev #sharepointsearch #sharepointrestapi #sharepointpagelayouts #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs #odata #sharepointlargelists #sharepointdevelopertutorial

S1E13: The Easy Way to code with Nasty SharePoint Search restAPI JSON

S1E13: Easy Way to code with Nasty SharePoint Search restAPI JSON



The JSON returned by the SharePoint search restAPI is just down right nasty. Because it is nasty, it will make your code nasty and unscalable.



BUT!!! With the right "data method" to encapsulate this nastiness, our existing pattern will still hold true, and we will get the power of SharePoint search...which is very powerful and widely used/needed in SharePoint Online.



Lucky for you, I've endured all of the pain for you and these 12 lines of code will save your life (i.e. heartache, head banging, cliff jumping)



   function _getSPRelevantResults(endpoint) {

            return $http.get(endpoint, _getConfig).then(function (d) {               

                var results = d.data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;

                var col = [];

                results.forEach(function (rItem) {

                    var item = {};

                    rItem.Cells.results.forEach(function (cell) {

                        item[cell.Key] = cell.Value;

                    });               

                    col.push(item);

                });           

                return col;

            });

        }





#spEasyDev #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs #odata #sharepointlargelists

S1E11: In 40 mins, SharePoint CSOM to Load JSON file into SharePoint Lis...

How easy it is to write CSOM C# code for SharePoint to load a JSON file and dump the content into a SharePoint list.



 We will do all of this in this 40 min video. This really sets the foundation for any integration with external systems that can be exposed with JSON. In this video we will load the JSON from a file, but with a few additional lines of code, you can do the same to load in JSON external service.



 This just one of the videos in the new series Building Custom Solutions in SharePoint the Easy way...which can be found here:
https://www.youtube.com/watch?v=2nhiAr9lplM&list=PLMLjnY5iPR3X2ZS-aIQ4nmYVd6f4la2Ni

#spEasyDev #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs #odata #sharepointlargelists

 

S1E10: How to Load Sample Data to create a SharePoint Large Lists - Shar...

Here is something every SharePoint Developer should be doing. Performance is always great during the initial development, but what happens when the list or library reaches  a 1000, 10K, or even 1M items? Does your code still perform well?



Some of us may be trying to stay away from SharePoint Large lists of 100,000+ items because of the havoc they may cause, or the fear of performance issues that may arise. As I stated before, 100,000 items is NOTHING for a SharePoint list or library. Microsoft designed lists and libraries to host over 20M items and documents respectively.



SharePoint Large Lists are only concerns if we are NOT designed and performance tuned for large SharePoint list. It is inevitable that lists and libraries will grow over time in SharePoint. Inefficient custom solutions will start to rear their ugly heads. TO avoid these issues, we MUST code for large list during the development process and not the maintenance process.



In this video, we will walk-through the process of generating large SharePoint list using a data-generator.



This just one of the videos in the new series Building Custom Solutions in SharePoint the Easy way...which can be found here:

https://www.youtube.com/watch?v=2nhiAr9lplM&list=PLMLjnY5iPR3X2ZS-aIQ4nmYVd6f4la2Ni

S1E09: RestAPI Calls against SharePoint Large Lists - 100,000 items

In this SharePoint Developer tutorial we make restAPI calls against a SharePoint large list with 100,000 items (at the time of this video there were only 23,472 items, they were still loading). We will discuss the gotchas with working with large lists, and when to create indexed columns and for which columns types.

In addition, some of the steps in this video is a review of the previous techniques we used in earlier videos, as in publishingImage src url, css tricks for responsive design, and odata filtering syntax in restAPI urls.

As mentioned in this video, it is important to work with large sample data during SharePoint development. This allows you to catch performance issues/concerns much earlier in the process, and gives you a lot of data when working with search or other features that requires paging. Make sure you subscribe, as in a future video, we will walk through the process of adding 100s of thousands list items of sample data.

#spEasyDev #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs #odata #sharepointlargelists



 

S1E08: How to Build a SharePoint Carousel Slider with AngularJS and Owl ...

In this SharePoint Developer tutorial we implement the SharePoint Carousel Slider which, in our case is the OWL Slider jQuery Plugin. This is a great video filled with tricks on how to overcome issues with integrating a jQuery plugin with angularJS.

We discuss the common issues with the DOM ready event, and how in most cases it does not work with angularJS, because of the dynamic html nature of angularJS and the delays with AJAX calls.

You will find these techniques useful not only for jQuery Carousel Sliders like OWL, Slick, Bootstrap Carousel, and jCarousel; but for any other jQuery plugin that has an initializer requirement.





 












#spEasyDev #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs

S1E07: 5 CSS Tricks Every SharePoint Developer Should Know - SharePoint ...

In this video we use the 5 css tricks that are essential and every SharePoint developer should know when dealing with a responsive design master page. We use these 5 CSS tricks to fix our spacing and alignment with responsive design and dynamic content within SharePoint. We tackle the issue we encountered in the last video, with how to get our Blog Post cards to display correctly regardless of the length of the blog title, description and a higher resolution image.



 

S1E01: Best SharePoint 2013 Developer Environment Setup for AngularJS - ...

In this video we walk-through the process of setup up our visual studio environment for our custom masterpage and page layouts. This environment enables you to setup a light foot-print with Visual Studio 2017 Community and on your laptop without SharePoint installed.

Here is the link to the starter design file used in this video.
http://snicdn.s3.amazonaws.com/job-portal/jobportal-starter.zip

S1E02: Creating a Custom Masterpage in 30ish mins - Custom Solutions wit...

In this video we create a custom masterpage with the custom UI provider by our designer. You will see that this is a really simple process, and as long as you keep things in order, the creation of the custom masterpage becomes really straight forward.

The secrete to this easy creation is the starter masterpage used, and the simple and quick publishing deployment technique that we are setup in episode 00.

Here is the link to the starter design file used in this video.
Get the Starter Package Here

S1E03: AngularJS setup in SP2013, the minimal way - Custom SP2013 and an...

In this video we start laying the ground work for angularJS by setting up the modules, components, and services. We create our template dir, and start moving some of that custom html into angularJS templates and referencing the associated components inside of the master.

This process is so easy, that I am still surprised everytime I use it.



 

S1E04: Quickly Build AngularJS Components and Services in SP2013 - Custo...

In this video we continue to lay the foundation for rapid development in SP2013 using angularJS components and services. As you will notice, angularJS services are essential for getting the current site collection and current web URLs. This is a nice clean pattern, that separates the UI from the JavaScript code, which makes it easier to maintain the solution, and expand the solution in the future.

This process is so easy, that I am still surprised every time I use it.



 

S1E05: SP2013 RestAPI Calls with AngularJS (revised) - Custom Solutions ...

In this video we finally get to the stage of making restAPI calls with angularJS. We first enhance our reusable services by wiring up the http headers and setting up a common method to handle the JSON. We will then use that JSON to render the HTML in a angularJS template.

Again a nice repeatable pattern, that can be used to get list data and documents from a SharePoint document library

#spEasyDev #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs

S1E06: SP2013 Nest RestAPI Calls in AngularJS for Publishing Images - SP...

Season 1 Episode 6:



How to make nested restAPI calls in AngularJS to get SP2013 publishing image site columns data for a list item. It is a pain in the butt when dealing with Publishing Images, Managed Metadata, and look-up columns in SP2013 restAPI, but this reusable pattern outlined in the video, eases the pain.



Once set-up correctly, this pattern can be reused for publishing images, and can serve as a foundation for other nest restAPI call scenarios.



We also discuss how to leverage Image Rendentions in SharePoint 2013 to have better control over the images uploaded into SharePoint for the blog posts.



Here is the sample code used in this video (especially that nasty regex snippet used to extract the src URL from the image tag)

https://s3.amazonaws.com/snicdn/job-portal/JobPortal-Sample2016-02-17.zip 



#spEasyDev #sp2013 #sp2016 #ngsharepoint #custommasterpage #sharepoint2013 #sharepoint2016 #sharepoint #sharepointandangularjs