Never stop learning, approaching the AI
  • 😄About
  • 🅰️AI-Candy on YouTube
    • 🎬YouTube 视频列表
    • 💠AI项目本地部署
      • 1️⃣安装 Pytorch 运行环境
      • 2️⃣在Python虚拟环境下使用 VS Code or PyCharm
        • VS Code Python format
      • 3️⃣Create python virtual environment in Linux
    • 👽AI 入门系列课程
      • 0️向量及向量运算
        • Reshape array code
      • 1️人工智能,机器学习,深度学习 和神经网络的区别
      • 2️卷积神经网络(CNN)
        • 3D CNN sample code
      • 3️Transformer 原理
      • 4️前馈神经网络 (FNN)
  • 🎭Artificial intelligence
    • 1️⃣Deep learning / machine learning
      • 👉Deep Learning Resources
      • 👉Deep learning notes
    • 2️⃣Python
      • Youtube音乐下载
      • Pytorch 安装环境配置 (old)
        • TorchEEG
      • Anaconda3 Python path
      • Data
      • IEEE-754 Floating Point Converter
        • ieee 754 conversion function
      • 文件读写
      • 文本清理
      • Python 下载在线视频
      • 修改Jupyter Notebook 默认工作目录
    • 3️⃣AI Websites
  • 🪤Programming
    • SQL
      • Delete data and reset auto-increment ID
    • Angular
      • Angular-datatables, dd/MM/yyyy, sorting (no paged list)
      • Datatables save state using localStorage
      • Variable storage method
      • Colour picker
      • Error fix for click columns on Datatable
      • Auto address use Google place
      • Auto address use Azure Maps
      • Upload file to Server
      • Validators.required OnChange input
      • Date, Time field
      • VS Code: Auto add missing imports when save
      • Datatable setting
      • Date time format
      • sticky <th> and <td> content
      • Filter booked time
      • Dropdown time selection with interval
      • Angular date online test
      • Updating data without refreshing the page
      • Object array sort and sum
      • Multi-type of columns use in one column
      • Select button for datatables
      • Switch button and event
      • Delete column from Array
      • Three-layer structure
      • Remove shadow when print mat-dialog content
      • JSON Parse && Object Array
      • Detect unused import in Typescript
      • Change location using radio button
      • display multi line message in the Toastr
      • Custom LOCALE_ID
      • Batch add data from csv to API server
        • Angular read csv and upload to Server
      • USB Port reader Web solution
      • Debug Angular app using JavaScript Debugger in VS Code
      • Skills
        • FormData & FormGroup to JSON
        • Dropdown list (customer)
        • Get current datetime
        • Get first day of year, month, and date
        • Call a function in a forEach loop
        • disable and readonly
        • Form element value
        • HTML input type
        • Input pattern (validation)
      • Display pipe (UI format)
        • Input upper case and button checked
        • Icons (Bootstrap and CoreUI)
        • Page Refresh
        • Selection list (two ways)
        • onChange Selection event
        • Random Password and Toggle
        • Password match
        • Select checkbox disable
      • Print and save to PDF
      • Import JS into Angular
      • LocalStorage
      • Angular DataTable
        • Data sort
        • A sample usage
        • Angular DataTable server side big data query
      • Change chart.js chart type
      • Angular UI - .NET API - .NET Auth
      • Angular - .NET API
      • *ngIf else && change to @if
      • Angular add reCAPTCHA v3 (Google)
      • Angular update
        • Update from v13 to v15
        • Update from v15 to v18
      • Angular application version central
      • Face detection
        • Face-api.js
      • Angular, Node version compatibility matrix
      • Clear cache
      • Angular oauth2 OIDC
      • Angular add header
    • .NET Skills
      • Add ID manually
      • Auto Mapping
        • Ignore Nesting
        • Startup setting
        • Datetime processing in AutoMapping
        • AutoMapper example
      • Validation filter
      • BaseController
      • Group by many
      • Database first, scaffold to class
      • Log setting and exception handler
      • Update appsetting.json value
      • Azure service bus message (queue)
      • Read appsetting.json value
      • Auth get user info by email
      • Azure Time zone
      • .NET API Add Service
      • Object comparison
      • Coravel Schedule
        • Read appsettings.json
      • .Net Core RDLC Report, Coravel and Email
      • Check Network and SQL server connections.
      • Datatime custom format
      • Many to Many EF
        • Many to Many CheckBox
      • PDFpig: Send Email with PDF attachment
      • .NET Core Middleware order
      • .NET API add Worker Service
      • .NET Router
      • Partial columns update
      • Add and Delete
      • 图片自适应宽度
      • ASP.NET Identity
      • Upload file to Azure
        • Upload file to Blob
      • Developer Guide
      • Code first one-many
      • ASP.NET MVC 5 Custom Error Page
      • VS can't debug
      • 通过邮编查 NSW COVID-19 感染人数
      • Jquery File Upload
      • Jquery Datepicker
      • ajax delete file from server
      • Autofac in MVC
      • Autofac in .NET Core
      • .NET Core
      • HTTP Return code
      • IdentityServer4
    • Power BI
      • Add parameter to PowerBI report
      • Convert UTC to Local time
      • Python in PowerBI
        • IEEE-754 conversion
      • PowerBI embed app - Server
      • PowerBI embed app - Client
        • Setting on portal
    • Azure service
      • Key Vault
      • Service bus - queue
      • Power Automate
      • Kusto Query Language
      • Azure Data Explorer
      • Reserved keyword on Azure Error
      • SQL Azure time convert
    • Azure blob
      • Azure blob setting
      • Display image from Blob
      • Upload image to Blob through .NET API
    • Html Bootstrap Icon, colour, size
      • Html spacing
      • Html text alignment
    • Video stream - JsMpeg
      • SSL - generate key
      • Client (SSL)
      • Websocket-Server (SSL)
      • Play RTSP video stream
    • ⏰Time Zone
      • datetime-local set date range
      • 🕐Get data by local time (UI, API)
      • 🕑Add offset hours for local UI and report
      • 🕒UTC time and Datetime convert
      • 🕓Angular - Timezone selection
      • 🕔Angular - Convert UTC to local time
      • 🕕C# Time Zone
  • >>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • 🪜Apps and Skills
    • 1️Windows system app skills
      • Brother HL-2130 打印机 Toner 报警
      • VS Code 快捷键
      • Check SHA256 on windows
      • blob 视频下载
      • Photoshop 制作证件照片
      • 获取 Windows Key
      • 10进制36进制互转
      • Error when publish to Azure
      • Disable windows automatic update
      • Outlook setup for Yahoo Email
      • IIS setting
      • Windows 8/10, IIS Service
      • 安装程序出错 2052,2053 报警
      • 6 Yao Chinese UI
    • 2️Linux command
    • 3️Git command
    • 4️Bitbucket
    • 5️Gitbook Skills
    • 6️GitHub Desktop
    • 7️⃣EndNote
      • EndNote V21
      • Endnote使用技巧
      • 批量删除/修改Endnote 中 notes 栏内容
  • Android mobile connect PC
  • 💎USEFUL LINKS
    • 1️Coding websites
      • Website links
    • 2️Windows 平台工具,网站
    • 3️PotPlayer 设置
  • >>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • 🚩Research >>EEG
    • 1️EEG基本知识的理论介绍
      • EEG 简介
      • EEG 的节律信号
      • EEG电极帽
      • EEG 伪迹
      • ERP 介绍
      • ERP 成分
      • EEG 数据分析软件
    • 2️LSL 应用
    • 3️EEG公开数据集汇总整理
    • 4️REDCap
      • Migration (Export & Import)
    • 5️⃣ScaneR
  • ☕Buy me a coffee
Powered by GitBook
On this page
  • Create report in PowerBI
  • Create workspace
  • Design report in PowerBI Desktop
  • Data type convert and design:
  • [GroupId],[ReportId] - PowerBI
  • Add API access
  • App Registration in Azure portal
  • Registration and Authentication
  • [ApplicationId],[TenantId],[SecretId]
  • run API App to test embedUrl and accessToken

Was this helpful?

  1. Programming
  2. Power BI
  3. PowerBI embed app - Client

Setting on portal

Display (Embed) Power BI report in Angualr UI

Create report in PowerBI

refer: https://docs.microsoft.com/en-us/power-bi/developer/embedded/embed-sample-for-customers https://www.youtube.com/watch?v=0y2oJikC6Xc

Power BI web portal: https://app.powerbi.com/


Create workspace

  1. Create workspace

    Workspace->Create a workspace->New --> name[wiseclient] Enable access -> from the More menu, select Workspace access. --> PowerBIGroup ->select Admin ->Add

  2. Update Credentials: Report, mouse right, [Setting]: clicked on Edit Credentials and simply pressed Sign-in.

  3. Change referesh time [Setting]: select 15 minutes on Scheduled referesh


Design report in PowerBI Desktop

Power BI Desktop -

  1. Copy weight-report.pbix and weight-vision.pbix,

    • open .pbix use Power BI Desktop

    • select WEIGHTING on right side, ... edit query,

    • Press Source, change Server and Database with new (Azure SQL) Server: tcp:nwiapps.database.windows.net,1433 Database: user name, password -- some columns may need to update

    *** Do not switch all tables to import mode ***

