KWizCom SharePoint Blog

Upcoming birthday column - without aging your employees!

noreply@blogger.com (Shai Petel) — Tue, 05 Oct 2021 15:03:00 +0000

Here is something I needed to do so many times, and I think I finally perfected it.

A simple HR request, is to show the employees upcoming birthdays, in a simple user friendly way without dating your employees! (So, without showing their birth year...)

I've come up with this simple way of handling this, using 3 columns.

First create a choice column for Month (01-12) and for Date (01-31).

Then, create a calculated column with output type "Date", using this formula:

=DATE(IF([Birth month]<TEXT(TODAY(),"MM"),YEAR(TODAY())+1,YEAR(TODAY())),[Birth month],[Birth date])

And boom - you will always get the employee's upcoming birthday in a date column that you can use to display on your site!

Explanation about the formula:

The formula will check if the birth month has past, and if so will use next year's birthday. Otherwise it will construct a date for the current year based on the month and date you entered before.

Want a cool way to show it?

Try our Calendar Plus web part:

Want an even cooler way?

Use our brand new "Card" control:

Hope this helps!

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

noreply@blogger.com (Shai Petel) — Mon, 12 Nov 2018 17:34:00 +0000

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 && window.open(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.

Data view plus for SharePoint online (SPFx) template sample

noreply@blogger.com (Shai Petel) — Wed, 29 Aug 2018 21:33:00 +0000

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:

SharePoint List
Aggregation of several SharePoint Lists
Excel File
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 1.0.0.8 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

SPFx 1.5 npm install errors

noreply@blogger.com (Shai Petel) — Fri, 22 Jun 2018 12:48:00 +0000

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: https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-for-SharePoint-Framework-Package-v1.5)

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

Error:

node-sass@4.9.0 install C:\testspfx\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-57_binding.node":

connect ETIMEDOUT 52.216.168.43:443

Timed out whilst downloading the prebuilt binary

Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

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.
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\xxx\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 52.216.168.43:443
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 https://github.com/Medium/phantomjs
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! code ELIFECYCLE
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: https://github.com/SharePoint/sp-dev-docs/issues/2092)

SharePoint 2013 date picker scrolls form to the top

noreply@blogger.com (Shai Petel) — Mon, 07 May 2018 21:12:00 +0000

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");

Enjoy!

Upgrading SPFx React from 1.1.0 to 1.4.0 build errors

noreply@blogger.com (Shai Petel) — Mon, 09 Apr 2018 21:38:00 +0000

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: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/update-latest-packages

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>(
        ReactWebPart,
        {
          description: this.properties.description,
          userName: Utilities.GetUserName(this.context as any),
          license: licenseMessage,
          color: this.properties.color
        }
      );

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: https://github.com/KWizCom/SPFxDemo

Hope this helps,

Shai.

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...

Transforming SharePoint radio buttons to appear horizontal

noreply@blogger.com (Shai Petel) — Wed, 28 Mar 2018 19:43:00 +0000

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.

Enjoy!

Recent breaking changes in SharePoint Online

noreply@blogger.com (Shai Petel) — Fri, 09 Mar 2018 17:38:00 +0000

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:

First

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).

Second

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!

Speaking Engagements 2018

noreply@blogger.com (Shai Petel) — Tue, 06 Mar 2018 19:41:00 +0000

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

Windows 10 updates and Hyper-V - beware!

noreply@blogger.com (Shai Petel) — Fri, 09 Feb 2018 15:08:00 +0000

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!

Customizing KWizCom SPFx remote list viewer to add google maps popup

noreply@blogger.com (Shai Petel) — Thu, 04 Jan 2018 23:03:00 +0000

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 http://www.kwizcom.com/sharepoint-apps/remote-list-viewer/overview/

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: http://www.kwizcom.com/sharepoint-apps/data-view-plus/overview/

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.

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.

SPFx 1.4 brings automatic CDN deployment option!

noreply@blogger.com (Shai Petel) — Fri, 15 Dec 2017 18:05:00 +0000

Reading the latest release notes, it was a bit hard to find and to understand fully but here is what I got from it so far:

Starting from SPFx 1.4, there will be a new setting in the package-solution.json file.

"includeClientSideAssets"

Basically, when this feature is turned on, building a produciton package will no longer force you to specify the target CDN and manually host your files there.

