Front End

Getting Started

Compiling Front-End

# From root project directory (installs node, yarn, and all front-end dependencies the first time)
> mvn -pl web/war -am clean compile


All strings are loaded from property files. Extend / replace strings using a web plugin that defines / overrides strings in another bundle using a web plugin. Use the registerMessageBundle Java API.

For example:


Translate message keys to current locale value using i18n JavaScript function in global scope.

// returns "Classification"

The translation function also supports interpolation

// {0} brown fox {1} over the lazy dog
// JavaScript plugin
i18n("", "quick", "jumps");
// returns "The quick brown fox jumps over the lazy dog"

Routing with Fragment URLs

Visallo has a built-in set of routing using the URLs fragment identifier.

  • Open Entity / Relation Details

      Fragment: #v=[(v[vertexId] | e[edgeId])]&w=[workspaceId]

    Opens the full-screen view of one or many entities / relationships. A v or e must prefix the id to signify the element type.

  • Prompt User to Add Entity / Relation

      Fragment: #add=[(v[vertexId] | e[edgeId])]

    Opens Visallo, but prompts the user to add the passed in vertices to their case. Those vertices must be published.

  • Open Visallo Admin Section

      Fragment: #admin=[section][name]

    Opens Visallo, and the admin pane (if the user has admin privilege) to the admin tool with name [name] in section [section].

  • Open Visallo Menu Bar Tools

      Fragment: #tools=[menubar name, [menubar name]]
      Example:      // Open Work Products (and first product)
     ,workspaces,activity // Open Dashboard, Cases, and Activity Pane

    Opens Visallo to the specified menu bar identifiers. Multiple tools can be passed if one is fullscreen and one is a pane. Behavior is undefined if the number of fullscreen tools is not equal to 1, or multiple panes are given.


Property Info Metadata

Properties have an info icon that opens a metadata popover. The metadata displayed can be configured with configuration property files.

properties.metadata.propertyNames: Lists metadata properties to display in popover
properties.metadata.propertyNameDisplay: Lists metadata display name keys (
properties.metadata.propertyNamesType: Lists metadata types to format values.

Metadata Types: timezone, datetime, user, sandboxStatus, percent

To add a new type:

  1. Create a web plugin.
  2. Extend the formatter with custom type(s). For example, pluralize and translate.
require(['public/v1/api'], function(api) {
    api.connect().then(function(connected) {
            Object.assign(connected.formatters.vertex.metadata, {
                pluralize: function(el, value) {
                    el.textContent = value + 's';

                // Suffix name with "Async" and return a promise
                translateAsync: function(el, value) {
                    return $.get('/translateService', { string:value })
                        .then(function(result) {
                            el.textContent = result;

Ontology Property Display Types

Allows custom DOM per ontology displayType.

  1. Create a web plugin and extend / override formatters.
require(['public/v1/api'], function(api) {
    api.connect().then(function(connected) {
        Object.assign(, {

            // Will be executed for properties that have displayType='link'
            link: function(domElement, property, vertexId) {
                    .attr('href', property.value)

            visibility: function(el, property) {
                    .text(property.value || i18n('visibility.blank'))

Helpful Global Functions

These are some developer helper functions. Run these commands in the browser console.


Have the browser auto refresh when changes are made. This is remembered in local storage so, it only needs to be run once to enable. grunt must be watching.

enableLiveReload(true); // to enable (refresh browser once to start)
enableLiveReload(false); // to disable

Switch Language

Test changing the language. Sets a localStorage token and reloads the page while loading appropriate resources. Useful for checking the UI with different size text.

switchLanguage('de'); // Accepts language or language and country with "_". Ex: en_us

Component Highlighter

Overlays component name using mouseover events. Useful for checking what component is responsible for what on the page.

enableComponentHighlighting(true); // Display component overlays
enableComponentHighlighting(false); // Disable component overlays

results matching ""

    No results matching ""