HTML Presentation Object: Button to Change Variables - Revision history

Ollvihe at 21:57, 19 March 2019

2019-03-19T21:57:02Z

Ollvihe at 21:56, 19 March 2019

2019-03-19T21:56:41Z

Ollvihe at 12:57, 27 June 2018

2018-06-27T12:57:24Z

TeeHiet at 07:50, 6 June 2018

2018-06-06T07:50:15Z

Ollvihe: Ollvihe moved page Button to Change Variables using HTML Presentation Object to HTML Presentation Object: Button to Change Variables without leaving a redirect

2018-02-06T16:45:22Z

Ollvihe moved page Button to Change Variables using HTML Presentation Object to HTML Presentation Object: Button to Change Variables without leaving a redirect

Ollvihe: 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..."

2018-01-25T16:26:17Z

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..."

New page

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.

<pre>
<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>
</pre>

@@ 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>
-<input value="Click me!" onclick="setContextVariables<#uniqueId>();" type="button" id="button<#uniqueId>">
+<input value="Click me!" type="button" id="button<#uniqueId>">
 <style>
@@ Line 25: / Line 25: @@
 <script>
 (function() {
-window["setContextVariables<#uniqueId>"] = function(changedVariables) {
+function setContextVariables() {
    qpr.setSessionVariables([
      {key: "variable1", value: "value 1", presentationObjectRuntimeId: "<#uniqueId>"}, //local variables are the ones with: presentationObjectRuntimeId: "<#uniqueId>"
@@ Line 32: / Line 32: @@
    ]);
+}
 })()
 </script>

← Older revision		Revision as of 07:50, 6 June 2018
Line 38:		Line 38:
	</script>		</script>
	</pre>		</pre>
		+
		+	[[Category: QPR UI]]

@@ Line 6: / Line 6: @@
 <style>
 #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 {
-    background-color: #6FD273;
+  background-color: #6FD273;
-    color: white;
+  color: white;
+}
 </style>

@@ Line 24: / Line 24: @@
 <script>
-function setContextVariables<#uniqueId>() {
+(function() {
-   var variablesToSet<#uniqueId> = {
+window["setContextVariables<#uniqueId>"] = function(changedVariables) {
-     "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>);
+   ]);
+}
 </script>
 </pre>
 [[Category: QPR UI]]

← Older revision	Revision as of 16:45, 6 February 2018
(No difference)