Instead, all of these assets will go into the .sppkg file, and when deployed into SharePoint, they will be automatically uploaded to a CDN-enabled library either in your app catalog or - if you enabled it - another pre-designated CDN location.

The benefits are obvious:
That means smaller dev teams or vendors don't have to worry about keeping a CDN up to host their files.
Also, you won't have to worry about uploading and managing these files yourself.

The disadvantages for vendors like us are also clear:
We will have no control over the CDN, meaning - again - any minor change in code would have to result in a new package being built, published, sent to customers and installed before they will see any fixes applied.

While that was how we did things for years in the full trust world, in the ever-changing fast pace apps/add-ins world I am not sure if that is a viable option anymore.
Changes are being rolled to SharePoint continuously. Admins no longer have control on when updates are being installed. And so - our frequently have to update our code to work with these changes and adapt to new features on a regular basis.
Having our own CDN allows us to do just that - push updates to our CDN on a fast ring and production releases and our customers could be happier.

So, it is exciting to see this as an option, even though I probably won't be able to use it in the real world.

What do you think?

SharePoint REST API double encoding field internal names when using $expand=FieldValuesAsText

noreply@blogger.com (Shai Petel) — Tue, 12 Dec 2017 18:31:00 +0000

This is a simple bug I found when building one of our products while it was used by a French speaking customer...

He simply created a column with a french name that had some special characters, for example: "Français"

So, the letter ç was encoded when creating the column's internal name, which is what you'd expect. The column's internal name was: "Fran_x00e7_ais"

When making REST requests to SharePoint to get items, query items, or anything you like - you would get the item field value under this internal name - gain, as you would expect.

But!!!

If you wanted to get the values as text and used the $expand=FieldValuesAsText in your query (or /FieldValuesAsText if getting a single item) - SharePoint returns something very different.

The value for this column would be set in "Fran_x005f_x00e7_x005f_ais", which is basically a double encoded version of the real internal name: "Fran_x00e7_ais"

I couldn't find a solution for this problem besides hacking it, so now I hard coded updated my code to replace _x005f_ with _ when looking for field values as text...

I'll report this issue but since changing it would potentially break so many existing applications I doubt it would be fixed any time soon.

So for now - keep that in mind, and let me know if there is a better way to finding out the field name that this REST API uses!

Changing SharePoint list item attachment to allow multiple files

noreply@blogger.com (Shai Petel) — Mon, 30 Oct 2017 16:09:00 +0000

I just got this email from a colleague saying he wants to upload multiple files as attachments to an item, and having to click add and confirm each and every one separately is quite annoying and time consuming.

So I wrote a little script that changes this behavior of the OOB file upload to allow multiple files selection.

Suprisingly, it works well with multiple files. there was only one part I had to fix, which was the label it shows before you save the item. It still shows the first file name only.

Here is the JavaScript code you can use to enable it on your system today. Just add this script in your new/edit item forms and it should work:

ExecuteOrDelayUntilScriptLoaded && ExecuteOrDelayUntilScriptLoaded(function(){
var oldShowPartAttachment = window.ShowPartAttachment;
var oldOkAttach = window.OkAttach;
window.OkAttach = function(){
var index = String(FileUploadIndex);
oldOkAttach();
var index2 = String(FileUploadIndex);
if(index2 === index)//it means OK fail.
return;
var files = GetAttachElement(FileuploadString + index);
if(files && files.files.length > 1)//more than one file
{
var text = "";
for(var i=0;i<files.files.length; i++) text+=', '+ files.files[i].name;
text = text.slice(2);
document.getElementById("attachRow" + index).cells[0].innerHTML = text;
}
}
window.ShowPartAttachment = function(){
oldShowPartAttachment();
var index = String(FileUploadIndex);
var files = GetAttachElement(FileuploadString + index);
if(files)
files.multiple = true;
}}, "form.js");

Also, we will be adding this little script to a future release of our forms solution, so stay tuned for the update.

Let me know if you like it!

Edit: correction in the script, the if statement was missing the {}

SharePoint Online Search not returning all results part 2

noreply@blogger.com (Shai Petel) — Mon, 16 Oct 2017 14:57:00 +0000

Continuing the investigation into SharePoint Online Search not returning all results

