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: