Tom Ward

Create a Custom Visual in Power BI with React

Welcome to another edition of Azure Every Day! I’m an App Development Consultant at 3Cloud and in this post I’ll show you how to create a custom visual in Power BI with React.
When creating a custom visual in Power BI, you use the TypeScript language. You’ll be fine with TypeScript if you are familiar with JavaScript. Once you’ve created a custom visual from scratch, you can test and debug your visuals online using live reports, as well as package and deploy your visual to a production report. You can check out the Microsoft documentation about custom visuals at https://powerbi.microsoft.com/en-us/developers/custom-visualization/ to learn more.
I’ll walk you through the process here, but also be sure to watch my video included at the end of this post.
• To get started, be sure you have node installed on your machine.
• Navigate to your project directory run the npm install command for Power BI visual tools. Once Power BI visual tools are installed, run pbiviz, new and then your project name.
• Next, run pbiviz start which will start your custom visualization in the local host.
• To debug your visualization, go to app.powerbi.com and create a new report (or use an existing one) and add the developer visual to the report.
• In order to add React elements to your custom visual, you’ll need to install React and ReactDOM. Import React and ReactDOM into the visual.ts file or whatever file you will be using to render the HTML elements to the DOM.
• Create a React element within the visual.ts. Also create the DOM element and add an element to the DOM that is referenced by this element.
• Next, create the React component using React.createElement of the component name that you’ve imported, then pass any props you would like in the second parameter of the React.createElement function.
• Finally, you can add the React element to the DOM by using ReactDOM.render and reference the React component that you built and the HTML element on the page that you would like to add the React element to.
• When you’re finished building and debugging your project, you can set the project and author details in the pbiviz.json file.
• Run the pbiviz package command to generate a pbiviz file to import into your Power BI report.
• Now you can go into your report and import a visual from file. Select the visual and add the data you would like to add to your visual and configure the settings you had previously.
• Please check out my video for code detail on all the above steps.

 

This post walked you through the steps to create a custom visual in Power BI using React. I hope you’ll give it a try.

Need further help? Our expert team and solution offerings can help your business with any Azure product or service, including Managed Services offerings. Contact us at 888-8AZURE or [email protected]

Tom WardCreate a Custom Visual in Power BI with React
Read More

Pragmatic Works Recognized as Finalist for 2019 Microsoft Data Analytics Partner of the Year Award

PotY Logo 2019

Pragmatic Works is excited to announce that we have been named a finalist for the 2019 Microsoft Data Analytics Partner of the Year Award. The company was honored among a global field of top Microsoft partners for demonstrating excellence in innovation and implementation of customer solutions based on Microsoft technology.

Tom WardPragmatic Works Recognized as Finalist for 2019 Microsoft Data Analytics Partner of the Year Award
Read More

Getting Started with Azure Analysis Services

Getting Started with Azure Analysis Services

If you’re working with Azure, hopefully you’re already taking advantage of Azure Analysis Services. There are many benefits here including; scale resources to match your business needs, easily visualize your data using your favorite data visualization tool (like Power BI), as well as govern, deploy, test and deliver your BI solution with confidence.

Tom WardGetting Started with Azure Analysis Services
Read More

Microsoft Flow: Top 5 Templates for Team Communication

2018-10-24_15-50-13The notion of converting routine tasks across Microsoft (MS) and non-MS systems into a fully automated and synergized workflows with just a few clicks seems like a promise that’s too good to be true. But that’s exactly what Microsoft Flow says and does.

Tom WardMicrosoft Flow: Top 5 Templates for Team Communication
Read More

SAP Installation on Microsoft Azure

SAP Installation on Microsoft Azure

If you’re just starting out in a cloud-based platform, you may hit some hurdles when installing software onto a platform like Microsoft Azure. Today I’d like to share my first experience with installing SAP ERP software on Azure.  

Tom WardSAP Installation on Microsoft Azure
Read More

What is Azure Active Directory B2C?

What is Azure Active Directory B2C_

How important is secure identity management to you? If you’re like most, it is a top priority. In today’s post I’ll talk about Azure Active Directory B2C which is an identity management service that enables you to customize and control how users securely interact with your web, desktop, mobile or even single applications.

Tom WardWhat is Azure Active Directory B2C?
Read More

Power BI Streaming Datasets with Microsoft Flow

with Manuel Quintana

If you’re using Power BI and aren’t familiar with streaming datasets in Power BI, we’ve got the webinar for you! In a recent free webinar, Manual Quintana takes you through creating streaming/real-time datasets in Power BI using Microsoft Flow to orchestrate the movement of data from various sources into Power BI directly.

Tom WardPower BI Streaming Datasets with Microsoft Flow
Read More