We found that SharePoint search API has the "remove duplicates" flag turned on by default.

At first we didn't pay much attention to it, since the results we were missing were not duplicates...

However, after digging some more into it, it seems SharePoint Search was not only removing identical duplicates (meaning, the same item returned twice) but also similar duplicates - meaning items it deems are too similar to one another.

It is on by default, so you should turn it off on every request. It seems to have helped with our issues, we haven't been able to replicate this issue since we turned that off.

In query string, add:
?trimduplicates=false

In post, add:
{ '__metadata':{'type':'Microsoft.Office.Server.Search.REST.SearchRequest'}, 'Querytext':'sharepoint', 'TrimDuplicates'='False' }

Read more

The strange thing about it was - why did "Reindex List" button help in some cases? Perhaps there were two issues, we can not be sure.

Hope this helps!

Removing the hash from the SPFx bundle file name

noreply@blogger.com (Shai Petel) — Mon, 16 Oct 2017 14:51:00 +0000

Just a quick follow up on this topic Controlling SPFx bundle file name in production builds

It seems the latest drop of SPFx added a new setting that allows you to bypass the hash mechanism and prevent it from being added to your bundle file names.

I have yet to confirm this, but it seems you can add this code to you gulpfile.js:
build.copyAssets.taskConfig = { excludeHashFromFileNames: true, }

And this will stop adding the hash to the file names.

Posted: https://github.com/SharePoint/sp-dev-fx-webparts/issues/246#issuecomment-335946172
By: Franck Cornu
(Thanks!)

I will give it a try and update here if it works. See my other blog post on how to edit the file name and add the version number automatically as well.

Edit: I just verified this is working as of 1.4.0

My Interview with Collab365

noreply@blogger.com (Shai Petel) — Tue, 10 Oct 2017 21:56:00 +0000

Just in case you are interested, here is my interview with Collab365.

https://collab365.community/dotlight-visit-shai-petel-kwizcom-lego/

The event will go live in 21 days, join my session on SPFx development or check out the recording after (link to be posted after the event so stay tuned)

SharePoint Online Search not returning all results

noreply@blogger.com (Shai Petel) — Tue, 10 Oct 2017 19:22:00 +0000

When building the data source for our SPFx list aggregator web part, we noticed that in some cases when we make a request to the SharePoint Online Rest Search API, some lists or content were not returned by the search.

I cannot confirm exactly what happens or why, but in some cases lists that had their title changed were not picked up by the search service days and weeks after the change.
In other cases, lists that were created a few months ago were not returned at all unless specifically mentioning their list name in the query.

After investigating this for a long time, we could not identify a specific common cause for all these lists that would cause this to happen. We did however find many people experiencing the same issue with the SharePoint Online search.

One workaround we found that would fix the issue within reasonable time (usually within a few minutes up to a couple of hours) was simply to visit those lists, go to the list settings and under advanced settings to click the "Reindex List" button.

This seem to fix the issue, which makes me thing that the problem is with the incremental search crawl logic not picking up all changes properly.

Hope that helps you guys.

Versioning strategy for SPFx

noreply@blogger.com (Shai Petel) — Fri, 15 Sep 2017 15:38:00 +0000

Background

As an ISV, one of the most important aspects of our products is - you guesed it - product versioning.

Versioning is important for a lot of things:

It tells users if they are running the latest bits of their software
It helps support reproduce issues and report them more accurately
It helps developers track bugs and issues, when they occur and when they were fixed
It tells the product manager how the product is moving along its roadmap

... and more!

One thing I am not a big fan of is how SPFx handles product releases and versions.

See, as an ISV in the cloud-world, we find it important from time to time to push updates to our apps to all our customers at once, without having to ask them to download and install a new version of the application.

We do that by updating the resources in our CDN, expiring our cache and that makes sure all clients get the latest and greatest builds automatically.

Imagine you have a spelling mistake, typo, or that an update is rolling out that causes a critical failure of your product. In these situations, we usually push updates from our servers to all our customers, and they don't have to worry about updating anything themselves.

(Remember the days you had to go to the app store on your phone and hit "update" on every app? Yuck!)

So, for that reason, I find the way SPFx produces builds a bit lacking.
See, whenever you are ready to release a build, you type gulp --ship to build your scripts in release mode.
That produces a bundled JS file that contains a hash in the file name.
Meaning - every little change you do will produce a different hash code.

