Difference between revisions of "HTML Presentation Object: Button to Change Variables"
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 | + | 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! | + | <input value="Click me!" type="button" id="button<#uniqueId>"> |
<style> | <style> | ||
#button<#uniqueId> { | #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 { | #button<#uniqueId>:hover { | ||
| − | + | background-color: #6FD273; | |
| − | + | color: white; | |
} | } | ||
</style> | </style> | ||
<script> | <script> | ||
| − | function setContextVariables | + | (function() { |
| − | + | 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 | |
| − | + | ]); | |
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | $("#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>