HTML Presentation Object: Button to Change Variables

Following code creates a 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!" 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() {
function setContextVariables() {
  qpr.setSessionVariables([
    {key: "variable1", value: "value 1", presentationObjectRuntimeId: "<#uniqueId>"}, //local variables are the ones with: presentationObjectRuntimeId: "<#uniqueId>"
    {key: "variable2", value: "value 2", presentationObjectRuntimeId: "<#uniqueId>"},
    {key: "sys:dashboardIdentifier", value: "IDENTIFIER1"}  //this is a session variable
  ]);
}
$("#button<#uniqueId>").click(setContextVariables);
})()
</script>