data-view-plus.bundle_d41aab51ecdd17f15f7f921d87534405.js

Now, the manifest points to that specific file with that specific hash, and requires you to produce a new app package, and install that new package on your app catalog.

Although the bundle JS file is most likely hosted in your CDN, each new version you release points to a new different file, so no one gets updates automatically.

Moreover, you have no way of controlling when your clients upgrade, so you can never remove older files from your CDN, making it a complete mess and nightmare to maintain in an ever-growing pile of files, most of which no one will ever use.

This is why we chose to go a different route when releasing our SPFx versions.

Instead of using the hash - we use a package version in the JS file name.
As long as we make small changes that we want to push automatically, we keep the same file name and push the changes to our CDN.
We track the build number using a JS variable inside our code to be able to keep track on what build is the current client running, since we do not change the package version on every release.

data-view-plus.1.0.0.5.js

Every time we have a bigger change, that changes our package manifest (added a web part, added or changed a dependency library) - that requires a new app package to be released. So only on these circumstances we advance the package version (config\package-solution.json) and release a new package with a new bundle file name to match it.

This significantly reduces the amount of script files we have in our CDN, makes each file very easy to understand which build it belongs to (instead of those hash codes) and allows us to push minor updates without requiring our users to install a new package in their catalog.

So, how do we do it?

I'm afraid we have yet to automate this part... but the steps are not too complicated to follow, I promise.

From this point I assume you have your SPFx project all ready and set up, configured with a CDN of your choice.

Releasing a new package version

Change the version in your config\package-solution.json file
Advance your "BuildNumber" variable in your code (optional)
Run 'gulp --ship'
Visit the new files outputted to temp\deploy
Edit the bundle JS file name, replace the hash with the version you put in step 1
Edit the [guid].json file, it should have the bundle JS file name in it - replace with with the new file name you came up with in step 5
Save all changes
Run 'gulp package-solution --ship'
Now, you package will be ready for you under SharePoint/Solution and it will use the file name you set in step 5
Don't forget to copy your bundle JS file to your CDN, do not remove older versions from the CDN if you have them.

Releasing patches or minor updates

Advance your "BuildNumber" variable in your code (optional)
Run 'gulp --ship'
Copy the content of the bundle JS file from either temp\deploy or from the dist folder into the CDN, overwrite the content of the latest version file you got there

Hint: how can you tell if your change requires a new package or not? Simple. Add the web part to a SharePoint page (classic or modern) - not the workbench. It will use the old web part definition. If it runs - it means your changes did not break the signature of the bundle. If you get a nasty error message, time to release a new version.

Do you manage versions in SPFx? Do it differently? I would love to hear, please leave a comment!

Also, know how to automate my process? Please share!

Thanks for reading,

Shai.

Updating SPFx package still showing the older web part

noreply@blogger.com (Shai Petel) — Fri, 15 Sep 2017 15:37:00 +0000

Something I noticed while working with SPFx,
some times I would release a new package to my app catalog by dragging it over an existing older version.

SharePoint would prompt me to overwrite, I would say yes.

Now, every page refresh I would randomly get the older file loaded or the latest one loaded. It was completely unpredictable and didn't seem to depend on anything specific I did.

What happens?

It seems when you overwrite a package, you don't get the dialog to trust the package. Now, that dialog is important, since while you visit it, it plants a cookie in your browser that marks for SharePoint to drop its package cache and reload the manifest.
If that cookie is missing... you would be getting a cached version of the manifest.
Since SharePoint Online is a beast with many WFE servers in load balanced setup, you sometimes get a server that cleared its cache (maybe the one that handled the replace action) and other times a server that still has the older one cached.

This situation is not a big deal in production, since in 20 minutes or so the cache clears itself.

But for dev - here is what you have to do to avoid it:
Simply delete the package before you upload a new one, and don't use the overwrite option.

Simple, efficient but very confusing...

Hope this helps!

Office UI Fabric JS multi select support

noreply@blogger.com (Shai Petel) — Fri, 08 Sep 2017 00:50:00 +0000

Following up on my earlier post, where I shared our own version of Office Fabric JS that resolved a few major issues with versioning, isolation, and custom-prefix.

