HTML Properties

The HTML presentation object is used to display custom written HTML content inside QPR UI views. HTML presentation objects are able to interact with context variables. Main differences to External Content presentation object are follows:

• External content is basically a link to an external web page that resides outside QPR UI. HTML presentation object settings contains the needed HTML code, and thus the content is stored to QPR UI and transfered when exporting and importing views. Still, the HTML code may refer to external resources in web, but that should be avoided so that views are easily deployable.
• External content presentation object is not able to draw outside its area in the view. This is because External content presentation object is tecnically an iframe, and browsers don't allow iframes to draw to its parent window area. HTML presentation object is able to draw outside its content area.
• The HTML code in the HTML presentation object is not an entire web page but an HTML block, such as a DIV tag. External content presentation object needs to link to full web page (starting with HTML tag).

Security note: HTML presentation objects can embed JavaScript code into the dashboards, which may cause information security issues, because the embedded code is executed when users open the dashboard. Thus the dashboard designer persons need to be trusted. Viewer users are not able to change dashboards and embed JavaScript code into dashboards.

Properties Tab

The following properties can be set on the Properties tab:

• Name: Name of the HTML presentation object. The name is not visible in the dashboard.
• Description: Description for the HTML presentation object. The description is not visible in the dashboard.

Presentation Tab

The following settings can be set on the Presentation tab:

• HTML code contains the HTML that will make up the displayed HTML content. Also CSS and JavaScript blocks can be used. You can also use context variables in the HTML code. If the used context variable values change, the HTML presentation object is initialized and possible stored state in JavaScript variables in the code are lost.
• Horizontal / Vertical scrollbar defines how the horizontal or vertical scrollbar is shown for the HTML presentation object. Options are:
  • Auto: Scrollbar is visible if the content is scrollable (i.e. HTML presentation object height is greater than the available area for the presentation object in the view). Scrollbar is hidden, if the content is not scrollable. Setting widths of the HTML content programmatically may be more difficult as the available width depends whether the vertical scrollbar is shown.
  • Visible: Scrollbar is always visible. If the content is not scrollable, the scrollbar is grayed.
  • Hidden: Scrollbars is never shown. This setting can be used when the HTML presentation object should not contain scrollbars to prevent the scrollbars appearing in any case. If the height of the HTML presentation object is greater than the available area in the view, rest of the content is not accessible.

Callback functions in HTML code

In the HTML code the following callback functions may be defined:

• function <#contextChangeFunction>(changedContextVariables): This function is automatically called by QPR UI when the effective context of the HTML presentation objects changes. The changed context variables are available in the changedContextVariables parameter as key-value pairs. This function is also called once when the HTML presentation object is initialized (the view is loaded). Use this function to write custom logic that should occur in the HTML presentation object when context variables change.
• function <#resizeFunction>(newWidth, newHeight): This function is automatically called by QPR UI when the HTML presentation object size changes, for example as a result of changing browser window size. The function is needed, if the resize logic needs to be written using JavaScript. This function is called also once when the HTML presentation object is initialized (the view is loaded).

Notes:

• These functions need to be defined inside script block.
• The actual function names are not known in view design time and that's why the tag syntax is used. QPR UI will replace the tags with the actual function names during HTML presentation object is rendered. This is also to guarantee that the function names are unique when there are same HTML code used multiple times in the view.
• These functions are not called when the HTML presentation object is hidden (using the Show in view setting).

UniqueId tag

<#uniqueId> tag can be used in the HTML code. It provides a unique number in the entire view (also inside Repeater). The unique number is useful to be able to generate unique HTML id's. See the example below for a usecase. Unique id's are needed because for example jQuery selectors affect th entire view, i.e. other presentation objects as well.

Example HTML code: show measure value

This is an example is a simple customized presentation object which shows a value from a context variable measureValue. If the context variable value is changed, the new value is updated to the HTML presentation object.

<div id="content_<#uniqueId>"><div>

<style>
#content_<#uniqueId> {
  font-size: 20px;
  font-weight: bold;
}
</style>

<script>
function <#contextChangeFunction>(changedContextVariables) {
  if (changedContextVariables["measureValue"] != null) {
    $("#content_<#uniqueId>").text(changedContextVariables["measureValue"]);
  }
}

function <#resizeFunction>(newWidth, newHeight) {
  if (newWidth < 100) {
    $("#content_<#uniqueId>").css("margin-left", "0px");
  } else {
    $("#content_<#uniqueId>").css("margin-left", "20px");
  }
}
</script>

Example HTML code: Button to change context variables

Following code contains a customized button. When clicking it, the defined context variables are set to session context. You can change for example the button text, changed context variables, and graphical layout of the button.

<input value="Click me!" onclick="setContextVariables<#uniqueId>();" type="button" id="button<#uniqueId>">

