SharePoint Framework development tips: prettify your imports

The source code with samples from this post is here at GitHub.

Have you ever found yourself writing something like this in your SharePoint Framework web parts: 

import { Customer } from '../../../../../../models/Customer';
import { Utils } from '../../../../../../common/Utils';
import { Api } from '../../../../../../services/Api';

import User from '../../../user/User';
import GreenButton from '../../../ui/green-button/GreenButton';
import Grid from '../../../../../../shared/components/grid/Grid';

Above code has a few issues: 

  • Readability of such code is not at the best level. A lot of parent relative paths like "../../../" don't look good
  • It looks ridiculous to import "Grid" from "...components/grid/Grid". It's pretty obvious that we want to import Grid from components/grid. No need of one extra word "Grid". The same also applies to other imports
  • When you add a new import or refactor your code by moving into different folders, you will have troubles figuring out how many "../../" you need :)

What if I tell you that with some webpack and typescript magic we can make it look like this: 

import { Customer } from '@src/models';
import { Utils } from '@src/common';
import { Api } from '@src/services';

import User from '@hello-world-components/user';
import GreenButton from '@hello-world-components/ui/green-button';
import Grid from '@components/grid';

This code is a lot cleaner and doesn't have all mentioned issues. 

Let's figure out how to do it! More...

Building interactive feedback analysis system with MS Forms, MS Flow, Power BI and SharePoint Online

Office365 family provides a lot of services for you and your organization. In recent weeks I was playing \ working with some of them like Power BI and MS Flow.

I wrote an article about sharepoint.stackexchange analysis with Power BI. Power BI is a great tool for data analysis. With Power BI Desktop you can create great visualizations of your data and share it with your colleagues or publish on the web. It nicely integrates with modern SharePoint Online as well. 

MS Flow provides a way to automate a lot of different processes and simplify business cases. It also a very powerful tool in a different area - process automation. How to combine all of them and build something useful, engaging and interesting? That's the question I came up when I was working with these tools. Well, there are a lot of options available. It all depends on your imagination or concrete business case. I ended up with an interactive feedback analysis system. More...

SharePoint development state in 2018: story based on sharepoint.stackexchange analysis with Power BI

The year 2018 is over and it's time to perform regular analysis of data at sharepoint.stackexchange. This is the third edition of such analysis. 

Tools used to collect and analyze data: 

  • Power BI with Power BI Desktop - super cool tools for data analysis. If you don't have experience with Power BI, it's worth trying to see what is possible. When I first tried it two years ago I was sooo impressed with power yet simplicity in performing data analysis and building visualizations. It works very well for both simple and advanced scenarios. I believe that everybody will find these tools useful for any kind of data analysis. 
  • DaxStudio - extremely useful tool to test your DAX queries. I found it recently and it helped me a lot.
  • Power BI Community - Power BI has a very strong community. I found a lot of answers at their forum, I even asked some questions and community helped with valid answers. That's not a "tool" but worth mentioning. I am grateful for all the answers.
  • Google Maps Geocode API
  • Stack Exchange API
  • osmosis - nodejs webpages scrapper

The source code used to gather initial data is available at GitHub

Links

Previous reports:

Disclaimer

All thoughts are mine. Maybe they are not correct or you simply think differently. Please share your thoughts and opinions in comments. 

Ok, let's get started! :)

More...

SharePoint Framework development: some gotchas and how to solve them

This post is mostly for Googlers, who experience unexpected issues with SharePoint Framework (like I did). 

Whether you like it or not, sometimes shit happens.

Issue

Usually, I don't use spaces in paths to my projects, however, one day for some reason I decided it was a great idea (probably I was trying to be more creative). And I paid for it.

If you have created a SharePoint Framework project, and the path to that project contains spaces, you are in trouble. gulp serve will work, gulp bundle gulp package-solution will work. However as soon as you upload your app to App Catalog, you will see an app package error: 

Invalid SharePoint App package. Error: Part URI is not valid per rules defined in the Open Packaging Conventions specification. More...

Microsoft Flow beginners guides: How to conditionally update SharePoint list item

Unfortunately, I haven't used Microsoft Flow in production yet. I read docs, I've tried some basic things, I saw a lot of cool presentations around MS Flow and different integration options. From what I saw and tried so far MS Flow is an extremely powerful tool to automate processes. You can do so many cool things (of course if you have enough experience)! I'm just exploring and in this post, I'm going to build a very simple Flow, which updates a SharePoint item based on different conditions. When SharePoint item is created, it will check the item's field and update the same item based on a condition. 

Here is our resulting flow:

More...

SPFx webpart with MS Graph and PnPjs: step by step guide

So you want to build an SPFx webpart which uses MS Graph API through PnPjs. Here is step by step guide on how to do that.

A few months ago I wrote a similar post, however, things were changed, some things were simplified a lot, that’s why this is a revisited guide. Also, I’ve addressed some additional steps here. The source code is available on the official SharePoint/sp-dev-fx-webparts GitHub repository.

Prerequisites

  • SPFx >= 1.6
  • PnPjs >= 1.2.4

1. Scaffold SPFx webpart solution with React

This step is pretty self-explanatory, simply run yo @microsoft/sharepoint, select React, give your webpart a name, do not change other defaults asked by yeoman.

More...

How to create SharePoint Online add-in with ASP.NET Core 2.1

While support of .NET Core for SharePoint CSOM libraries on its own way (still no ETA), you can create a SharePoint add-in with ASP.NET Core 2.1 today. Of course, it adds some inconveniences, but at least you can target the latest version of ASP.NET. I’ve created a sample project at GitHub here so you can easily try it. This post describes how to configure everything to run it.

First of all, a few drawbacks worth mentioning:

- you can’t use F5 experience in Visual Studio for convenient debugging. Instead, you should manually upload your app into a site and attach Visual Studio to running web application.

- you can’t target a project to netcoreapp. Obviously you can’t do it because SharePoint CSOM for .NET Core is not available yet. That’s why you have to retarget your project to .NET Framework instead. Which means that you lose cross platform feature. If that’s essential thing for you, then you should wait for official .NET Core support. 

- solution described here only works for SharePoint Online. On-premises is a completely different story and out of the scope of the post

Let’s get started. More...