0% found this document useful (0 votes)
126 views24 pages

Generating and Embedding Microsoft Power BI Analytics in Angular App

Here are the key steps implemented: 1. Registered an Azure AD application and obtained client ID and secret 2. Authenticated using the service principal method with client ID and secret 3. Created reports and dashboards in Power BI Desktop 4. Published reports to Power BI service 5. Embedded reports in Angular app using Power BI Client Angular component 6. Passed authentication details to component to securely embed reports 7. Added navigation and UI to view embedded reports within Angular app This allows integrating Power BI analytics non-interactively in the Angular application without requiring individual user licenses. The service principal authentication method aligns with Azure AD best practices for security as well.

Uploaded by

wekim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
126 views24 pages

Generating and Embedding Microsoft Power BI Analytics in Angular App

Here are the key steps implemented: 1. Registered an Azure AD application and obtained client ID and secret 2. Authenticated using the service principal method with client ID and secret 3. Created reports and dashboards in Power BI Desktop 4. Published reports to Power BI service 5. Embedded reports in Angular app using Power BI Client Angular component 6. Passed authentication details to component to securely embed reports 7. Added navigation and UI to view embedded reports within Angular app This allows integrating Power BI analytics non-interactively in the Angular application without requiring individual user licenses. The service principal authentication method aligns with Azure AD best practices for security as well.

Uploaded by

wekim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Major Project Presentation

on
“Generating and Embedding Microsoft Power BI analytics in Angular app”

N Gagan Sai Reddy (201700150)


In partial fulfilments of requirement for the award of degree in
Bachelor of Technology in Computer Science and Engineering
(2022)

Under the guidance of


Internal Reviewer: External Guide:
Mrs. Jhuma Sunuwar   Mr. Mohamed Kalithu
Assistant Professor I, Talent Recruit Software Pvt. Ltd,
Dept. of CSE SMIT Bangalore.
.
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
SIKKIM MANIPAL INSTITUTE OF TECHNOLOGY
(A constituent college of Sikkim Manipal University)
MAJITAR, RANGPO EAST SIKKIM- 737136
CONTENTS
Abstract
1. Introduction
2. Literature survey
3. Problem definition
4. Solution Strategy
5. Software Requirement And Specifications
6. Design
7. Implementation
8. Results and Discussion
9. Test Plan
10. Conclusion
11. Limitation and Future Scope
12. Gantt Chart
13. References
14. Acknowledgment 2
ABSTRACT

• The project is to generate reports and dashboards for Application Tracking


System (ATS) using Microsoft Power BI tools and integrating them into the
application using the service principle (authentication).

• Microsoft has recently released a component for Angular which lets


developers to embed their Power BI reports, dashboards and more into
Angular web applications.

• It is required to embed the analytics and view it in the web app without the
user having to own a premium license account for Power BI.

3
1. INTRODUCTION

• The necessity of business intelligence tools becomes crucial to businesses of all


sizes that want to succeed in the data-driven world

• Power BI is the leading Business Intelligence tool with vast features to customize
the data visualization

• The organization’s product which is called Talent Recruit is an AI-driven


recruitment software that empowers organizations to discover, assess, engage &
hire top talent

• The product is developed using Angular and Microsoft Power BI tools to showcase
the analytics without the need to sign in or have a Power BI pro license
4
2. LITERATURE SURVEY

SI. PAPER
YEAR AUTHOR FINDINGS PROJECT RELEVANT
No DETAILS
Power BI embedded
The embed for your customers
Power BI Kesem Sharabi analytics offers two
solution allows to build an app that
embedded and solutions: Embed for
1 2022 uses non-interactive authentication
analytics GitHub your customers,
against Power BI
documentation contributors Embed for your
organization
These Angular docs help you learn
Angular is an
and use the Angular framework and
application design
development platform, from your
framework and
Angular GitHub first application to optimizing
2 2021 development platform
Documentation contributors complex single-page apps for
for creating efficient
enterprises. Tutorials and guides
and sophisticated
include downloadable examples to
single-page apps.
accelerate your projects

5
2.LITERATURE SURVEY [contd]

