In this blog post we will have a look at how we can use GitHub codespaces to do development related to SPFx. The concepts that are mentioned in this blog post run in parallel with the details shared in this brilliant article on Visual Studio codespaces by Paul Schaeflein.

In this 2 part series we will start by looking at:

  1. What GitHub codespaces are and how to create them. After that we create a simple SPFx webpart in GitHub codespaces.
  2. How to push the code of the SPFx webpart from GitHub codespaces to a repository in Azure DevOps.

Part 1 — GitHub Codespaces

What are GitHub codespaces?

GitHub codespaces are cloud hosted development environments that can be created very quickly so that we can start coding on a project right away. In terms of SPFx development we can think of GitHub codespaces as a preconfigured development environment (in the cloud) which has all the SPFx pre-requisites installed. …


In part 1 of this series we saw how to create a GitHub codespace for SPFx development. In this part we will have a look at how to push the code from GitHub codespaces to Azure DevOps. This will be helpful if we are using Azure DevOps to store our code.

The instructions mentioned here can be done for any code in GitHub codespaces. Also the instructions show one of the several ways of push the code to Azure DevOps. So let’s be sure that this is not the only way.

Repository in Azure DevOps

Let’s start by creating a new Git repository in Azure DevOps. There are many articles on the internet explaining how to do that. …


Introduction

In this blog post we will see 3 different (1 slow and 2 fast) ways of getting data from a table in an excel file using Power Automate. We will start by looking at

  1. a Power Automate flow which uses simple actions but takes long time to run,
  2. then we will look at using a combination of simple actions and Pieter’s method which takes lesser time to run and
  3. finally we will use a couple of HTTP actions along with Pieter’s method which will take only a couple of seconds to run.

Credits

Pieter Veenstra and John Liu write amazing blogs on Power Automate. The content in their blogs is brilliant and helps a lot in creating fast Power Automate flows. We will be using the different techniques mentioned by them in this post. …


In this post, we will see a GitHub Action that creates an event in a user’s Outlook calendar using Microsoft Graph (via PnP js).

An example usage might be — when a pull request is submitted in the DEV branch on the GitHub repository, an event is created in the repository owner’s calendar on the next day which contains the details of the pull request. The owner will get a reminder on the next day at the specified time and then the owner can review the pull request and can the required take action.

Image for post
Image for post
GitHub Actions to create event

Set up

Firstly if GitHub Actions are new to you, please have a quick look at this short video to understand what GitHub actions are and then have a look at this video by GitHub to understand more details. …


This post explains how to use the newly released GitHub actions/workflow with SharePoint Framework solutions. We will see how we can automate the build and deployment of an SPFx solution hosted in GitHub.

Image for post
Image for post

What are GitHub actions?

A GitHub Action is code that runs when an event happens on GitHub. A set of actions gives us a workflow. For example, there is push event on the repo a workflow, with actions to compile, build and test code, runs automatically. In this post we will be looking at how to write such a workflow for an SPFx solution. …


In this blog post we will have a look at how to display managed metadata terms as labels in a gallery in PowerApps.

Image for post
Image for post

The idea behind this is that administrators can easily add/remove terms with which, the data in the PowerApps gallery can be easily controlled without editing the published app.

In this post we will create 2 input forms:

  1. A simple input form in which we will collect the number of licenses needed for each software.
  2. Another input form (showing the parent child hierarchy of the terms) in which we will collect the numbers needed for each hardware (as shown in the image above). …


In this blog post we will have a look at how to add animations to items displayed in a SharePoint list using view formatting. To add animations, we will be using animate css library. The end result will be as shown below where we see a bar graph that represents votes for some fruits.

Image for post
Image for post
Animation in SharePoint list view

View formatting

As explained in this article by Microsoft, view formatting provides a great and an easy way to customize how items can be displayed in a list view. If you haven’t had a chance to look into it, do have a read of the getting started section in that article, watch this video by Chris Kent and have a look at these brilliant samples from the members of the community. …


In this blog post we will see a way of completing flow approvals (associated with SharePoint list items) from a list view using view formatting.

Image for post
Image for post
Completing approvals using view formatting

As we all know Microsoft Flow is a brilliant service offered by Microsoft that helps organisations automate lot of processes. More about Flow can be found here and in several other blogs.

Flow Approvals

Flow has several helpful actions which make a lot of tasks easier. One such action is “Approval” which starts an approval by assigning a task to the users (approvers). The approvers then take a decision of whether to approve or reject (or any other defined action) and complete the approval. This approval can be used in several processes e.g. …


Introduction

Microsoft recently announced some new options for organsing modern sites. This includes changing the header layout, header background, menu layout to mention a few. Since I had written an article recently on using REST API to apply the modern themes to a site, I thought I will use the same concept for applying these new options for a modern site. The code in this post can be used as part of remote site provisioning.

Image for post
Image for post
New change the look options

Note: The information in this article is based on the data present in this Microsoft reference and on the details seen in the network panel. …


Introduction

Nintex forms are very useful and as explained in the link, they help us to create dynamic forms to capture and submit accurate and current data from anywhere.
PnP JS - Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework

This blog post explains how to use PnP JS in Nintex forms in particular the read operation. The similar concept can be used for other operations (create, update and delete).

We will see how to retrieve attachments (images) of a list item using PnP JS and display them on the view form. The implementation shown here also uses sweetalert2 to show the image in a dialog. …

About

Anoop

SharePoint developer at Content+Cloud.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store