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', 10, 10, imgWidth, imgHeight);

          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.

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.

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.

Everything you should know about Microsoft Viva

Overview:

When we heard the word “Microsoft Viva” for the first time, the question arises in our mind that, what do we mean by Viva? How Microsoft Viva is useful to us to achieve our business scenarios and business goals? We will talk about all these important things in detail throughout this session! Microsoft Viva comes up with four different Viva products which help us to build an Employee Experience Platform and Ecosystem. Now, the question arises, what do we mean by Employee Experience Platform (EXP)? 

Employee Experience Platform (EXP):

Employee Experience Platform is described as bringing together all useful tools for employee communications, wellbeing, learning, and knowledge discovery into one package! 

Microsoft Viva comes up with the same thing with four amazing Microsoft Viva Products! Now, let’s see how these viva products are helpful!

1. Viva Topics: Responsible for knowledge and expertise
2. Viva Insights: Responsible for employee productivity and wellbeing
3. Viva Connections: Responsible for employee engagement and communication
4. Viva Learning: Responsible to make learning a natural part of your day

Now, let’s check each Viva product in detail!

Viva Topics:

• Topics turn content to Knowledge using M365, Graph, and AI to organize content into Topic Pages which can be easily discoverable from other M365 Products.
• Examples:
• New Employee Onboarding
• Different Verticals like
• Science & Space
• Construction
• Education
• Healthcare

Viva Insights:

• Viva Insights delivers Data-Driven and Privacy Protected Insights and recommendations that help individuals and teams to improve their product and wellbeing.
• Viva Insights surfaces the data using Exchange Online, Teams, and My Analytics.
• Viva Insights provides three types of Viva Insights:
• Individual/Personal
• Manager Insights
• Leader Insights

Viva Connections:

• Viva connections boost Employee Engagement.
• Viva connections provide a curated, company-branded experience that brings together relevant news, conversations, and resources in the apps and devices you use every day.

Viva Learning:

• Viva Learning makes learning a natural part of your day. 
• All your learning content is available in one place in Microsoft Teams.
• Microsoft has collaborated with other content providers like Microsoft Learn, Skillsoft, LinkedIn Learning, Pluralsight, and many more!

We at Binary Republik conducted a webinar on Microsoft Viva. Here’s the entire recording for the same webinar! 

Chapters of the webinar:

• What is Microsoft Viva?
• Four Pillars of Microsoft Viva
• Get Started with Microsoft Viva Topics
• Get Started with Microsoft Viva Insights
• Get Started with Microsoft Viva Connections
• Get Started with Microsoft Viva Learning

Recording of the session:

Conclusion:

This is how we can leverage the Microsoft Viva capabilities in actual business scenarios! It’s really useful to make a better Employee Experience Platform and Ecosystem.

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