<style>
#button<#uniqueId> {
    background-color: #4CAF50;
    border: none;
    color: white;
    margin: 10px 10px 10px 10px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}
#button<#uniqueId>:hover {
    background-color: #6FD273;
    color: white;
}
</style>

<script>
function setContextVariables<#uniqueId>() {
  var variablesToSet<#uniqueId> = {
    "variable1": "value 1",
    "variable2": "value 2",
    "sys:dashboardIdentifier": "IDENTIFIER1"
  };
  var contextVariableNames = Object.getOwnPropertyNames(variablesToSet<#uniqueId>);
  for (i = 0; i < contextVariableNames.length; i++) {
    var contextVariableName = contextVariableNames[i];
    window.parent.setSessionVariable(contextVariableName, variablesToSet<#uniqueId>[contextVariableName]);
  }
}
</script>

Example HTML code: Search textbox

Following code a textbox with these features:

• Textbox contens can be bound to a context variable (line var variableBinding<#uniqueId> = "myVariable1";)
• There is a delay after which the inputed text is stored to the context variable (var inputDelay<#uniqueId> = 1000;)
  • Set it 0, to disable the delay
• There is a magnifier button to "start the search" which stores the text immediately to the bound context variable
• Also clicking Enter makes the same as clicking the magnifier button
• The magnifier button can be removed, to make this more generic input textbox
• Clicking the magnifier button could also change other context variables, such as change the view to open a separate view for the search results.

<input id="content<#uniqueId>" type="text" onchange="textboxChanged<#uniqueId>(this);" onkeyup="textboxChanged<#uniqueId>(this);" onpaste="textboxChanged<#uniqueId>(this);" oninput="textboxChanged<#uniqueId>(this);" />
<img id="seachbutton<#uniqueId>" onclick="searchClicked<#uniqueId>();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNrkVDsOgkAUBGKvFtZQ2YqVjYkcAU8A3oDexF9i7xH0BtxALOzxBngDbG1wnnkmuNldwGjlJpPNft7s23mzaxZFYXy7WcYP2k9IW7rF9WbroSO4QAakQLxczHNdnCnTFGQdCgYmkpgbEIF4X5uUCRNgwAQxjx0gBGzeOlMRy0hpYwBc6eoIzBTrdKAjk8KSZBnwMBQJqWGOsj0Bbc68svou9xcEJ5pavK7tN7FUXuGa7BOfOhWkru5wS9Ar4QLY0NdXeJd0j3gY181099JNJC7ZjWx1B45NzJ+yT59FK/nU46obpTVPtJWp+qVAvCJFJEtnoAf0VcTKDwWbiLQLTOkMekHAEPNj9CMmM/hGCUujz7SqCc/5LduPvz4mII0P4vXN//75HwIMANu1eq4zLyyIAAAAAElFTkSuQmCC" />

<style>
#content<#uniqueId> {
  border-radius: 4px;
  border-width: 1px;
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
  padding: 2px 26px 0px 5px;
  display: inline;
}
#seachbutton<#uniqueId> {
  position: absolute;
  top: 17px;
  right: 17px;
  cursor: pointer;
}
</style>

<script>
var variableBinding<#uniqueId> = "myVariable1";
var inputDelay<#uniqueId> = 1000;
var pendingTimeouts<#uniqueId> = 0;

function searchClicked<#uniqueId>() {
  var textBoxValue = $("#content<#uniqueId>").val();
  window.parent.setSessionVariable(variableBinding<#uniqueId>,  textBoxValue);
}

function <#contextChangeFunction>(changedContextVariables) {
  if (changedContextVariables[variableBinding<#uniqueId>] != null && $("#content<#uniqueId>").val() != changedContextVariables[variableBinding<#uniqueId>]) {
    $("#content<#uniqueId>").val(changedContextVariables[variableBinding<#uniqueId>]);
  }
  $("#content<#uniqueId>").keyup(function(event) {
    if (event.keyCode == 13) searchClicked<#uniqueId>();
  });
}

function textboxChanged<#uniqueId>(evt) {
  var textBoxValue = $(evt).val();
  if (inputDelay<#uniqueId> > 0) {
    pendingTimeouts<#uniqueId>++;
    setTimeout(function() {
      pendingTimeouts<#uniqueId>--;
      if (pendingTimeouts<#uniqueId> > 0) return;
      window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
    }, inputDelay<#uniqueId>);      
  } else {
    window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
  }
}
</script>

Add an HTML Presentation Object

HTML presentation object is added to a view like adding the SVG presentation object, but instead of SVG presentation object select the HTML presentation object in the toolbar. You can use the example HTML code defined above. Note that HTML presentation objects don't contain actions like SVG presentation objects.