How do i use MiniProfiler.Settings.CustomUITemplates

Question

Good day.

I have looked here on the previous post as well as on http://miniprofiler.com/ but cannot find any documentation on how to use MiniProfiler.Settings.CustomUITemplates.

I also seen How to customize the Mini-Profiler UI which is not what require.

We have a debug section below in our MVC4 layout page and I would like to list the results in a div at the bottom of the page instead of displaying it in a popup.

I see that you can change the position of the popup but I would like to show the results in a table instead.

Can you please point me in the right direction.

The code sais the following:

  /// <summary>
  /// The path where custom ui elements are stored.
  ///             If the custom file doesn't exist, the standard resource is used.
  ///             This setting should be in APP RELATIVE FORM, e.g. "~/App_Data/MiniProfilerUI"
  /// 
  /// </summary>
  /// 
  /// <remarks>
  /// A web server restart is required to reload new files.
  /// </remarks>
  [DefaultValue("~/App_Data/MiniProfilerUI")]
  public static string CustomUITemplates { get; set; }

Answer 1

CustomUITemplates allow you to supply your own version of any of the files that are part of the UI project - the files that handle all of the client-side operations.

The default is to use these files as they are included in the .net project (submodule included in StackExchange.Profiling.ui. If you include files with the exact same name in the folder specified as the CustomUITemplates folder (defaults to ~/App_Data/MiniProfilerUI, but you can change it to something else if you like) then it will use those files instead.

In your example, you want to change the place in which the results are being rendered on the client side. To do this, you would want to copy the existing include.js file, put it in your templates folder, and then change the functionality there to output results to a table in your page, rather than the built in functionality (you might want to start by looking at modifying the buttonShow function in include.js and change it to process the json the way that you would like).