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>