As promised we will continue to deliver enhancements and bug fixes to our hosted version of Office Fabric JS library.

In the near future, we hope to launch this as an official fork with open source in GitHub, but for now we still host it and you are welcome to use it.

A reminder, here is the original post explaining how to use our version.

So, to the matter at hand.

Today, I am happy to announce we have released a new build that added a much needed feature to the office UI fabric JS library: support for multi-select.

As a design decision, Microsoft decided they will not support multi select control for usability reasons, fearing it won't be compatible with touch devices.

While you may or may not agree with their decision, there are times where using a multi select control will make sense, either as a requirement from your customer, your users or just what makes more sense for you in that particular situation.

(GitHub Discussion here)

So far, select controls that were enhanced with office UI fabric JS would just render as a regular single select.

Today we released an update to the library, once you set your select control to allow multiple selection, enhancing it with Office UI Fabric JS will now render a multiple selection control.

The main differences are:
1. After selecting a value, the drop down will remain open allowing you to select another one.
2. Clicking on a selected item will remove it from the selection.
3. The text box will now show all selected values separated by ,

Here it is opened:

And closed:

Here is the working JSFiddle:

Controlling SPFx bundle file name in production builds

noreply@blogger.com (Shai Petel) — Thu, 31 Aug 2017 19:52:00 +0000

As promised, sharing the code as discussed in my SPFx advanced development session , in this blog post and in this GitHub discussion.

As you might know already, when building an SPFx component in production (gulp --ship) you could not control the produced file name of your bundle JS file.

The file would be generated as:
{product}.bundle-{hash}.js

That caused a lot of grief for our caching mechanism and our version management and product release strategy, preventing us from taking control over our cache strategy, using other java script optimization tools (due to the bundle file name) and publishing minor fixes without requiring our clients to install a new package.

It seems currently there is no supported way to control that, and that the production file name is being set hard coded in the copyAssetsTask.

After a lot of trials, I finally managed to find a way to control it, but it involves hacking into the build process in a way that I am pretty sure will not be future-upgrade proof.

So, until such time as the good people at Microsoft exposes this to us in a supported way, here is what you can do today.

Remove the hash from SPFx bundle file name

1. Load package-solution.json so that you can get the version number from it:

const packageJson = require('./config/package-solution.json');

2. Add this code in your gulp file, just before build.initialize(gulp);

var original_renameWithHash = build.copyAssets._renameWithHash.bind(build.copyAssets);

build.copyAssets._renameWithHash = function (gulpStream, getFilename, filenameCallback) {

var original_GetFileName = getFilename;

getFilename = function (hash) { return original_GetFileName(hash)

.replace('_' + hash, '.' + packageJson.solution.version); };

return original_renameWithHash(gulpStream, getFilename, filenameCallback);

};

Remove the .bundle from SPFx bundle file name

This one, was suprisingly simple to do.

Thanks to @iclanton pointing out, all you need to do is edit the config/config.json file, and change the outputPath property.

Adding a post build task

As a part of my trial an errors, I tried adding a post build task. It didn't help in this case since it runs before the bundle process begins but here is how you do it just in case you might need to:

//Add post build task. This still runs before bundle task

let renameFilesProductionTask = build.subTask'rename-files-production',

  function(gulp, buildOptions, done) {

var production = (process.argv.indexOf('--ship') !== -1);

if(production)

this.log('Built in production!');

done();

});

build.rig.addPostBuildTask(renameFilesProductionTask);

I hope this helps. I will update this post once I learn if there is a better way to achieve this.

Thanks.

Setting up automatic deployment to azure web app

noreply@blogger.com (Shai Petel) — Thu, 24 Aug 2017 17:58:00 +0000

This is something we have been working on for a long time, far too long. There are so many samples and options out there it was very difficult for us to set up, and now that we finally have our environment up and running I thought I'd share our experience.

Our set up

First, let me describe our current set up.

See, with SharePoint hosted add-ins, Provider hosted add-ins, click once applications and other services (like licensing, captcha, etc) - we had to set up a web app on azure.

That web app serves as a CDN for our JS/CSS/HTML/Images and a few asp.net apps, and we had to set it up to be globally available, so using a traffic manager we have a few servers around the world handling local traffic.

Now, we set up one extra server for what we call a "fast ring" release cycle.

