Version 1

Version 2

The approach shown below is only compatible with version 2.0 of the Vault Application Framework, where the target audience runs M-Files 2018 or higher. If using version 1.0, or to maintain compatibility with M-Files 2015.3 and lower, configuration attributes should be used instead.

Each configuration node can define a method which builds a dashboard which is shown to the user when they select the “Dashboard” tab for the application within the M-Files Admin software. In the sample below, the DashboardGenerator method has been set as the generator for the configuration node. This method must return a valid HTML string which will then be displayed.

using System.Runtime.Serialization;
using MFiles.VAF;
using MFiles.VAF.AdminConfigurations;
using MFiles.VAF.Common;
using MFilesAPI;

namespace MFVaultApplication1
{
	[DataContract]
	public class Configuration
	{
		[DataMember]
		public string ConnectionString { get; set; }

	}

	public class VaultApplication
		: VaultApplicationBase, IUsesAdminConfigurations
	{

		private ConfigurationNode<Configuration> config { get; set; }

		public void InitializeAdminConfigurations(IAdminConfigurations adminConfigurations)
		{
			// Add it to the configuration screen.
			this.config = adminConfigurations.AddSimpleConfigurationNode<Configuration>(
				"My Vault Application",
				this.DashboardGenerator);
		}
		private string DashboardGenerator()
		{
			return "<html><head></head><body>hello world</body></html>";
		}
	}
}

Only simple HTML is allowed; elements such as <script> will be ignored.

An example of a basic dashboard

Using helper functions

Generating the HTML for standard dashboard components can be done through the use of the StatusDashboard class. Once the dashboard is populated, the HTML required to render it can be retrieved by calling its ToString method:

using System.Runtime.Serialization;
using MFiles.VAF;
using MFiles.VAF.AdminConfigurations;
using MFiles.VAF.Common;
using MFilesAPI;

namespace MFVaultApplication1
{
	[DataContract]
	public class Configuration
	{
		[DataMember]
		public string ConnectionString { get; set; }

	}

	public class VaultApplication
		: VaultApplicationBase, IUsesAdminConfigurations
	{

		private ConfigurationNode<Configuration> config { get; set; }

		public void InitializeAdminConfigurations(IAdminConfigurations adminConfigurations)
		{
			// Add it to the configuration screen.
			this.config = adminConfigurations.AddSimpleConfigurationNode<Configuration>(
				"My Vault Application",
				this.DashboardGenerator);
		}
		private string DashboardGenerator()
		{
			var statusDashboard = new StatusDashboard();
			return statusDashboard.ToString();
		}
	}
}

Dashboard contents

The StatusDashboard has a property named Contents which is a collection of items that are shown within it. Whilst the built-in implementations are shown below, any class which implements the IDashboardContent interface can be added to the collection.

Panels

// Create the panel.
var panel = new DashboardPanel()
{
	Title = "Dashboard panel 1"
};

// Panels can also contain other dashboard content like lists or text
// (not shown, for clarity).
// panel.InnerContent.Add( ... )

// Set up the dashboard.
var statusDashboard = new StatusDashboard();
statusDashboard.Contents.Add(panel);

// Return the HTML.
return statusDashboard.ToString();

Lists

// Create the list.
var list = new DashboardList()
{
	Title = "My list"
};

// Add a list item.
list.Items.Add(new DashboardListItem()
{
	Title = "First List item",
	StatusSummary = new DomainStatusSummary()
	{
		Status = DomainStatus.Enabled
	}
});

// Set up the dashboard.
var statusDashboard = new StatusDashboard();
statusDashboard.Contents.Add(list);

// Return the HTML.
return statusDashboard.ToString();

Text

// Create the text.
// Any newlines (\n) in the text will be respected in the HTML rendered.
var dashboardText = new DashboardText("line 1\nline 1");

// Set up the dashboard.
var statusDashboard = new StatusDashboard();
statusDashboard.Contents.Add(dashboardText);

// Return the HTML.
return statusDashboard.ToString();

Custom content

// Create the custom content.
var customContent = new DashboardCustomContent("<table><tr><td>Item 1</td><td>Item 2</td></tr></table>");

// Set up the dashboard.
var statusDashboard = new StatusDashboard();
statusDashboard.Contents.Add(customContent);

// Return the HTML.
return statusDashboard.ToString();

Allowed HTML tags and attributes

The following HTML tags are allowed within dashboards:

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>
  • <blockquote></blockquote>
  • <p></p>
  • <a></a>
  • <ul></ul>
  • <ol></ol>
  • <nl></nl>
  • <li></li>
  • <i></i>
  • <strong></strong>
  • <em></em>
  • <strike></strike>
  • <code></code>
  • <hr />
  • <br />
  • <div></div>
  • <span></span>
  • <button></button>
  • <table></table>
  • <thead></thead>
  • <caption></caption>
  • <tbody></tbody>
  • <tr></tr>
  • <th></th>
  • <td></td>
  • <pre></pre>

The following attributes are allowed:

  • <a></a>
    • href
    • name
    • target
  • <img />
    • src
  • (all elements)
    • id
    • name
    • class
    • style
    • data-*

Tips and tricks

Displaying an image in a dashboard

The content rendered within a dashboard is limited, and HTML <img /> tags are not directly supported. It is, however, possible to render an image within a dashboard:

// Read the image and convert it to a Base64 encoding format.
var image = DashboardHelper.ImageFileToDataUri("image.png");

// Create a dashboard panel for the content to sit into.
var panel = new DashboardPanel();
panel.InnerContent = new DashboardContentCollection()
{
	// Add the image as a CSS background to a div.
	new DashboardCustomContent($"<div style='background-image: url({image}); background-repeat: no-repeat; height: 92px; width: 92px'></div>"),
};

// Set up the dashboard.
var dashboard = new StatusDashboard();
dashboard.Contents.Add(panel);

// Return the HTML.
return dashboard.ToString();