diff --git a/src/images/build-an-app/click-add-to-dashboard.png b/src/images/build-an-app/click-add-to-dashboard.png
index 3edd2c759..cc490bcea 100644
Binary files a/src/images/build-an-app/click-add-to-dashboard.png and b/src/images/build-an-app/click-add-to-dashboard.png differ
diff --git a/src/images/build-an-app/click-app-button.png b/src/images/build-an-app/click-app-button.png
new file mode 100644
index 000000000..85e703ed2
Binary files /dev/null and b/src/images/build-an-app/click-app-button.png differ
diff --git a/src/images/build-an-app/click-apps-button.png b/src/images/build-an-app/click-apps-button.png
deleted file mode 100644
index 26f4d1f55..000000000
Binary files a/src/images/build-an-app/click-apps-button.png and /dev/null differ
diff --git a/src/images/build-an-app/click-viz-launcher.png b/src/images/build-an-app/click-viz-launcher.png
index 6564d7b5b..02440f411 100644
Binary files a/src/images/build-an-app/click-viz-launcher.png and b/src/images/build-an-app/click-viz-launcher.png differ
diff --git a/src/images/build-an-app/configure-viz.png b/src/images/build-an-app/configure-viz.png
index c70b605c4..a63081ff3 100644
Binary files a/src/images/build-an-app/configure-viz.png and b/src/images/build-an-app/configure-viz.png differ
diff --git a/src/images/build-an-app/delete-viz.png b/src/images/build-an-app/delete-viz.png
new file mode 100644
index 000000000..e078d01ca
Binary files /dev/null and b/src/images/build-an-app/delete-viz.png differ
diff --git a/src/images/build-an-app/review-dashboard.png b/src/images/build-an-app/review-dashboard.png
index c0a418833..1184f3d58 100644
Binary files a/src/images/build-an-app/review-dashboard.png and b/src/images/build-an-app/review-dashboard.png differ
diff --git a/src/images/build-an-app/select-dashboard.png b/src/images/build-an-app/select-dashboard.png
index b342f2d6c..158f87398 100644
Binary files a/src/images/build-an-app/select-dashboard.png and b/src/images/build-an-app/select-dashboard.png differ
diff --git a/src/images/build-an-app/select-viz.png b/src/images/build-an-app/select-viz.png
index 794672808..3383a5956 100644
Binary files a/src/images/build-an-app/select-viz.png and b/src/images/build-an-app/select-viz.png differ
diff --git a/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx b/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx
index 5bc841f81..41b696075 100644
--- a/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx
+++ b/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx
@@ -5,12 +5,18 @@ title: 'Add custom visualizations to your dashboards'
template: 'GuideTemplate'
description: 'Add your custom visualization to a New Relic dashboard'
resources:
+ - title: Build custom visualizations for dashboards
+ url: '/build-apps/build-visualization'
+ - title: Custom visualizations and the New Relic One SDK
+ url: '/build-apps/custom-visualizations-and-the-new-relic-one-sdk'
+ - title: Customize visualizations with configuration
+ url: '/build-apps/customize-visualizations-with-configuration'
- title: Add custom visualizations to your dashboards
url: '/build-apps/add-visualizations-to-dashboard'
- - title: New Relic One VSCode extension
- url: https://marketplace.visualstudio.com/items?itemName=new-relic.nr1
- title: 'Build on New Relic One'
url: https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-build-your-own-custom-new-relic-one-application
+ - title: New Relic One VSCode extension
+ url: https://marketplace.visualstudio.com/items?itemName=new-relic.nr1
- title: New Relic VSCode extension pack
url: https://marketplace.visualstudio.com/items?itemName=new-relic.new-relic-extension-pack
tags:
@@ -21,23 +27,21 @@ tags:
-This guide builds off of the previous [Customize visualizations with configuration](build-apps/customize-visualizations-with-configuration) guide. If you haven't followed that guide, please start there as this guide assumes you have the code you built there to get started.
+This lesson builds off of the previous [Customize visualizations with configuration](build-apps/customize-visualizations-with-configuration) lesson. If you haven't followed that lesson, please start there as this lesson assumes you have the code you built there to get started.
If you don't have a visualization to follow the examples in this gude, a accompanying example visualization is available on [GitHub](https://github.com/newrelic/nru-custom-visualization-course)
-Following the previous guide, you reconfigured your visualization to use the platform configurations panel removing the unneeded `SegmentedControl` component. Now that you can customize your visualization using nr1.json configuration, in the following steps, you will configure and add your custom visualization to a New Relic dashboard.
+Following the previous lesson, you reconfigured your visualization to use the platform configurations panel removing the unneeded `SegmentedControl` component. Now that you can customize your visualization using nr1.json configuration, in the following steps, you will configure and add your custom visualization to a New Relic dashboard.
## Before you begin
-To get started, make sure you follow the [Customize visualizations with configuration](/build-apps/customize-visualizations-with-configuration) guide. You will need to publish your Nerdpack and subscribe it to your New Relic account.
-
-The steps to publish and subscribe your custom visualization are the same steps as publishing a New Relic application learned in the previous course section. To review the process for publishing Nerdpacks, you follow the [subscribe to the Nerdpack via the CLI](/build-apps/publish-deploy) guide.
+To get started, follow the [Customize visualizations with configuration](/build-apps/customize-visualizations-with-configuration) lesson. Then, [publish and subscribe to your Nerdpack](/build-apps/publish-deploy).
-
+
-Note: To publish a Nerdpack you must be a Full user and granted the Nerdpacks “modify” privilege (which is granted by default).
+To publish a Nerdpack you must be a Full user and granted the Nerdpacks “modify” privilege (which is granted by default).
Read our documentation to learn more about [Nerdpacks privileges](https://developer.newrelic.com/build-apps/permission-manage-apps/).
@@ -45,28 +49,28 @@ Read our documentation to learn more about [Nerdpacks privileges](https://develo
## Add your custom visualization to a dashboard
-Once you've published your custom visualization to your account, in the following steps you will configure your visualization and add it to a dashboard. You can add a visualization to a new or existing dashboard within your New Relic account.
+Once you've published your custom visualization to your account, in the following steps you'll configure your visualization and add it to a dashboard. You can add a visualization to a new or existing dashboard within your New Relic account.
- To find the My Awesome Visualization that you have deployed, you need to look for your visualization in the app catalog. From the New Relic One homepage, select the Apps button in the top right navigation bar.
+ To find the My Awesome Visualization that you have deployed, you need to look for your visualization in the app catalog. From the New Relic One homepage, select the Apps button in the top right navigation bar:
- Once on the Apps page, click the Custom Visualizations launcher.
+ Once on the Apps page, click the Custom Visualizations launcher:
-
+
- Note: if you don't see the Custom Visualizations tile, use the search to locate it.
+ If you don't see the Custom Visualizations tile, use the search to locate it.
@@ -75,47 +79,47 @@ Once you've published your custom visualization to your account, in the followin
In Custom Visualizations, you will see all of the visualization that have been deployed to your account and any visualizations you are serving locally.
- Select the My Awesome Visualization to add to a dashboard and then enable it.
+ Select the My Awesome Visualization to add to a dashboard and then enable it:
- In the previous guide, you reconfigured your visualization to use the platform configurations panel. Use the configuration options to select your desired chart, select your account, insert a NRQL query, and any other configurations you desire.
+ In the previous lesson, you reconfigured your visualization to use the platform configurations panel. Use the configuration options to select your desired chart, select your account, insert a NRQL query, and any other configurations you desire.
- As you make your selections, the visualization will update with your changes.
+ As you make your selections, the visualization will update with your changes:
- Click Add to dashboard and then select a dashboard from the list of available dashboards, or select New dashboard.
+ Click Add to dashboard and then select a dashboard from the list of available dashboards, or select New dashboard:
- If you decide to create a new dashboard, select the account where you want to run the dashboard, and give the dashboard a name.
+ If you decide to create a new dashboard, select the account where you want to run the dashboard, and give the dashboard a name:
- Click Add to dashboard, then click the link to your dashboard to see the custom visualization.
+ Click Add to dashboard, then click the link to your dashboard to see the custom visualization:
Deleting: To remove a visualization from a dashboard, click the ellipses button in the right-hand corner of the visualization and click delete.
+
+
Editing: If your visualization needs some tweaking, delete the visualization, then follow the steps above to re-add the visualization, making any updates in Custom Visualizations.
## Summary
-Congratulations on completing this final guide and adding your custom visualization to a New Relic dashboard. In the previous lessons, you've used the tools in the New Relic SDK to create a new custom visualization, configured the visualization using the SDK and using the platform configuration panel.
+Congratulations on completing this final lesson and adding your custom visualization to a New Relic dashboard. In the previous lessons, you've used the tools in the New Relic SDK to create a new custom visualization, configured the visualization using the SDK and using the platform configuration panel.
## Additional resources