Monday, November 12, 2018

Changing the edit link on SPFx remote list viewer to open in same page

Just had a customer asking how to change the default edit link action icon in the table control of the remote list viewer add-in.

Currently, it checks if the item has an edit link, and then opens it in a new window:
return item.dvp_EditFormUrl && || console.log('this item does not have a valid edit url.');
This customer asked to have the edit item open in the same page/tab.
These customizations and changes are exactly what our product excels in. It is actually very simple to change.

Step 1

Edit the web part. In the table control designer toolbar, click on the gear icon to open the control configuration panel:

Step 2

In the control configuration panel, locate the edit action and click on it to open the action's script editor:

Step 3

In the script editor you can change the icon, tooltip and script that this action runs.
Change the script to the following code to open it in a new window.
if(item.dvp_EditFormUrl) window.location = item.dvp_EditFormUrl + "&Source="+encodeURIComponent(window.location.href);
Note: we added the current window as the Source parameter. This will make the edit form redirect back to this current page when the user is done editing the item.

You are done. Click outside the dialog to close it.

Made a mistake? Want to revert back to default? No worries. Like all other properties, once you change their default value, a "revert to default..." option appears under the new value, allowing you to revert your changes to go back to defaults quickly.

Questions? Suggestions? Feel free to ask here in comments or email our support team.

Wednesday, August 29, 2018

Data view plus for SharePoint online (SPFx) template sample

And again... I love this web part so much I have to share another template I made with it.

For those who don't know, the data view plus is a versatile web part that connects to various data sources and display the data using several built in controls, plus it allows you to provide your own template for rendering.

Current data sources are:

  1. SharePoint List
  2. Aggregation of several SharePoint Lists
  3. Excel File
  4. Graph API
but more are added all the time.

So, I got an ask from our sales team to build a risk matrix sample template to a customer who was interested in this product.

Within a couple of hours of work I got this fully working template out to the customer - nothing but HTML and CSS work was needed!

Here is the result web part:

When hovering over a risk, here are the details:
You can see the filter control above the chart, and since this chart is built by custom HTML template - you can customize it as much as you want with full control on all rendering!

And of course, the data source can be any one of the supported data sources so you have a very flexible, custom tailored solution to fit any requirement your clients may have!

Note: The template is available in the sample templates of the custom control as of version build #47
Note 2: This sample template relies on the following fields to exist in the data source:
Title: text
Probability: number or choice (1-5)
Severity: number or choice (1-5)
Project: any type
Risk Owner: any type

Friday, June 22, 2018

SPFx 1.5 npm install errors

I recently wanted to upgrade my SPFx project from 1.4 to 1.5 release.

