Showing posts from 2017

SharePoint Group Display Templates [Grouping]

the questions...

How to Group Search Results Using Default Display Templates?

Grouping search results with display templates for the CSWP?

How to Define a Custom Group Display Template (GroupTemplateId)?

and the answer is a sad one...


Well, 1st create yourself a Group Display Template file, just take the default "group_xxx.html" from the "Search" or "Content Search" Folders, whatever you are using.

After adding it to the Master Pages, you can't add it via JS, you MUST download a copy or you Search WebPart (export) and change the value in "GroupTemplateId" to your group JS file.

Now at least you have a CSWP with you own group.html/js file.

So I've never really payed attention but in our Controls Display Templates the rendering part is in _#= ctx.RenderGroups(ctx) =#_ , GROUPS, not items.

This actually ALWAYS going through a group rendering function, and hey, i want to use it. but how?

nothing... NOTHING is the documentation (THX M…

SharePoint display templates ERROR: hexadecimal value 0x3C, is an invalid attribute character

its an error about a "<" or ">".

you might have user "Enter" for an element with too many attributes like this

<a href="value......."

collapse it to this
<a href="value......."  class="value......."  id="value......."  data-toggle="value.......">

SyntaxError: expected expression, got '&'

SyntaxError: expected expression, got '&'

this belongs to the if syntax "a = b ? c : d";

probably the problem is in the 'b'

Adding a Full Task [PlannerTask] to 365 planner

Today i created an angular app to interact with MS 365 Planner. I tried to add a task. The example @MS - create task works fine
{"planId":"xqQg5FS2LkCp935s-FIFm2QAFkHM","bucketId":"hsOf2dhOJkqyYYZEtdzDe2QAIUCR","title":"Update client list","assignments":{"fbab97d0-4932-4511-b675-204639209557":{"@odata.type":"#microsoft.graph.plannerAssignment","orderHint":" !"}},}
Adding a details object was great until i was trying to add some checklist items.
My app gave this error [400]:

message:"Schema validation has failed. Validation for field 'Title', on entity 'Task' has failed: A non-null value must be specified for this field."

Well, this is the end of the story, since after everything went well in the Graph Explorer my app still gave the same error, until i notices that the Content-Type was application/x-www-form-urlencoded.

The Fix is

Angular Dual App

or more exact run separate root components.

you can just add multiple components to the bootstrap: [ decorator.

then you can run as many apps as you want.

bootstrap: [   AppComponent,   LoginComponent,   ContactComponent,   TableComponent, ]
<body>   <app-welcome></app-welcome>   <app-login></app-login>   <app-table></app-table>   <app-contact></app-contact> </body>

in Angular 4 Services has scope. if we create a service at the App.Module Scope, it will share all it's info will all apps, all comps, but if you create a service, and declare it inside a providers:[ decorator, inside a specific Component, then all child components will share the same instance, but siblings comps declaring the same service will have their own instance.

MatDatePicker Errors

if you get this one

Can't bind to 'matDatepicker' since it isn't a known property of 'input'

then you're missing some modules in your import, the datepicker has many dependencies, and i didn't tried to find them, so just fill in the long long list in the plnk.

I advice to just use a different module with all Angular Material modules like in the examples.

for this one

MatDatepickerToggle.html:1 ERROR TypeError: Cannot read property 'disabled' of undefined

you have some miss-spell like [for]="pickerFrom"vs#pickerFrom

Javascript sort then by

i'll just give a piece of code to show this Great Answer.

var a = [];
for (x = 1; x <= 3; x++){
for (y = 1; y <= 3; y++){
for (z = 1; z <= 3; z++){
a.push({x:x, y:y, z:z})

a.sort(function (a, b) {
    return a.z - b.z || a.x - b.x || a.y - b.y ;

just copy paste into the console and see for yourself.

for strings you'll need extra help

var a = [];
for (x = 1; x <= 3; x++){
for (y = 1; y <= 3; y++){
for (z = 1; z <= 3; z++){
a.push({x:x, y:y, z:'af' + z.toString()})

var strSort = function(a,b){
if(a < b) return -1;
    if(a > b) return 1;
    return 0;

a.sort(function (a, b) {
return strSort(a.z,b.z) || a.x - b.x || a.y - b.y ;

Angular 4 Keyup event fire multipletime?

i'll explain more of what i've learned answering this stackoverflow question.

well, lets just start by explaining that if you want say some AutoComplete based on an input element, so the problem with Keyup event is that while user is typing "Angu" you actually get 4 events, 1st with input value as "A", 2nd "An", ect.

but you want the part where he did "Angu" ...

well, there is the native answer, and the RxJs Implementation for that, and i will just start with the RxJx code for the reference, and then go for my Native Javascript example.

as you can see youself in my plnkr, we import the Observable as an object and then adding relevant Observable type and operator.

couple or sources to that:
some recipes
from the RxJs site

anyways these are the imports
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/auditTime';

and this is the code

Migrating to Angular Material 2.0.0.beta.11

if you're getting any of these errors suddenly or with adding new Material Angular elements:

ERROR in Error: MatMenuModule is not an NgModule
or Mat<module name>Module

Template parse errors: There is no directive with “exportAs” set to “matMenu”
or Mat<component name>
There is no directive with "exportAs" set to "mdMenu" ("<button md-button [mdMenuTriggerFor]="menu">Menu</button>
than your problem just seem's foul, but its simple.
head over to `package.json` and replace all the places with `^4.X.X` to `^4.4.3` or greater (4.4.4 avail to the time of writting) 
then, do to ALL your filed with some Material stuff, and change `md-`, `md` or `Md` to `mat-`, `mat` or `Mat`, including modules, components, imports, htmls, tags and attributes.
and all should work again.
if too annoying, you can just state the build for beta 10 which i believe means (didnt test): "@angular/material": "^2.0.0.beta.10",

Angular 4 Services (Http) Inheritance

Inheriting in Angular 4, meaning Typescript combined with Dependency Injection, can be tougher than you would expect.

lets say we just want a base class for all of our Services, they all use a WebApi, so they have their base url, which always bring the "all" array, and then "\3" for each item. so they all look like this:

exportclassServiceBaseClass {   constructor(privatebaseUrl, privatehttp:Http) {}   //public functions using baseUrl and http like   Get(itemID = ""){     varurl = this.baseUrl + itemID;     varpromise = newPromise ((resolve, reject) => {       this.http.get(url); // and whatever     })   } }
so you would like to make this the base class and each service just declaring its own "All Items" array and url. so you would thing this would work:

exportclassChocolateServiceextendsServiceBaseClass {   constructor() {     super('http://chocolate/');
    this.Get();   } }

1st error:

ok, so lets move  privatehttp:Http  outside the C…

TypeScript Arrow Functions Names Issue (Angular 4)

Currently using TypeScript 2.3.3 with Angular 4.2.4.

I've created a service, doing a simple promise, then (success, failure), into another then / catch in the calling function.

and i was surprised to learn that TypeScript, (unlike ES6 definition), still doesn't name arrow functions. That simply means that whenever you create a function like this

"(args or not) => { //code }"

you can't ever give it a name, and it will always stay as an anonymous function, mainly meaning that in an error when you would like to see the call stack you'll get

and this is a wrong practice, you should ALWAYS name your functions just for that purpose.

the issues can be seen in StackOverflow and GitHub Typescript issue #6433

solution would be to actually use the function keyword everywhere.

in a class these 2 gets into the prototype and do not appear in the call stack at all:

Get(url) { console.error('Get'); }; Get(url) : void { console.error('Get'); };
these 2 declar…

Visual Studio Team Services (VSTS)

I've started touring what the VSTS has to offer, and the truth is that they offer a great TFS, and that's it, for the free account. also it builds your solutions, so eventually you know that the thing will work at any other machine and its great, really.

For any hosting you need to acquire an Azure account, and while you can get one for 1 month free trial, there are plenty of Really Free .NET hosting services out there, my favorite is AppHarbor, where you can use a github repo, or if you want free and private there is BitBucket.

But with MS, like MS, things just can't go smooth.

I created a simple Web Api project (without MVC), just TesterController as is OOTB, and commit.

just like with the API Controllers, you create one and forget to add "Controller", you just can't understand why things not working, and nothing tells you to add that words, or auto-add it, same here that the API needs 5 Nuget Packages, but it references the LM folder instead of the solutio…

Angular 4 Material - beginner tutorial / starter notes

i have just tried the Angular 4 Material, following their get started guide and just tried the DatePicker.

but things didn't go as well as expected, until i jumped to the plnk to see the example.

if you'll notice the main.ts it has a long long list of imports

i just tried to add all this long list to my app, and it finally worked.

technically if you'll import just the MdDatepickerModule as stated in the docs something will happen, even the <md-form-field> didn't worked. but eventually you want it initially to look just like in the docs.

so my 1st advice - import all the modules. when you get to the point where you want to change or use specific things, start cutting the modules.

2nd advice is to make a separate module with all the material modules. but how to do it right?
well, 1st don't put the new file in the app/src folder or you will get this error.

2nd, you just copy that long long list, and paste it 3 times, your file should look like this:

import { NgMo…

Taking Angular 4 as Stand Alone with Asp.Net Web Forms or MVC

once you do in the CLI ng build you will have a new folder named dist containing the rendered solution, in our case our nice Products App.

I created a new ng project named MSProductsAppAspNet in order to put it inside an Asp.Net project.

IISHander (ashx)
so to make things easy, i started with a handler to do the same thing we did with the web api, merging the Products[] array init lines as a static var inside Product class.

publicclassProduct {
  publicint Id { get; set; }
  publicstring Name { get; set; }
  publicstring Category { get; set; }
  publicdecimal Price { get; set; }
  publicstaticProduct[] products = newProduct[] {