Skip to content

ClientSide Configuration

Union can observe your application’s DOM, intercept elements and bubble the associated content to the higher frame to allow for a consistent, streamlined user experience.

To setup, add a UnionClientSettings configuration to the window object of your web application ABOVE your reference to [UNION_URL]/assets/client-event-hub[.min].js.

Detecting Union

The simplest way to detect the presence of Union clientside is to simply check to see if window <> parent. When this evaluates to true, the site is being served up inside an iframe.

UnionClientSettings

Property Type Description
backdrops BackdropDomWatcher[] Watch configurations for backdrop elements within the iframe. This allows Union to replicate the styling of backdrops in the parent frame
indicators IndicatorDomWatcher[] Watch configurations for indicator elements within the iframe. This allows Union to intercept and bubble up indicators before they are shown on the DOM
notifications NotificationDomWatcher[] Watch configurations for notifcation elements within the iframe. This allows Union to intercept and bubble up notifications before they are shown on the DOM
monitorAjaxCalls boolean When set to false, Union will not show an indicator for while AJAX calls are occurring in the background. Default Value: true 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 {
  "monitorAjaxCalls": true,
  "backdrops": [
    { "selector": ".modal-backdrop" }
  ],
  "indicators": [
    {
      "selector": ".loading",
      "options": { "type": "loading" }
    },
    {
      "selector": ".please-wait",
      "options": { "type": "processing", "blocking": true, "defaultText": "Please Wait" }
    },
    {
      "selector": "#progress-indicator",
      "options": { "type": "progress" }
    }
  ],
  "notifications": [
    {
      "selector": "#alert-box",
      "options": {
        "typeClasses": {
            "success": "alert-success",
            "info": "alert-info",
            "warning": "alert-warning",
            "danger": "alert-danger"
        }
      }
    },
    {
      "selector": ".user-notification",
      "options": {
          "type": "info"
      }
    }
  ]
}

BackdropDomWatcher

Property Type Description
selector* string CSS selector for discovering element(s) 
1
2
3
{
  "selector": ".modal-backdrop"
}

IndicatorDomWatcher

Property Type Description
blocking boolean When true, the UI will be disabled while indicator is shown. Default Values: - ‘loading’ = true - ‘process’ = false - ‘progress’ = false
defaultText string Default text to use for indicator if text not found in the indicator removed from DOM
selector* string CSS selector for discovering element(s)
type* ‘loading’, ‘process’, ‘progress’ Type of indicator to be displayed 
1
2
3
4
5
6
7
8
{
  "selector": ".please-wait",
  "options": {
    "type": "processing",
    "blocking": true,
    "defaultText": "Please Wait"
  }
}

NotificationDomWatcher

Property Type Description
selector* string CSS selector for discovering element(s)
type** ‘success’, ‘info’, ‘warning’, ‘danger’ Type of indicator. Used for styling purposes
typeClasses** { success : string, info : string, warning : string, danger : string } Alternative to type property. When provided, the type will be assigned based on the presence of a specified CSS class on the element 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "selector": "#alert-box",
  "options": {
    "typeClasses": {
      "success": "alert-success",
      "info": "alert-info",
      "warning": "alert-warning",
      "danger": "alert-danger"
    }
  }
}

* Required
** Required if alternate property is not provided