Custom view is one of the application features which allows developers to deliver new features into reports and dashboards. Using the BellaDati IDE, is the development of the custom content even easier.

Basic example is to utilize the Client API to get the data and display it on the screen.

The development process is simple:

  1. Get the Client API URL of the endpoint you want to utilize
  2. Open IDE and find the code using the Code search function to open the Custom view
  3. Implement XHR/Ajax call which retrieves the JSON data from Client API
  4. Render the desired data
  5. Use Preview function to see your progress
  6. Save your changes

Get the Client API URL

Open report with view and click on API icon. Copy the Javascript code.

Find the Custom view in IDE

Click the lens in the left side panel and find the Custom view you want to edit. Or navigate to the view in navigator three. Click it.

Render the data

Sample code to get data from Client API and render the chart.

<h2>Test chart</h2>


<div id="chart" style="width: 700px; height: 500px; border: 1px solid silver">
</div>

<script>

  $.ajax({
    url: "/bi/report/api:viewDetail/44-px3Cv5A9uE",
    success: function(response) {
      console.log(response);

      var $container = $("#chart");
      var chart = Charts.createAndRender("chart", response["data"]);
      chart.resize($container.width(), $container.height());
    }
  });

</script>


Preview your changes

You can easily preview changes you made to the code. When you are done, you can simply save your changes by clicking on "Pending changes" and "Save" button.


  • No labels