Sp-dev-fx-webparts: react-kanban-board dont work properly on IE. Locked on "Loading tasks"

[ewidance]

Authors

@westerdaled
@RamPrasadMeenavalli

A working kanban on most navigators.

Observed Behavior

Internet explorer 11 (tested on 11.836.18362.0 / 11.0.190) can't load kanban webpart deployed on a sharepoint tenant. IE is blocked on "Loading Tasks".

Works fine on FF, Chrome and Edge.

Steps to Reproduce

• npm install
• gulp bundle --ship
• gulp package-solution --ship
• Deploy solution on tenant.
• Load IE and insert a kanban on the page, connect it to a task list and save.
• Kankan tasks will not be displayed.

Environment Details (Development & Target environment)

• Sharepoint Online
• Windows 10 Pro 64 latest with All navigator updated to latests versions.

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[hugoabernier]

@ewidance the authors of this sample are @westerdaled and @RamPrasadMeenavalli. Hopefully they can help you.

[petkir]

Hi @ewidance,

I have taken a look at react-kanban-board.
there are 2 problems with IE11
One can be easily fixed some polyfills are missing
_npm install @pnp/polyfill-ie11 --save_
KanbanBoardWebPart.ts add _import "@pnp/polyfill-ie11";_

The second problem is not so easy to fix, because the component used in this webpart solution, does not work in my IE11 Browser.
Link from external component demo page:
https://www.jqwidgets.com/react/react-kanban/react-kanban-kanbanevents.htm

The jQkanban component (for Javascript/jQuery or Angular or Vue) works great in IE11.

[westerdaled]

@ewidance thanks for looking at this. Are you advocating swapping out the existing component for the JQkanban component?

[ewidance]

I confirm react-canban dont work on IE11, and even with polyfill, demo still don't work. JQkanban Seems to work fine (tested on https://www.jqwidgets.com/angular/angular-kanban/#https://www.jqwidgets.com/angular/angular-kanban/angular-kanban-defaultfunctionality.htm works fine on IE. A replacement seems to be a good idea.

[westerdaled]

@ewidance Unfortunately, their React version version does not work in IE https://www.jqwidgets.com/react/react-kanban/index.htm#https://www.jqwidgets.com/react/react-kanban/react-kanban-defaultfunctionality.htm . Anyone up for doing this Angular - I am heading for the door😐!

[petkir]

@westerdaled do you like to change this? Or should I change the react component to jquery or angular component?

[westerdaled]

@petkir Please go ahead. I guess jQuery has wider appeal than say Angular ( even AC has stopped promoting it).

[hugoabernier]

@westerdaled and @petkir Would it make sense to look into something that does not have any licenses associated to it? Keep in mind that all our samples are MIT licensed, but while jqWidgets has an open license for open-source projects, it would require anyone using this in their commercial environments to acquire licenses for jqWidgets.

I'd even be happy to collaborate on a full Office UI version with you.

And yes, we can make it support IE.

[westerdaled]

Hi @hugoabernier .
Is see what you mean . So you are advocating rolling our own office fabric react Kanban component?
If so, this woud be a great learning excercise. Depending how much work iis involved, also make it able to render Planner ( and or ToDo) tasks with a property switch.

[hugoabernier]

@westerdaled the sample as it is now is great, and I definitely learned from it, and I must admit that it would have never have occurred to me that we would need to provide IE support (people still use IE?!).

Maybe I'm biased, but I believe that all SharePoint web parts should look and feel like SharePoint -- including support for themes and section backgrounds. And all samples in this repo should not require additional licenses.

If we're updating this sample to add IE support, maybe it is our opportunity to make it more SharePointy.

If there is another open-source react- based library that supports IE and provides full support for customizing look and field, we should use it... if not, it would definitely be fun to do our own, and definitely a great learning experience for everyone -- not just the authors.

I'm happy to work on it, but don't want to steal anyone's thunder. Maybe worth a collaboration?

[ewidance]

Unfortulately, Sharepoint people HAS TO use IE until Microsoft will raisep Edge to the same functionnality level in term of Sharepoint collaboration. When working with Sharepoint, unfortunately only IE allow opening document list in explorer, proper connexion to excel, word and powerpoint files, proper copy/paste on a quick edit and much more....

[petkir]

Hi

@hugoabernier I understand your point and it's ok, I haven't looked for the component licenses.
@westerdaled in my opinion first goal should be the SharePoint Tasks-List and IE11 :) I'm a big fan of small steps.

After I read your posts I was thinking about it.
Fluent UI Components usage in a Kanban Component ... sounds good in my ears

I'm happy to work on it, but don't want to steal anyone's thunder. Maybe worth a collaboration?

Why not?

I pushed my first idea in a brunch

[RamPrasadMeenavalli]

I like @hugoabernier 's idea of making it more SharePointy.
When I was initially developing this sample, I looked for some libraries which support customizing the UI. There are few libraries which allow that, but only to some extent. I found react-dnd (https://github.com/react-dnd/react-dnd) has many customization options possible. But I had issues using that in IE11.

On a different note, the most scary requirement I hear is "support for IE" :)

[petkir]

Hi @RamPrasadMeenavalli

When I was initially developing this sample, I looked for some libraries which support customizing the UI. There are few libraries which allow that but only to some extent. I found react-dnd (https://github.com/react-dnd/react-dnd) has many customization options possible. But I had issues using that in IE11.

after some hours playing around with Drag events I know why
event.dataTransfer.setData allows only 'text' and the value has to be also a string
MDN web docs

On a different note, the most scary requirement I hear is "support for IE" :)

It's sometimes a challenge, but it's a common requirement Browser Support

@ewidance @westerdaled @RamPrasadMeenavalli
I have rewritten the Control without any 3rd party lib.
UX of the Kanban Control is not finished, but the functionality.
It works in my IE (It works on my Maschine)
Source:
https://github.com/petkir/sp-dev-fx-webparts/tree/petkir-IE11Support-1288/samples/react-kanban-board

Please give me Feedback

[westerdaled]

Wow , that looks impressive. Good use of reusable controls too. Were you able to add fluent framework support ( not sure if that is in prevew yet ).

[petkir]

Wow , that looks impressive. Good use of reusable controls too. Were you able to add fluent framework support ( not sure if that is in prevew yet ).

Hi @westerdaled , yes it's possible.
Fluent UI

Currently, it's React 16 and office-ui-fabric 6.
SharePoint 2019 it's React 15 and office-ui-fabric 5. Iwas think about downgrade this project to Support 2019, what's your opinion? cloud-only or also on-premise support?

[westerdaled]

Personally, I would be looking forward and not backwards unless there data to back up real high demand for SharePoint 2019 support / .

[petkir]

Thanks for your Inputs

@westerdaled I let it stay at ' office-UI-fabric 6'. I'm not sure about Fluent Ui (Fabric 7) support in SharePoint.

@RamPrasadMeenavalli @ewidance @westerdaled @hugoabernier can you take a look over the functionality and documentation, before I make a Pull-Request. Every kind of feedback is welcome!

https://github.com/petkir/sp-dev-fx-webparts/tree/petkir-IE11Support-1288/samples/react-kanban-board

[westerdaled]

I guess fluentui could be added in the next release . _Note. the fluent UI sample React Starter App in the link you provided, won''t even build with a known jest issue._

Not sure how much I can add as I'm still learning React . I did notice the link in the readme is invalid.

Read More about the implementation of this Board

I would be very interested in how you went about designing the KanbanBoard component whilst still ensuring that it has IE11 support - a podcast or blog post or whatever,