That's where we publish our beta versions for testing, and after a short cooling period we push them to the production servers.

So, basically each app we release requires us to publish to 1 fast ring server, and later to a few production servers in what you can imagine is a very time consuming and error prone publishing process.

Also, every server we added to the mix required the developer to publish to that server as well.

So automating this was a high priority for us from the beginning.

Automation options

I've continuously discussed and read about azure automated deployments, and was very happy to see there were a lot of options to publish to azure but neither answered all of our needs.

Synced library (DropBox, OneDrive, etc)

This option was by far the easiest to set up. You basically register one of these services to be the source of your web app.

Surprisingly, no OneDrive for business support - only personal OneDrive. Actually, this is more than a surprise, it is flat out ridiculous since the target audience here is clearly a business user with a very high likelihood to be a O365 subscriber!

But that wasn't what threw me off.

You would get a sub folder in your service, and map it to a server.

So, I could build a "production" folder and "fast ring" folder and map them to their servers. Easy enough.

Then, I would have to sync that client to my dev machine, and "publish" my web apps into that local folder.

That would in turn sync the changes into the cloud, and at that point it gets tricky.

There isn't a way for azure to detect changes and start the update automatically.

You would have to visit each and every web app and click the "sync" button to have them sync their content with the storage service.

I'm sure I could write a script or some code that would automate this, but I was trying to avoid writing any code for something like this - so moving on.

Azure continuous deployment from visual studio online

In azure, under the web app there is a way to set up a connection to a project in Visual Studio online.

Since all our source code is stored in visual studio online anyways in Git repositories - I really had my hopes up.

Setting this up was just impossible.

Since we have an MSDN azure subscription where all our services are set up, and our O365 tenant is on a different subscription, our visual studio online was associated with our O365 tenant so that we can use those logins.

It seems it made it impossible to associate that visual studio online account with our azure MSDN subscription, so I tried and tried and it seemed to be impossible so I gave up.

Visual studio online "Build & Release"

Finally, I went to visual studio online and noticed there is a way to configure it to build your project on their servers and set it up to publish and release to many remote services, including azure.

I honestly struggled with setting up the build on the server. I got it to work on some projects, others threw errors and I was about to give up. I'm sure its possible and I will definitely work on it again until I get it working like I want it, but even though - getting it to publish a click once project for example would be complex, using our code signing tools and many of our pre/post build custom events and so on - it might be too complex to do.

But, I came up with a simpler way of doing it.

We would build our projects locally, and publish them locally.

Web applications - as a deployment package file. this produced a zip file, that we would check in the source control.

Next we can publish that zip file package to azure, and set up a trigger for the publish task on that zip file so that it would run automatically whenever the zip file changed.

For click once - we basically check in the "publish" folder, and did the same thing - put a trigger on it, and set up a task to publish that entire folder every time it changes.

This allows us to still build and publish using our dev machines, and have visual studio online job only handle publishing the content to the web servers in azure.

Next, we decided our "master" branch would be our production. Created a "fast ring" branch that would be published to the fast ring and we were done.

That was by far the easiest to set up (connecting to azure subscription took 2-3 minutes, but at least it worked), and was automatically triggering whenever we pushed a new version.

The only downside is, that I couldn't set it up to build the package on the server, but like I said - still working on it.

So, if you are working in visual studio online, obviously I would recommend this approach. But if you are not - you should check it out anyways, since the build & release tasks there support getting your source code from many sources (GitHub, Remote Git repo, Subversion) has a ton of build and publish tasks you can add and supports publishing to many services (not just Azure).

Also cool - is that I now get an email saying if a publish went through OK or failed. So I do have some monitoring on whats going on moving forward, which is great.

Definitely the easiest one to set up, and I wish we had done this a year ago.

If you have experience with something like that, please share your thoughts in the comments below, also questions are always welcome.

SPFx: An ISV Insight to Microsoft's latest customization model

noreply@blogger.com (Shai Petel) — Tue, 01 Aug 2017 13:30:00 +0000

As promised, here is my blog post about this session from @spsnyc

Thanks for all the great reviews, the comment I got the most was that it had too much great info.

My greatest challenge writing this session was focusing on a few advanced topics that were not widely covered by other SPFx sessions.

