Difference between revisions of "HTML Presentation Object: Button to Change Variables"

From Mea Wiki
Jump to navigation Jump to search
(Created page with "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 co...")
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
+
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.
  
 
<pre>
 
<pre>
<input value="Click me!" onclick="setContextVariables<#uniqueId>();" type="button" id="button<#uniqueId>">
+
<input value="Click me!" type="button" id="button<#uniqueId>">
  
 
<style>
 
<style>
 
#button<#uniqueId> {
 
#button<#uniqueId> {
    background-color: #4CAF50;
+
  background-color: #4CAF50;
    border: none;
+
  border: none;
    color: white;
+
  color: white;
    margin: 10px 10px 10px 10px;
+
  margin: 10px 10px 10px 10px;
    padding: 15px 32px;
+
  padding: 15px 32px;
    text-align: center;
+
  text-align: center;
    text-decoration: none;
+
  text-decoration: none;
    display: inline-block;
+
  display: inline-block;
    font-size: 16px;
+
  font-size: 16px;
    border-radius: 5px;
+
  border-radius: 5px;
 
}
 
}
 
#button<#uniqueId>:hover {
 
#button<#uniqueId>:hover {
    background-color: #6FD273;
+
  background-color: #6FD273;
    color: white;
+
  color: white;
 
}
 
}
 
</style>
 
</style>
  
 
<script>
 
<script>
function setContextVariables<#uniqueId>() {
+
(function() {
   var variablesToSet<#uniqueId> = {
+
function setContextVariables() {
     "variable1": "value 1",
+
   qpr.setSessionVariables([
     "variable2": "value 2",
+
     {key: "variable1", value: "value 1", presentationObjectRuntimeId: "<#uniqueId>"}, //local variables are the ones with: presentationObjectRuntimeId: "<#uniqueId>"
     "sys:dashboardIdentifier": "IDENTIFIER1"
+
     {key: "variable2", value: "value 2", presentationObjectRuntimeId: "<#uniqueId>"},
  };
+
     {key: "sys:dashboardIdentifier", value: "IDENTIFIER1"} //this is a session variable
  var contextVariableNames = Object.getOwnPropertyNames(variablesToSet<#uniqueId>);
+
   ]);
   for (i = 0; i < contextVariableNames.length; i++) {
 
    var contextVariableName = contextVariableNames[i];
 
    window.parent.setSessionVariable(contextVariableName, variablesToSet<#uniqueId>[contextVariableName]);
 
  }
 
 
}
 
}
 +
$("#button<#uniqueId>").click(setContextVariables);
 +
})()
 
</script>
 
</script>
 
</pre>
 
</pre>
 +
 +
[[Category: QPR UI]]

Latest revision as of 21:57, 19 March 2019

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>