September 30, 2021

SharePoint Framework - Export to PDF - Export the HTML Content to PDF File using SPFx webpart

Introduction

We recently implemented a SharePoint Framework (SPFx) webpart for a consulting firm based out of Alpharetta, Georgia, United States to display the calendar events inside the calendar cells (a custom calendar). The additional requirement was to allow users to export the HTML content of the calendar to a PDF File with all details.

So, in this blog, we will learn how to export the HTML content to a PDF file in a custom webpart implemented using SharePoint Framework (SPFx).

Overview

Below is the overview of the Calendar's HTML content.



Approach

For exporting the content to a PDF file, follow the below steps:

Step 1: Install the npm package "html2canvas" using the command "npm i html2canvas --save".

Step 2: Import the npm package as shown below.

import html2canvas from 'html2canvas';
(window as any).html2canvas = html2canvas;

Step 3: Now, implement the below code for exporting the content to a PDF file.

Below are the points that need to be kept in mind for providing the values.

1. Inside the getElementById() value, user needs to provide the main div "id" property value inside which the overall HTML is been implemented.
2. Inside the jsPDF(), if the user wants to export the content in portrait mode, provide the value as "p" or for exporting the content in landscape mode, provide the value as "l".
3. "imgWidth" and "imgHeight" property values can also be provided manually as per the requirement.

      let eventHTMLDiv = document.getElementById('EventsHTML');
      html2canvas(eventHTMLDiv)
        .then((canvas=> {
          var imgData = canvas.toDataURL('image/jpeg'1.0);

          var doc = new jsPDF('l''mm''a4');

          var imgWidth = doc.internal.pageSize.getWidth();
          var imgHeight = canvas.height * imgWidth / canvas.width;

          doc.addImage(imgData'JPEG'1010, imgWidthimgHeight);

          doc.save('September.pdf');
        });

Below is the parameters overview for the "addImage()" method.

(method) jsPDF.addImage(imageData: string | HTMLCanvasElement | HTMLImageElement | Uint8Array, format: string, x: number, y: number, w: number, h: number)

1. imageData: Need to provide the canvas converted in Data URL format.
2. format: In which format, the image should be added e.g JPEG/JPG/PNG.
3. x: How much margin should be kept from the top in the PDF file.
4. y: How much margin should be kept from the left in the PDF file.
5. w: width of the canvas.
6. h: height of the canvas.

The Exported content looks like below in the PDF file "September.pdf".



Conclusion

This is how we can export the HTML content to a PDF File using SPFx webpart.

If you have any questions you can reach out our SharePoint Consulting team here.

September 23, 2021

Introducing Co-Presence in Power Automate

Overview

Microsoft recently rolled out a prominent feature which is “Co-Presence” functionality in Power Automate. Most of the time, when we are working with multiple developers on the same Flow, we are unaware of who is editing the Flow? With this new feature, now we can track all the persons who are editing the Flow in real-time. 

If multiple users make changes to the flow simultaneously, Power Automate detects conflicts during the Flow save operation and presents appropriate options to the user to minimize conflicts. So, let’s get started!

Step 1:

We have one Power Automate Flow which is shared with Dhruvin and Shriraj.


Step 2:

Dhruvin and Shriraj both have opened the Flow in Edit Mode.

Step 3:

Dhruvin can see Shriraj’s avatar as “Co-Presence”.

Step 4:

Now, let’s make some changes with Shriraj’s account and Save the Flow. The changes will be saved!

Step 5:

Let’s make some changes to Dhruvin’s account. 

Try to save the changes. This will pop up with the following screen.

Now, let’s try to understand the options provided here!
  • Discard your changes: This will discard Dhruvin’s changes and keep Shriraj’s changes as is.
  • Save a copy of your changes: This will save a Copy of my changes as a separate flow and appear in My Flow section.
  • Overwrite other people’s changes: This will keep Dhruvin’s changes and discard Shriraj’s changes.

Conclusion:

This is how the Co-Presence feature will work in Power Automate. Isn’t that cool? Happy Automation!!!

If you have any questions you can reach out our SharePoint Consulting team here.

September 16, 2021

Power Apps Validation Tip - End Date and time should be greater than Start Date and time

Overview:

We implemented several Power Apps forms for a consulting firm based out of Alpharetta, Georgia, United States. We came across a scenario to validate Start Date & End Date in one of the forms. In this article, we will talk about how we can apply DateTime validation in our Power Apps Form. Most of the time, we need to implement, one most common validation in Power Apps where End DateTime must be greater than Start DateTime. How can we apply that validation? Let’s see!

We have the following form in our Power Apps. We want to validate, check-out time should be greater than check-in time! So, how can we achieve this?


Step 1:

Please check the Datacard for Check-In and Check-Out time.

Step 2:

Add the following line of code on below highlighted controls! Need to add the same code on all following controls!

 If(  
   Or(  
     IsBlank(  
       DateValue2.SelectedDate + Time(  
         Value(HourValue2.Selected.Value),  
         Value(MinuteValue2.Selected.Value),  
         0  
       )  
     ),  
     IsBlank(  
       DateValue1.SelectedDate + Time(  
         Value(HourValue1.Selected.Value),  
         Value(MinuteValue1.Selected.Value),  
         0  
       )  
     )  
   ),  
   Set(  
     IsEndDateValid,  
     true  
   ),  
   DateDiff(  
     DateValue1.SelectedDate + Time(  
       Value(HourValue1.Selected.Value),  
       Value(MinuteValue1.Selected.Value),  
       0  
     ),  
     DateValue2.SelectedDate + Time(  
       Value(HourValue2.Selected.Value),  
       Value(MinuteValue2.Selected.Value),  
       0  
     ),  
     Minutes  
   ) > 0,  
   Set(  
     IsEndDateValid,  
     true  
   ),  
   Set(  
     IsEndDateValid,  
     false  
   )  
 )  

Step 3:

Set Validation message
 If(!IsEndDateValid, "Ënd Date Time should be greater than Start Date Time")  

Step 4:

Set Visible property for an Error message.

Step 5:

Prevent form for submitting an invalid entry by setting up the below condition for “OnSave”. If you are using a standalone Canvas app, then you need to write the same code on your button click!

Step 6:

Change "OnNew" Property of form. If you are using a standalone Canvas app, then you need to write the same code on the New button of the form!
 NewForm(SharePointForm1);Set(IsEndDateValid,true)  

Step 7:

Save and Publish form!

Conclusion:

This is how we can simply apply end DateTime validation for Power Apps! Happy Power Apping!

If you have any questions you can reach out our SharePoint Consulting team here.