There is an influx of SPFx sessions on every conference these days, and I find the majority of them (maybe rightly so) focus on beginner level introduction to SPFx.

What I wanted to do with this session is something different.

Focus on a few important more advanced topics that were not widely covered by other speakers.

This led me to build this level 300-400 session that focuses on these key points:

Publishing versions
Pushing updates through CDN
Sharing code between projects
Building a custom PropertyPane property

I cover these points in a deeper level, and accompany them with complete source code example of my solution.

Here is the slide show:

This is an embedded Microsoft Office presentation, powered by Office Online.

* I highly recommend downloading and viewing the slideshow in PowerPoint to view my speaker notes and comments on each slide.

Here is the code samples:

https://github.com/KWizCom/SPFxDemo

Please feel free to give me more comments and suggestions on what would you like to hear about, so I could update my session accordingly.

Also consider following the github project since I will publish updates to the source examples to it.

Thanks.

Updates and related posts:

Controlling SPFx bundle file name in production builds

Office UI Fabric JS multi select support

How to avoid breaking your SPFx project when dependencies change

SPFx project breaking after moving to a new computer

SPFx: Sharing Modules between projects

Debugging SPFx using VSCode - multiple projects in sub folders

SPFx workbench certificate error in Chrome after v58

Updating SPFx package still showing the older web part

Versioning strategy for SPFx

Using KnockoutJS in the new SPFx - containerless control flow removed

Using Office UI Fabric JS in SPFx

Or just check out all posts on SPFx

How to avoid breaking your SPFx project when dependencies change

noreply@blogger.com (Shai Petel) — Thu, 27 Jul 2017 16:53:00 +0000

Your SPFx project has a short list of dependencies.
They are listed in package.json

Thing is, these dependencies have a looong list of dependencies themselves, so that you end up with over 300MB folder of node_modules by the time you finish running npm install on a new SPFx project.

As most of you probably noticed, SPFx by default has a .gitignore file that excludes node_modules from ever going into your source control.

Which is a good thing - these packages are monitored and controlled by their authors and you don't need to manage all that code in your project, do you?

That means, whenever you move to a new computer or a new developer start working on a project, after cloning that project they must also run npm install before they can start working.

Now, npm install will start loading packages and dependencies as of TODAY, not as of when the project or the SPFx framework were compiled.

Some dependencies are specified by a version number, so no worries there (as long as the author did not re-publish new code with the same version number).

Others are specified as latest, or "*" or just with a major version - allowing minor versions updates. Since minor version updates suppose to be fully backward compatible and not contain breaking changes - sometimes that is not the case.

So, you go to your new PC, run npm install, and your project does not build.
You get a ton of errors, version mismatch, and have no clue why.

The reason would be probably a dependency you had was updated during that time (or god forbid - removed from npm!) which now breaks your project.

That is something I talked about during the first DevKitchen I attended, when I first saw SPFx. Having a huge list of dependencies I don't control, my project rely on, and that I don't have a copy of scared me.

And sure enough, since that day until today I had at least 4 episodes of dependency hell.

What can you do today

Without going into what Microsoft can and should do to avoid this in the future, here is what I plan to do and encourage you guys to do as well:

1. Build a test SPFx project, call it "Sanity"
2. Run npm install, and make sure the demo web part works by running gulp serve
3. Remove the .gitignore file
4. Store the entire huge project in your source control

Every so often, run npm update on this project.
Test if it is working - and if yes, commit the changes.

However, if your project fails to build, you know you got a breaking change. Do not commit, it will probably get fixed within a few hours.

Note that some breaking changes may come from a globally installed package, such as typescript.
So, it is a good practice to log these versions as well somewhere in your project. You can get that list by running "npm ls".

What to do if your project breaks

Now, once one of your project fails to build, look at where the errors are coming from.
It will probably tell you the packages and their dependencies.
Now, you can compare these packages with the ones you have in your "Sanity" project, and once you identify the ones causing the problem you can manually revert it by running:
npm uninstall {package}
npm install {package}@{last working version}

If you don't have that "Sanity" package, and do have a working version on a different computer - try to compare the versions between these two.

A quicker fix might be to simply copy the node_modules folder from the working project into your new broken projects.

It could be very frustrating spending valuable dev hours on maintenance instead of productive work, but hopefully these steps could help you cut down those hours.