SI. PAPER
YEAR AUTHOR FINDINGS PROJECT RELEVANT
No DETAILS
Only Windows OS is
supporting Power BI
Desktop which is the In Power BI Desktop and the Power
Create reports
GitHub only application that BI service, the report editor is
and dashboards
3 2021 Contributors enables us to create where you design the reports your
in Power BI -
  reports and Power BI consumers see, with charts, tables,
documentation
service is an online maps, and other visuals.
application that is used
for collaboration

6
3. PROBLEM DEFINITION
• HR departments of Organizations and companies need aggregated well-put numbers and
visualized transactions to easily work through tedious tasks in the hiring process.
• Information is required so as to efficiently coordinate and manage panel members and
candidates for interviews, job posting, job requirements, etc.
• Power BI user has following Typical Method’s limitations
Global administrator is needed to register each user in Azure Active Directory (Azure AD).
It demands a Power BI Pro license to be purchased in an Office 365 tenant for each user.
The master user authentication is done with a password, an authentication method that isn’t
aligned with Azure Active Directory best practices. Managing multiple master users and
associated password rotation can be challenging.

7
4. SOLUTION STRATEGY
• Rich data visualization and embed for customer solution is to be implemented
• Get familiarized with the Power BI tools and build reports and dashboards
 Power BI Desktop
 Power BI services
 Power BI Playground
• Setting up an embedded environment
 Select authentication method.
 Service principal is the Azure AD recommended authorization method. If you're using a service
principal, you can authenticate using either an application secret or a certificate.
 Register an Azure AD application.
 Establish an identity for your app
• Embed in Angular using Power BI Client Angular component

8
5. SOFTWARE REQUIREMENT AND SPECIFICATION
Hardware Specification of Developing Environment
Memory (RAM):4gb ram

Disk space: 12gb

Software Specification
Node.js
Node package manger (npm)
Angular CLI
VS code
Power BI Desktop
Chrome Browser
MySQL workbench

Modules used for embedding


PowerBIEmbedModule module from the 'powerbi-client-angular' component

9
6. DESIGN

Figure1: Authentication flow for the embed for you customers solution 10
6. DESIGN [contd]

Figure 6.2 Service principal authentication using Application ID and Application secret

11
7. IMPLEMENTION
Procedure For Data Creation In MySQL Database
1. Input :
account id, user id who is posting the jobs, the job title, no. Of candidates to create
2. Declare :
--integer variables for
loop counter with default value 1
Sequence id
Primary key check with sequence id
Engagement work flow-id
Storing random number btw 1-23 to select for stage transaction master id
-- Variables for inserting in candidate stage table
candidate id
Job id
Workflow stage id
Engagement workflow detail id
12
7. IMPLEMENTION [contd]
--Varchar variables for
transaction name

3. Set sequence id for job table name


if max value of job id == sequence id
if not
set max value of job id = sq_id
Update sequence id = sq_id+1
Set the variable for inserting in candidate satge table
4. Set sequence id for engagemtworkflow table
check if max value of engagement workflow id == sequence id
if not
set max vaue of engagement workflow id = sq_id
Update sequenceid = sq_id+1
Set the variable for inserting in candidate satge table

13
7. IMPLEMENTION [contd]
5. start loop to insert values
5.1 if i<num then leave loop
set sequence id for engagementworkflowdetail id table
check if max value of engagementworkflowdetail id is same as sequenceid
if not set max vaue of engagementworkflowdetail id to sq_id
update sequenceid with sq_id+1
set the variable for inserting in candidatesatge table
call rand function inside floor function to select a random stage id between 1 - 23
insert values in tables
talentproduct20211004.engagementworkflowdetail
talentproduct20211004.candidatestage
set i as i+1
iterate loop
end loop
14
7. IMPLEMENTION [contd]
• Embed analytics – Angular
 Power BI Angular component. This library is used to embed Power BI reports, dashboards, tiles, report visuals, Q&As,
and paginated reports in the Angular application for the users to access without authentication against Power BI.

Pseudo code for importing the 'PowerBIEmbedModule' inside the target module

1. Import the PowerBIEmbedModule module from the 'powerbi-client-angular’ component


import {PowerBIEmbedModule} from 'powerbi-client-angular’;
2. Declare the imported module in @ngModule class import section
@ngModule ({
imports[

PowerBIEmbedModule
]
… })

