HTML Presentation Object: Button to Change 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>