I followed the instructions on sp-dev-docs for the upgrade (found here:

But at the last step - running npm install - I got a breaking error that would not let npm install complete:


node-sass@4.9.0 install C:\testspfx\node_modules\node-sass
node scripts/install.js
Timed out whilst downloading the prebuilt binary
Hint: If is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.
  export HTTP_PROXY=
or configure npm proxy via
  npm config set proxy
phantomjs-prebuilt@2.1.16 install C:\testspfx\node_modules\phantomjs-prebuilt
node install.js
Considering PhantomJS found at C:\Users\xxx\AppData\Roaming\npm\phantomjs.CMD
Looks like an npm install -g on windows; skipping installed version.
Saving to C:\Users\xxx\AppData\Local\Temp\phantomjs\
Error making request.
Error: connect ETIMEDOUT
at Object._errnoException (util.js:992:11)
at _exceptionWithHostPort (util.js:1014:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1186:14)
Please report this full log at
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! errno 1
npm ERR! phantomjs-prebuilt@2.1.16 install: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1.16 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache_logs\2018-06-21T17_03_52_895Z-debug.log
   ###########|       .-----------------------------------.
   ###/    (##|(@)    |          Congratulations!         |
   ###  ######|   \   |    Solution tester is created.    |
   ###/   /###|   (@) |  Run gulp serve to play with it!  |
   #######  ##|   /   '-----------------------------------'
   ###     /##|(@)

My setup:

My package.json file is as follows:

  "name": "dvp",
  "version": "1.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  "dependencies": {
    "@microsoft/sp-client-base": "~1.0.0",
    "@microsoft/sp-core-library": "~1.5.0-plusbeta",
    "@microsoft/sp-webpart-base": "~1.5.0-plusbeta",
    "@types/knockout": "3.4.55",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33",
    "knockout": "3.4.2"
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.5.0-plusbeta",
    "@microsoft/sp-module-interfaces": "~1.5.0-plusbeta",
    "@microsoft/sp-webpart-workbench": "~1.5.0-plusbeta",
    "@types/chai": ">=3.4.34 <3 .6.0="" mocha="" types="">=2.2.33 <2 .6.0="" build="" bundle="" clean="" code="" gulp="" knockout-paging="" scripts="" test="">

Cause and workaround:

I created a new project using version 1.5 but got the same error.
So, next - I removed all packages in my package.json, deleted my node_modules folder and added them back one by one running npm install after each one to see which one was causing this issue.

I found the cause for this issue is coming from a dependency of one of the "@microsoft/sp" packages in my dev dependencies... not something I can live without.

I still can't be sure what is causing this issue but a bit of googling around I encountered a lot of people had a similar issue a few months or years back.

It seems to be something with the npm package installer causing it, and the workaround many people were using was:

npm install phantomjs-prebuilt@2.1.16 --ignore-scripts

So, I ran that command separately which completed successfully. Next I run the full npm install and what do you know! It finished successfully (with the regular list of 100+ warnings LOL)

Ran gulp, fixed a couple of lines of code that had to be changed and done. Now my project compiles and runs on SPFx 1.5

Still, this took an awful lot of time and the upgrade process is still something I fear as I have yet to have a single version upgraded without running into some npm hell like that (or worst) that just took half a day of work to fix.

Well, hope this helps someone else save some time! Good luck!

(reference github issue:

Monday, May 7, 2018

SharePoint 2013 date picker scrolls form to the top

Just recently noticed a bug in SharePoint 2013... Yeah, I know it is 2018 now LOL

The bug is simple but very annoying.
If you have a long list form, with many columns, and you have a few date columns at the bottom - beyond the scroll position - clicking any date picker will open the picker but will scroll your page to the top.

This happens when using non-IE browsers (I use chrome), and it is the result of the following code running INSIDE the picker iframe:
    function: setFocusDatepicker

Is trying to set focus to the current date element.

Now, since this code is executed in the iframe it could be tricky to fix, since we don't have any code running in that iframe, but our code runs on the current window...

But there seems to be a fix for that we can use a little (a lot actually) JavaScript trickery to manipulate the frame's code from the containing document.

We will hook up to OnIframeLoadFinish function, which is called when the iframe of the picker is ready.

Once inside, we will find the function setFocusDatepicker INSIDE the iframe.
(Note: this is only allowed since we are on the same domain as the iframe...)

Then we will override the setFocusDatepicker to keep the workspace scrollTop, call setFocusDatepicker, and then restore the workspace scrollTop.

Here is the complete code, just call it once after all scripts were loaded:

ExecuteOrDelayUntilScriptLoaded( function() { if (typeof(window.original_OnIframeLoadFinish) !== 'function') { window.original_OnIframeLoadFinish = window.OnIframeLoadFinish; window.OnIframeLoadFinish = function() { original_OnIframeLoadFinish.apply(this, arguments); window.Picker.contentWindow.original_setFocusDatepicker = window.Picker.contentWindow.setFocusDatepicker; window.Picker.contentWindow.setFocusDatepicker = function() { workspaceTop = document.getElementById('s4-workspace').scrollTop; window.Picker.contentWindow.original_setFocusDatepicker.apply(this, arguments); document.getElementById('s4-workspace').scrollTop = workspaceTop; } } } }, "datepicker.js");


Monday, April 9, 2018

Upgrading SPFx React from 1.1.0 to 1.4.0 build errors

Hey guys,

I've been playing with my SPFx demo project (code here on GitHub) getting ready for my session @SPSTC when I decided perhaps its time to upgrade one of my demo web parts to SPFx version 1.4.0 while keeping the other one in 1.1.0 so that I can discuss the upgrade process.

The upgrade process is, as I stated many times, a very tedious and hard manual work - and VERY error prone and time consuming.

Here are a few notes I gathered from this upgrade that I'd like to share - join my session to get the full picture!

Following this article as my base-line:
There are a few things that went wrong here...

React versions

If you follow this guide, it says to run npm outdated and get all packages to the latest versions. Well, that simply is bad advice since when it comes to the react packaged - you should get the same version that the Microsoft packages are using. This is not explained anywhere - you just end up with hundreds of errors in your gulp command with no clue why they are there or how to fix them. I simply went into the Microsoft packages and saw they were using these versions so I used the same:
  • "@types/react": "15.6.6"
  • "@types/react-dom": "15.5.6"
  • "react": "15.6.2"
  • "react-dom": "15.6.2"
That brought down the errors count to 1. Sounds simple? Not so much...

React createComponent error

See, in my web part demo that was built on version 1.1.0 of SPFx - the react component class was declared as:
export default class ReactWebPart extends React.Component<IReactWebPartProps, void>
In the web part class, it was used in this code:
      const element: React.ReactElement<IReactWebPartProps> = React.createElement<IReactWebPartProps>(
          userName: Utilities.GetUserName(this.context as any),
          license: licenseMessage,
which, in turn, produced this error message:
Error - typescript - src/webparts/reactWebPart/ReactWebPartWebPart.ts(27,8): error TS2345: Argument of type 'typeof ReactWebPart' is not assignable to parameter of type 'string | ComponentClass<IReactWebPartProps> | StatelessComponent<IReactWebPartProps>'.
Error - 'typescript' sub task errored after 4.49 s
 TypeScript error(s) occurred.
So, we checked the typescript version we were running, all the npm modules dependencies and versions - they all seemed to check out.
We went with our favorite way for fixing SPFx versioning issues:
We created a new sample SPFx React web part, and if that one (hopefully) compiles - we compare the two.

In our case, since this is a sample component without a lot of code - it was easier to find the difference between the two.
In the new project, the react component class is defined with one difference:
export default class ReactWebPart extends React.Component<IReactWebPartProps, {}>
See, the "void" that was sent in as the react state was changed to an empty object.

This made the error go away and now our project compiles with no problem. Yay!

I can't help but feeling SPFx tooling still has a long way to go before it will be adopted by the mass development community. It can get pretty frustrating every time you have to move computers or upgrade versions to the point that it is just scary and unpredictable.

That said - I have to admit it is brilliant, fast and fun to build on when you get it to compile. So - I'm keeping my hopes up for this platform.

I will continue to provide this feedback to the team @Microsoft, which are doing a great job at listening for feedback, but please also share your experience in the comments below, on their GitHub project  or by voting on user voice requests.

Here is a link to the GitHub with this project in case you want to see the code changes during the upgrade:

Hope this helps,
Funny thing... not 5 minutes after posting this, I went back to my demo and run gulp. Guess what? It errored out. This time showing this strange error:
[17:53:08] Error - Unknown
 Cannot find module 'typescript'
Guess what worked this time to fix this? delete node_modules folder and running npm install again...

Wednesday, March 28, 2018

Transforming SharePoint radio buttons to appear horizontal

Recently I was at SharePoint Fest DC.
While I was at KWizCom's booth, one of our customers approached me with a question: He had a list form with lots of radio buttons.
They each had just a few choices, but the form didn't look very nice since they all stretched out too long and narrow.
See, SharePoint always renders radio button choice fields vertically...

He wanted to have these choice columns render in a horizontal layout instead of the OOB vertical one. (side by side instead of under each other)

In other words, from something that looks very much like this:
Into something that looks like this:

(Due to privacy of his content, I can't share his exact form layout - but he had a few more of them spread around the form)

So, you might notice the customer was already using our forms solution and had the form render in a 2 column layout and with the column captions above the controls.

Because of that, the change he requested was very simple to implement so I was happy to do it on the spot with him, on his laptop.

It took about 2 minutes to complete, he was very impressed, but I must admit - this wasn't a very challenging request if you know your way around CSS.

All he had to do was:
1. Create a CSS file with a new class that targets the table in radio buttons choice columns
2. Change the rows of the table to display inline instead of breaking row like it usually does in HTML
2. Save the CSS file in site assets
3. Get our Forms solution to load this new CSS file and all done!

Here is the CSS needed to make this change, it should work on SP2013, SP2016 and SharePoint online in classic UI:

table[id$='RadioTable'] tr{ display: inline; }

Note: if you don't use KWizCom Forms, you will have to load the CSS some other way to the page, but this solution should still work.

Note #2: this wasn't tested on modern UI, but on classic. It might require some minor tweaking to work in modern UI, let me know in the comments if this is something you need and having trouble achieving.


Friday, March 9, 2018

Recent breaking changes in SharePoint Online

If you ever wondered why SharePoint online apps/add-ins/products are sold almost exclusively as subscription - here is your answer.

We at KWizCom run full automated testing on several production tenants as well as on our own fast-ring release tenant every night, as well as after every build is pushed to fast ring or to production.

More often than we'd like, we see glitches or breaking changes pushed to production that make some or all of our code stop working as intended.

Here are a couple of stories from the past 48 hours:


Product manager sets up a live demo of our forms solution. EVERY THING breaks. Pages load with no settings, after a refresh - with only some settings and on other times normally with everything working.

We investigate and notice that SPO (SharePoint Online) is returning a JS file we store under the site assets with a different content every time.

We cancel all caching, open the file in the browser - and you won't believe it! We get a different file every time!

We rename the file, so the file in that URL doesn't exist anymore. Is the problem gone? No - it's worst. Now it comes back in 3 different versions as well as a 404 not found error occasionally.

I'm freaking out, calling on all my Microsoft contacts to investigate. Within 6 hours the problem is gone like it never happens.

Was I dreaming? NO! I got the video to prove it:

Now, obviously I can't reproduce it so I can't give Microsoft additional information, there is no way to know what happened and how to prevent it from happening again.

(Sounds to me, like a new caching feature was being tested out and pushed to production, then later pulled back).


You thought the first story was strange? try this one. We have a provider hosted app that customers are required to install in order to get our products working.
We literally had this app for YEARS with no problems.
Two days ago we get a support call that no one can install our provider hosted app.
We check and see that our app has an install and uninstall remote event receivers - and that event receiver is throwing error 500.

This event receiver code hasn't changed in years, so what happened?
Well, a built in method that visual studio project auto-generated for us that gets the clientContext used to work, or return null if the app was not trusted.
In the last 48 hours it now stopped working and was throwing an exception blowing up our event handler.

Fun times.
In the first case, we had nothing to do but wait, in the second - it was a simply easy fix. But you get my point as to why we need to constantly monitor and push updates for our products?

Now, you might better understand why I am a strong advocate of allowing vendors to update apps remotely without forcing each user to install a new package (like they try to make us do in the new SPFx eco-system).

We literally push hundreds of updates and fixes every month for all our products without bothering the users to install them - I can't imagine we would have happy customers if they would need to install hundreds of updated packages every month...

Now, if you are wondering why we need so many updates, and boasting about your single app that was built X years ago and working until today - ask yourself what does it do. My guess: not much more than saying "hello" or showing the current time and weather... ;)

Hope this provides some insight to those who are looking to support SPO or any cloud service in their products. Sound off in the comments if you have more to add!

Tuesday, March 6, 2018

Speaking Engagements 2018

ust FYI, my speaking engagements for 2018 are posted here, If you are around – come see me!

If you were in one of my sessions, you can find links to the session code and presentation below.

Also – if you have any comments on my session – feel free to post it here!

February 21, 2018 - Toronto SharePoint User Group - SPFx: An ISV Insight to Microsoft’s latest customization model

March 26, 2018 - SPFest DC - Who Said You Have to Be a Power-User to Create Dynamic Forms in SharePoint/O365?

April 14, 2018, SPS Twin Cities - Who Said You Have to Be a Power-User to Create Dynamic Forms in SharePoint/O365? + Introducing KWizCom SPFx web parts

May 29, 2018 - European Collaboration Summit - SPFx: An ISV Insight to Microsoft’s latest customization model

Friday, February 9, 2018

Windows 10 updates and Hyper-V - beware!

So, I always have a local copy of a full SharePoint farm with a domain controller, data base, exchange server, SharePoint servers from version 2007, 2010, 2013 and 2016 on my desktop.

Its a beast with 16 cores and 100gb of ram.

The OSs of the VMs are windows server versions, some newer and some older like windows server 2008 R2.

In one of the recent updates on my windows 10 host OS, all my VMs were completely gone from hyper V.
I lost all configurations and all snapshots without any warning!

Only 1 VM survived - the one with the newest OS running the SP2016 server.

After re-adding my VMs using the original VHD drives I thought the worst is behind me.

Not so -

It seems the good guys at Microsoft went into a bit of a logic-endless-loop here...

See, they moved all hyper-v drivers into windows update.
Since it is all in windows update - there is no need for the VM integration disc anymore.
So, they removed the vmguest.iso file and the menu option to "insert integration services setup disk".
They claim it is not needed since all VMs now have the network drivers built-in and then can connect to windows update to get the drivers they need.
What about OSs that don't have the drivers? - use the legacy network drive!
But, the legacy network drive doesn't work on 64bit OS.
No problem - get the latest drive from windows update!

Well, after going around in a loop for a day and a half I was finally able to get the vmguest.iso file from a colleague (Thanks Kevin!).

I inserted it into the VM and run the installation, and once completed my network adapter showed up again.

 I guess this was done since Microsoft doesn't officially support windows 2008 anymore, the question is - why purposely kill support for this OS? You had something working, why not just keep it as it?

Or, it could have just been something they missed in the latest update.

Anyway - keep an eye out for this update, and keep a safe copy of the vmguest.iso if you got one!

Thursday, January 4, 2018

Customizing KWizCom SPFx remote list viewer to add google maps popup

We are hard at work here at KWizCom working hard to bring you amazing SPFx web parts. I'm sure you know that.

One of our best offerings are now a bundle of some amazing web parts that are all built on SPFx using KnockoutJS templating and bindings - which gives you the power to influence and change the HTML template of these web parts, or write some custom actions and buttons to really make them feel like custom tailored solutions for your exact needs.

One example I want to discuss today is something our product manager asked me 10 minutes before doing a demo for a potential customer, who mentioned he was interested in showing a location from a list item's column in a popup google map.

He was demoing our remote list viewer app

but this is true for our list aggregator or any of our web parts that are built on top of our amazing Data View Plus:

So, in just a few minutes I was able to provide him with this script that would add an action to the table control that opens a city or address from a column named "City" or "Title" in a popup.

Here is how it works.

Start with a list that has a location either in the Title column, or in a column named "City".
(you can have any other column names you want - you will just have to specify the column name in the script sample...)

Next, lets create a modern page and add a remote list viewer to it, setting the data source to this list:
You end up with this basic table control showing your list items. Please note the action buttons on each row - these are customizable actions that we are going to change:
Now, just click the "Open designer" button to bring up our template designer, scroll down and expand "configure table" section where you will find the "Item actions" list:
By default we provide an item click action plus 4 actions with icons for each item:
1. Open item properties in a popup
2. Open a new email with the item's properties
3. Open the item view form in a new window
4. Open the item edit form in a new window

Choose any one of these to replace, click on it and an action editor popup will open. First - change the icon to something with a map (you can type "map" to filter the icons list):
Next, paste this script into the script editor text area. For more hints on what objects and data you can use - see this popup for more help and information.

var openInPopup = true; //change this to open in new window

//for popup
var mapsLink = "{city}";
//for iframe
var mapsLinkEmbed = "{city}&output=embed";
//get the city column value, if doesn't exist - take the item's title.
var fieldValue = item.City && item.City.text || item.Title;

var buildCityPopup = function(city, src) {
    var popupCity = document.getElementById('kwCityPopup') || document.createElement('div');
    if (popupCity.classList.length < 1) {
    var html = '<div class="kw-Dialog-title">{city}</div><div class="kw-Dialog-content" style="overflow:auto;max-height:500px;"> <div class="kw-Dialog-subText"><div style="text-align:center;width: 100%;border-bottom: 2px solid #ce4b1f;max-height:180px;"><iframe src="{src}" width="300" height="150" frameborder="0" style="border:0"></iframe></div></div></div><div class="kw-Dialog-actions"><button class="kw-Button kw-Dialog-action"><span class="kw-Button-label">Close</span></button></div>'.replace("{city}", encodeURIComponent(city))
        .replace("{src}", src);
    popupCity.innerHTML = html;
    new kwfabric['Dialog'](popupCity).open();

if (fieldValue && fieldValue.length > 0) {
    mapsLink = mapsLink.replace("{city}", encodeURIComponent(fieldValue));
    mapsLinkEmbed = mapsLinkEmbed.replace("{city}", encodeURIComponent(fieldValue));

    openInPopup ? buildCityPopup(fieldValue, mapsLinkEmbed) :;
} else alert("Sorry, could not find a city column value. Please edit the action or add a column named 'City'.");

That's it. you are done. Close the popup and designer by clicking outside on the web part area.
Now you web part shows a map action icon:
When you click on it, you will get a popup with google maps of that location:

Like it? Questions? Comments?
Feel free to write in the comments below.
Please note, for support or more advanced "how do I?" questions, I recommend as always to contact our support (at) kwizcom (dot) com

Thanks, Shai.