15
7. IMPLEMENTION [contd]
Pseudocode for embedding in application

1. Open tag <powerbi-report


2. Set tag attribute for [embedconfig] with parameters –
type: "report“
Report Id
Embed Url
Access Token
Token Type
Set cssClassName
3. Set Event handlers
['loaded', () => console.log('Report loaded');],
['rendered', () => console.log('Report rendered');],
['error', (event) => console.log(event.detail);]
4. Close Tag
16
8. RESULTS AND DISCUSSION Filters

Slicers

Tile Transformed
Data

Figure 3: User Report done with test data on Power BI Desktop

17
9. TEST PLAN
SI. No Test Case Expected Result Test Result

Add test data to the Database to create views The view is created as per test data
1 Passed
using stored procedure and required columns are filled

Add additional test data using stored The views are updated with new test
2 Passed
procedure data
Add Data through locally hosted angular
3 Shows the data in the application Passed
application

The added test data is shown in the


4 Match the data in the MySQL database Passed
view created for the Power BI report

Upon refresh, the data is updated in


5 Check data is updated in Power BI Passed
the data visuals

Using an iframe to check the report structure The report is visible in the
6 Passed
in the angular application application hosted locally
18
10. CONCLUSION

• Successfully created 21 reports and 4 Dashboards in Microsoft Power BI for 4 accounts


of Talentrecruit and test Embedded it in Angular application which is in development.

• The Reports and Dashboards added critical value to the product Talentrecruit and its
clients.

• The foremost difficulty was understanding what Power BI and its vast features can offer
and how to work with it. Since it’s a new implementation in the product, project was
started from scratch including its feasiblility
• Complying with the client’s requirements and bringing them live on the report canvas
required rigorous research and learning new methods which was successfully achieved

19
11. LIMITATION AND FUTURE SCOPE
• Limitation of the Project

 Power BI even with vast customization options it still has defined visualizations that can only
be customized to an extent to the customer’s needs

• Future Scope of the Project

 As the project is an active and dynamic project of Talentrecruit and as long as it has clients it
needs continuous support and report generation for the Application tracking system.

 Power BI is a leading business intelligence tool that paves a career path in Data Analysis,
Business Analysis, etc.

20
12. GANTT CHART
Activity Jan 2022 Feb 2022 Mar 2022 Apr 2022 May 2022
Literature Survey          
           
Problem Identification          
           
Design          
           
Implementation          
           
Testing          
           
Documentation          
           

Figure 5: Gantt chart of the project 21


13. REFERENCES

[1] Power BI embedded analytics documentation - docs.microsoft.com/en-us/power-bi/developer/embedded

[2] GitHub - microsoft/powerbi-client-angular

[3] Angular Docs - https://angular.io/docs

22
14. ACKNOWLEDGMENT
• I would like to express my sincere gratitude to my Product Manager, Mr. Mohamed Kalithu (Talent Recruit Software Pvt. Ltd.,
Bengaluru), for allowing me to undertake this work. I appreciate his prompt response and thank him for the invaluable advice given, during
the course time of this project.
• I would like to express my sincere gratitude to my internal guide, Mrs. Jhuma Sunuwar (Department of Computer Science, Sikkim
Manipal Institute of Technology), for allowing me to undertake this project. 1 appreciate her prompt response and thank her for the
invaluable advice given, during the course time of this project.
• I am grateful to Prof (Dr.) Kalpana Sharma, H.O.D, Department of Computer Science and Engineering, Sikkim Manipal Institute of
Technology for giving me the opportunity to work on this project and providing me with all the valuable guidance and support required to
work on this project.
• I am also very much obliged to my Project Coordinators, Mr. Biswaraj Sen, Associate Professor, Mr. Santanu Kumar Misra, Associate
Professor, Mrs. Chitrapriya N. Assistant Professor, and Mr. Saurav Paul, Assistant Professor, Department of Computer Science and
Engineering, Sikkim Manipal Institute of Technology for elevating, inspiring and providing me with the kind supervision in completion
of my project.
• Finally, I would also like to thank the Department of Computer Science and Engineering, Sikkim Manipal Institute of Technology for
providing me with the support and guidance that enabled me to complete this project
23
THANK YOU

24

You might also like