Skip to main content

Generate Digital ID Card with QR Code Using Power Automate from PowerApps Portal

Generate ID Card with QR Code and Display Profile Photo on PowerApps Portal

In continuation of Part 4, let us say that the On-boarding process is not just restricted to create bookable resources but is also for newly hired employees. In this blog, I have decided to introduce a digital way to complete the on-boarding process of the new hires by issuing an ID Card with the QR Code. Considering the current pandemic situation of COVID-19, we are facing hindrances in the on-boarding process of the new hires who are now required to work from home, and, in order to tackle the same, digital ID cards would be issued that'd bear the QR codes.
The scenario will be covering the four-step and two-way process between Account Admin and New Emp: -
Step 1: During the on-boarding process, the Primary Contact of Account, I will be referring as Account Admin, will be creating some tasks on the Portal or in CE for the newly hired employee, I will be referring as New Emp, to upload there Photo and a Photo ID Card.
Step 2: New Emp logs into the portal and Uploads Photo ID and Provides Photo ID Proof, the Status changes from Awaiting Upload to Awaiting Approval and sends the email to Account Admin.
Step 3: Account Admin receives the email verifies the Photo and the Photo ID Proof and Approves it in the email. [I am only using one Task only which asks for Photo only.]
Step 4: Once the Approve is done, a PDF Photo ID Card is generated and sent in Email to the New Employee.

Addition Functionalities:

  •        Image uploaded in Task Type “Employee ID Card Photo” will be added as Entity Image field of Contact.
  •        The same image will be displayed as portal profile picture.

New Emp is added to CRM with the following details



Task Created for New Emp by Account Admin



I am not using any automated process until now.

Now the New Emp logs into the portal and looks at the list of Tasks:


New Empl Uploads the Image and Submit the form, the task status changes to Awaiting Approval
Before Submitting Entity form Image

After Submitting Entity Form Image, did some JQuery for disabling and hiding things

Email sent out to Account Admin for Approval:

Account Admin Clicks on Approve


ID Card is generated and sent in email to the New Emp



Profile Pic on Portal

Profile Pic in CRM


Now let’s see how the process was executed,

Prerequisite
  1. Prepare a Word Document for ID Card Template:
  2. Enable developer option in MS Word
  3. Adjust the Size of document
  4. Get any ID Card Sample Online and edit it as per your expectations
  5. Create XML mappings for text and image that needs replacement



I am not good at designing, but this is what I have designed. Save this somewhere in One Drive or SharePoint as a template. I have used One Drive for this blog.

Step 1: As per this blog, the Task for Photo Upload has been done manually.
Step 2: New Emp uploads the photo via portal task and the Status Reason changes from Awaiting Upload to Awaiting Approval which triggers the flow explained below:

Email sent for approval.

Step 3: Account Admin reviews the email and clicks on Approve button which opens up a link on the portal as per this blog:
https://onboardingfs.powerappsportals.com/flow/?uniqueKey=96e30477-c270-ea11-a811-000d3a795171&refid=18c9b64d-ac70-ea11-a811-000d3a795171
where uniqueKey is the ID of the content snippet record created in CRM with the name and value equal to refid in the above Url which is actually, the contact id of the New Emp and this is what will be set in QR code of the ID Card.

Below is the code for calling the flow, the code is embedded on the HTML Content webpage:


Let’s see how the flow is configured to respond to call from the above code:

Configuration of HttpRequest

Step 4: The Power Automate to Generate ID card with QR code is explained below

Generate ID Card full

This is how we Generate QR Code

This is how we get EntityImage of Contact


Fill in the document template and convert to PDF

Send Email to New Emp



For the Additional Feature of Portal, New Emp logs into the portal and views their profile pic uploaded for the image the code used is below:

Following CSS is used


Labels:

Comments

Post a Comment

Popular posts from this blog

Select Multiple Records from Entity List

Select Multiple Records from Entity List and Perform CRUD on records or related records Here I am going to demonstrate the process that can be used to select multiple records in an entity list to perform CRUD on records or related records. In this, we have one entity list which displays all the courses that are open for enrolment. CRM Contacts can log in to the portal and enrol for the desired coursed. The entity list is rendered on the portals as follows: The submit button is custom submit button which is designed to call Web API in order to perform the CRUD operation. Checkbox against each entity list item is designed using JQuery Registration Status is the Response from Web API Open means that the Registration is Currently Open for the logged-in portal contact to enrol and they can select multiple checkboxes and then click on Submit button to create their registration, In this, I am going to select : 1.  Diploma in Web Development 2.Bachelor of Applied Inf
3 comments
Read more

Editable Entity List or Editable Subgrid PowerApps Portals

Editable Grid PowerApps Portal In this blog, I am going to explain how we can use PowerAutomate and old school JQuery on PowerApps portal to convert Entity List into editable entity list or subgrid. I am only using the string attributes of the Lead entity for Quick Update in this blog. The benefit of making entity list editable with this approach is that we do not loose the OOTB functionality of Search, Sorting, Grid Configuration to enable edit/view-details/delete and Filtering. How I manipulate the data attributes in entity list using JQuery is shown in the below screenshot The screenshot below shows how the code manipulates the entity list html elements using the above code. The PowerAutomate for updating the data in CRM. A success message is displayed on the portal to let user know that the update has been accomplished and the record is Updated in CRM The value retrieval on Click of custom Quick Update bu
Post a Comment
Read more

PowerApps Portal Generic Error Feedback from Portal User

As we all know that whenever there is a server error on the PowerApps Portals we only see a generic error message. Which looks like There is a method of logging errors from the portal using Azure blob Storage, but this is something that I won’t be discussing today. I will be going ahead and asking for more information for the error on the portal from the Portal User actually experiencing it. Let’s see how we can achieve this thing. We can create Portal Generic Error in Content snippet to add custom text or information for the error message, but it is hard to get entity forms added using Content Snippet or any other HTML to be created using any bootstrap or custom css on this page. The only CSS that you get on this page is from the index page which highlights the h1 tag with bold and red color and everything that you add goes into the div with class dialog. I have made use of JavaScript to change HTML content and have added an entity form asking Portal User to submi
Post a Comment
Read more