or Create new Power BI app: new -> Get Data -> A. select SQL Server database -> Server: tcp:nwiapps.database.windows.net,1433 Database: **

	   Data Connectivity mode: DirectQuery
	   Select Table -> Transform Data

or B. select Azure Data Explorer (Kusto)-> -> Connect: cluster: https://nwiiot.australiaeast.kusto.windows.net

       Data Connectivity mode: DirectQuery
	   -> Ok
	   DATABASE: [WISE_4250] -> Transform Data

Data type convert and design:

	Change (ABC)change type->(1.2)Decimal Number, 
	   = Table.TransformColumnTypes(Speed1,{{"Speed", type number}})
	   
	add text fillter (Enabled equal 1)
	  = Table.SelectRows(#"Changed Type", each [SpeedEnabled] = "1")

	close & apply

	add field and select visualizations

2. Publish to new workspace that created by Power BI web portal, replace (if has existed)


[GroupId],[ReportId] - PowerBI

  1. Open PowerBI portal, Select new report has created by Power BI Desktop

    URL example: https://app.powerbi.com/groups/###########/reports/@@@@@@@@@@@@/ReportSection

    GroupId(Workspace): (afer ../groups/): ########### ReportId: (after ../reports/): @@@@@@@@@@@@

  2. Update [GroupId] and [ReportId] in constants.ts (Angular UI)


Add API access

In new workspace, => Access entry PowerBIGroup => Add

select right top ... > Settings > Settings Datasets=> Scheduled refresh : 15 minutes

select right top ... > Settings > Admin portal. Select Tenant settings and then scroll down to the Developer settings section. Expand Allow service principals to use Power BI APIs, and enable this option.

Group -> [PowerBIGroup] => Add members -> new workspace name has created

App Registration in Azure portal

refer: https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration https://docs.microsoft.com/en-us/power-bi/developer/embedded/embed-sample-for-customers?tabs=net-core

Azure portal: https://portal.azure.com/


Registration and Authentication

A. Register an applicatioin

 Search for App registrations:
      + New registration: 
 Register an applicatioin:
  ==> Name: @@@@
 
 ==> Register
  

B. Add Authentication URL

 Select just registed app @@@@=>
 [Manage]->Authentication->Add a platform
  ==>Select Web  
  
 Add Redirect URIs: 
   https://localhost:5002
   https://*****auth.azurewebsites.net/

 ==>Configure

C. Add API permissions

Select just registed app @@@@=>
[Manage]=> API permissions.

New window, select Power BI Service.
 =>Select Delegated permissions. 
 =>Select the permissions 
 
Add permissions below:

 Microsoft Graph (1)
	User.Read
 Power BI Service (16)
	App.Read.All
	Capacity.Read.All
	Capacity.ReadWrite.All
	Content.Create
	Dashboard.Read.All
	Dashboard.ReadWrite.All
	Dataset.Read.All
	Dataset.ReadWrite.All
	Gateway.Read.All
	Gateway.ReadWrite.All
	Report.Read.All
	Report.ReadWrite.All
	StorageAccount.Read.All
	StorageAccount.ReadWrite.All
	Workspace.Read.All
	Workspace.ReadWrite.All

    ... may need more ....
==>Save

[ApplicationId],[TenantId],[SecretId]

1. Select just registed app @@@@=>  Oveview
  => [Application (client) ID]
  => [Directory (tenant) ID]
  
2. [Manage] => 
  Certificates & secrets -> 
  + New client secret, 
  ==> description and select 24 months
  ==> Add 
  Get [Value] ---> is Secret value

Update appsettings.json in WWWebApp
"applicationId": ===>[Application (client) ID]
"tenant": ====>[Directory (tenant) ID]
"applicationSecret": =====> [Secret ID] 

run API App to test embedUrl and accessToken

Update by Steven, July 2022

PreviousPowerBI embed app - ClientNextAzure service

Last updated 2 years ago

Was this helpful?

🪤