diff --git a/powerbi-docs/developer/visuals/develop-circle-card.md b/powerbi-docs/developer/visuals/develop-circle-card.md index f840a8728f..b14ff5a9aa 100644 --- a/powerbi-docs/developer/visuals/develop-circle-card.md +++ b/powerbi-docs/developer/visuals/develop-circle-card.md @@ -7,7 +7,7 @@ ms.reviewer: "" ms.service: powerbi ms.subservice: powerbi-custom-visuals ms.topic: tutorial -ms.date: 07/10/2024 +ms.date: 02/10/2025 ms.custom: engagement-fy23 #customer intent: As a Power BI visual developer, I want to learn how to develop a Power BI visual so that I can create custom visuals for my reports. --- @@ -432,73 +432,6 @@ Confirm that your *capabilities.json* file looks like this: } ``` -### (Optional) Review the capabilities file code changes - -Verify that the circle card visual displays the *measure* field, and review the changes you made using the *Show Dataview* option. - -1. In Power BI service, open the *Power BI US Sales Analysis* report. If you're using a different report to develop the circle card visual, navigate to that report. - -2. Notice that the circle card visual can now be configured with a field titled *Measure*. You can drag and drop elements from the **Data** pane into the *Measure* field. - - >[!div class="mx-imgBorder"] - >![Screenshot of the circle card measure filed, in the Power BI service visualization pane.](media/develop-circle-card/measure-2.png) - - > [!Note] - > The visual project does not yet include data binding logic. - -3. In the floating toolbar, select **Show Dataview**. - - >[!div class="mx-imgBorder"] - >![Screenshot of the show dataview button, located in the circle card floating toolbar.](media/develop-circle-card/show-dataview.png) - -4. Select the three dots to expand the display, and select **single** to view the value. - - >[!div class="mx-imgBorder"] - >![Screenshot of the value figure as it's displayed in the circle card show dataview option.](media/develop-circle-card/value.png) - -5. Expand **metadata**, then the **columns** array, and review the **format** and **displayName** values. - - >[!div class="mx-imgBorder"] - >![Screenshot of the format and display name values as displayed in the circle card show dataview option.](media/develop-circle-card/colunms.png) - -6. To toggle back to the visual, in the toolbar floating above the visual, select **Show Dataview**. - -## Configure the visual to consume data - -So far, the visual renders, but doesn't display any data. In this section, you make changes to the **visual.ts** file, so that the circle card visual can consume data. - -1. Open the **visual.ts** file in VS Code. - -2. In the *update* method: - - - Add the following statement as the first statement. The statement assigns *dataView* to a variable for easy access, and declares the variable to reference the *dataView* object. - - ```typescript - let dataView: DataView = options.dataViews[0]; - ``` - - - Replace **.text("Value")** with this line of code: - - ```typescript - .text(dataView.single.value) - ``` - - - Replace **.text("Label")** with this line of code: - - ```typescript - .text(dataView.metadata.columns[0].displayName) - ``` - -3. Save the **visual.ts** file. - -4. Review the visual in the Power BI service. - -The visual now displays the name and value of the selected data field. - -:::image type="content" source="./media/develop-circle-card/circle-card-final-visual.png" alt-text="Screenshot of a circle card visual displaying the quantity value."::: - -You created a working Power BI visual. You can [add formatting options](custom-visual-develop-tutorial-format-options.md) to it, or you can [package](custom-visual-develop-tutorial-format-options.md#packaging-the-custom-visual) it as is for immediate use. - ## Related content - [Add formatting options to the circle card visual](./custom-visual-develop-tutorial-format-options.md)