Dashboards in the DevRev app help users visualize and make sense of data spread across different objects. They are built using a framework that includes a widget builder and a dashboard builder.

Creating widgets

Widgets are the building blocks of dashboards, representing data visualizations.

• Prepare your data with SQL queries:

Before building a widget, it's recommended to test your SQL queries in the Notebook.

1. Go to Explore, then search for Notebook.
2. Open Notebook. For quick access in the future, pin it in the left navigation.
3. Locate your dataset. For example, to find opportunities data, search for opportunity and select the dim_opportunity dataset.
4. Write a SQL query and run it.

Testing your query in Notebook ensures you have the correct dataset for your visualization.

• Access the widget builder:

Go to the widget builder by modifying your DevRev workspace URL. For example, your_workspace_slug/widget-preview. The builder provides a boilerplate code that you can modify.

• Define your dataset (Oasis Section): In the "oasis" or "dataset" section, define the tables used in your queries and the name of the resulting dataset. Provide a user-friendly description for the widget tooltip.

• Define dimensions: Dimensions are fields you want to expose for filtering records or using in visualizations. For each dimension, define:

  • Field type: The data type of the field.
  • UI hints: Whether it's visible, hidden, or filterable.
  • Display name: How the field appears in the UI.
  • SQL expression: Allows for additional operations on the field, such as converting to uppercase or lowercase.
  • Reference name: An alias for the field, used for referencing in visualizations.

• Define measures: Measures are aggregations, such as count, median, average, or sum, that users may want to view. The parameters are similar to dimensions, but the SQL expression is expected to define an aggregation function.

• Define aggregation dimensions: Specify which dimensions you want to use for aggregation. This aggregates the data based on the selected dimension, such as account ID. You can define the order of the end result if it's a table visualization and add these dimension can be used for the final visualization.

• Choose visualization type and fields:

  • Select the type of visualization for your widget, such as table, pie chart, bar graph, or heat map.
  • Define the columns you want to represent in the visualization, referencing the defined dimensions and measures.
  • Provide a title for your widget.

• Configure drill-through (optional): Widgets can support drill-through capabilities, allowing users to click on a record and get more insights in a separate dashboard.

• Create the widget: Once all configurations are complete, click the Create widget button. Make a note of the generated widget ID, as it is needed for building dashboards.

Creating dashboards

Dashboards organize and display multiple widgets.

• Access the dashboard builder: Similar to the widget builder, access the dashboard builder by modifying your DevRev workspace URL. For example, your_workspace_slug/dashboard-preview. The builder provides a boilerplate code.

  Loading...

• Link widgets to the dashboard:

  • Scroll to the section that defines the widgets to be linked.
  • Remove any existing widget IDs and paste the widget ID(s) of the widgets you created.
  • Assign a user-friendly "reference ID" (alias) to each linked widget.

• Define the layout: The layout section is crucial for defining the placement of widgets on the dashboard canvas. For each widget, you can define:

  • Height and Width: The size of the widget.
  • X and Y Coordinates: The position of the widget on the canvas.

• Create tabs (Optional): You can split widgets across different tabs within the dashboard for better organization. Define the reference ID for each tab before mapping widgets to them.

• Create the dashboard: Once satisfied with the linked widgets and layout, click the Create dashboard button.

• Accessing dashboards: Search in Explore Section:

  • Go to Explore in the left nav in DevRev.
  • Search for your dashboard by its name.
  • Click on the dashboard to access it.
  • For easy access, you can pin your dashboard under a section of your choice.