Welcome to another edition of Azure Every Day! I\u2019m an App Development Consultant at 3Cloud and in this post I\u2019ll show you how to create a custom visual in Power BI with React.
\nWhen creating a custom visual in Power BI, you use the TypeScript language. You\u2019ll be fine with TypeScript if you are familiar with JavaScript. Once you\u2019ve 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.
\nI\u2019ll walk you through the process here, but also be sure to watch my video included at the end of this post.
\n\u2022 To get started, be sure you have node installed on your machine.
\n\u2022 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.
\n\u2022 Next, run pbiviz start which will start your custom visualization in the local host.
\n\u2022 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.
\n\u2022 In order to add React elements to your custom visual, you\u2019ll 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.
\n\u2022 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.
\n\u2022 Next, create the React component using React.createElement of the component name that you\u2019ve imported, then pass any props you would like in the second parameter of the React.createElement function.
\n\u2022 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.
\n\u2022 When you\u2019re finished building and debugging your project, you can set the project and author details in the pbiviz.json file.
\n\u2022 Run the pbiviz package command to generate a pbiviz file to import into your Power BI report.
\n\u2022 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.
\n\u2022 Please check out my video for code detail on all the above steps.<\/p>\n
<\/p>\n